Design in Web SitesDesign in Web Sites

L. GreweL. Grewe

11

22

DesignDesign

• Describe the most common types of web site Describe the most common types of web site organizationorganization

• Utilize guidelines for web site navigation designUtilize guidelines for web site navigation design• Apply guidelines for web page designApply guidelines for web page design• Use guidelines for text usage on web pagesUse guidelines for text usage on web pages• Describe guidelines for using graphics on web Describe guidelines for using graphics on web

pagespages• Utilize guidelines for creating accessible web Utilize guidelines for creating accessible web

pagespages• Describe design principlesDescribe design principles• Describe web page design techniquesDescribe web page design techniques• Apply best practices of web designApply best practices of web design

33

Why Design?Why Design?

Tests of time to complete shopping tasks Tests of time to complete shopping tasks at several major on-line stores - number of at several major on-line stores - number of clicks varied from 8 to 50; high clicks varied from 8 to 50; high abandonment rate on poor sitesabandonment rate on poor sites

Jakob Nielsen review of comparative tests Jakob Nielsen review of comparative tests on web sites - average 68% difference in on web sites - average 68% difference in task completion timestask completion times

Nielsen finds 135% improvement from Nielsen finds 135% improvement from redesign effortredesign effort

44

Web Design Competing Web Design Competing ConceptsConcepts

Structure Design

Scientist

Organization

Library

Artist

Aesthetics

Gallery

Dueling Concepts

55

Site Development StagesSite Development Stages

1. Identify objectives, create design plan1. Identify objectives, create design plan

2. Generate content 2. Generate content

3. Organize content - clusters3. Organize content - clusters

4. Transform content to pages with graphic 4. Transform content to pages with graphic designdesign

5. Test and iterate5. Test and iterate

66

Overall Design Is Related Overall Design Is Related to the Site Purposeto the Site Purpose

Consider the target audienceof these sites.

Purpose and DesignPurpose and Design

BusinessBusiness

77

Purpose and Design- BusinessPurpose and Design- Business IBMIBM

88

TravelTravel OrbitzOrbitz

99

TravelTravel Local agentLocal agent

1010

Purpose and Design- EducationPurpose and Design- Education CSUEBCSUEB

1111

Purpose and Design - EducatonPurpose and Design - Educaton

StanfordStanford

1212

Design and Purpose - Design and Purpose - EducationEducation

iOS, appleiOS, apple

1313

Styles changeStyles change

Amazon ThenAmazon Then

1414

GoalsGoals • • Convey Convey

information/accessinformation/access employees, shareholders, employees, shareholders,

customerscustomers colleagues, publiccolleagues, public

• • Sell productsSell products • • Advertise/market Advertise/market

serviceservice • • RecruitRecruit • • Announce, surveyAnnounce, survey • • Nurture communitiesNurture communities

Convey image or Convey image or impressionimpression

• • Meet peopleMeet people • • Raise money/donationsRaise money/donations • • Entertain an audienceEntertain an audience • • Promote myselfPromote myself • • Teach people about a Teach people about a

topictopic • • Get famousGet famous • • Tell a storyTell a story

1515

Concept Summary- ObjectivesConcept Summary- Objectives

• What is the purpose/objective or goal of What is the purpose/objective or goal of the site?the site?

• Who is your intended audience?Who is your intended audience?

1616

1717

Some Design/ Usability IssuesSome Design/ Usability Issues

1.1. NavigationNavigation

2.2. Text contentText content

3.3. Graphic design Graphic design

4.4. StructureStructure

5.5. LinksLinks

1818

Web SiteWeb SiteOrganizationOrganization

HierarchicalHierarchical LinearLinear Random (sometimes called Web Random (sometimes called Web

Organization)Organization)

1919

HierarchicalHierarchicalOrganizationOrganization

Characterized by a Characterized by a clearly defined home clearly defined home page with links to page with links to major site sectionsmajor site sections

Often used for Often used for commercial and commercial and corporate web sitescorporate web sites

2020

Hierarchical Hierarchical Too ShallowToo Shallow

