building navigation with ux in mind

Building Navigation

Credit: Julia Reis from 99percentinvisible.org/episode/walk-this-way/

Navigation is a long project for humanity. Its goal is to link things together, whether those things are known or unknown, and enable us to reproduce voyages. !

It has to be designed, and appears in places you might not expect.

Building Navigation

Good navigation: !

— is invisible to the user (more or less) — works the way users work, not the way you (or your company) works — is based on terminology that makes sense to the user

Building Navigation

User tasks are not business goals. Users may need: !— To work out how they can find something specific — To be shown things they didn’t know about — To see where they are and where they can go from there — To see what their options are and see the scope and offering of a website — To see content, features, and functionality — To be able to progress with their tasks — To find things similar to what they are looking at

Building Navigation

Business goals can be more: !— Guide users through information while making them aware of other related products and services along the way — Guide users through process (checkout or registration) quickly — Rank on search engines by using popular terms as navigation — Make the user experience enjoyable and efficient — Prioritize profitable information, products, and services through navigation, labeling, and prioritized calls to action — Make things hard to find, such as links to unsubscribe or contact (to pump up numbers or reduce support costs)

Building Navigation

Typical nav elements: !1. Site tools navigation: Site

features such as login, register, contact us, help

2. Global navigation/nav bar: Best derived from user research, patterns for similar sites, can also be a vertical stack

3. Nav as promotion: Links can push users to deals or highlighted content

Building Navigation

Credit: Smashing UX Design

Building Navigation


Typical nav elements: !4. Sub-nav: You can have an "exploded view" of sections of the nav bar 5. In-page nav: Here, an element in the page is a clickable link 6. Footer: Does not play well with infinite scroll pages

Building Navigation


Some nav tools: !1. Breadcrumbs: Shows site hierarchy, allows users to step back 2. Call to action: Should be visually distinct, often as buttons 3. Tabbed nav: Helps organize and compartmentalize, but be sure through testing that users see these

Building Navigation


Some nav tools: !4. Contextual nav: Takes users to content related to info they’re viewing 5. Zeitgeist nav: Shows users content that’s currently popular 6. Category nav: Link to more content from category user is currently viewing, can allow user to broaden their search

Some fun tips for designing navigation: !— Involve users (research, card sort, etc.) — Look at (and maybe steal) patterns — Use Google Adwords Keyword tool (www.adwords.google.com) to see volume of searches for keywords — Nav categories should be mutually exclusive — Think about the goals of the site or app, and users of it; the navigation should match and enable that — Make navigation LOOK like navigation

Building Navigation

Some common mistakes in designing navigation: !!— Using "brand" !!— "Click here" (Wait, where? What will that do or go?) — Not knowing or observing users — Not knowing/ignorantly violating nav conventions — Too-vague terms ("Miscellaneous? Should I bother?")

Building Navigation

?? ??

UX of a Home Page

Home pages are the storefronts or signposts for the rest of the product or service !

They’re often overloaded, which can drive away users !

Let’s look at: — key user and business goals — some common mistakes — some tips

UX of a Home Page

Key user tasks and questions: !— "I know what I’m looking for; do you provide it?" — "How can I contact you? Um, can I contact you?" — "Help, I’m lost!" — "Sorry, who are you? What do you do?" — "Look, I just want to do this. One. Thing." — "Do I trust this thing?" — "Hm… anything new?" — "Is there anything here to inspire me?"

UX of a Home Page

Some typical business goals for a home page: !— Promote new products, services, campaigns — Give users many paths to content: nav, search, footer — Show ads — Do users log in? Show them targeted info and ads. — Good first impression — Make it simple for users — Demonstrate that this is regularly maintained/updated — Inspire trust

UX of a Home Page


Elements: !1. Clear proposition: Who you are, what you do 2. Promote the best sellers: Shows behavior of others, that there are popular items/services 3. Easy access to main site categories: Have to support users who like to browse and those who like to search

UX of a Home Page


Elements: !4. Demonstrate trust: People make this choice quickly; professionalism and quality of content help 5. Familiarity: Site tools and other items are not obscured and confusing 6. Easy drill-down: Don’t make users dig deep or blindly; they’ll give up

UX of a Home Page

Some tips: !— Get signed-off on list of requirements for home page — Go back to the users. Either what you’ve already learned, or go learn more stuff. — Sketch! Easier to generate (and toss) ideas. — Refer back to user and business goals. Often. — Test early and often, as you go — Simple is usually better. When in doubt, leave out (for now).

UX of a Home Page

Oft-made mistakes: !— Thinking the home page is the most important page (it may really be product pages, "funnels" for purchasing) — Dropping user needs for business needs — Did you make it clear what the value is? — Too much stuff! — Not updating or making clear there’s new content

UX of a Home Page

UX of a Category Page

Key user tasks and questions: !— "Can I tell if this provides the services or products that I need and/or want?" — "Can I filter or sort things so I can narrow down my choices and make a selection?" — "Can I tell the difference between all the options so I can wrap this up and get on with things?"


Some business goals: !— Show the whole range of products and/or services — Allow users to narrow choices, make selections — Group products and services intelligently and in ways users can easily move and "collect" them — Give users enough info for them to make their choices



Elements: !1. Home-page-like: Image- rich, maybe a "hero" area 2. In-page nav: Obvious links, easier to scan, shows available options 3. Maybe a sign-up: You can capture user information while giving them something of value (note: this should always be opt-in!)



Elements: !4. Supporting content: Low- quality content undermines user trust. Invest in something interesting and useful.


UX of Product Listing


Elements: !1. Sort/filter: Support both types of users, and those who like to "view all". Usability testing can show what facets are most needed by/ important to users 2. Odd number is easier to scan: As with "rule of threes", an odd number is harder to group, forcing the eye to scan



Elements: !3. The right level of info: This can be tricky to determine. Patterns and usability testing can help. 4. Give alternatives: Make sure users who haven’t found what they want have a clear action path to continue exploring


Some tips: !— Understanding user tasks and journeys can be very helpful; if you understand the user’s decision-making process, you can give them the info they need to decide. — Use user-centric language: don’t paste business terms/categories/etc. onto a user-facing page or app —Don’t use inappropriate advertising (http://tabcloseddidntread.com/) — Make it work!
