SlideShare a Scribd company logo
1 of 53
Download to read offline
What I learned about
NAVIGATION
DESIGN
in 2010
   www.credos.com.au
What I didn’t know about
NAVIGATION
DESIGN
 in 1997
Let’s check out
the early days of
 web navigation
Back in            1997…
                   a simple corporate website




www.honda.co.uk
Back in   1997…
                                     basic
                                     menu

matrix
exploring                            guidance
brand
values




brand
message



 www.honda.co.uk
Enigmatic navigation
Indicators
show
where                               Very basic
you are                             menu




Back to
matrix




  www.honda.co.uk
Lateral EXPLORATION
                  Brand values drive content and navigation




www.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                                                          1998




1998




                                                              1995-7




 Find more via the “Wayback machine” http://web.archive.org
Meanwhile, back in 2010...
The same site in 2010
Service                             Action
menu                                menu

Product
menu


                                    Topical
                                    features
Feature
buttons


                                    Footer links




http://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 want
2. Get an overview of
   what’s on offer
3. See where they are
4. See where they
   can go
Role of navigation…
   For users…                For site owners…
1. Find stuff they want   1. Drive people to
2. Get an overview of        action points
   what’s on offer        2. Cross-sell services
3. See where they are     3. Show what is/isn’t
4. 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




http://www.ford.com/microsites/sustainability-report-2009-10
More menus, tabs & buttons…zzzzzz




http://www.rosiesdollsclothes.com.au | http://www.arden.net.au
MEGA Menus

Group menu
items to make
choices
clearer




 (design for website under development)
MEGA Menus



Explain the
choices and
include images
to focus your
attention




 http://www.amnesty.org.au
MEGA Menus
Even in
another language
you can guess
how a menu
works




Fly-out
menu is not
the most
usable




 http://www.yubin-nenga.jp
Buttons, icons/images
Icons make
choices look
simple




Photos double
as product
promos




http://www.telstra.com | http://www.samsung.com.au
Multiple Menu Madness
                         1
   2
                             3

    4                        5
    6
        7




http://www.bigpond.com
2 Typographic
   & numeric
Totally typographic navigation




 Typographic approach makes a strong statement and forces you to make a choice



http://www.proa.org | http://www.ah-studio.com
Navigation becomes the content



                                         Hover over
                                         text to
                                         make
                                         sense of it




http://www.digitalmash.com
Navigation by Numbers




                                                       Do I care
                                                       enough to
                                                         click?



http://www.modulab.co.uk | http://www.modularlab.com
Ninja Numeric Navigation




http://answer.nttdocomo.co.jp/t28/

3 Real world metaphors
Literal navigation
                  (not a metaphor, the real thing)




Navigate the
human body
to find out
about specific
muscles




(design mock-up for website under development)
A self-contained world


Mixed
metaphors
– cars in
trees?
                                               Click and
                                               explore the
                                               “world” (the
                                               scene moves
                                               with you)




http://www.idemitsu.co.jp/chienergy/special/
A metaphor with boundaries

Navigate to
“rooms”                      Open “doors”
                             to explore




http://www.annielennox.com
A “real” shop display




            Browse products arranged along the wall


http://www.jamesjoyce.co.uk
A virtual shopfront

                                     Showcases the
                                     navigation, not
                                     the products
                                     or services




http://www.daviddeane.com.au/
4 Spatial navigation
Image grid navigator
            Current
            position is
Select an   highlighted
image
Magical mystery tour




Move over
shapes to make
the navigation
options appear




  http://flywheeldesign.com/
Holistic view




Circle adjusts as you focus in on content




http://bucchake.com
One page vertical glide

                               Glide up/down smoothly
                               to explore vertical space




http://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 arrows




http://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 offer




http://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 explore

http://moonlinx.jp/special_issue/003/
A quick re-cap…
     Types of navigation…     Role of navigation…
1.   Menus/tabs/buttons     • Help users find what
2.   Typographic/numeric      they want/need
3.   Metaphoric             • Drive people to action
                            • Cross-promote content
4.   Spatial
                            • Show what is on offer
5.   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

More Related Content

What's hot

