SlideShare a Scribd company logo
Basic Web
Navigation
Navigation:
Getting the user from A to
(where you want them to) B.
Role of navigation…   For users:
                      1. Find stuff they want

                      2. Get an overview of what’s
                         on the site

                      3. See where they are

                      4. See where they can go


                      For site owners:
                      1. Drive people to action points

                      2. Cross-sell services or highlight
                         additional information

                      3. Show what is/isn’t available

                      4. 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)
The Structural-Browser Model
• The Family-Tree model

• Creates a clear hierarchy of content

• Collection of links advance the user to other pages
Horizontal Navigation
Horizontal Navigation

     • Conserves the most amount of     • Location most familiar for users,
       screen space                       we read left to right

     • Makes for using drop downs for   • Does have a limit in terms of
       secondary navigation               length of navigation item
Horizontal Navigation
Vertical Navigation
Vertical Navigation



  • Good for sites with a lot of
    main navigation items

  • Supports multiple types of
    secondary navigation

  • Can act as a page design
    element

  • Normally takes up more space
    then horizontal navigation
Vertical Navigation
Secondary Navigation
Secondary Navigation

    • Common location for displaying     • Don’t rely on more then 2 levels
      B-level pages                        of pop-out/drop down menus

    • Moves out of the way when not      • Design enough contrast with the
      active to conserver screen space     information below so the user
                                           can clearly read the text
Utility Navigation
Utility Navigation

  • Assistant pages                      • Shopping Cart/User login info

  • Pages that don’t fit into a single   • Pages that you want displayed on
    logical category                       every page

  • Location/Language selectors
Footer Links
Footer Links

  • Provides a place for important
    information away from other content

  • Acts as a visual “End” to your page

  • Allows users to access pages without
    scrolling back to the top

  • Can be styled as multiple columns
Breadcrumb Trails
Breadcrumb Trails


   • Convenient for users                  • Don’t use when you don’t need to

   • Reduces clicks to return to higher-   • Don’t use as primary navigation
     level pages
                                           • Don’t use when pages have multiple
   • Doesn’t usually hog screen space        categories
Search Boxes
Search Boxes



  • Not every website needs a search box

  • The box must be clearly visible, quickly
    recognizable and easy to use

  • A search box should be a box.

  • A search box should be simple

  • Don’t make the input field too short

  • Don’t making the submit button
    too small
Pagination Navigation
Pagination Navigation



  • Provide large clickable areas

  • Identify the current page

  • Space out page links

  • Provide Previous and Next links

  • Use First and Last links

  • Put First and Last links on the outside

  • Give the user a sense of volume
The Golden     1. Don’t make the user think
Rules of Web
Navigation.
The Golden     1. Don’t make the user think
Rules of Web   2. Don’t test user patience
Navigation.
The Golden     1. Don’t make the user think
Rules of Web   2. Don’t test user patience
Navigation.    3. Focus their attention
The Golden     1. Don’t make the user think
Rules of Web   2. Don’t test user patience
Navigation.    3. Focus their attention
               4. Organize your content
The Golden     1. Don’t make the user think
Rules of Web   2. Don’t test user patience
Navigation.    3. Focus their attention
               4. Organize your content
               5. Use natural descriptions
The Golden     1. Don’t make the user think
Rules of Web   2. Don’t test user patience
Navigation.    3. Focus their attention
               4. Organize your content
               5. Use natural descriptions
               6. Strive for Simplicity
The Golden     1. Don’t make the user think
Rules of Web   2. Don’t test user patience
Navigation.    3. Focus their attention
               4. Organize your content
               5. Use natural descriptions
               6. Strive for Simplicity
               7. Embrace whitespace
The Golden     1. Don’t make the user think
Rules of Web   2. Don’t test user patience
Navigation.    3. Focus their attention
               4. Organize your content
               5. Use natural descriptions
               6. Strive for simplicity
               7. Embrace whitespace
               8. Don’t assume

More Related Content

PPTX
4.-Context-and-Texts-Meaning.pptx
PPTX
Ang mga katangian ng pagpapakatao
PDF
Graphic Designing Presentation (Tips & Tricks)
PPTX
What is Parallelism?
PPTX
Chapter 3 : Perpetuation of Life
PPSX
Digital Marketing Overview
PPTX
Comparative Analysis of Theravada and Mahayana Buddhism.pptx
PPTX
Internet
4.-Context-and-Texts-Meaning.pptx
Ang mga katangian ng pagpapakatao
Graphic Designing Presentation (Tips & Tricks)
What is Parallelism?
Chapter 3 : Perpetuation of Life
Digital Marketing Overview
Comparative Analysis of Theravada and Mahayana Buddhism.pptx
Internet

What's hot (20)