Be careful that the organization is not too shallow.Be careful that the organization is not too shallow.• This provides many choices and could result in a confusing and less This provides many choices and could result in a confusing and less

usable web siteusable web site• Information ChunkingInformation Chunking

George A. Miller found that humans can store only five to nine chunks of George A. Miller found that humans can store only five to nine chunks of information at a time in short-term memory -- the "seven plus or minus information at a time in short-term memory -- the "seven plus or minus two" principle. two" principle.

Many web designers try not to place more than nine major navigation Many web designers try not to place more than nine major navigation links on a page or in a well-defined page area.links on a page or in a well-defined page area.

2121

Hierarchical Hierarchical Too DeepToo Deep

Be careful that the organization Be careful that the organization is not too deep.is not too deep.• This results in many “clicks” This results in many “clicks”

needed to drill down to the needed needed to drill down to the needed page.page.

• User Interface “Three Click Rule”User Interface “Three Click Rule” A web page visitor should be able to A web page visitor should be able to

get from any page on your site to get from any page on your site to any other page on your site with a any other page on your site with a maximum of three hyperlinks. maximum of three hyperlinks.

2222

LinearLinearOrganizationOrganization

Used when the purpose of a site or Used when the purpose of a site or series of pages on a site is to provide series of pages on a site is to provide a tutorial, tour, or presentation that a tutorial, tour, or presentation that needs to be viewed in a sequential needs to be viewed in a sequential fashion.fashion.

2323

RandomRandomOrganizationOrganization

Sometimes called Sometimes called “Web” “Web” OrganizationOrganization

Utilized there is no Utilized there is no clear path through clear path through the sitethe site

May be used with May be used with artistic or concept artistic or concept sitessites

Generally not used Generally not used for commercial for commercial web sites.web sites.

2424

Web Site NavigationWeb Site NavigationBest Practices(1)Best Practices(1)

Make your site easy to navigateMake your site easy to navigate• Provide clearly Provide clearly labeled navigation in the same labeled navigation in the same

location on each pagelocation on each page• Most common – across top or down left sideMost common – across top or down left side• Provide “breadcrumb” navigation Provide “breadcrumb” navigation

Types of NavigationTypes of Navigation• Graphics-basedGraphics-based• Text-basedText-based• Interactive NavigationInteractive Navigation

TechnologiesTechnologies DHTML DHTML Java Applet Java Applet FlashFlash

2525

Web Site NavigationWeb Site NavigationBest Practices(2)Best Practices(2)

Accessibility TipAccessibility Tip• When graphics, DHTML, a Java When graphics, DHTML, a Java

Applet, or Flash is used for the Applet, or Flash is used for the main navigation of a web site, main navigation of a web site, provide clear text-based links provide clear text-based links on the bottom of each page. on the bottom of each page.

2626

Web Site NavigationWeb Site NavigationBest Practices(3)Best Practices(3)

Use a Table of Contents (with links to Use a Table of Contents (with links to other parts of the page) for long pages. other parts of the page) for long pages.

Consider breaking long pages in to Consider breaking long pages in to multiple shorter pages using Linear multiple shorter pages using Linear Organization.Organization.

Large sites may benefit from a site mapLarge sites may benefit from a site map or site search featureor site search feature

2727

Design PrinciplesDesign Principles RepetitionRepetition

• Repeat visual elements Repeat visual elements throughout designthroughout design

ContrastContrast• Add visual excitement and Add visual excitement and

draw attentiondraw attention ProximityProximity

• Group related itemsGroup related items AlignmentAlignment

• Align elements to create Align elements to create visual unityvisual unity

2828

Web Page DesignWeb Page DesignBest PracticesBest Practices

Page layout design Page layout design Text designText design Graphic designGraphic design Accessibility considerationsAccessibility considerations

2929

Web Page Design Load TimeWeb Page Design Load Time Watch the load time of your pagesWatch the load time of your pages Try to limit web page document and Try to limit web page document and

associated media to under 60K on the home associated media to under 60K on the home pagepage