Giving Firefox Users Control of Their Data
Giving Firefox Users Control of Their DataGiving Firefox Users Control of Their Data
Giving Firefox Users Control of Their DataDoNotLick
 
Educause 2014: Building Academic Websites (in the Real World)
Educause 2014: Building Academic Websites (in the Real World)Educause 2014: Building Academic Websites (in the Real World)
Educause 2014: Building Academic Websites (in the Real World)Valerie Forrestal
 
Web Design For The Nondesigner
Web Design For The NondesignerWeb Design For The Nondesigner
Web Design For The NondesignerCharlie Kalech
 
Slides 3 - Wordpress Networks Sites
Slides 3 - Wordpress Networks SitesSlides 3 - Wordpress Networks Sites
Slides 3 - Wordpress Networks SitesMassimo Callisto
 
Twitter Bootstrap (spring)
Twitter Bootstrap (spring)Twitter Bootstrap (spring)
Twitter Bootstrap (spring)darbyfrey
 
Responsive Design and Drupal Theming
Responsive Design and Drupal ThemingResponsive Design and Drupal Theming
Responsive Design and Drupal ThemingSuzanne Dergacheva
 
Creating a Webpage from a Template
Creating a Webpage from a TemplateCreating a Webpage from a Template
Creating a Webpage from a TemplateMike Crabb
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with DrupalSuzanne Dergacheva
 
P4 L Presentation 09012011
P4 L Presentation 09012011P4 L Presentation 09012011
P4 L Presentation 09012011beisner
 
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarCreating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarSuzanne Dergacheva
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web DesignKathy Gill
 

What's hot (19)

Giving Firefox Users Control of Their Data
Giving Firefox Users Control of Their DataGiving Firefox Users Control of Their Data
Giving Firefox Users Control of Their Data
 
Educause 2014: Building Academic Websites (in the Real World)
Educause 2014: Building Academic Websites (in the Real World)Educause 2014: Building Academic Websites (in the Real World)
Educause 2014: Building Academic Websites (in the Real World)
 
Sitemap
SitemapSitemap
Sitemap
 
Web Design For The Nondesigner
Web Design For The NondesignerWeb Design For The Nondesigner
Web Design For The Nondesigner
 
ShareTab
ShareTabShareTab
ShareTab
 
Ppt ch09
Ppt ch09Ppt ch09
Ppt ch09
 
Intro to Drupal
Intro to DrupalIntro to Drupal
Intro to Drupal
 
Slides 3 - Wordpress Networks Sites
Slides 3 - Wordpress Networks SitesSlides 3 - Wordpress Networks Sites
Slides 3 - Wordpress Networks Sites
 
Twitter Bootstrap (spring)
Twitter Bootstrap (spring)Twitter Bootstrap (spring)
Twitter Bootstrap (spring)
 
Responsive Design and Drupal Theming
Responsive Design and Drupal ThemingResponsive Design and Drupal Theming
Responsive Design and Drupal Theming
 
Website layout
Website layoutWebsite layout
Website layout
 
Creating a Webpage from a Template
Creating a Webpage from a TemplateCreating a Webpage from a Template
Creating a Webpage from a Template
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with Drupal
 
Are you accessible
Are you accessibleAre you accessible
Are you accessible
 
P4 L Presentation 09012011
P4 L Presentation 09012011P4 L Presentation 09012011
P4 L Presentation 09012011
 
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarCreating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 
CSS for Mobile
CSS for MobileCSS for Mobile
CSS for Mobile
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 

Viewers also liked

Guide rain sensor 90915
Guide rain sensor 90915Guide rain sensor 90915
Guide rain sensor 90915Tim Royce
 
Instruments for navigation + audio
Instruments for navigation + audioInstruments for navigation + audio
Instruments for navigation + audioOtreblazer
 
Trademarks - an overview (Australia)
Trademarks - an overview (Australia)Trademarks - an overview (Australia)
Trademarks - an overview (Australia)Carolyn King
 
Planning Your Conversion Optimisation for 2017
Planning Your Conversion Optimisation for 2017 Planning Your Conversion Optimisation for 2017
Planning Your Conversion Optimisation for 2017 PRWD
 
