SlideShare une entreprise Scribd logo
1  sur  8
Lecture 1: Navigation SFDV2001 Web Development
Navigation Your technically perfect code, stunning visual design and useful content will all be wasted if visitors to your site can’t navigate their way around effectively. Most usability issues seem like commonsense, but if they are so obvious why do so many sites get it wrong? The navigation scheme on a web site should make it easy for the visitor to answer these questions: Where am I? Where am I in relation to the rest of the site? Where can I go? How can I get back to where I once was?
Things to avoid: “ Mystery meat” navigation Unconventional systems Using different labels for links to the same place Not identifying External/file links as such Active link to current page Back-and-forth or no navigation Broken links
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Test, test, test! Navigation should be  Simple  &  Consistent Have one navigation system for the entire site. Link directly to items, don’t lead your visitors on a leisurely stroll through your site - they want what they want and they want it now. Careful site planning enables you to organise your content in the most helpful manner - such preparation is a key step toward a good navigation system.
Breadcrumbs (global usage). Your logo should always link to your home page. Consider providing an explicit Home link too. As users of the web we come to expect certain conventions.  You have to work very hard to design a intuitive navigation system that doesn’t fit existing moulds. Things that work Test, test, test!
Recommended sites: Vincent Flanders’ Mystery Meat Navigation: http://www.webpagesthatsuck.com/mysterymeatnavigation.html Further reading: Web Navigation, Designing the User Experience  by Jennifer Fleming The Un Usually Useful Web Book  by June Cohen
 

Contenu connexe

Tendances

Navigation Systems
Navigation SystemsNavigation Systems
Navigation Systems
Miles Price
 
Web publishing
Web publishingWeb publishing
Web publishing
Kanav Sood
 

Tendances (20)

Navigation Systems
Navigation SystemsNavigation Systems
Navigation Systems
 
Ppt ch09
Ppt ch09Ppt ch09
Ppt ch09
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
Website research
Website researchWebsite research
Website research
 
Elements Of Web Design
Elements Of Web DesignElements Of Web Design
Elements Of Web Design
 
Indictrans technologies CMS presentation
Indictrans technologies CMS presentationIndictrans technologies CMS presentation
Indictrans technologies CMS presentation
 
Lecture 1 intro to web designing
Lecture 1  intro to web designingLecture 1  intro to web designing
Lecture 1 intro to web designing
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
 
Web publishing
Web publishingWeb publishing
Web publishing
 
Ppt on Website Planning
Ppt on Website PlanningPpt on Website Planning
Ppt on Website Planning
 
Web Design & Development ! BATRA COMPUTER CENTRE
Web Design & Development ! BATRA COMPUTER CENTREWeb Design & Development ! BATRA COMPUTER CENTRE
Web Design & Development ! BATRA COMPUTER CENTRE
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
 
MyDrive Holiday - Concept Proposal
MyDrive Holiday - Concept ProposalMyDrive Holiday - Concept Proposal
MyDrive Holiday - Concept Proposal
 
Web Design & Development
Web Design & DevelopmentWeb Design & Development
Web Design & Development
 
Website Designing PPT
Website Designing PPTWebsite Designing PPT
Website Designing PPT
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
 
Creating a Website Sitemap
Creating a Website SitemapCreating a Website Sitemap
Creating a Website Sitemap
 
Presentation on website development
Presentation on website developmentPresentation on website development
Presentation on website development
 
Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
Clear as mud: Explaining Web Apps, Mobile Apps, Cloud Computing and Design "t...
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 

Similaire à Navigation1 A

香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
biyu
 
Web+Design+Guide[1]
Web+Design+Guide[1]Web+Design+Guide[1]
Web+Design+Guide[1]
Anis Chief
 
Dealing with organisational focused ia difficulties and solutions
Dealing with organisational focused ia difficulties and solutionsDealing with organisational focused ia difficulties and solutions
Dealing with organisational focused ia difficulties and solutions
Queensland University of Technology
 
web design
web designweb design
web design
butest
 

Similaire à Navigation1 A (20)

香港六合彩 » SlideShare
香港六合彩 » SlideShare香港六合彩 » SlideShare
香港六合彩 » SlideShare
 
Web+Design+Guide[1]
Web+Design+Guide[1]Web+Design+Guide[1]
Web+Design+Guide[1]
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
Website Navigation - Some Tips
Website Navigation - Some TipsWebsite Navigation - Some Tips
Website Navigation - Some Tips
 
Web Usability Site Design
Web Usability   Site DesignWeb Usability   Site Design
Web Usability Site Design
 
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page Design
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Dealing with organisational focused ia difficulties and solutions
Dealing with organisational focused ia difficulties and solutionsDealing with organisational focused ia difficulties and solutions
Dealing with organisational focused ia difficulties and solutions
 
Stuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityStuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill University
 