3030

Web Page DesignWeb Page DesignTarget AudienceTarget Audience

Design for your target audienceDesign for your target audience• Appropriate reading level of text Appropriate reading level of text • Appropriate use of color Appropriate use of color • Appropriate use of animationAppropriate use of animation

3131

Web Page DesignWeb Page DesignColors & AnimationColors & Animation

Use colors and animation that appeal to your Use colors and animation that appeal to your target audience target audience • KidsKids

Bright, colorful, tons of animationBright, colorful, tons of animation

• Generation X,Y,Z,etc.Generation X,Y,Z,etc. Dark, often low contrast, more subtle animationDark, often low contrast, more subtle animation

• Everyone: Everyone: Good contrast between background and text Good contrast between background and text Easy to readEasy to read Avoid animation if it makes the page load too slowly Avoid animation if it makes the page load too slowly

• Accessibility Tip: Many individuals are unable to Accessibility Tip: Many individuals are unable to distinguish between certain colors.distinguish between certain colors.

See See http://www.vischeck.com/showme.shtml

3232

Web Page DesignWeb Page Design Browser Compatibility Browser Compatibility

Web pages do NOT look the same in all the Web pages do NOT look the same in all the major browsersmajor browsers

Test with current and recent versions of: Test with current and recent versions of: • Internet ExplorerInternet Explorer• Firefox, MozillaFirefox, Mozilla• OperaOpera• Mac versions Mac versions

Design to look best in one browser and degrade Design to look best in one browser and degrade gracefully (look OK) in othersgracefully (look OK) in others

3333

Web Page DesignWeb Page Design Screen Resolution Screen Resolution

Test at various screen resolutionsTest at various screen resolutions• Most widely used: 1024x768 and 800x600 Most widely used: 1024x768 and 800x600

Design to look good at various screen Design to look good at various screen resolutionsresolutions

<div align="center"><div align="center"> <table><table>....Page content goes here. The table may be given either a ....Page content goes here. The table may be given either a

percentage width or an exact width using pixels.percentage width or an exact width using pixels. </table></table> </div></div>

3434

Web Page DesignWeb Page DesignPage Layout(1)Page Layout(1)

Place the most important information Place the most important information "above the fold""above the fold"

Use adequate "white" or blank space Use adequate "white" or blank space Use an interesting page layoutUse an interesting page layout

This is usable, but a little boring. See the next slide for improvements in page layout.

3535

Web Page DesignWeb Page DesignPage Layout(2)Page Layout(2)

BetterBetter

Best

Columns make the page more interesting and it’s easier to read this way.

Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.

3636

Page Layout Design Page Layout Design TechniquesTechniques

Ice DesignIce Design• AKA rigid or fixed designAKA rigid or fixed design• Fixed-width table usually at left marginFixed-width table usually at left margin

Jello DesignJello Design• Page content typically centered and often Page content typically centered and often

configured with a table of percentage widthconfigured with a table of percentage width Liquid DesignLiquid Design

• Page expands to fill the browser at all Page expands to fill the browser at all resolutions. Often configured with a table resolutions. Often configured with a table width of 100%width of 100%

• New Trend: Use CSS to configure liquid design New Trend: Use CSS to configure liquid design page layout (see Chapter 10)page layout (see Chapter 10)

3737

QuestionsQuestions1.1. List the four basic principles of design. List the four basic principles of design.

View the home page of your school and View the home page of your school and describe how each principle is applied.describe how each principle is applied.

2.2. View View http://www.walmart.com, , http://www.mugglenet.com/, and , and http://www.sesameworkshop.org/sesamestreet/. Describe the target audience for each . Describe the target audience for each site. site. How do their designs differ? How do their designs differ? Do the sites meet the needs of their Do the sites meet the needs of their target audiences?target audiences?

3838

QuestionsQuestions3. View your favorite web site (or a URL 3. View your favorite web site (or a URL

provided by your instructor). provided by your instructor).

• Maximize and resize the browser window. Maximize and resize the browser window. • Decide whether the site uses ice, jello, or Decide whether the site uses ice, jello, or

