Click here to load reader

Navigation design alternatives for websites

  • View

  • Download

Embed Size (px)


Presentation done for Brisbane Web Design Meetup (18 Nov 2010) about what I learned about website navigation design in 2010, including a look back at web designs from the 1990s and a review of current styles of navigation.

Text of Navigation design alternatives for websites

  • What I learned aboutNAVIGATIONDESIGNin 2010
  • What I didnt know aboutNAVIGATIONDESIGN in 1997
  • Lets check outthe early days of web navigation
  • Back in 1997 a simple corporate
  • Back in 1997 basic menumatrixexploring guidancebrandvaluesbrandmessage
  • Enigmatic navigationIndicatorsshowwhere Very basicyou are menuBack tomatrix
  • Lateral EXPLORATION Brand values drive content and
  • Inspired by Battleships game 1 2 3 4 5 6 7 8 9 10 A B B B B S B C C D D C D E C F D D D G S D H S I S J C C C
  • Why lateral navigation? Encourage exploration and brand engagement Appeal to women, who make purchase decisions Refresh a brand perceived to be stuffy Reach a younger demographic Stand out from competitors Support the message first man then machine Why not? Few rules back then
  • Elsewhere on the web1996 19981998 1995-7 Find more via the Wayback machine
  • Meanwhile, back in 2010...
  • The same site in 2010Service Actionmenu menuProductmenu Topical featuresFeaturebuttons Footer links
  • So whats changed? Usability (research, best practice, awareness) Accessibility (legal & ethical need for accessible websites) Technology (Browsers, Javascript, Ajax, Mobile/Touch devices, etc) Commercialism (need for measurable results, SEO performance) Audience (numbers, demographics, sophistication, expectations) Conventions (nav bars, tabs, breadcrumbs, links, standards) Tools (CMS templates, menu systems, SEO analysis)
  • Q. Whats the role of website navigation?
  • Q. Whats the role of website navigation?A. Help people find their way around.
  • Role of navigation For users1. Find stuff they want2. Get an overview of whats on offer3. See where they are4. See where they can go
  • Role of navigation For users For site owners1. Find stuff they want 1. Drive people to2. Get an overview of action points whats on offer 2. Cross-sell services3. See where they are 3. Show what is/isnt4. See where they available can go 4. Be found on Google
  • Styles of navigation in 2010
  • 1 Menus, tabs & buttons 90% of websites?
  • Menus, tabs & buttons
  • More menus, tabs & buttonszzzzzz |
  • MEGA MenusGroup menuitems to makechoicesclearer (design for website under development)
  • MEGA MenusExplain thechoices andinclude imagesto focus yourattention
  • MEGA MenusEven inanother languageyou can guesshow a menuworksFly-outmenu is notthe mostusable
  • Buttons, icons/imagesIcons makechoices looksimplePhotos doubleas productpromos |
  • Multiple Menu Madness 1 2 3 4 5 6 7
  • 2 Typographic & numeric
  • Totally typographic navigation Typographic approach makes a strong statement and forces you to make a choice |
  • Navigation becomes the content Hover over text to make sense of it
  • Navigation by Numbers Do I care enough to click? |
  • Ninja Numeric Navigation
  • 3 Real world metaphors
  • Literal navigation (not a metaphor, the real thing)Navigate thehuman bodyto find outabout specificmuscles(design mock-up for website under development)
  • A self-contained worldMixedmetaphors cars intrees? Click and explore the world (the scene moves with you)
  • A metaphor with boundariesNavigate torooms Open doors to explore
  • A real shop display Browse products arranged along the wall
  • A virtual shopfront Showcases the navigation, not the products or services
  • 4 Spatial navigation
  • Image grid navigator Current position isSelect an highlightedimage
  • Magical mystery tourMove overshapes to makethe navigationoptions appear
  • Holistic viewCircle adjusts as you focus in on content
  • One page vertical glide Glide up/down smoothly to explore vertical space
  • One page decision path Follow the decision paths according to what you know or want to find out. Stop and explore when you want more.
  • One page multi-dimensional Move up/down/left/right/diagonally using menu or arrows
  • 5 No navigation (or very minimal)
  • NO site navigation Home icon is the only site navigation device. Its all about the content.
  • Minimal site navigation No structure, just browse whats on offer
  • Promotional one-pager No choices are presented up-front. You see welcoming content before

Search related