SlideShare a Scribd company logo
1 of 16
Designing navigation
S.Gopinath
Department of Physical Science
Vavuniya Campus,
University of Jaffna,
Sri Lanka
• People won’t use your Web site if they can’t
find their way around it.
S.Gopinath 2
S.Gopinath 3
When you enter a Web site
• You’re usually trying to find something.
• You decide whether to ask first or browse
first.
– “search-dominant” users
– “link-dominant” users
S.Gopinath 4
S.Gopinath 5
Oddities of Web space
• No sense of scale
– Even after we’ve used a Web site extensively,
unless it’s a very small site we tend to have very
little sense of how big it is.
• No sense of direction.
– In a Web site, there’s no left and right, no up and
down. We may talk about moving up and down
S.Gopinath 6
• No sense of location.
– In physical spaces, as we move around we
accumulate knowledge about the space.
S.Gopinath 7
Purposes of navigation
• It tells us what’s here.
• It tells us how to use the site.
• It gives us confidence in the people who built
it.
S.Gopinath 8
Web navigation conventions
• The conventions specify the appearance and
location of the navigation elements so we
know what to look for and where to look
when we need them.
• Putting them in a standard place lets us locate
them quickly, with a minimum of effort;
standardizing their appearance makes it easy
to distinguish them from everything else.
S.Gopinath 9
S.Gopinath 10
Persistent navigation
S.Gopinath 11
The Site ID
S.Gopinath 12
• There are two ways to get this primacy across
in the visual hierarchy of the page:
– either make it the most prominent thing on the
page
– make it frame everything else.
S.Gopinath 13
The Sections
S.Gopinath 14
The Utilities
• Utilities are the links to important elements of
the site that aren’t really part of the content
hierarchy.
• These are things that either can help me use the
site (like Sign in/Register, Help, a Site Map, or a
Shopping Cart) or provide information about its
publisher (like About Us and Contact Us).
• Utilities list should be slightly less prominent than
the Sections.
S.Gopinath 15
Utilities will vary for different types of
sites.
About Us
Archives
Checkout
Company Info
Contact Us
Customer Service
Discussion Boards
Downloads
Directory
Forums
FAQs
Help
Home
Investor Relations
How to Shop
Jobs
My _______
News
Order Tracking
Press Releases
Privacy Policy
Register
Search
Shopping Cart
Sign in
Site Map
Store Locator
Your Account
“As a rule, the persistent navigation can accommodate only four or five
Utilities—the ones users are likely to need most often.”
S.Gopinath 16

More Related Content

Similar to Designing navigation

Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxGurzu Inc
 
What Public Library Users Want and How to
What Public Library Users Want and How to What Public Library Users Want and How to
What Public Library Users Want and How to Nina McHale
 
13 Things Your Nonprofit Website
13 Things Your Nonprofit Website 13 Things Your Nonprofit Website
13 Things Your Nonprofit Website Abila
 
Slide traffic review3
Slide traffic review3Slide traffic review3
Slide traffic review3Jack boby
 
Navigation in Responsive Design
Navigation in Responsive DesignNavigation in Responsive Design
Navigation in Responsive Designopenchamp
 
MODULE 3- WEEK 3- EMP.pptx
MODULE 3- WEEK 3- EMP.pptxMODULE 3- WEEK 3- EMP.pptx
MODULE 3- WEEK 3- EMP.pptxFrenzDelaCruz2
 
Homepage Design Critique
Homepage Design Critique Homepage Design Critique
Homepage Design Critique Personal
 
5 simple steps to map your visitor journey and optimise your website for conv...
5 simple steps to map your visitor journey and optimise your website for conv...5 simple steps to map your visitor journey and optimise your website for conv...
5 simple steps to map your visitor journey and optimise your website for conv...Lisa Jansen
 
Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbaiCss Founder
 
Advanced MultiMedia
Advanced MultiMediaAdvanced MultiMedia
Advanced MultiMediaBrandon Boyd
 
Effective Web Presence - That works for your business
Effective Web Presence - That works for your businessEffective Web Presence - That works for your business
Effective Web Presence - That works for your businessSiddharth Deshmukh
 
Game-Changing Audience Research Techniques
Game-Changing Audience Research TechniquesGame-Changing Audience Research Techniques
Game-Changing Audience Research TechniquesBlackbaud
 
MeasureFest talk - Eden Bidani.pdf
MeasureFest talk - Eden Bidani.pdfMeasureFest talk - Eden Bidani.pdf
MeasureFest talk - Eden Bidani.pdfEdenBidani1
 
Web development chandigarh
Web development chandigarhWeb development chandigarh
Web development chandigarh49 Webstreet
 

Similar to Designing navigation (20)

Web Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptxWeb Accessibility & It's Guidelines.pptx
Web Accessibility & It's Guidelines.pptx
 
What Public Library Users Want and How to
What Public Library Users Want and How to What Public Library Users Want and How to
What Public Library Users Want and How to
 
13 Things Your Nonprofit Website
13 Things Your Nonprofit Website 13 Things Your Nonprofit Website
13 Things Your Nonprofit Website
 
Slide traffic review3
Slide traffic review3Slide traffic review3
Slide traffic review3
 
Navigation in Responsive Design
Navigation in Responsive DesignNavigation in Responsive Design
Navigation in Responsive Design
 
MODULE 3- WEEK 3- EMP.pptx
MODULE 3- WEEK 3- EMP.pptxMODULE 3- WEEK 3- EMP.pptx
MODULE 3- WEEK 3- EMP.pptx
 
Homepage Design Critique
Homepage Design Critique Homepage Design Critique
Homepage Design Critique
 
Web Site Design,
Web Site Design,Web Site Design,
Web Site Design,
 