liquid design.liquid design.• Adjust the screen resolution on your monitor Adjust the screen resolution on your monitor

(Start > Control Panel > Display > Settings) (Start > Control Panel > Display > Settings) to a different resolution than you normally to a different resolution than you normally use. use.

• Does the site look similar or very different? Does the site look similar or very different? • List two recommendations for improving the List two recommendations for improving the

design of the site.design of the site.

3939

Text ContentText Content

Attention spans are short on the web - Attention spans are short on the web - users want instant gratification, users want instant gratification, andand reading is 25% slower on screen than on reading is 25% slower on screen than on paperpaper

So…So…• People tend to skim web pages, just read People tend to skim web pages, just read

headers, highlights, selected paragraphsheaders, highlights, selected paragraphs ThereforeTherefore

• Tune your writing style to this realityTune your writing style to this reality J. Nielsen column on writing for WWWJ. Nielsen column on writing for WWW

• www.useit.com/alertbox/9703b.html

4040

Text DesignText DesignBest PracticesBest Practices

Avoid long blocks of text Avoid long blocks of text Use bullet points Use bullet points Use short paragraphs Use short paragraphs

4141

This is the short blurb describing the article

This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing w This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text

To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. I am in love with XXX To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t

know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does this work at all? I don’t know. What is love? What is the good life? What is, and is not? That which

is, is. The world is all that exists. Nothing unreal exists, metaphysics law #1. This is some the the the the nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is Is there a god? Are we a quantum accident? Will we ever know? Are there questions that should never be asked? What is the nature of goodness? Why are we so mean to each other? How can we be so cruel to one another?

This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical textTo see how well this thing works

This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical What is good in life, he asks? That is a question we may never have an answer to. is some nonsensical text This is some nonsensical text This is some

Most important info

Less important info

.

.

.

TitleShort BlurbsSummariesOverviewsTeasers

Background InformationSupporting Details

Long Quotes

Inverse Pyramid Writing

INVERSE PYRAMID WRITING STYLEINVERSE PYRAMID WRITING STYLE

4242

Journalists Use Inverted PyramidJournalists Use Inverted Pyramid

fromwww.nytimes.com

4343

Text DesignText Design“Easy to Read” Text (1)“Easy to Read” Text (1)

Use common fonts:Use common fonts:• Arial, Helvetica, Verdana, Times New Arial, Helvetica, Verdana, Times New

RomanRoman Use appropriate text size: Normal, 12 Use appropriate text size: Normal, 12

pt, size=“3”pt, size=“3” Use strong contrast between text & Use strong contrast between text &

background background Use columns instead of large areas of Use columns instead of large areas of

horizontal text horizontal text

4444

Text DesignText Design“Easy to Read” Text (2)“Easy to Read” Text (2)

Bold text as needed Bold text as needed Avoid “click here” Avoid “click here” Hyperlink key words or phrases, not Hyperlink key words or phrases, not

entire sentences entire sentences

Separate text with “white space” or Separate text with “white space” or empty space. empty space.

Chek yur spellin (Check your spelling)Chek yur spellin (Check your spelling)

4545

Graphic DesignGraphic DesignBest Practices(1)Best Practices(1)

Be careful with large graphics! Be careful with large graphics! • Remember 60k recommendation Remember 60k recommendation

Use the alt attribute to supply Use the alt attribute to supply descriptive alternate text descriptive alternate text

Be sure your message gets across Be sure your message gets across even if images are not displayed. even if images are not displayed. • If using images for navigation provide If using images for navigation provide

plain text links at the bottom of the page.plain text links at the bottom of the page. Use animation only if it make the Use animation only if it make the

page more effective and provide a page more effective and provide a text description.text description.

4646

Graphic DesignGraphic DesignRecommended Practices(2)Recommended Practices(2)

Choose colors on the web palette if consistency across Choose colors on the web palette if consistency across older Windows/Mac platforms is neededolder Windows/Mac platforms is needed

