Note: This section of the site is under heavy construction, tread carefully.
50 bookmarks by garrettc
Bartosz Ciechanowski creates incredible interactive long form pieces about technology, he's just released his latest about how GPS works
Bookmarked on • #
Bookmarked on • #
"Design and technical considerations behind the icon that indicates what page you're currently on."
Bookmarked on • #
Bookmarked on • #
"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 • #
"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 • #
"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, 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 • #
"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 • #
"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 • #
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 • #
Tutorials, guides, blogs and courses on Angular, TypeScript, JavaScript and front-end development.
Bookmarked on • #
In this lab, we build a simple responsive navigation menu using HTML, CSS, and a bit of jQuery.
Bookmarked on • #
Great example of how focusing on user needs, and ignoring departmental silos. leads to an improved user experience.
Bookmarked on • #
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 • #
You'll find CSS snippets for vertical and horizontal navs with dropdowns, slideouts and also some animated menu systems.
Bookmarked on • #
"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 • #
"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 • #
Bookmarked on • #
Bookmarked on • #
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 • #
Bookmarked on • #
Bookmarked on • #
Bookmarked on • #
Bookmarked on • #
A simple, progressively-enhanced, CSS-based dropdown menu.
Bookmarked on • #
Some popular techniques for handling navigation in responsive designs.
Bookmarked on • #
Collection of useful links on wayfinding and orientation.
Bookmarked on • #
"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 • #
Even as a 'professional' level user I find hover menus annoy the crap out of me.
Bookmarked on • #
Bookmarked on • #
"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 • #
Interesting way of moving through a catalogue using a psuedo 3d effect to drill deeper into the hirearchy.
Bookmarked on • #
"Essentially, faceted search has become so ubiquitous that users are not only getting used to it, they are coming to expect it."
Bookmarked on • #
"Among designers, there are often discussions on the placement of actions in web forms that span several web pages."
Bookmarked on • #
Really nice effect using very little markup
Bookmarked on • #
"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 • #
Using jQuery to build an ARIA compliant slider widget.
Bookmarked on • #
The elegance and abundance of solutions to development issues in drupal never ceases to amaze me.
Bookmarked on • #
"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 • #
Bookmarked on • #
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 • #
"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 • #
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 • #
Studies seem to show that users ignore pervasive navigation areas, focusing instead on in content links.
Bookmarked on • #