1 5/17/06 Poynter Design, usability and your site How people use the Web, whether we like it or not...

1 • 5/17/06 • Poynter

Design, usability and your site

How people use the Web,whether we like it or not

— and what we can do about it

2 • 5/17/06 • Poynter

What are thecharacteristicsof your sites’

heaviest users?

3 • 5/17/06 • Poynter

They’re machines!

4 • 5/17/06 • Poynter

More like these…

5 • 5/17/06 • Poynter

Hot, hot, sexy, sizzling design trends!!!!!

• …that you can forget in five minutes:– Web 2.0 rounded corners– Unusually large form fields and text– The “Aqua” look– Font replacement– Bold tropical color

palettes in large, flattint blocks

– Semitransparentdrag-and-droppersonalized layouts

6 • 5/17/06 • Poynter

…and the meaningful values behind them

• Rounded corners, “Aqua”: more organic feel• Large text: readability• Font replacement: More refined, familiar reading

experience• Bold palettes: Contrast helps guide the eye• Personalized layouts: “daily me” but for more than

just news

7 • 5/17/06 • Poynter

Internet designisn’t just about

pleasingpeople’s eyes

8 • 5/17/06 • Poynter

Great Internet design

helps peopleget things done

9 • 5/17/06 • Poynter

‘Jobs to be done’ on news sites

• “Catch up on the news”• Find a specific article or image• Find mentions (names, events, landmarks)• Find out who died• Find something to do• Find stuff for sale• Find a job, car or home• Find out who won the game• Find stuff to watch or listen to• Find what opinion leaders said about a topic• Find or start a conversation• Others?

10 • 5/17/06 • Poynter

… which is why we get this …

• Almost all text same size, same font, same spacing

• Too many mandatories!

11 • 5/17/06 • Poynter

…and we’re not even sure if it works…

• Eyetrack III showed erratic scanning patterns

• Some findings counter to instinct– Want ’em to read? Make

text smaller!– Right-side navigation got

noticed more

• Study premise: “catch up on the news”

12 • 5/17/06 • Poynter

What about all the other jobs to be done?

• How do we know we’re doing these right?– Find a specific article or image– Find mentions (names, events, landmarks)– Find out who died– Find something to do– Find stuff for sale– Find a job, car or home– Find out who won the game– Find stuff to watch or listen to– Find what opinion leaders said about a topic– Find or start a conversation

13 • 5/17/06 • Poynter

Find, find, find!‘Search’ isn’t

the job, it’s the method

14 • 5/17/06 • Poynter

Typical news site search

• Form searches subset of whole site content, or makes user decide which set(s) to search

15 • 5/17/06 • Poynter

But integrated search is growing

• One box, no filters, and a Go button

16 • 5/17/06 • Poynter

…and here’s what you get

• But, no refinement or “search again” cues

17 • 5/17/06 • Poynter

Another integrated search UI

• Note site directory listings at top

18 • 5/17/06 • Poynter

How good search liberates navigation

19 • 5/17/06 • Poynter

Is your content ready

to be found?

20 • 5/17/06 • Poynter

Optimize designs for search engines

• Brand, URL, subdomain consistency– Try for “pretty” URLs

• sitename.com/cars OR cars.sitename.com BUT NOT sitename.com/index.php?section=cars&id=141&ref=home

• http://sitename.com/2006/05/18/news/headline-here/

• Content-to-code ratio• Semantically rich HTML documents with good

content-to-code ratio• Honest, detailed taglines and titles

21 • 5/17/06 • Poynter

Avoid these, or search spiders will

• Redirects and refreshes– Understand the “canonical” URL

• Keyword bombing• Same metatags, titles through whole site• Nasty markup, obsolete comments, inline scripts

and styles

22 • 5/17/06 • Poynter

How your site looks to a search engine

23 • 5/17/06 • Poynter

HTML with good SEO practices

TitleTitle

SpecificmetatagsSpecificmetatags

Semanticmarkup

Semanticmarkup

24 • 5/17/06 • Poynter

HTML with good SEO practices

Anchors (hyperlinks)with title values

Anchors (hyperlinks)with title values

Headings numberedby importance

Headings numberedby importance

25 • 5/17/06 • Poynter

What’s wrong with this picture?

• Why the low Google PageRank?