Use anti-aliased text in imagesUse anti-aliased text in images Use only necessary imagesUse only necessary images Reuse imagesReuse images Keep images as small as possibleKeep images as small as possible If there are a large number of images, or the page is If there are a large number of images, or the page is

dependent on them consider creating a special text-only dependent on them consider creating a special text-only version of the page.version of the page.

4747

Designing for Accessibility(1)Designing for Accessibility(1)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Images & animations. Images & animations. • Use the alt attribute to describe Use the alt attribute to describe

the function of each visual.the function of each visual. Image maps. Image maps.

• Use the client-side map and text Use the client-side map and text for hotspots.for hotspots.

Multimedia. Multimedia. • Provide captioning and transcripts Provide captioning and transcripts

of audio, and descriptions of video.of audio, and descriptions of video.

4848

Designing for Accessibility(2)Designing for Accessibility(2)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Hypertext links. Hypertext links. • Use text that makes sense when read out Use text that makes sense when read out

of context. For example, avoid "click of context. For example, avoid "click here."here."

Page organization. Page organization. • Use headings, lists, and consistent Use headings, lists, and consistent

structure. Use Cascading Style Sheets for structure. Use Cascading Style Sheets for layout and style where possible. layout and style where possible.

Graphs & charts. Graphs & charts. • Summarize or use the longdesc attribute.Summarize or use the longdesc attribute.

4949

Designing for Accessibility(3)Designing for Accessibility(3)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Scripts, applets, & plug-ins. Scripts, applets, & plug-ins. • Provide alternative content in case Provide alternative content in case

active features such as JavaScript, Java active features such as JavaScript, Java Applets, Flash are inaccessible or Applets, Flash are inaccessible or unsupported.unsupported.

Frames. Frames. • Use the <noframes> element and Use the <noframes> element and

meaningful titles.meaningful titles. Tables. Tables.

• Make line-by-line reading sensible. Make line-by-line reading sensible. Summarize.Summarize.

5050

Designing for Accessibility(4)Designing for Accessibility(4)Quick Checklist Courtesy of W3CQuick Checklist Courtesy of W3C

Check your work. Check your work. Validate. Validate.

http://validator.w3.org Test for AccessiblityTest for Accessiblity

• Use tools, checklist, and Use tools, checklist, and guidelines at guidelines at http://www.w3.org/TR/WCAG

5151

Best Practices ChecklistBest Practices Checklist

Table 7.1 in your TextbookTable 7.1 in your Textbookhttp://terrymorris.net/bestpractices

•Page Layout•Browser Compatibility•Navigation•Color and Graphics•Multimedia•Content Presentation•Functionality•Accessibility

5252

QuestionsQuestions1.1. View the home page of your school. Use View the home page of your school. Use

the Best Practices Checklist (Table 7.1) to the Best Practices Checklist (Table 7.1) to evaluate the page. Describe the results.evaluate the page. Describe the results.

2.2. List three best practices of writing text List three best practices of writing text for the Web. See your text for the rest of for the Web. See your text for the rest of this question.this question.

3.3. List three best practices of using graphics List three best practices of using graphics on web pages. View the home page of on web pages. View the home page of your school. Describe the use of graphic your school. Describe the use of graphic design best practices on this page.design best practices on this page.

Main Pages/ComponentsMain Pages/Components

Entry Page (optional)Entry Page (optional) Home PageHome Page LinksLinks Search / Browse featuresSearch / Browse features

5353

5454

Entry Page(s)Entry Page(s)

Often large graphic or animation with Often large graphic or animation with single link to home pagesingle link to home page• To lure/entice viewer inTo lure/entice viewer in

EntryPage

ExitPage

HomePage

SiteMap

FAQ

Credits

ContentPages

5555

Entry PagesEntry Pages

When are they good?When are they good? Art/Media site versus a Art/Media site versus a

News/Shopping siteNews/Shopping site Typically go to a “2Typically go to a “2ndnd order” style order” style

site.site. Always provide “Skip this Always provide “Skip this

introduction” link to get past.introduction” link to get past.

