Click here to load reader

Navigation design alternatives for websites

  • View
    64.950

  • Download
    6

Embed Size (px)

DESCRIPTION

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 www.credos.com.au
  • What I didnt know aboutNAVIGATIONDESIGN in 1997
  • Lets check outthe early days of web navigation
  • Back in 1997 a simple corporate websitewww.honda.co.uk
  • Back in 1997 basic menumatrixexploring guidancebrandvaluesbrandmessage www.honda.co.uk
  • Enigmatic navigationIndicatorsshowwhere Very basicyou are menuBack tomatrix www.honda.co.uk
  • Lateral EXPLORATION Brand values drive content and navigationwww.honda.co.uk
  • 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 http://web.archive.org
  • Meanwhile, back in 2010...
  • The same site in 2010Service Actionmenu menuProductmenu Topical featuresFeaturebuttons Footer linkshttp://www.honda.co.uk/cars
  • 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 & buttonshttp://www.ford.com/microsites/sustainability-report-2009-10
  • More menus, tabs & buttonszzzzzzhttp://www.rosiesdollsclothes.com.au | http://www.arden.net.au
  • MEGA MenusGroup menuitems to makechoicesclearer (design for website under development)
  • MEGA MenusExplain thechoices andinclude imagesto focus yourattention http://www.amnesty.org.au
  • MEGA MenusEven inanother languageyou can guesshow a menuworksFly-outmenu is notthe mostusable http://www.yubin-nenga.jp
  • Buttons, icons/imagesIcons makechoices looksimplePhotos doubleas productpromoshttp://www.telstra.com | http://www.samsung.com.au
  • Multiple Menu Madness 1 2 3 4 5 6 7http://www.bigpond.com
  • 2 Typographic & numeric
  • Totally typographic navigation Typographic approach makes a strong statement and forces you to make a choicehttp://www.proa.org | http://www.ah-studio.com
  • Navigation becomes the content Hover over text to make sense of ithttp://www.digitalmash.com
  • Navigation by Numbers Do I care enough to click?http://www.modulab.co.uk | http://www.modularlab.com
  • Ninja Numeric Navigationhttp://answer.nttdocomo.co.jp/t28/
  • 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)http://www.idemitsu.co.jp/chienergy/special/
  • A metaphor with boundariesNavigate torooms Open doors to explorehttp://www.annielennox.com
  • A real shop display Browse products arranged along the wallhttp://www.jamesjoyce.co.uk
  • A virtual shopfront Showcases the navigation, not the products or serviceshttp://www.daviddeane.com.au/
  • 4 Spatial navigation
  • Image grid navigator Current position isSelect an highlightedimage
  • Magical mystery tourMove overshapes to makethe navigationoptions appear http://flywheeldesign.com/
  • Holistic viewCircle adjusts as you focus in on contenthttp://bucchake.com
  • One page vertical glide Glide up/down smoothly to explore vertical spacehttp://www.plinestudios.com/
  • 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.http://www.komra.de
  • One page multi-dimensional Move up/down/left/right/diagonally using menu or arrowshttp://www.visuall.be/
  • 5 No navigation (or very minimal)
  • NO site navigation Home icon is the only site navigation device. Its all about the content.http://iconwerk.de/
  • Minimal site navigation No structure, just browse whats on offerhttp://relogik.com
  • Promotional one-pager No choices are presented up-front. You see welcoming content before

Search related