SlideShare une entreprise Scribd logo
1  sur  30
By Beth Spencer Effective Web Design
Steve Krug Steve Krug is a website usability and interface design expert. His consulting firm, Advanced Common Sense, has tested a variety of sites including Apple, Amazon, Barnes and Noble and Netscape. Reviews for existing sites range from $3,000-8,000 for a conference call consultation. Krug’s usability workshops cost $15,000, not including travel expenses.
Krug’s questions visitors should never have to ask ,[object Object],[object Object],[object Object],[object Object],[object Object]
What are the most important things on this site? We know what the most important stories are, even though the headlines are written in Arabic, thanks to visual hierarchy.
Where am I? ,[object Object],[object Object],[object Object],[object Object],[object Object]
Where did they put _____? The word “official” is seems invisible since it is white on a mostly white background.
Where do I start? Having two buttons could cause confusion and users may question which button to use.  It would be better with only the search button. A simple button like this one works best. Effective web design will clearly convey where to begin to its visitors. The fewer words, the better.  Useless words can cause confusion and frustrate users. The words “search” and “go” are the most clear ones to use with search buttons, according to Krug. Most people are fans of the search box, and they start there.
How often do you use search boxes and on which sites? ,[object Object],[object Object],[object Object],[object Object]
What is the first thing you look for when viewing a new website? ,[object Object],[object Object],[object Object],[object Object]
Most user-friendly website “ Search capabilities. It kind of explains why Google is all powerful. Ease and time in finding the right information is almost as important as the information itself.”-John Campbell, financial analyst “ I use Google for everything.”-Sarah Gill, PR coordinator “ Normally I just type in stuff in the Google search box if I’m looking for something, and I do that a lot.”-Ali Boone, U of M advertising major
Unclear navigation Navigation should be either top horizontal or left vertical.  Those are the standard locations, and when we visit sites that do not follow that guideline, it causes confusion. Besides guiding visitors around the site, navigation also reveals the content of the site.  Each link should have a short description about where it will take them.  This home page is a good example of bad navigation tools.  Not only are they in an odd location, visitors have no idea what will happen when their click one of the six choices.
Make it obvious what’s clickable. When visitors don’t know what they can or cannot click, it is as if they are driving and all of the road signs are blank, according to Vincent Flanders, web usability guru. If visitors know what they can click, they don’t have to ask as many questions.  Similarly, if the road signs have directions on them, drivers know where they are headed .
Bad Terrible navigation The navigation tools are splattered across the screen.  They should be vertical or horizontal, never this way.
Effective navigation Navigation always works best top-horizontal or left-vertical.
Tab Navigation Steve Krug is a fan of tab navigation, because it is obvious what they are for. They also help divide the site into sections, while indicating where the visitor is in the site at all times.  Yahoo.com uses tabs to separate different kinds of news stories.
Tab navigation The Commercial Appeal’s tab navigation shows users other pages within each tab. My Fox Memphis uses this technique as well.
Drop-down menus Quite a few news websites use drop-down menus. Users have to seek out drop-down menus, which can limit the site’s usability. The menus can be tricky for users, since they disappear when the mouse moves. Saving space on the website is the only benefit from using drop-down menus. The Washington Post uses drop-down menus. CNN’s color-coded navigation bar is much more simple and user-friendly.
What do you think about drop-down menus? ,[object Object],[object Object],[object Object],[object Object]
Drop-down menus MSNBC’s drop-down menus have too many choices, and they would be difficult to scan.
Most important: readability, consistency or simplicity?  ,[object Object],[object Object],[object Object]
Text color contrast The poor color contrast makes reading the categories difficult.
Text color contrast The text color was later changed to grey, which is a tiny improvement.
How much time do you spend on the internet? ,[object Object],[object Object],[object Object]
What is your primary use of the web? ,[object Object],[object Object],[object Object]
Most common mistakes new web designers make? ,[object Object],[object Object],[object Object]
Pop-ups Too many pop-ups can send visitors clicking on the competitors’ sites.
Too much focus on aesthetics This magazine website site was designed for visual appeal, and users view each page by clicking the corner, as if they are reading a magazine. It may seem like a good idea in theory, but people do not read web pages that way.
What is the most important element of web usability?   ,[object Object],[object Object],[object Object]
“ If it solves the problem or question fully and quick.” USA Today’s site is simple, has a search box and displays visual hierarchy.
How could designers make sites more user-friendly?   ,[object Object],[object Object],[object Object],[object Object]

