Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “navigation”

50 bookmarks by garrettc


GPS – Bartosz Ciechanowski

Bartosz Ciechanowski creates incredible interactive long form pieces about technology, he's just released his latest about how GPS works

Bookmarked on #



An Accessible Current Page Navigation State

"Design and technical considerations behind the icon that indicates what page you're currently on."

Bookmarked on #



Modern CSS Solutions

A series examining modern CSS solutions to problems.

Bookmarked on #


Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

"Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation. You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons" so we know what we’re referring to as we go."

Bookmarked on #


Low Findability and Discoverability: Four Testing Methods to Identify the Causes

"Use IA- and UI-focused user research to determine if low findability and discoverability are caused by site information architecture or navigation design."

Bookmarked on #


Why Hover Menus Do Users More Harm Than Good

"Do you know how your hover menu is affecting users? Hover menus are a popular way to navigate. But the way they open can cause usability problems that most designers aren’t aware of. Before you settle on hover menus for your navigation, you should know how they affect users."

Bookmarked on #


Navigation drop-downs. Should they be hover or click?

Navigation drop-downs, or mega menus as they are sometimes dubbed, are becoming more and more common on the web. A drop-down menu is a navigation block which appears when a link is clicked (or hovered) - a good example of this can be found on the Plumpton College website. 

Bookmarked on #


Responsive Navigation Patterns

"Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness."

Bookmarked on #


Sticky, Smooth, Active Nav

"Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can"

Bookmarked on #


Solved with CSS! Dropdown Menus | CSS-Tricks

A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.

Bookmarked on #


Lined Menu Icons (Hamburgers)

Collection of hamburger examples.

Bookmarked on #


HTML5 and jQuery Super Simple Drop Down Nav

Tutorials, guides, blogs and courses on Angular, TypeScript, JavaScript and front-end development.

Bookmarked on #


Simple Responsive Navigation Menu

In this lab, we build a simple responsive navigation menu using HTML, CSS, and a bit of jQuery.

Bookmarked on #


Improvements to worldwide publishing

Great example of how focusing on user needs, and ignoring departmental silos. leads to an improved user experience.

Bookmarked on #


All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design

The UINavigationBar, navbar for short, has been around since the original iPhone. Historically, navbars have been convenient and clear, easy to understand and easy to build. Then phones ballooned…

Bookmarked on #


20 Useful CSS Snippets for Responsive Menus

You'll find CSS snippets for vertical and horizontal navs with dropdowns, slideouts and also some animated menu systems.

Bookmarked on #


A Spacial Model for Lossless Web Navigation – freeCodeCamp

"As a part of the Browser.html project, I’m working on a spatial model through various user interactions and animations. This should help users better understand what’s going on and how to navigate the web most effectively. Users have developed certain behaviors and expectations we want to build upon. Instead of replacing existing workflows, we want to enhance them."

Bookmarked on #


Material Design and the Mystery Meat Navigation Problem

"Bottom navigation bars are a better alternative to the hamburger menu, so their addition into Material Design should be good news. But Google’s version of bottom navigation bars has a serious problem: mystery meat navigation."

Bookmarked on #




Improve Website Usability With Effective Navigation Labels | Torchbox

There are few rights and lots of wrongs when it comes to developing effective website navigation labels. Here are a few guidelines to get you on the right path.

Bookmarked on #







Responsive Navigation Patterns

Some popular techniques for handling navigation in responsive designs.

Bookmarked on #


The Top 10 Articles on Wayfinding on opentype.info

Collection of useful links on wayfinding and orientation.

Bookmarked on #


Novices Orienteer, Experts Teleport

"User expertise exists on two levels. If you’re an avid photographer, your domain expertise in photography will be quite high: that is, you’ll be familiar with the terms and techniques of the trade. Each of us is likely a domain expert in a few areas, and a complete novice in others. A second aspect is technical expertise. Familiarity with how computers, the internet, and search engines work significantly impacts how users seek information."

Bookmarked on #


Why Hover Menus Do Users More Harm Than Good

Even as a 'professional' level user I find hover menus annoy the crap out of me.

Bookmarked on #



Old News about Icons

"While icon images are learned, icon positions are learned faster. People remember a function by where it lives in 2D space more than by what the art is."

Bookmarked on #


Product navigation at Stylous.com

Interesting way of moving through a catalogue using a psuedo 3d effect to drill deeper into the hirearchy.

Bookmarked on #


Designing for Faceted Search

"Essentially, faceted search has become so ubiquitous that users are not only getting used to it, they are coming to expect it."

Bookmarked on #


Previous and Next Actions in Web Forms

"Among designers, there are often discussions on the placement of actions in web forms that span several web pages."

Bookmarked on #




Think about paths instead of hierarchies

"A path is a line that goes from a starting point A to an accomplishment B. Each customer who comes to the site doesn’t care about the overall structure. They care about getting from A to B. That’s a path."

Bookmarked on #



Displaying previous/next thumbnails for image nodes

The elegance and abundance of solutions to development issues in drupal never ceases to amaze me.

Bookmarked on #


The Page Paradigm

"In my nine years of working on the Web's user experience, a lot has changed online - but one thing that hasn't changed much is the way that users navigate websites." - Mark Hurst

Bookmarked on #



24 ways: Centered Tabs with CSS

Nice little tutorial from Ethan Marcotte. A variation on Doug Bowman's Sliding Door's method using inline elements instead of floats, allowing you to center the navigation.

Bookmarked on #



The 8 Types of Navigation Pages

"As we’ve watched users search for their desired content, we’ve realized there are patterns to the pages we see. We’ve started to catalogue these patterns and have concluded there are essentially 8 types of pages a user can run into, when searching"

Bookmarked on #


Comparison Between Left and Right justified Site Navigation Menus

The usability of two Web page layouts was directly compared: one with the main site navigation menu on the left of the page, and one with the main site navigation menu on the right.

Bookmarked on #



GUUUI - Navigation blindness

Studies seem to show that users ignore pervasive navigation areas, focusing instead on in content links.

Bookmarked on #