5 simple steps to map your visitor journey and optimise your website for conv...
5 simple steps to map your visitor journey and optimise your website for conv...5 simple steps to map your visitor journey and optimise your website for conv...
5 simple steps to map your visitor journey and optimise your website for conv...
 
Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbai
 
Web site design
Web site designWeb site design
Web site design
 
Auditing Your Website for Usability Issues
Auditing Your Website for Usability IssuesAuditing Your Website for Usability Issues
Auditing Your Website for Usability Issues
 
Advanced MultiMedia
Advanced MultiMediaAdvanced MultiMedia
Advanced MultiMedia
 
Effective Web Presence - That works for your business
Effective Web Presence - That works for your businessEffective Web Presence - That works for your business
Effective Web Presence - That works for your business
 
Homepage
HomepageHomepage
Homepage
 
Game-Changing Audience Research Techniques
Game-Changing Audience Research TechniquesGame-Changing Audience Research Techniques
Game-Changing Audience Research Techniques
 
Make it easy
Make it easyMake it easy
Make it easy
 
Website world
Website worldWebsite world
Website world
 
MeasureFest talk - Eden Bidani.pdf
MeasureFest talk - Eden Bidani.pdfMeasureFest talk - Eden Bidani.pdf
MeasureFest talk - Eden Bidani.pdf
 
Web development chandigarh
Web development chandigarhWeb development chandigarh
Web development chandigarh
 

More from University of Jaffna, vavuniya campus (9)

Using list and tables
Using list and tablesUsing list and tables
Using list and tables
 
Design for easy use
Design for easy useDesign for easy use
Design for easy use
 
Information architecture
Information architectureInformation architecture
Information architecture
 
How we really use the web
How we really use the webHow we really use the web
How we really use the web
 
Create effective visual hierarchies
Create effective visual hierarchiesCreate effective visual hierarchies
Create effective visual hierarchies
 
Rules of usability
Rules of usabilityRules of usability
Rules of usability
 
SAMS: An IoT Solution for Attendance Management in Universities
SAMS: An IoT Solution for Attendance Management in UniversitiesSAMS: An IoT Solution for Attendance Management in Universities
SAMS: An IoT Solution for Attendance Management in Universities
 
Microkernels
MicrokernelsMicrokernels
Microkernels
 
Digital psychiatry
Digital psychiatryDigital psychiatry
Digital psychiatry
 

Recently uploaded

Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpKindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpmainac1
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130Suhani Kapoor
 
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...Suhani Kapoor
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Servicejennyeacort
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Douxkojalkojal131
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
A level Digipak development Presentation
A level Digipak development PresentationA level Digipak development Presentation
A level Digipak development Presentationamedia6
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0
 
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Narsimha murthy
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...
Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...
Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...ankitnayak356677
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiSuhani Kapoor
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Sitegalleryaagency
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsCharles Obaleagbon
 
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service BhiwandiVIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service BhiwandiSuhani Kapoor
 

Recently uploaded (20)

Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpKindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUp
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
 
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts ServiceCall Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
A level Digipak development Presentation
A level Digipak development PresentationA level Digipak development Presentation
A level Digipak development Presentation
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...
Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...
Raj Nagar Extension Call Girls 9711199012 WhatsApp No, Delhi Escorts in Raj N...
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service AmravatiVIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
VIP Call Girl Amravati Aashi 8250192130 Independent Escort Service Amravati
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past Questions
 
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service BhiwandiVIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
VIP Call Girls Bhiwandi Ananya 8250192130 Independent Escort Service Bhiwandi
 

Designing navigation

  • 1. Designing navigation S.Gopinath Department of Physical Science Vavuniya Campus, University of Jaffna, Sri Lanka
  • 2. • People won’t use your Web site if they can’t find their way around it. S.Gopinath 2
  • 4. When you enter a Web site • You’re usually trying to find something. • You decide whether to ask first or browse first. – “search-dominant” users – “link-dominant” users S.Gopinath 4
  • 6. Oddities of Web space • No sense of scale – Even after we’ve used a Web site extensively, unless it’s a very small site we tend to have very little sense of how big it is. • No sense of direction. – In a Web site, there’s no left and right, no up and down. We may talk about moving up and down S.Gopinath 6
  • 7. • No sense of location. – In physical spaces, as we move around we accumulate knowledge about the space. S.Gopinath 7
  • 8. Purposes of navigation • It tells us what’s here. • It tells us how to use the site. • It gives us confidence in the people who built it. S.Gopinath 8
  • 9. Web navigation conventions • The conventions specify the appearance and location of the navigation elements so we know what to look for and where to look when we need them. • Putting them in a standard place lets us locate them quickly, with a minimum of effort; standardizing their appearance makes it easy to distinguish them from everything else. S.Gopinath 9
  • 13. • There are two ways to get this primacy across in the visual hierarchy of the page: – either make it the most prominent thing on the page – make it frame everything else. S.Gopinath 13
  • 15. The Utilities • Utilities are the links to important elements of the site that aren’t really part of the content hierarchy. • These are things that either can help me use the site (like Sign in/Register, Help, a Site Map, or a Shopping Cart) or provide information about its publisher (like About Us and Contact Us). • Utilities list should be slightly less prominent than the Sections. S.Gopinath 15
  • 16. Utilities will vary for different types of sites. About Us Archives Checkout Company Info Contact Us Customer Service Discussion Boards Downloads Directory Forums FAQs Help Home Investor Relations How to Shop Jobs My _______ News Order Tracking Press Releases Privacy Policy Register Search Shopping Cart Sign in Site Map Store Locator Your Account “As a rule, the persistent navigation can accommodate only four or five Utilities—the ones users are likely to need most often.” S.Gopinath 16