Web Design: Navigation
First time users often complete tasks faster using text based rather than icons
When might text-based navigation be better than icons?
an example is the "Mega menu" can be horizontal or vertical Helps keep menu options above fold does not need much screen real estate, leaves more room for content But when active, can cover screen content
cascading menus
Only one section is expandable at a time Initial view should have "primary" section expanded Highlight current (open) panel don't nest accordion within accordion
Accordian menus
location-based--static links show where user is in hierarchy Path based-dynamically shows path user took to get to page Attribute based-dynamically shows how page can be found with search/filters
Breadcrumbs
Website-information architecture often drives nav flow Apps--Task flows typically drive nav flow
Differences between site vs app nav design
select criteria, like ebay or true car
Faceted search
Heirchical Drill Down Persistent Sequential Search
Four main types of primary navigation
Simple link menus-good when you don't need a lot of context to choose Annotated link menus-when more context/description is needed
Hierarchical example
like mega menu, fewer options
Horizontal dropdown menus
Can show more choices Gives user "random" access to large number of options Maintains persistent access to menu choices Can encourage too many choices and be overwhelming Some links can be below the fold if too long
Left hand nav strengths and weaknesses
Good when selections have to be made in order Reduces number of high level menu choices Good when user does not have to jump between tasks or categories Navigation can disappear after selection is made to save space
Notes on Hiercharchical Navigation
Allows user to skip to lower levels of hierarchy All levels can be accessed from a single page Ex: link farm
Notes on Multi Level Hierarchical Navigation
Example: app icons on iPhone "out and back" navigation no "skip" level navigation usually includes easy way to get back to home view
Notes on Single Level Hierarchical Navigation
Contextual Navigation--within the page, somehow Secondary windows--navigation initiates pop up utility/header links-about us/priv policy/sitemap/etc Footer links-similar to utility, at bottom of page
Other options
Ex: primary site navigation, stays in place, top nav is an example
Persistent Navigation
can be fastest for known items Simple search-user enters keywords into pre-indexed database which returns results Should make prominent (like amazon) Place action button to the right of field Implement autosuggest/complete Advance search allows for more filter criteria
Search
Provides structure for step by step tasks Makes navigation path explicit Reduces the potential for entry errors can be modal (all steps are important), or non-modal (some steps can be skipped) Best used for: -detailed, complex or infrequently used processes -when task flow is well defined and predictable
Sequential Navigation
provides extra guidance uses a lot of space on controls
Sequential navigation wizards
Example is turbo tax
Sequential navigation-non modal
Tells users where they are, where they can go, how to get back Provides user with alternatives Is obvious Matches user's mental model
Some aspects of good navigation
Index pages Breadcrumbs Quick links Secondary windows Utility links Footer links
Some supplemental navigation
Good when options fit in a single row and horizontal space is at a premium Well understood by users Leaves full width of page available for content Can be difficult if options don't fit in one row Labels need to be short, predictable and in user's vocabulary
Top Nav bar strenghs and weaknesses
allows expansion of multiple sections at same time with selection highlighted ideally 8-10 items most commonly used should be above the fold Should limit to two levels (cat and sub-cat) Use chevron > to indicate expandable levels
Tree menus