PDF
Effective web navigation
PPTX
Web Design Principle and Elements
PPTX
Contextualized Online Search and Research Skills
PPTX
Web design principles
PDF
Productivity tools
PPTX
ICT as Platform for Change - Empowerment Technologies
PDF
Empowerment Technologies - Module 3
PPTX
Online Safety, Security, Ethics and Netiquette.pptx
PPTX
Internet Threats
PPTX
Empowerment technologies byShyna Gane Daleon and Galasao
PPTX
Online Search and Research Skills - Empowerment Technologies
PPTX
[EMPOWERMENT TECHNOLOGIES]-ADVANCED PRESENTATION SKILLS
PPTX
Contextualized Online Search and Research Skills.pptx
PDF
[EMPOWERMENT TECHNOLOGIES]-MULTIMEDIA AND ICT
PPTX
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
PPTX
Basic Principles Of Graphics and Layout
PPTX
Online Systems, Functions, and Platforms
DOCX
Media and Information Literacy (MIL) Performance Task - Video Project (Cooper...
PPTX
[EMPOWERMENT TECHNOLOGIES] - ADVANCED WORD PROCESSING SKILLS
PPTX
Types of Web Browser
Effective web navigation
Web Design Principle and Elements
Contextualized Online Search and Research Skills
Web design principles
Productivity tools
ICT as Platform for Change - Empowerment Technologies
Empowerment Technologies - Module 3
Online Safety, Security, Ethics and Netiquette.pptx
Internet Threats
Empowerment technologies byShyna Gane Daleon and Galasao
Online Search and Research Skills - Empowerment Technologies
[EMPOWERMENT TECHNOLOGIES]-ADVANCED PRESENTATION SKILLS
Contextualized Online Search and Research Skills.pptx
[EMPOWERMENT TECHNOLOGIES]-MULTIMEDIA AND ICT
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
Basic Principles Of Graphics and Layout
Online Systems, Functions, and Platforms
Media and Information Literacy (MIL) Performance Task - Video Project (Cooper...
[EMPOWERMENT TECHNOLOGIES] - ADVANCED WORD PROCESSING SKILLS
Types of Web Browser
Ad

Viewers also liked (20)

PDF
The 7 Navigation Types of Web Site
PPT
Navigation Systems
PPT
Navigating Web 2.0 Ppt
PPTX
Website Navigation Systems
PPTX
2.2.2.3 Web Page Navigation
PDF
Navigation design alternatives for websites
PPTX
Navigation System
PPT
Navigating powerpoint
PPTX
imortance of w3c validation
PPTX
Databind in asp.net
PPT
Website Tutorial A Beginner%Ef%Bf%Bds Guide To Website Navigation
PPT
DéCouverte GéNéRale De Microsoft Office Share Point Server 2007
PPT
Surrey-Website-Navigation_FINAL
PPSX
Improving website navigation
PDF
Web Site Navigation and Usability
PDF
2.4 and 2.5 types of websites & netiquette
PPTX
Evolution Of The Sitemap
PPTX
Cognitive analysis of web site navigation
PDF
La publication scientifiques diaporama CM 2016
PPT
The 7 Navigation Types of Web Site
Navigation Systems
Navigating Web 2.0 Ppt
Website Navigation Systems
2.2.2.3 Web Page Navigation
Navigation design alternatives for websites
Navigation System
Navigating powerpoint
imortance of w3c validation
Databind in asp.net
Website Tutorial A Beginner%Ef%Bf%Bds Guide To Website Navigation
DéCouverte GéNéRale De Microsoft Office Share Point Server 2007
Surrey-Website-Navigation_FINAL
Improving website navigation
Web Site Navigation and Usability
2.4 and 2.5 types of websites & netiquette
Evolution Of The Sitemap
Cognitive analysis of web site navigation
La publication scientifiques diaporama CM 2016
Ad

Similar to Web Navigation Presentation (20)

PPTX
MODULE 3- WEEK 3- EMP.pptx
PDF
Medicine Hat 2010 - Websites 101
PDF
Grande Prairie-Fort McMurray 2010 - MyCharityConnects On the Road
PDF
Website Architecture Presentation from Web Strategy Workshops
PDF
Directions - Council for Vocational Services Society - Halifax [2010-10-07]
PDF
Community Sector Provincial Forum - St. John's [2010-10-01]
PPTX
Interface Design
PDF
Navigation to the rescue!
PPTX
Are Mega Menus Really Heroic?
PPTX
The Do's and Don'ts of Effective Websites
PDF
Are Mega Menus Really Heroic? 20160317
PDF
Redesigning a Website Using Information Architecture Principals
PPTX
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...
PPT
Csun 2013 wcag what about the users-slideshare-2013
PDF
Website Usability
PPTX
Design Like a Pro: Building Better HMI Navigation Schemes
PPTX
Design Like a Pro: Building Better HMI Navigation Schemes
PPTX
Making social media work, building on line community
PDF
Web Usability July 2011
PPTX
UNIT-III menuspresentation in HCI types of menus.pptx
MODULE 3- WEEK 3- EMP.pptx
Medicine Hat 2010 - Websites 101
Grande Prairie-Fort McMurray 2010 - MyCharityConnects On the Road
Website Architecture Presentation from Web Strategy Workshops
Directions - Council for Vocational Services Society - Halifax [2010-10-07]
Community Sector Provincial Forum - St. John's [2010-10-01]
Interface Design
Navigation to the rescue!
Are Mega Menus Really Heroic?
The Do's and Don'ts of Effective Websites
Are Mega Menus Really Heroic? 20160317
Redesigning a Website Using Information Architecture Principals
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...
Csun 2013 wcag what about the users-slideshare-2013
Website Usability
Design Like a Pro: Building Better HMI Navigation Schemes
Design Like a Pro: Building Better HMI Navigation Schemes
Making social media work, building on line community
Web Usability July 2011
UNIT-III menuspresentation in HCI types of menus.pptx

Recently uploaded (20)

PPTX
Acoustics new for. Sound insulation and absorber
PDF
intro_to_rust.pptx_123456789012446789.pdf
PPTX
Special finishes, classification and types, explanation
PDF
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PDF
Urban Design Final Project-Context
PPTX
Evolution_of_Computing_Presentation (1).pptx
PPTX
2. Competency Based Interviewing - September'16.pptx
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PPTX
NEW EIA PART B - Group 5 (Section 50).pptx
PPTX
EDP Competencies-types, process, explanation
PDF
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PDF
GSH-Vicky1-Complete-Plans on Housing.pdf
PPTX
Orthtotics presentation regarding physcial therapy
PPTX
rapid fire quiz in your house is your india.pptx
PPTX
HPE Aruba-master-icon-library_052722.pptx
PDF
Interior Structure and Construction A1 NGYANQI
PDF
Pongal 2026 Sponsorship Presentation - Bhopal Tamil Sangam
Acoustics new for. Sound insulation and absorber
intro_to_rust.pptx_123456789012446789.pdf
Special finishes, classification and types, explanation
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
Urban Design Final Project-Context
Evolution_of_Computing_Presentation (1).pptx
2. Competency Based Interviewing - September'16.pptx
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
NEW EIA PART B - Group 5 (Section 50).pptx
EDP Competencies-types, process, explanation
Key Trends in Website Development 2025 | B3AITS - Bow & 3 Arrows IT Solutions
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
GSH-Vicky1-Complete-Plans on Housing.pdf
Orthtotics presentation regarding physcial therapy
rapid fire quiz in your house is your india.pptx
HPE Aruba-master-icon-library_052722.pptx
Interior Structure and Construction A1 NGYANQI
Pongal 2026 Sponsorship Presentation - Bhopal Tamil Sangam

Web Navigation Presentation

  • 2. Navigation: Getting the user from A to (where you want them to) B.
  • 3. Role of navigation… For users: 1. Find stuff they want 2. Get an overview of what’s on the site 3. See where they are 4. See where they can go For site owners: 1. Drive people to action points 2. Cross-sell services or highlight additional information 3. Show what is/isn’t available 4. Be found on Google
  • 4. 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)
  • 5. The Structural-Browser Model • The Family-Tree model • Creates a clear hierarchy of content • Collection of links advance the user to other pages
  • 7. Horizontal Navigation • Conserves the most amount of • Location most familiar for users, screen space we read left to right • Makes for using drop downs for • Does have a limit in terms of secondary navigation length of navigation item
  • 10. Vertical Navigation • Good for sites with a lot of main navigation items • Supports multiple types of secondary navigation • Can act as a page design element • Normally takes up more space then horizontal navigation
  • 13. Secondary Navigation • Common location for displaying • Don’t rely on more then 2 levels B-level pages of pop-out/drop down menus • Moves out of the way when not • Design enough contrast with the active to conserver screen space information below so the user can clearly read the text
  • 15. Utility Navigation • Assistant pages • Shopping Cart/User login info • Pages that don’t fit into a single • Pages that you want displayed on logical category every page • Location/Language selectors
  • 17. Footer Links • Provides a place for important information away from other content • Acts as a visual “End” to your page • Allows users to access pages without scrolling back to the top • Can be styled as multiple columns
  • 19. Breadcrumb Trails • Convenient for users • Don’t use when you don’t need to • Reduces clicks to return to higher- • Don’t use as primary navigation level pages • Don’t use when pages have multiple • Doesn’t usually hog screen space categories
  • 21. Search Boxes • Not every website needs a search box • The box must be clearly visible, quickly recognizable and easy to use • A search box should be a box. • A search box should be simple • Don’t make the input field too short • Don’t making the submit button too small
  • 23. Pagination Navigation • Provide large clickable areas • Identify the current page • Space out page links • Provide Previous and Next links • Use First and Last links • Put First and Last links on the outside • Give the user a sense of volume
  • 24. The Golden 1. Don’t make the user think Rules of Web Navigation.
  • 25. The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation.
  • 26. The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention
  • 27. The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content
  • 28. The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions
  • 29. The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for Simplicity
  • 30. The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for Simplicity 7. Embrace whitespace
  • 31. The Golden 1. Don’t make the user think Rules of Web 2. Don’t test user patience Navigation. 3. Focus their attention 4. Organize your content 5. Use natural descriptions 6. Strive for simplicity 7. Embrace whitespace 8. Don’t assume