5656

Home PageHome Page

Most important page at your siteMost important page at your site• Critical for imageCritical for image• Entices viewer to look at moreEntices viewer to look at more

Could be a hybrid between an Entry and Could be a hybrid between an Entry and 22ndnd order or simply a 2 order or simply a 2ndnd order style. order style.

Quick impact, easy navigationQuick impact, easy navigation Inportant info “above the fold”Inportant info “above the fold” If links are in images, have parallel text If links are in images, have parallel text

labels near page bottomlabels near page bottom

5757

Ancienthome page

Old home page

Home Page EvolutionHome Page Evolution

Currenthome page

Georgia Tech College of ComputingGeorgia Tech College of Computing

5858

LinksLinks Success of link ->Success of link ->

• can user predict where link will leadcan user predict where link will lead• Differentiation between linksDifferentiation between links• Useful content at linked pageUseful content at linked page

Link Style:Link Style:• Short (use whenever possible)Short (use whenever possible)

Products, Home, Blog, Gifts, etc.Products, Home, Blog, Gifts, etc.

• Longer text explanations , possibly part of it not linked.Longer text explanations , possibly part of it not linked. Current pricesCurrent prices – price for current tax year. – price for current tax year.

• Avoid – here, back Avoid – here, back • Media links – link on thumbnail or title.Media links – link on thumbnail or title.

5959

• Embedded Links - Links set in surroundingtext. They can be harder for user to pick and use.

• Wrapped Links - Confusing - 3 or 4 items??

Janus TwentyInvestment Companyof AmericaRoyce Premier

• Too many on a page can be confusing and take too long to parse

• Problem with Image links - Don’t change color to indicate prior traversal•Within-page links

Can be confusingIs this the same page or a differnet page?

Link IssuesLink Issues

6060

•All capitals text•Scrolling horizontally•Teeny, tiny text size, especially in italics•Dead links•Telling the user how to set the browser•Poor contrast in text-to-background color•Large typeface (one without impact and contrast)•Animations that don’t stop•Things that look like buttons but aren’t•“Under construction” notices•Neglecting ALT tags for images•Not denoting image sizes•Do-nothing home page•Changing color for the heck of it•Lack of mail to/feedback throughout site•Sites requiring advanced browser or plug in•Blink tags

Things to avoidThings to avoid

6161

Jeff Johnson’s (author) Web Jeff Johnson’s (author) Web BloopersBloopers

Chapter 1 – Content BloopersChapter 1 – Content Bloopers

1.1. Home page identity crisis.Home page identity crisis. Home page doesn’t Home page doesn’t clearly identify organization or its purpose.clearly identify organization or its purpose.

2.2. Confusing classifications.Confusing classifications. Content categories Content categories seem arbitrary or nonsensical.seem arbitrary or nonsensical.

3.3. Unhelpful descriptions.Unhelpful descriptions. Content descriptions Content descriptions do not support choosing among items.do not support choosing among items.

4.4. Conflicting content.Conflicting content. Information in different Information in different parts of site disagrees.parts of site disagrees.

5.5. Outdated content.Outdated content. Content on site is out-of- Content on site is out-of-date, but not clearly marked as archival.date, but not clearly marked as archival.

6.6. Missing or useless content.Missing or useless content. Information users Information users need to accomplish goals is missing.need to accomplish goals is missing.

7.7. Unfinished content.Unfinished content. Blatantly incomplete areas Blatantly incomplete areas of site.of site.

Chapter 2 – Task-Support BloopersChapter 2 – Task-Support Bloopers

8.8. Redundant requests.Redundant requests. Asking users for the Asking users for the same data repeatedly.same data repeatedly.

9.9. Requiring unneeded data.Requiring unneeded data. Making users Making users provide non-essential information.provide non-essential information.

10.10. Pointless choice.Pointless choice. Offering or requiring Offering or requiring meaningless choices.meaningless choices.

11.11. Omitting important options.Omitting important options. Choice excludes Choice excludes options some users need.options some users need.