Contenu connexe

Tendances

13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an ExorcismCrystal Beasley
 
Growth Hacking Basics
Growth Hacking BasicsGrowth Hacking Basics
Growth Hacking BasicsMorgan Brown
 
Growth Hacking 101
Growth Hacking 101Growth Hacking 101
Growth Hacking 101Greg Lenz
 
UX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureUX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureJoan Lumanauw
 
Why Whuffie is My SEO Jetpack
Why Whuffie is My SEO JetpackWhy Whuffie is My SEO Jetpack
Why Whuffie is My SEO JetpackTara Hunt
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSFSara Cannon
 
Marketing above the fold (3)
Marketing above the fold (3)Marketing above the fold (3)
Marketing above the fold (3)Jen Brugliera
 
Importance of Mobile Optimisation
Importance of Mobile Optimisation Importance of Mobile Optimisation
Importance of Mobile Optimisation Sandra Luther
 
9th Marketing Forum (Cyprus): How To Make Your Digital Heart Beat
9th Marketing Forum (Cyprus): How To Make Your Digital Heart Beat9th Marketing Forum (Cyprus): How To Make Your Digital Heart Beat
9th Marketing Forum (Cyprus): How To Make Your Digital Heart BeatPeopleizers
 
Memphis E-Marketing Group
Memphis E-Marketing GroupMemphis E-Marketing Group
Memphis E-Marketing GroupMelanee Hannock
 
Competitive Analysis
Competitive AnalysisCompetitive Analysis
Competitive AnalysisJaime Brown
 
Social Media 101 - Dietician's Information
Social Media 101 - Dietician's InformationSocial Media 101 - Dietician's Information
Social Media 101 - Dietician's InformationKostas McDade
 
Making your Website Work for You - eTapestry User Group 2013
Making your Website Work for You - eTapestry User Group 2013Making your Website Work for You - eTapestry User Group 2013
Making your Website Work for You - eTapestry User Group 2013Blackbaud
 
2013 Web Design Trends for Nonprofits
2013 Web Design Trends for Nonprofits2013 Web Design Trends for Nonprofits
2013 Web Design Trends for Nonprofitsguidecreative
 
Growth Hacking for Corporates (www.wepullthetrigger.com)
Growth Hacking for Corporates (www.wepullthetrigger.com)Growth Hacking for Corporates (www.wepullthetrigger.com)
Growth Hacking for Corporates (www.wepullthetrigger.com)Trigger
 
Mobile & Social Media: Practical Advice
Mobile & Social Media: Practical AdviceMobile & Social Media: Practical Advice
Mobile & Social Media: Practical Advicefunlake
 
Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015Luky (Jade) Ng
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyJoan Lumanauw
 
21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking TacticsJon Yongfook
 

Tendances (20)

13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
Growth Hacking Basics
Growth Hacking BasicsGrowth Hacking Basics
Growth Hacking Basics
 
Growth Hacking 101
Growth Hacking 101Growth Hacking 101
Growth Hacking 101
 
UX Lesson 5: Information Architecture
UX Lesson 5: Information ArchitectureUX Lesson 5: Information Architecture
UX Lesson 5: Information Architecture
 