26 • 5/17/06 • Poynter

And what’s right about this one?

• Why the high Google PageRank?

27 • 5/17/06 • Poynter

SEO better investment than SEM

28 • 5/17/06 • Poynter

And good SEO becomes good usability

SEO Usability

Efficient document architecture Better performance

Everything labeled in plain text Easier task-oriented navigation

Alt-text and title-text Mouseover hints

Refined hyperlinking and URL structures

Intuitive screen-to-screen flows

Refined semantics Repurpose document for multiple platforms

Improved search engine rankings Easier for people who like to begin with Google, Yahoo et al

29 • 5/17/06 • Poynter

Ways to measure usability

• User testing– Preselected tasks– Self-selected tasks– Mix tasks with

“impressions” feedback– Focus groups less

effective for this

• Heuristic evaluation

30 • 5/17/06 • Poynter

Typical usability test case

• “Were you aware that sitex.com had listings of cars for sale?”

• “Have you ever used sitex.com to shop for or compare cars for sale?”

• “OK, now I’d like you to use sitex.com to find at least one used Ford Mustang for sale at an asking price of $14,000 or less.”

• [if successful] “Did you consider that process easy, difficult, or somewhere in between?”

• “Did you find what you expected?”

31 • 5/17/06 • Poynter

New software reduces lab costs

• Morae– User’s on-screen actions, facial reactions, recorded and

synchronized– Observers can be in remote location as long as Internet-

connected -- they see action in sync via Web video– Facilitator or observers

can mark timeline foreasier editing

– www.techsmith.com

32 • 5/17/06 • Poynter

What are usability heuristics?

• Generally accepted software usability principles– Users need clear indications from system about relationships between components– Users need feedback on system status: how far the user has come and has to go in

the current task– Employ ideas the user already understands and modes of interaction with which the

user is already comfortable– Reduce users' cognitive load: have them learn something once, apply it many times– Eliminate distractions– Do not punish users for mistakes; reward for completing tasks– Users should not be afforded the opportunity to make an error– Provide clear solutions to all difficulties users may encounter– Make the system's operation as obvious as possible– Design to allow for individual differences in users' experience– Anything the system can do to make work easier for the user the system should do

33 • 5/17/06 • Poynter

So what’s the problem?

• All those jobs to be done• Tendency to pack too many value propositions into

top-level designs• Tendency to try to accomplish too much in a single

round of testing• Disappointment that people “don’t get” how much

your site offers, and how hard you’ve worked to help them find it

• Again, good search can help!

34 • 5/17/06 • Poynter

Usability stretches beyond your site’s edge

• Many test subjects start by typing the target site’s URL … into Google!

• No amount of design expertise applied to your site overcomes this habit

• So you have to consider search sites’ presentation of your content when you design it

35 • 5/17/06 • Poynter

Lessonsfrom

recentdesign work

36 • 5/17/06 • Poynter

Home page doesn’t need 300 links

37 • 5/17/06 • Poynter

Color palette can be subtle

38 • 5/17/06 • Poynter

Users seem OK with wider pages

39 • 5/17/06 • Poynter

…and liquid layouts are still too hard

40 • 5/17/06 • Poynter

Classified splash pages are a mess

41 • 5/17/06 • Poynter

…but a little TLC helps!

42 • 5/17/06 • Poynter

Most home pages fall apart in 2nd screen

43 • 5/17/06 • Poynter

Form design too often an afterthought

44 • 5/17/06 • Poynter

Great SEO resources

• See your site as search engines see it• http://www.1-hit.com/all-in-one/tool.search-engine-viewer.htm

• Firefox SEO/SEM plugins• http://seopen.com/firefox-extension/index.php

• Code-to-content ratio calculator• http://www.holovaty.com/tools/getcontentsize/

• Google for Webmasters• http://www.google.com/support/webmasters/

45 • 5/17/06 • Poynter

Great design resources

• The Web Standards Project• http://www.webstandards.org/

• Web Site Optimization• http://www.websiteoptimization.com/

• Vitamin: All about Web design• http://thinkvitamin.com/

• SitePoint• http://www.sitepoint.com/

• A List Apart• http://www.alistapart.com/

• Web Developer toolbar for Firefox• http://chrispederick.com/work/webdeveloper/