12.12. Clueless back-end.Clueless back-end. Back-end lacks "common Back-end lacks "common sense" data needed to support user tasks.sense" data needed to support user tasks.

13.13. Dead-end path: Dead-end path: NowNow you tell me! you tell me! Allowing Allowing users to go down a path towards a goal before users to go down a path towards a goal before telling them it is unavailable.telling them it is unavailable.

14.14. Agonizing task-flow.Agonizing task-flow. Accomplishing tasks Accomplishing tasks requires many unnecessary, distracting steps.requires many unnecessary, distracting steps.

6262

Jeff Johnson’s Web BloopersJeff Johnson’s Web BloopersChapter 3 – Navigation BloopersChapter 3 – Navigation Bloopers

15.15. Site reflects organization chart.Site reflects organization chart. Site structure Site structure reflects organization’s structure or history.reflects organization’s structure or history.

16.16. Numerous navigation schemes.Numerous navigation schemes. Many ways Many ways to navigate, but no clear guidance.to navigate, but no clear guidance.

17.17. Deceptive duplicate links. Deceptive duplicate links. Making users think: Making users think: "Do those go to the same place?"."Do those go to the same place?".

18.18. Not linking directly.Not linking directly. Specific-looking links that Specific-looking links that go to generic pages or home pages.go to generic pages or home pages.

19.19. Lost in space: Current page not indicated.Lost in space: Current page not indicated. Page doesn’t clearly show where user is.Page doesn’t clearly show where user is.

20.20. The circle game: Active link to here. The circle game: Active link to here. Page Page has active link to itself.has active link to itself.

21.21. Missing links: It’s BACK or nothing. Missing links: It’s BACK or nothing. Page Page provides no navigation links.provides no navigation links.

Chapter 4 – Form BloopersChapter 4 – Form Bloopers22.22. Making people type.Making people type. Using a text field for a Using a text field for a

choice setting.choice setting.23.23. Intolerant data fields.Intolerant data fields. Text field is too picky Text field is too picky

about how data must be typed.about how data must be typed.24.24. No defaults.No defaults. Controls and form fields with no Controls and form fields with no

default value.default value.25.25. Faulty defaults.Faulty defaults. Controls and form fields with Controls and form fields with

the wrong default value.the wrong default value.26.26. Compulsory clicking: No default text input Compulsory clicking: No default text input

focus.focus. Users can’t just start typing. Users can’t just start typing.27.27. Lame label placement.Lame label placement. Labels mis-aligned Labels mis-aligned

with, or too far from, data fields.with, or too far from, data fields.28.28. Checkboxes or radiobuttons?Checkboxes or radiobuttons? Checkboxes Checkboxes

misused as radiobuttons, or vice-versa.misused as radiobuttons, or vice-versa.29.29. Looks editable but isn’t.Looks editable but isn’t. Using standard data- Using standard data-

input controls for display-only data.input controls for display-only data.30.30. Mysterious controls.Mysterious controls. Operation of controls is Operation of controls is

unclear due to poor labeling, poor layout, or unclear due to poor labeling, poor layout, or uniqueness of controls.uniqueness of controls.

6363

Jeff Johnson’s Web BloopersJeff Johnson’s Web Bloopers

Chapter 5 – Search BloopersChapter 5 – Search Bloopers31.31. Baffling search controls.Baffling search controls. Search options Search options

require knowledge of computer or industry-require knowledge of computer or industry-insider concepts.insider concepts.

32.32. Dueling search controls.Dueling search controls. Competing search Competing search boxes on page, with no guidance.boxes on page, with no guidance.

33.33. Hits look alike.Hits look alike. List of found items cannot be List of found items cannot be easily distinguished by scanning.easily distinguished by scanning.

34.34. Duplicate hits.Duplicate hits. List of found items contains List of found items contains duplicates.duplicates.

35.35. Search myopia: Missing relevant items.Search myopia: Missing relevant items. Items that should be found are not.Items that should be found are not.

36.36. Needle in a haystack: Piles of irrelevant hits.Needle in a haystack: Piles of irrelevant hits. Many items don’t match search criteria.Many items don’t match search criteria.