Why Whuffie is My SEO Jetpack
Why Whuffie is My SEO JetpackWhy Whuffie is My SEO Jetpack
Why Whuffie is My SEO Jetpack
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Marketing above the fold (3)
Marketing above the fold (3)Marketing above the fold (3)
Marketing above the fold (3)
 
Scan0078
Scan0078Scan0078
Scan0078
 
Importance of Mobile Optimisation
Importance of Mobile Optimisation Importance of Mobile Optimisation
Importance of Mobile Optimisation
 
9th Marketing Forum (Cyprus): How To Make Your Digital Heart Beat
9th Marketing Forum (Cyprus): How To Make Your Digital Heart Beat9th Marketing Forum (Cyprus): How To Make Your Digital Heart Beat
9th Marketing Forum (Cyprus): How To Make Your Digital Heart Beat
 
Memphis E-Marketing Group
Memphis E-Marketing GroupMemphis E-Marketing Group
Memphis E-Marketing Group
 
Competitive Analysis
Competitive AnalysisCompetitive Analysis
Competitive Analysis
 
Social Media 101 - Dietician's Information
Social Media 101 - Dietician's InformationSocial Media 101 - Dietician's Information
Social Media 101 - Dietician's Information
 
Making your Website Work for You - eTapestry User Group 2013
Making your Website Work for You - eTapestry User Group 2013Making your Website Work for You - eTapestry User Group 2013
Making your Website Work for You - eTapestry User Group 2013
 
2013 Web Design Trends for Nonprofits
2013 Web Design Trends for Nonprofits2013 Web Design Trends for Nonprofits
2013 Web Design Trends for Nonprofits
 
Growth Hacking for Corporates (www.wepullthetrigger.com)
Growth Hacking for Corporates (www.wepullthetrigger.com)Growth Hacking for Corporates (www.wepullthetrigger.com)
Growth Hacking for Corporates (www.wepullthetrigger.com)
 
Mobile & Social Media: Practical Advice
Mobile & Social Media: Practical AdviceMobile & Social Media: Practical Advice
Mobile & Social Media: Practical Advice
 
Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
 
21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics21 Actionable Growth Hacking Tactics
21 Actionable Growth Hacking Tactics
 

En vedette

Konrad Digital Natives
Konrad Digital NativesKonrad Digital Natives
Konrad Digital Nativeszkonrad
 
Lecture Slides 12 01 08
Lecture Slides 12 01 08Lecture Slides 12 01 08
Lecture Slides 12 01 08danie158
 
Technische Redakteure als Autoren eines Sachbuchs für Open-Source-Software
Technische Redakteure als Autoren eines Sachbuchs für Open-Source-SoftwareTechnische Redakteure als Autoren eines Sachbuchs für Open-Source-Software
Technische Redakteure als Autoren eines Sachbuchs für Open-Source-Softwareguest744e2d
 

En vedette (6)

Como Arvores
Como ArvoresComo Arvores
Como Arvores
 
Konrad Digital Natives
Konrad Digital NativesKonrad Digital Natives
Konrad Digital Natives
 
El Deporte
El DeporteEl Deporte
El Deporte
 
Lecture Slides 12 01 08
Lecture Slides 12 01 08Lecture Slides 12 01 08
Lecture Slides 12 01 08
 
Comosenutren
ComosenutrenComosenutren
Comosenutren
 
Technische Redakteure als Autoren eines Sachbuchs für Open-Source-Software
Technische Redakteure als Autoren eines Sachbuchs für Open-Source-SoftwareTechnische Redakteure als Autoren eines Sachbuchs für Open-Source-Software
Technische Redakteure als Autoren eines Sachbuchs für Open-Source-Software
 

Similaire à Effective Web Design

Week 4 - A User Centred Design
Week 4 -  A User Centred DesignWeek 4 -  A User Centred Design
Week 4 - A User Centred DesignGraeme Smith
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignChristy Van Heugten
 
