SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
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

Más contenido relacionado

Similar a 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 a 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
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
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...
 
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
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
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
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 

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