37.37. Hits sorted uselessly.Hits sorted uselessly. Sort-order of found Sort-order of found items doesn’t support user tasks.items doesn’t support user tasks.

38.38. Crazy search behavior.Crazy search behavior. Modifying search Modifying search criteria yields unexpected results.criteria yields unexpected results.

39.39. Search-terms not shown.Search-terms not shown. Not showing what Not showing what search terms produced these results.search terms produced these results.

40.40. Number of hits not revealed.Number of hits not revealed. Not showing Not showing how many items were found.how many items were found.

Chapter 6 – Text & Writing BloopersChapter 6 – Text & Writing Bloopers

41.41. Too much text.Too much text. Overly-verbose instructions, Overly-verbose instructions, messages, or link-labels.messages, or link-labels.

42.42. Speaking Geek.Speaking Geek. Computer jargon in error Computer jargon in error messages, commands, or instructions.messages, commands, or instructions.

43.43. Calling site visitors "user" .Calling site visitors "user" . Using the Using the computer jargon term "user" on a website.computer jargon term "user" on a website.

44.44. Insider jargon.Insider jargon. Using the vocabulary of Using the vocabulary of industry experts, rather than that of users.industry experts, rather than that of users.

45.45. Variable vocabulary: Different words for the Variable vocabulary: Different words for the same thing.same thing. Inconsistent terms. Inconsistent terms.

46.46. Inconsistent style.Inconsistent style. Text on site does not follow Text on site does not follow consistent style rules. consistent style rules.

47.47. Typos and grammos: Sloppy writing.Typos and grammos: Sloppy writing. Failing Failing to check and fix text before going live. to check and fix text before going live.

6464

Jeff Johnson’s Web BloopersJeff Johnson’s Web Bloopers

Chapter 7 – Link Appearance BloopersChapter 7 – Link Appearance Bloopers

48.48. Links don’t look like links.Links don’t look like links. Links not marked Links not marked well enough, so users miss them.well enough, so users miss them.

49.49. Non-links look like links.Non-links look like links. Non-link text is Non-link text is underlined; or non-link graphics look clickable.underlined; or non-link graphics look clickable.

50.50. Bizarre buttons: Click target smaller than it Bizarre buttons: Click target smaller than it seems.seems. Entire boxed area surrounding link label Entire boxed area surrounding link label looks like part of button, but only label accepts looks like part of button, but only label accepts clicks.clicks.

51.51. Wrapped links: How many?Wrapped links: How many? Multi-line text Multi-line text links.links.

52.52. "Click here": Burying links in text. "Click here": Burying links in text. Important Important navigation links embedded in prose.navigation links embedded in prose.

53.53. Been there, done that? Can’t tell.Been there, done that? Can’t tell. Traversed Traversed links not clearly marked.links not clearly marked.

Chapter 8 – Graphic Design & Layout BloopersChapter 8 – Graphic Design & Layout Bloopers

54.54. Tiny text.Tiny text. Text typeface too small for many Text typeface too small for many users to read.users to read.

55.55. Camouflaged text.Camouflaged text. Text contrasts poorly with Text contrasts poorly with background.background.

56.56. Centering everything.Centering everything. Centering prose text, Centering prose text, bullet items, controls, or data fields.bullet items, controls, or data fields.

57.57. Unobtrusive error messages.Unobtrusive error messages. Error messages Error messages easy to miss due to poor placement.easy to miss due to poor placement.

58.58. Shades of beige: color differences too Shades of beige: color differences too subtle.subtle. Relying on small color differences to Relying on small color differences to convey important meaning.convey important meaning.

59.59. Dead or Alive? Active buttons look inactive.Dead or Alive? Active buttons look inactive. Buttons appear "grayed out" but aren’t.Buttons appear "grayed out" but aren’t.

60.60. Terrible tabs.Terrible tabs. Navigation tabs don’t look and Navigation tabs don’t look and act enough like real tabs.act enough like real tabs.