How to Design Effective Websites
How to Design Effective WebsitesHow to Design Effective Websites
How to Design Effective WebsitesJason Slowey
 
Using web content effectively emtex 270911
Using web content effectively   emtex 270911Using web content effectively   emtex 270911
Using web content effectively emtex 270911John Owens
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Designsirferds
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux designSachin Khatiwoda
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestringteaguese
 
Bharti axa website analysis, competitor analysis & visual approach
Bharti axa website analysis, competitor analysis & visual approachBharti axa website analysis, competitor analysis & visual approach
Bharti axa website analysis, competitor analysis & visual approachRahul Singh
 
Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Adam Guerguis
 
30 Most Common Business Website Mistakes
30 Most Common Business Website Mistakes30 Most Common Business Website Mistakes
30 Most Common Business Website MistakesINCORE Digital Agency
 
Engage Users Along Their Journey
Engage Users Along Their JourneyEngage Users Along Their Journey
Engage Users Along Their JourneyMarta Dębska
 
Engage Users Along Their Journey
Engage Users Along Their JourneyEngage Users Along Their Journey
Engage Users Along Their JourneyUserEngage
 
Six tips for cross-cultural UX
Six tips for cross-cultural UXSix tips for cross-cultural UX
Six tips for cross-cultural UXOban International
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web DesignKathy Gill
 

Similaire à Effective Web Design (20)

20 Website 'Must Haves'
20 Website 'Must Haves'20 Website 'Must Haves'
20 Website 'Must Haves'
 
Week 4 - A User Centred Design
Week 4 -  A User Centred DesignWeek 4 -  A User Centred Design
Week 4 - A User Centred Design
 
Auditing Your Website for Usability Issues
Auditing Your Website for Usability IssuesAuditing Your Website for Usability Issues
Auditing Your Website for Usability Issues
 
Adding Curb Appeal: Website Redesign
Adding Curb Appeal: Website RedesignAdding Curb Appeal: Website Redesign
Adding Curb Appeal: Website Redesign
 
How to Design Effective Websites
How to Design Effective WebsitesHow to Design Effective Websites
How to Design Effective Websites
 
Usability and UX
Usability and UXUsability and UX
Usability and UX
 
Using web content effectively emtex 270911
Using web content effectively   emtex 270911Using web content effectively   emtex 270911
Using web content effectively emtex 270911
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Design
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux design
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
Lecture 9 Usability Orignal
Lecture 9 Usability OrignalLecture 9 Usability Orignal
Lecture 9 Usability Orignal
 
Bharti axa website analysis, competitor analysis & visual approach
Bharti axa website analysis, competitor analysis & visual approachBharti axa website analysis, competitor analysis & visual approach
Bharti axa website analysis, competitor analysis & visual approach
 
NRSC Report | iTracking Research
NRSC Report | iTracking ResearchNRSC Report | iTracking Research
NRSC Report | iTracking Research
 
Don't Make me Think - Book Summary
Don't Make me Think - Book Summary Don't Make me Think - Book Summary
Don't Make me Think - Book Summary
 
30 Most Common Business Website Mistakes
30 Most Common Business Website Mistakes30 Most Common Business Website Mistakes
30 Most Common Business Website Mistakes
 
Engage Users Along Their Journey
Engage Users Along Their JourneyEngage Users Along Their Journey
Engage Users Along Their Journey
 
Engage Users Along Their Journey
Engage Users Along Their JourneyEngage Users Along Their Journey
Engage Users Along Their Journey
 
Six tips for cross-cultural UX
Six tips for cross-cultural UXSix tips for cross-cultural UX
Six tips for cross-cultural UX
 
Blogging
BloggingBlogging
Blogging
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 

Dernier

Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
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 TerraformAndrey Devyatkin
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
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...Orbitshub
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
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 WorkerThousandEyes
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
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...Jeffrey Haguewood
 
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 SavingEdi Saputra
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 

Dernier (20)

Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
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...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
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
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
+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...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 

