SlideShare a Scribd company logo
1 of 21
Download to read offline
Navigation & Menus
Natalie Miller
You
Are
Here
What is Navigation?
Navigation should (minimum) answer these
fundamental questions:
- Where am I?
- Where can I go?
- Where have I been?
What is Navigation (formal)
- The theory and practice of how people move
from page to page.
- The process of goal-directed seeking and locating
hyperlinked information; browsing.
- All of the links, labels, and other elements that provide
access to pages and help people orient themselves while
interacting with a given interface (Kalbach).
- Web navigation refers to the process of navigating a
network of web resources, and the user interface that is
used to do so. A central theme in web design is the
development of a web navigation interface that maximizes
usability (Wikipedia).
Why care about Navigation?
- Reflects Brand
- Affects Credibility
- Opportunity to Engage Visitors (Positively!)
- Impact Sales (or other metrics)
- Current business
- Potential customers
- Potential partnerships/opportunities
- Can increase opportunities to cross-sell
and upsell
- Entice users to click: associative learning
Menus
- A list of commands or options from which you
can choose.
- Designers attempt to concretely explain which
options are available and what the visitor
should expect from site sections once clicking
on corresponding links.
- Responsive menus: navigation menus whose
presentation or behavior is altered on different
devices and screen widths.
Types of Embedded Navigation
Global | Local | Contextual
Global and Local act as a container
for the content of the site
Types of Embedded Navigation (cont.)
Global
- Most consistent navigational element
- Has a high impact on usability and should be
scrutinized and tested the most
Local
- Area specific navigation, or subsites
Contextual
- Embedded within text
- Facilitates associative learning by exploring
relationships
- Great for cross-selling, up-selling, & customer value
Global Navigation
Local Navigation
Contextual Navigation
Types of Supplemental Navigation
Indexes
- Similar to book indexes (generally alphabetical)
Site Maps
- Insight into site hierarchy (generally a top down
approach)
Guides
- Tours and tutorials
Breadcrumbs
- Parent > Child relationships
Search
Indexes
Site Maps
Guides
Breadcrumbs
Search
Advanced Navigation
Social Navigation - Based on user data, such
as "frequently bought together" or "by rating"
Advanced Navigation (cont)
Visualization - Tag Clouds, Nodes
Advanced Navigation (cont)
Personalization - Learns and predicts what a user will
be interested in (Amazon, netflix) - Personalized topics
QUESTIONS???
Works Referenced
Dunn, Zach. Principles of Effective Web Navigation. Retrieved from: http:
//buildinternet.com/2009/09/principles-of-effective-web-navigation/ Retrieved
on: Febuary 13, 2013.
Kalbach, James (2007). Designing Web Navigation. Retrieved from UT online
library: http://utexas.summon.serialssolutions.com/search?s.
q=web+navigation&keep_r=true
Moreville, Peter & Rosenfeld, Louis. Information Architecture for the World
Wide Web. Cambridge, MA: 2007.
Unknown. Web Navigation. Retrieved from: http://en.wikipedia.org/wiki/
Web_navigation. Retrieved on: Febuary 12, 2013.
Images thanks to: REI, Netflix, Fast Company, US Food and Drug Admin, ebay

More Related Content

Similar to Navigation and menus

Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Richard Harbridge
 
Usability review
Usability reviewUsability review
Usability review
sayedshiban
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
Olivier Tripet
 
The Psychology of Good Web Design
The Psychology of Good Web DesignThe Psychology of Good Web Design
The Psychology of Good Web Design
olindgallet
 
Agrilinks website phase_ii
Agrilinks website phase_iiAgrilinks website phase_ii
Agrilinks website phase_ii
Patchanan Owen
 

Similar to Navigation and menus (20)

Building Navigation with UX in Mind
Building Navigation with UX in MindBuilding Navigation with UX in Mind
Building Navigation with UX in Mind
 
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital WorkplaceTop 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
Top 7 Ways To Improve Teams And SharePoint Navigation In Your Digital Workplace
 
Strategic_Web_Design-TestingYourVisualStory
Strategic_Web_Design-TestingYourVisualStoryStrategic_Web_Design-TestingYourVisualStory
Strategic_Web_Design-TestingYourVisualStory
 
Usability review
Usability reviewUsability review
Usability review
 
My presentation at Kent State IAKM
My presentation at Kent State IAKMMy presentation at Kent State IAKM
My presentation at Kent State IAKM
 
Website
WebsiteWebsite
Website
 
Re-design
Re-designRe-design
Re-design
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website Redesign
 