Everything About Aviation Charts
Everything About Aviation ChartsEverything About Aviation Charts
Everything About Aviation ChartsAhsan Zahid
 
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)Beat Signer
 
Land navigation part 2
Land navigation part 2Land navigation part 2
Land navigation part 2fnacampanha
 
Measurement of precipitation
Measurement of precipitationMeasurement of precipitation
Measurement of precipitationanimesh91
 
Measurement of precipitation (rainfall )
Measurement of precipitation (rainfall )Measurement of precipitation (rainfall )
Measurement of precipitation (rainfall )SULAKSHYA GAUR
 
Introduction, hydrologic cycle, climate and water m1
Introduction, hydrologic cycle, climate and water m1Introduction, hydrologic cycle, climate and water m1
Introduction, hydrologic cycle, climate and water m1Bibhabasu Mohanty
 

Viewers also liked (13)

Navigation System
Navigation SystemNavigation System
Navigation System
 
Guide rain sensor 90915
Guide rain sensor 90915Guide rain sensor 90915
Guide rain sensor 90915
 
Instruments for navigation + audio
Instruments for navigation + audioInstruments for navigation + audio
Instruments for navigation + audio
 
Trademarks - an overview (Australia)
Trademarks - an overview (Australia)Trademarks - an overview (Australia)
Trademarks - an overview (Australia)
 
Planning Your Conversion Optimisation for 2017
Planning Your Conversion Optimisation for 2017 Planning Your Conversion Optimisation for 2017
Planning Your Conversion Optimisation for 2017
 
Studies
StudiesStudies
Studies
 
Everything About Aviation Charts
Everything About Aviation ChartsEverything About Aviation Charts
Everything About Aviation Charts
 
Chapter 22 - Windows XP
Chapter 22 - Windows XPChapter 22 - Windows XP
Chapter 22 - Windows XP
 
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
 
Land navigation part 2
Land navigation part 2Land navigation part 2
Land navigation part 2
 
Measurement of precipitation
Measurement of precipitationMeasurement of precipitation
Measurement of precipitation
 
Measurement of precipitation (rainfall )
Measurement of precipitation (rainfall )Measurement of precipitation (rainfall )
Measurement of precipitation (rainfall )
 
Introduction, hydrologic cycle, climate and water m1
Introduction, hydrologic cycle, climate and water m1Introduction, hydrologic cycle, climate and water m1
Introduction, hydrologic cycle, climate and water m1
 

Similar to Navigation design alternatives for websites

Navigation design notes
Navigation design notesNavigation design notes
Navigation design notesCarolyn King
 
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for DevelopersMonika Piotrowicz
 
Essay On Web Development Life Cycle
Essay On Web Development Life CycleEssay On Web Development Life Cycle
Essay On Web Development Life CycleKerry Lewis
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015Equinet Academy
 
Web animation, interaction and user experience
Web animation, interaction and user experienceWeb animation, interaction and user experience
Web animation, interaction and user experiencesaya4
 
Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Cammy Bean
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For UseChristina Wodtke
 
HMF Emarketing Workshop
HMF Emarketing WorkshopHMF Emarketing Workshop
HMF Emarketing WorkshopSian Jamieson
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!Embolden
 
Beginners guide to_navigation_systems
Beginners guide to_navigation_systemsBeginners guide to_navigation_systems
Beginners guide to_navigation_systemsEntropii
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Adrian Roselli
 

Similar to Navigation design alternatives for websites (20)

Navigation design notes
Navigation design notesNavigation design notes
Navigation design notes
 
Website Evaluation Report
Website Evaluation ReportWebsite Evaluation Report
Website Evaluation Report
 
Essay Website
Essay WebsiteEssay Website
Essay Website
 
Designing Navigation
Designing NavigationDesigning Navigation
Designing Navigation
 
CPA presentation
CPA presentationCPA presentation
CPA presentation
 
a11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developersa11yTO - Web Accessibility for Developers
a11yTO - Web Accessibility for Developers
 
Essay On Web Development Life Cycle
Essay On Web Development Life CycleEssay On Web Development Life Cycle
Essay On Web Development Life Cycle
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015
 
Digital Content for Business
Digital Content for BusinessDigital Content for Business
Digital Content for Business
 
