SlideShare a Scribd company logo
1 of 11
NAVIGATION
NAVIGATION

Most difficult

Most important

Make / Break
Most difficult

NO...
   • Sense   of scale

   • Sense   of direction

   • Sense   of location
Dis
   orie difficult
    Most
       nte
           d
NO... Confused
         • Sense   of scale


    trat ed of direction
         • Sense
s        • Sense   of location
Most difficult

NO...             Conf used
    Dis of scale
    Sense
     •
         orie
                 nte
    Sense of direction
     •
                       d
           at   ed
    Sense of location
     •
        tr
 F ru s
NAVIGATION

Where am I?

Where have I been?

Where can I go?
NAVIGATION
Where am I?
               Site
     What...   Page
               Section


Where have I been?

Where can I go?
NAVIGATION
Where am I?
               Site
     What...   Page
               Section


Where have I been?

Where can I go?
NAVIGATION

HOW
Where am I?



   ?
               Site
     What...   Page
               Section


Where have I been?

Where can I go?
Navigation - HOW?
    Site ID on all pages        Link name = Page title

    Page title                  Indicate site section

        on page

        on browser tab:

1. favicon + Site name          Breadcrumb trail:
                                Home > Cookies > Chocolate
2. favicon + Site name + Page
   title

3. favicon + Page title
Also consider... (not discussed in class)
          Navbar                   vs.       Tag cloud

  Top-down organization                  Bottom-up organization
  (taxonomy)                             (folksonomy)

  Pre-determined                         Categories emerge
  categories (card-                      organically from
  sorting; designer; info                repeated tag use
  architecture is planned
  ahead)
Are tag clouds the future of                                  Web 2.0
navigation?                                                  navigation?

Which one has better usability?

Should you provide alternative ways of
organizing and accessing information?

More Related Content

Viewers also liked

Scientists Encode First Women Genome
Scientists Encode First Women GenomeScientists Encode First Women Genome
Scientists Encode First Women GenomeSbeauchemin
 
Photography Slide Show
Photography Slide ShowPhotography Slide Show
Photography Slide Showtktrask
 
Social Business Advantage
Social Business AdvantageSocial Business Advantage
Social Business AdvantageLithium
 
causos da linha de frente - #rsonrails 2011
causos da linha de frente - #rsonrails 2011causos da linha de frente - #rsonrails 2011
causos da linha de frente - #rsonrails 2011bzanchet
 
Healthy Body Life
Healthy Body LifeHealthy Body Life
Healthy Body Lifecli0005
 
Mcf Academy Book Low Rez
Mcf Academy Book Low RezMcf Academy Book Low Rez
Mcf Academy Book Low Rezgiannafarina
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocessDr. V Vorvoreanu
 
Scientists Encode First Women Genome
Scientists Encode First Women GenomeScientists Encode First Women Genome
Scientists Encode First Women GenomeSbeauchemin
 

Viewers also liked (20)

personas task analysis
personas task analysispersonas task analysis
personas task analysis
 
Module 6
Module 6Module 6
Module 6
 
Scientists Encode First Women Genome
Scientists Encode First Women GenomeScientists Encode First Women Genome
Scientists Encode First Women Genome
 
Managing onlineidentity
Managing onlineidentityManaging onlineidentity
Managing onlineidentity
 
Reporting
ReportingReporting
Reporting
 
Procurement
ProcurementProcurement
Procurement
 
Photography Slide Show
Photography Slide ShowPhotography Slide Show
Photography Slide Show
 
Social Business Advantage
Social Business AdvantageSocial Business Advantage
Social Business Advantage
 
Slides tech621
Slides tech621Slides tech621
Slides tech621
 
User research
User researchUser research
User research
 
causos da linha de frente - #rsonrails 2011
causos da linha de frente - #rsonrails 2011causos da linha de frente - #rsonrails 2011
causos da linha de frente - #rsonrails 2011
 
15 metaphor typography
15 metaphor typography15 metaphor typography
15 metaphor typography
 
Healthy Body Life
Healthy Body LifeHealthy Body Life
Healthy Body Life
 
Mcf Academy Book Low Rez
Mcf Academy Book Low RezMcf Academy Book Low Rez
Mcf Academy Book Low Rez
 
06 perception memory
06 perception memory06 perception memory
06 perception memory
 
