SlideShare uma empresa Scribd logo
1 de 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
 

Mais conteúdo relacionado

Mais procurados

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

Mais procurados (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
 

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

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

Mais 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
 

Último

Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 

Último (20)

On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
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...
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
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Ữ Â...
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 

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.  

Notas do Editor

  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.