Web animation, interaction and user experience
Web animation, interaction and user experienceWeb animation, interaction and user experience
Web animation, interaction and user experience
 
Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design Top Tips for Responsive eLearning Design
Top Tips for Responsive eLearning Design
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For Use
 
Web Design Phase
Web Design PhaseWeb Design Phase
Web Design Phase
 
HMF Emarketing Workshop
HMF Emarketing WorkshopHMF Emarketing Workshop
HMF Emarketing Workshop
 
Website Evaluation Paper
Website Evaluation PaperWebsite Evaluation Paper
Website Evaluation Paper
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Making Your Website Sing!
Making Your Website Sing!Making Your Website Sing!
Making Your Website Sing!
 
Beginners guide to_navigation_systems
Beginners guide to_navigation_systemsBeginners guide to_navigation_systems
Beginners guide to_navigation_systems
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Lime Light Summative
Lime Light SummativeLime Light Summative
Lime Light Summative
 

More from Carolyn King

IP & Copyright - it's not black & white
IP & Copyright - it's not black & whiteIP & Copyright - it's not black & white
IP & Copyright - it's not black & whiteCarolyn King
 
Top Twenty Typographic Taboos
Top Twenty Typographic TaboosTop Twenty Typographic Taboos
Top Twenty Typographic TaboosCarolyn King
 
How to change the world (or at least your bit of it)
How to change the world (or at least your bit of it)How to change the world (or at least your bit of it)
How to change the world (or at least your bit of it)Carolyn King
 
Website workout - design for conversion
Website workout - design for conversionWebsite workout - design for conversion
Website workout - design for conversionCarolyn King
 
Website workout - notes
Website workout - notesWebsite workout - notes
Website workout - notesCarolyn King
 
Sustainability - business case
Sustainability - business caseSustainability - business case
Sustainability - business caseCarolyn King
 
Design for conversion - web design to get results
Design for conversion - web design to get resultsDesign for conversion - web design to get results
Design for conversion - web design to get resultsCarolyn King
 
Aussie innovation - how to change the world
Aussie innovation - how to change the worldAussie innovation - how to change the world
Aussie innovation - how to change the worldCarolyn King
 
Logo design - a journey through LogoLand
Logo design - a journey through LogoLandLogo design - a journey through LogoLand
Logo design - a journey through LogoLandCarolyn King
 

More from Carolyn King (10)

IP & Copyright - it's not black & white
IP & Copyright - it's not black & whiteIP & Copyright - it's not black & white
IP & Copyright - it's not black & white
 
Top Twenty Typographic Taboos
Top Twenty Typographic TaboosTop Twenty Typographic Taboos
Top Twenty Typographic Taboos
 
How to change the world (or at least your bit of it)
How to change the world (or at least your bit of it)How to change the world (or at least your bit of it)
How to change the world (or at least your bit of it)
 
Website workout - design for conversion
Website workout - design for conversionWebsite workout - design for conversion
Website workout - design for conversion
 
Website workout - notes
Website workout - notesWebsite workout - notes
Website workout - notes
 
Sustainability - business case
Sustainability - business caseSustainability - business case
Sustainability - business case
 
Design for conversion - web design to get results
Design for conversion - web design to get resultsDesign for conversion - web design to get results
Design for conversion - web design to get results
 
Aussie innovation - how to change the world
Aussie innovation - how to change the worldAussie innovation - how to change the world
Aussie innovation - how to change the world
 
Logo design - a journey through LogoLand
Logo design - a journey through LogoLandLogo design - a journey through LogoLand
Logo design - a journey through LogoLand
 
Icon design
Icon designIcon design
Icon design
 

Recently uploaded

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Recently uploaded (19)

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