03 usability def designprocess
03 usability def designprocess03 usability def designprocess
03 usability def designprocess
 
Ms in cgt very short
Ms in cgt very shortMs in cgt very short
Ms in cgt very short
 
Personas scenarios
Personas scenariosPersonas scenarios
Personas scenarios
 
11 info architecture
11 info architecture11 info architecture
11 info architecture
 
Scientists Encode First Women Genome
Scientists Encode First Women GenomeScientists Encode First Women Genome
Scientists Encode First Women Genome
 

More from Dr. V Vorvoreanu

DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDr. V Vorvoreanu
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordanceDr. V Vorvoreanu
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationDr. V Vorvoreanu
 
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX introDr. V Vorvoreanu
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recallDr. V Vorvoreanu
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesDr. V Vorvoreanu
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overviewDr. V Vorvoreanu
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction designDr. V Vorvoreanu
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypesDr. V Vorvoreanu
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recallDr. V Vorvoreanu
 

More from Dr. V Vorvoreanu (20)

Dia2 tues persona
Dia2 tues persona Dia2 tues persona
Dia2 tues persona
 
Dia2 sketches
Dia2 sketchesDia2 sketches
Dia2 sketches
 
DIA2 Design requirements presentation personas
DIA2 Design requirements presentation personasDIA2 Design requirements presentation personas
DIA2 Design requirements presentation personas
 
gestalt principles cats
gestalt principles catsgestalt principles cats
gestalt principles cats
 
07 principles 1 affordance
07 principles 1 affordance07 principles 1 affordance
07 principles 1 affordance
 
HCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentationHCDD for ASEE 2015 presentation
HCDD for ASEE 2015 presentation
 
Controls
ControlsControls
Controls
 
Responsive design UX intro
Responsive design UX introResponsive design UX intro
Responsive design UX intro
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
 
03 bad usability kills
03 bad usability kills03 bad usability kills
03 bad usability kills
 
Information architecture
Information architectureInformation architecture
Information architecture
 
UX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypesUX Conceptual design - sketches, wireframes, mockups, prototypes
UX Conceptual design - sketches, wireframes, mockups, prototypes
 
Cgt 256 course review
Cgt 256 course reviewCgt 256 course review
Cgt 256 course review
 
Cross channel ux
Cross channel uxCross channel ux
Cross channel ux
 
UX user-centered design process overview
UX user-centered design process overviewUX user-centered design process overview
UX user-centered design process overview
 
26 social interaction design
26 social interaction design26 social interaction design
26 social interaction design
 
Purdue MS degree CGT
Purdue MS degree CGTPurdue MS degree CGT
Purdue MS degree CGT
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypes
 
11 info architecture-2014
11 info architecture-201411 info architecture-2014
11 info architecture-2014
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
 

Recently uploaded

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 

Recently uploaded (20)

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 

navigation

  • 3. Most difficult NO... • Sense of scale • Sense of direction • Sense of location
  • 4. Dis orie difficult Most nte d NO... Confused • Sense of scale trat ed of direction • Sense s • Sense of location
  • 5. Most difficult NO... Conf used Dis of scale Sense • orie nte Sense of direction • d at ed Sense of location • tr F ru s
  • 6. NAVIGATION Where am I? Where have I been? Where can I go?
  • 7. NAVIGATION Where am I? Site What... Page Section Where have I been? Where can I go?
  • 8. NAVIGATION Where am I? Site What... Page Section Where have I been? Where can I go?
  • 9. NAVIGATION HOW Where am I? ? Site What... Page Section Where have I been? Where can I go?
  • 10. Navigation - HOW? Site ID on all pages Link name = Page title Page title Indicate site section on page on browser tab: 1. favicon + Site name Breadcrumb trail: Home > Cookies > Chocolate 2. favicon + Site name + Page title 3. favicon + Page title
  • 11. Also consider... (not discussed in class) Navbar vs. Tag cloud Top-down organization Bottom-up organization (taxonomy) (folksonomy) Pre-determined Categories emerge categories (card- organically from sorting; designer; info repeated tag use architecture is planned ahead) Are tag clouds the future of Web 2.0 navigation? navigation? Which one has better usability? Should you provide alternative ways of organizing and accessing information?

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n