Dealing with organisational focused ia difficulties
Dealing with organisational focused ia difficultiesDealing with organisational focused ia difficulties
Dealing with organisational focused ia difficulties
 
Solid Web site Design Guidance Any individual Could Utilize
Solid Web site Design Guidance Any individual Could UtilizeSolid Web site Design Guidance Any individual Could Utilize
Solid Web site Design Guidance Any individual Could Utilize
 
Site Design Suggestions For Those In Need
Site Design Suggestions For Those In NeedSite Design Suggestions For Those In Need
Site Design Suggestions For Those In Need
 
How to Increase Your Site Usability to Drive Leads
How to Increase Your Site Usability to Drive LeadsHow to Increase Your Site Usability to Drive Leads
How to Increase Your Site Usability to Drive Leads
 
Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...Content Management & Page Structure - Best Practices for Structuring Content ...
Content Management & Page Structure - Best Practices for Structuring Content ...
 
How to Design Effective Websites
How to Design Effective WebsitesHow to Design Effective Websites
How to Design Effective Websites
 
Website best-practices
Website best-practicesWebsite best-practices
Website best-practices
 
Navigation to the rescue!
Navigation to the rescue!Navigation to the rescue!
Navigation to the rescue!
 
web design
web designweb design
web design
 
Navigation by sector
Navigation by sectorNavigation by sector
Navigation by sector
 
Lecture 9 Usability Orignal
Lecture 9 Usability OrignalLecture 9 Usability Orignal
Lecture 9 Usability Orignal
 

Plus de Sur College of Applied Sciences (14)

Lecture11 A Image
Lecture11 A ImageLecture11 A Image
Lecture11 A Image
 
Lecture 11 B Security
Lecture 11 B SecurityLecture 11 B Security
Lecture 11 B Security
 
Lecture 10 Image Format
Lecture 10  Image FormatLecture 10  Image Format
Lecture 10 Image Format
 
Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
 
Lecture 9 Accessibility Original
Lecture 9 Accessibility OriginalLecture 9 Accessibility Original
Lecture 9 Accessibility Original
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
 
Lecture 8 Video
Lecture 8 VideoLecture 8 Video
Lecture 8 Video
 
Lecture 6 Data Driven Design
Lecture 6  Data Driven DesignLecture 6  Data Driven Design
Lecture 6 Data Driven Design
 
Lecture 5 XML
Lecture 5  XMLLecture 5  XML
Lecture 5 XML
 
Lecture2 CSS 2
Lecture2  CSS 2Lecture2  CSS 2
Lecture2 CSS 2
 
Lecture2 CSS 3
Lecture2   CSS 3Lecture2   CSS 3
Lecture2 CSS 3
 
Lecture2 CSS1
Lecture2  CSS1Lecture2  CSS1
Lecture2 CSS1
 
Lecture1 B Frames&Forms
Lecture1 B  Frames&FormsLecture1 B  Frames&Forms
Lecture1 B Frames&Forms
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
 

Dernier

Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 

Dernier (20)

Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-IIFood Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 

Navigation1 A

  • 1. Lecture 1: Navigation SFDV2001 Web Development
  • 2. Navigation Your technically perfect code, stunning visual design and useful content will all be wasted if visitors to your site can’t navigate their way around effectively. Most usability issues seem like commonsense, but if they are so obvious why do so many sites get it wrong? The navigation scheme on a web site should make it easy for the visitor to answer these questions: Where am I? Where am I in relation to the rest of the site? Where can I go? How can I get back to where I once was?
  • 3. Things to avoid: “ Mystery meat” navigation Unconventional systems Using different labels for links to the same place Not identifying External/file links as such Active link to current page Back-and-forth or no navigation Broken links
  • 4.
  • 5. Test, test, test! Navigation should be Simple & Consistent Have one navigation system for the entire site. Link directly to items, don’t lead your visitors on a leisurely stroll through your site - they want what they want and they want it now. Careful site planning enables you to organise your content in the most helpful manner - such preparation is a key step toward a good navigation system.
  • 6. Breadcrumbs (global usage). Your logo should always link to your home page. Consider providing an explicit Home link too. As users of the web we come to expect certain conventions. You have to work very hard to design a intuitive navigation system that doesn’t fit existing moulds. Things that work Test, test, test!
  • 7. Recommended sites: Vincent Flanders’ Mystery Meat Navigation: http://www.webpagesthatsuck.com/mysterymeatnavigation.html Further reading: Web Navigation, Designing the User Experience by Jennifer Fleming The Un Usually Useful Web Book by June Cohen
  • 8.  

Notes de l'éditeur

  1. Run through these questions with example sites.
  2. Consistent - appearance, placement, behavior, varying link states.
  3. 1 Understand which practices are standard or very common. 2 Understand the usability benefits of following those standard or common practices. 3 Weigh the risk and benefits of violating the standard when there is a compelling reason to go with an unconventional design.