Navigation design alternatives for websites

  • 1. What I learned about NAVIGATION DESIGN in 2010 www.credos.com.au
  • 2. What I didn’t know about NAVIGATION DESIGN in 1997
  • 3. Let’s check out the early days of web navigation
  • 4. Back in 1997… a simple corporate website www.honda.co.uk
  • 5. Back in 1997… basic menu matrix exploring guidance brand values brand message www.honda.co.uk
  • 6. Enigmatic navigation Indicators show where Very basic you are menu Back to matrix www.honda.co.uk
  • 7. Lateral EXPLORATION Brand values drive content and navigation www.honda.co.uk
  • 8. 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
  • 9. 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…
  • 10. Elsewhere on the web… 1996 1998 1998 1995-7 Find more via the “Wayback machine” http://web.archive.org
  • 12. The same site in 2010 Service Action menu menu Product menu Topical features Feature buttons Footer links http://www.honda.co.uk/cars
  • 13. 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)
  • 14. Q. What’s the role of website navigation?
  • 15. Q. What’s the role of website navigation? A. Help people find their way around.
  • 16. Role of navigation… For users… 1. Find stuff they want 2. Get an overview of what’s on offer 3. See where they are 4. See where they can go
  • 17. Role of navigation… For users… For site owners… 1. Find stuff they want 1. Drive people to 2. Get an overview of action points what’s on offer 2. Cross-sell services 3. See where they are 3. Show what is/isn’t 4. See where they available can go 4. Be found on Google
  • 19. 1 Menus, tabs & buttons 90% of websites?
  • 20. Menus, tabs & buttons http://www.ford.com/microsites/sustainability-report-2009-10
  • 21. More menus, tabs & buttons…zzzzzz http://www.rosiesdollsclothes.com.au | http://www.arden.net.au
  • 22. MEGA Menus Group menu items to make choices clearer (design for website under development)
  • 23. MEGA Menus Explain the choices and include images to focus your attention http://www.amnesty.org.au
  • 24. MEGA Menus Even in another language you can guess how a menu works Fly-out menu is not the most usable http://www.yubin-nenga.jp
  • 25. Buttons, icons/images Icons make choices look simple Photos double as product promos http://www.telstra.com | http://www.samsung.com.au
  • 26. Multiple Menu Madness 1 2 3 4 5 6 7 http://www.bigpond.com
  • 27. 2 Typographic & numeric
  • 28. Totally typographic navigation Typographic approach makes a strong statement and forces you to make a choice http://www.proa.org | http://www.ah-studio.com
  • 29. Navigation becomes the content Hover over text to make sense of it http://www.digitalmash.com
  • 30. Navigation by Numbers Do I care enough to click? http://www.modulab.co.uk | http://www.modularlab.com
  • 32.  3 Real world metaphors
  • 33. Literal navigation (not a metaphor, the real thing) Navigate the human body to find out about specific muscles (design mock-up for website under development)
  • 34. A self-contained world Mixed metaphors – cars in trees? Click and explore the “world” (the scene moves with you) http://www.idemitsu.co.jp/chienergy/special/
  • 35. A metaphor with boundaries Navigate to “rooms” Open “doors” to explore http://www.annielennox.com
  • 36. A “real” shop display Browse products arranged along the wall http://www.jamesjoyce.co.uk
  • 37. A virtual shopfront Showcases the navigation, not the products or services http://www.daviddeane.com.au/
  • 39. Image grid navigator Current position is Select an highlighted image
  • 40. Magical mystery tour Move over shapes to make the navigation options appear http://flywheeldesign.com/
  • 41. Holistic view Circle adjusts as you focus in on content http://bucchake.com
  • 42. One page vertical glide Glide up/down smoothly to explore vertical space http://www.plinestudios.com/
  • 43. 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
  • 44. One page multi-dimensional Move up/down/left/right/diagonally using menu or arrows http://www.visuall.be/
  • 45. 5 No navigation (or very minimal)
  • 46. NO site navigation Home icon is the only site navigation device. It’s all about the content. http://iconwerk.de/
  • 47. Minimal site navigation No structure, just browse what’s on offer http://relogik.com
  • 48. 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/
  • 49. Navigation on demand Click to open out navigation panel Follow the arrows to explore http://moonlinx.jp/special_issue/003/
  • 50. A quick re-cap… Types of navigation… Role of navigation… 1. Menus/tabs/buttons • Help users find what 2. Typographic/numeric they want/need 3. Metaphoric • Drive people to action • Cross-promote content 4. Spatial • Show what is on offer 5. Minimal or none • Be found on Google
  • 51. 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)
  • 52. 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/
  • 53. Carolyn King | web www.credos.com.au | twitter @CredosAssoc