WSI UI Recommendations
WSI UI RecommendationsWSI UI Recommendations
WSI UI Recommendations
 
Strategic_Web_Design-AudienceAnalysis
Strategic_Web_Design-AudienceAnalysisStrategic_Web_Design-AudienceAnalysis
Strategic_Web_Design-AudienceAnalysis
 
West
WestWest
West
 
The Psychology of Good Web Design
The Psychology of Good Web DesignThe Psychology of Good Web Design
The Psychology of Good Web Design
 
[DevDay 2017] Using analytics, focusing on SEO and unability - Keys to develo...
[DevDay 2017] Using analytics, focusing on SEO and unability - Keys to develo...[DevDay 2017] Using analytics, focusing on SEO and unability - Keys to develo...
[DevDay 2017] Using analytics, focusing on SEO and unability - Keys to develo...
 
Website analysis basic tools and illustration
Website analysis basic tools and illustrationWebsite analysis basic tools and illustration
Website analysis basic tools and illustration
 
Fact Based Web Management 12 01 10
Fact Based Web Management 12 01 10Fact Based Web Management 12 01 10
Fact Based Web Management 12 01 10
 
Applying information architecture to university web sites
Applying information architecture to university web sitesApplying information architecture to university web sites
Applying information architecture to university web sites
 
Agrilinks website phase_ii
Agrilinks website phase_iiAgrilinks website phase_ii
Agrilinks website phase_ii
 
Navigation by sector
Navigation by sectorNavigation by sector
Navigation by sector
 
Information Architecture in Real Life - Part II
Information Architecture in Real Life - Part IIInformation Architecture in Real Life - Part II
Information Architecture in Real Life - Part II
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

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
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
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
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 

Navigation and menus

  • 1. Navigation & Menus Natalie Miller You Are Here
  • 2. What is Navigation? Navigation should (minimum) answer these fundamental questions: - Where am I? - Where can I go? - Where have I been?
  • 3. What is Navigation (formal) - The theory and practice of how people move from page to page. - The process of goal-directed seeking and locating hyperlinked information; browsing. - All of the links, labels, and other elements that provide access to pages and help people orient themselves while interacting with a given interface (Kalbach). - Web navigation refers to the process of navigating a network of web resources, and the user interface that is used to do so. A central theme in web design is the development of a web navigation interface that maximizes usability (Wikipedia).
  • 4. Why care about Navigation? - Reflects Brand - Affects Credibility - Opportunity to Engage Visitors (Positively!) - Impact Sales (or other metrics) - Current business - Potential customers - Potential partnerships/opportunities - Can increase opportunities to cross-sell and upsell - Entice users to click: associative learning
  • 5. Menus - A list of commands or options from which you can choose. - Designers attempt to concretely explain which options are available and what the visitor should expect from site sections once clicking on corresponding links. - Responsive menus: navigation menus whose presentation or behavior is altered on different devices and screen widths.
  • 6. Types of Embedded Navigation Global | Local | Contextual Global and Local act as a container for the content of the site
  • 7. Types of Embedded Navigation (cont.) Global - Most consistent navigational element - Has a high impact on usability and should be scrutinized and tested the most Local - Area specific navigation, or subsites Contextual - Embedded within text - Facilitates associative learning by exploring relationships - Great for cross-selling, up-selling, & customer value
  • 11. Types of Supplemental Navigation Indexes - Similar to book indexes (generally alphabetical) Site Maps - Insight into site hierarchy (generally a top down approach) Guides - Tours and tutorials Breadcrumbs - Parent > Child relationships Search
  • 17. Advanced Navigation Social Navigation - Based on user data, such as "frequently bought together" or "by rating"
  • 19. Advanced Navigation (cont) Personalization - Learns and predicts what a user will be interested in (Amazon, netflix) - Personalized topics
  • 21. Works Referenced Dunn, Zach. Principles of Effective Web Navigation. Retrieved from: http: //buildinternet.com/2009/09/principles-of-effective-web-navigation/ Retrieved on: Febuary 13, 2013. Kalbach, James (2007). Designing Web Navigation. Retrieved from UT online library: http://utexas.summon.serialssolutions.com/search?s. q=web+navigation&keep_r=true Moreville, Peter & Rosenfeld, Louis. Information Architecture for the World Wide Web. Cambridge, MA: 2007. Unknown. Web Navigation. Retrieved from: http://en.wikipedia.org/wiki/ Web_navigation. Retrieved on: Febuary 12, 2013. Images thanks to: REI, Netflix, Fast Company, US Food and Drug Admin, ebay