Building blocks of navigation

Navigation system components:

• Global
• Local
• Understanding the difference between children and siblings
• Avoiding purpose-less pages
• Prioritized local navigation
• Faceted search
• Breadcrumbs
• Utility
• Related links
• Social filters
• Quick links
• Site map
• Process/navigation
• Pagination
• Tag clouds
• Spatial navigation

Navigation patterns and behavior

• Tabs
• Vertical links
• Filmstrip
• Accordion
• Standard hyperlinking
• Landing pages
• Sub-navigation bars
• Drop-down menus
• Fly-out menus
• Cascading menus
• Mega menus

From NN Group training syllabus

Links

Use links meaningfully:

• Deliver users to their desired objective.
• Give them links that communicate scent in a meaningful way (e.g. with meaningful trigger words)
• Make the real estate reflect the user’s desires.

‘A more accurate name for the search box would be B.Y.O.L.: Bring Your Own Link. What do people type into this box: trigger words! … The key thing to understand is that people don’t want to search. There’s a myth that some people prefer to search. It’s the design of the site that forces them to search. The failure rate for search is 70%.’

Essence of a talk given by Jared Spool on ‘An event apart’, Boston MA, 2011
From Jeremy Keith’s notes

8 principles of Information Architecture

1. Treat content as objects
2. Manage the paradox of choice (Less is more)
3. Disclose progressively
4. Provide examples
5. Provide multiple front doors
6. Allow for growth
7. Think in facets (Provide multiple classification schemes)
8. Navigate by function; move away from thinking ‘Top navigation’, ‘Left hand nav’, ‘utilities’ etc and think of different navigation types that support interaction with the site, eg Topical navigation, Service navigation, Magazine navighation, Dynamic navigation … (examples mentioned in talk, don’t necessarily agree with these types but like the general idea of describing navigation by its purpose (see quote below).

“Navigation is a tool and we must think about it in terms of the purpose that it serves … (such as) exploring related topics, digging deeper into a current topic, escaping from the current topic, filtering a collection. (…) Don’t describe navigation in terms of where it lives on the page but what it does.”

Dan Brown Eight principles of Information Architecture

10 things that are more important than menu navigation

Slideshow notes ‘10 saker som ar vigtigare an navigation pa din sajt‘ (inuse.se)

1. Short ways (eg repetive bread crumbs, relevant links, popular links)
2. Tags (to allow for horizontal categorisation and/or crowd-sourced semantics)
3. Timing (currently rather underestimated, even in Google search results)
4. Linked keywords (as in Wikipedia)
5. Social media (What is relevant to your friends might be relevant to you)
   Meaningful categories
6. Improved landing pages (eg meaningful URLs)
7. Outsourced navigation (eg serach results on google provide mini navigation)
   Improved site serach
8. SEO

Transitional volatility in Web Navigation

According to Danielson, people navigate in a cycle of habituation, prediction, and re-orientation:

1. Habituation: While interacting with a web site, people become accustomed to its navigation mechanisms and overall systems. But it’s not just the currently viewed page that contributes to habituation: people may have memory of all pages they’ve experienced. For each navigation act, they bring prior knowledge and expectations.
2. Prediction: From patterns of navigation within a web site and cues that provide ‘scent’ to information, such as link labels and link position, people predict the attributes of destination pages. They anticipate what comes nect while navigating.
3. Re-orientation: Once a new page is reached, people familiarize themselves with it. Re-orientation occurs. The navigation on the new page now becomes incorporated into the navigator’s model of the site, and the cycle begins again.

From David R. Danielson ‘Transitional volatility in Web Navigation‘, cited in Kalbach (2007, p.34)

Book index: Designing Web Interfaces

Bill Scott: Designing Web Interfaces: Principles and Patterns for Rich Interactions

Principle one: Make it direct

In Page Edit
• Single Field Inline Edit
• Multi Field Inline Edit
• Overlay Edit
• Table Edit
• Group Edit
• Module Configuration
• …

Drag and Drop
• …
• Drag and Drop Module
• Drag and Drop Object
• Drag and Drop Action
• Drag and Drop Collection
• The Challenges of Drag and Drop

Direct Selection
• Toggle Selection
• Collected Selection
• Object Selection
• Hybrid Selection

Principle 2: Keep It Lightweight

Contextual Tools
• …
• Fitt’s Law
• Contextual Tools
• Always Visible Tools
• Hover-Reveal Tools
• Toggle Reveal Tools
• Multi Level Tools
• Secondary Menu

Principle 3: Stay on the Page

Overlays
• Dialog Overlay
• Detail Overlay
• Input Overlay

Inlays
• Dialog Inlay
• List Inlay
• Detail Inlay
• Tabs
• Inlay Versus Overlay?

Virtual Pages
• Virtual Scrolling
• Inline Paging
• Scrolled Paging: Carousel
• Virtual Panning
• Zoomable User Interface
• Paging versus Scrolling

Process Flow
• …
• Interactive Single Page Process
• Inline Assistant Process
• Dialog Overlay Process
• Confirgurator Process
• Static Single Page Process

Principle 4: Provide an Invitation

Static Invitations
• Call to Action Invitations
• Tour Invitation

Dynamic Invitations
• Hover Invitation
• Affordance Invitation
• Drag and Drop Invitation
• Inference Invitation
• More Content Invitation
• …

Principle 5: Use Transitions

Transitional Patterns

• Brighten and Dim
• Expand/Collapse
• Self-Healing Fade
• Animation
• Spotlight

Purpose of Transitions
• Engagement
• Communication

Principle 6: React Immediately

Lookup Patterns
• Auto-Complete
• Live Suggest
• Live Search
• Refining Search

Feedback Patterns
• Live Preview
• Progressive Disclosure
• Progress Indicator
• Periodic Refresh

Pivot Browsing

“Pivot browsing means moving through an information space by choosing a new reference point – a pivot – for exploring the system.”

Gene Smith, Tagging: People-Powered Metadata For The Social Web, p. 105

Spatial and container metaphors

“We use a mix of trajectory metaphors (e.g. I went to the IBM homepage) and container metaphors (e.g. ‘I found that inside Yahoo’). We construct cognitive maps. We remember (and bookmark) landmarks and anchor points. (…) And we often become lost and disorientated.”

From: Morville, Peter (2005), Ambient Findability, Sebastopol: O’Reilly, p.38

Page hierarchy

“We use visual relationships to add more or less visual weight to
our elements. Visual weight can be loosely defined as the degree
to which an element demands our attention and keeps our
interest.” (aka visual hierarchy)

Content

1. page title
2. subsection title
3. embedded link
4. supplementary info

Navigation

1. Location indicator
2. top level menu options
3. subnavigation options
4. trace route (breadcrumbs)

Supportive

1. Site identifier
2. site-wide utilities
3. footer information (poracy, security, content and
   copyright info)

From: Wroblewski, Luke (2002), Site-Seeing: A Visual Approach to Web-Usability, New York: Hungry Minds, p.160

Webmarks

Analogy to landmark, i.e. objects in the website that give you a sense of direction; [webmarks] “can serve as visual clues to jog your memory and let you know you’re on the right track when you try to find content you have located before.”

From: Wroblewski, Luke (2002), Site-Seeing: A Visual Approach to Web-Usability, New York: Hungry Minds, p.60