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 ...
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.
amelie5211It's realy a good presentation,thx.1 year ago
Are you sure you want to
Carolyn King, Communication consultant & designer at Credos AssociatesIf you found this presentation useful, you may also like a presentation I recently did about web design for conversion - it covers techniques for kicking a website into action, achieving website goals. http://www.slideshare.net/cazazz/design-for-conversion1 year ago
Are you sure you want to
3M UK at 3M UKThe slides look awesome! Did you know we’re currently running a competition to win a 3M PocketProjector MP180? This fits perfectly in the ‘3MGenius’ category. To enter, simply tag your presentation with ‘3MGenius’ to be entered. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!2 years ago
Carolyn King, Communication consultant & designer at Credos AssociatesThank you everyone for your kind comments. I am glad the presentation stimulated a few thoughts - that was the intention! Website navigation is often taken for granted, but is just as much a part of the brand experience as other aspects of design. Steven Feeney: The fonts are from fontdiner.com - I saved the ppt file as pdf so the fonts would display properly. Unfortunately, saving as PDF means the speaker notes are lost, which is why I uploaded those separately. Last year I talked about icon design (presentation is on slideshare), I wonder what to talk about next year...2 years ago
Are you sure you want to
liviasorioSobre o design e navegação de sites. Muito bom!2 years ago
Are you sure you want to
blumenkohlthat's great stuff. Thanx a lot2 years ago
Navigation design alternatives for websitesPresentation Transcript
What I learned aboutNAVIGATIONDESIGNin 2010 www.credos.com.au
What I didn’t know aboutNAVIGATIONDESIGN in 1997
Let’s 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 web…1996 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 what’s 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. What’s the role of website navigation?
Q. What’s the role of website navigation?A. Help people find their way around.
Role of navigation… For users…1. Find stuff they want2. Get an overview of what’s on offer3. See where they are4. See where they can go
Role of navigation… For users… For site owners…1. Find stuff they want 1. Drive people to2. Get an overview of action points what’s on offer 2. Cross-sell services3. See where they are 3. Show what is/isn’t4. See where they available can go 4. Be found on Google
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
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 to“rooms” 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. It’s all about the content.http://iconwerk.de/
Minimal site navigation No structure, just browse what’s on offerhttp://relogik.com
Promotional one-pager No choices are presented up-front. You see welcoming content before being expected to click anything.http://www.mailchimp.com/v5-3/
Navigation on demand Click to open out navigation panel Follow the arrows to explorehttp://moonlinx.jp/special_issue/003/
A quick re-cap… Types of navigation… Role of navigation…1. Menus/tabs/buttons • Help users find what2. Typographic/numeric they want/need3. Metaphoric • Drive people to action • Cross-promote content4. Spatial • Show what is on offer5. Minimal or none • Be found on Google
Choosing a navigation style• Why the navigation is there (its role)• Who will be using it• Where they want to go• What YOU want them to do• How you will manage it (CMS etc)
My advice to web designers… Get lost. (it’s the only way you’ll find anything new)50’s style fonts & graphics from http://www.fontdiner.com/
Carolyn King | web www.credos.com.au | twitter @CredosAssoc
Credos Associates
well done! 2 years ago
Steven Feeney: The fonts are from fontdiner.com - I saved the ppt file as pdf so the fonts would display properly. Unfortunately, saving as PDF means the speaker notes are lost, which is why I uploaded those separately. Last year I talked about icon design (presentation is on slideshare), I wonder what to talk about next year... 2 years ago
A dry subject made lively :-) Did you embed those fonts as JPEGs?
Love it, can't wait for your 2011 presentation. 2 years ago