Effective Web Design

  • 1. By Beth Spencer Effective Web Design
  • 2. Steve Krug Steve Krug is a website usability and interface design expert. His consulting firm, Advanced Common Sense, has tested a variety of sites including Apple, Amazon, Barnes and Noble and Netscape. Reviews for existing sites range from $3,000-8,000 for a conference call consultation. Krug’s usability workshops cost $15,000, not including travel expenses.
  • 3.
  • 4. What are the most important things on this site? We know what the most important stories are, even though the headlines are written in Arabic, thanks to visual hierarchy.
  • 5.
  • 6. Where did they put _____? The word “official” is seems invisible since it is white on a mostly white background.
  • 7. Where do I start? Having two buttons could cause confusion and users may question which button to use. It would be better with only the search button. A simple button like this one works best. Effective web design will clearly convey where to begin to its visitors. The fewer words, the better. Useless words can cause confusion and frustrate users. The words “search” and “go” are the most clear ones to use with search buttons, according to Krug. Most people are fans of the search box, and they start there.
  • 8.
  • 9.
  • 10. Most user-friendly website “ Search capabilities. It kind of explains why Google is all powerful. Ease and time in finding the right information is almost as important as the information itself.”-John Campbell, financial analyst “ I use Google for everything.”-Sarah Gill, PR coordinator “ Normally I just type in stuff in the Google search box if I’m looking for something, and I do that a lot.”-Ali Boone, U of M advertising major
  • 11. Unclear navigation Navigation should be either top horizontal or left vertical. Those are the standard locations, and when we visit sites that do not follow that guideline, it causes confusion. Besides guiding visitors around the site, navigation also reveals the content of the site. Each link should have a short description about where it will take them. This home page is a good example of bad navigation tools. Not only are they in an odd location, visitors have no idea what will happen when their click one of the six choices.
  • 12. Make it obvious what’s clickable. When visitors don’t know what they can or cannot click, it is as if they are driving and all of the road signs are blank, according to Vincent Flanders, web usability guru. If visitors know what they can click, they don’t have to ask as many questions. Similarly, if the road signs have directions on them, drivers know where they are headed .
  • 13. Bad Terrible navigation The navigation tools are splattered across the screen. They should be vertical or horizontal, never this way.
  • 14. Effective navigation Navigation always works best top-horizontal or left-vertical.
  • 15. Tab Navigation Steve Krug is a fan of tab navigation, because it is obvious what they are for. They also help divide the site into sections, while indicating where the visitor is in the site at all times. Yahoo.com uses tabs to separate different kinds of news stories.
  • 16. Tab navigation The Commercial Appeal’s tab navigation shows users other pages within each tab. My Fox Memphis uses this technique as well.
  • 17. Drop-down menus Quite a few news websites use drop-down menus. Users have to seek out drop-down menus, which can limit the site’s usability. The menus can be tricky for users, since they disappear when the mouse moves. Saving space on the website is the only benefit from using drop-down menus. The Washington Post uses drop-down menus. CNN’s color-coded navigation bar is much more simple and user-friendly.
  • 18.
  • 19. Drop-down menus MSNBC’s drop-down menus have too many choices, and they would be difficult to scan.
  • 20.
  • 21. Text color contrast The poor color contrast makes reading the categories difficult.
  • 22. Text color contrast The text color was later changed to grey, which is a tiny improvement.
  • 23.
  • 24.
  • 25.
  • 26. Pop-ups Too many pop-ups can send visitors clicking on the competitors’ sites.
  • 27. Too much focus on aesthetics This magazine website site was designed for visual appeal, and users view each page by clicking the corner, as if they are reading a magazine. It may seem like a good idea in theory, but people do not read web pages that way.
  • 28.
  • 29. “ If it solves the problem or question fully and quick.” USA Today’s site is simple, has a search box and displays visual hierarchy.
  • 30.