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

Más contenido relacionado

La actualidad más candente

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
 

La actualidad más candente (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
 

Destacado

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
 

Destacado (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
 

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

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

Último

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
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
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024The Digital Insurer
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 

Último (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
+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...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
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
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

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.