070531 poynter usability

The Eyes Have It:Online and Usability: 

The Eyes Have It: Online and Usability Jay Small Small Initiatives and E.W. Scripps Newspapers Interactive Group jay.small@smallinitiatives.com www.smallinitiatives.com

EyeTrackgut check: 

EyeTrack gut check

People read a high volume of story text in both print and online: 

People read a high volume of story text in both print and online Gut check: Caution Awareness of test may affect result Logical that people read in detail when subject matter is interesting/compelling Higher online rate: tied to task orientation?

People read two ways:methodical or scanning: 

People read two ways: methodical or scanning Gut check: Logical More print readers methodical Nature of well-understood newspaper ‘browse’ interface More online readers scan More online screen space devoted to scannable devices such as navigation, actions such as links

Alternative story formshelped readers understand: 

Alternative story forms helped readers understand Gut check: Logical Communicate in the most efficient manner But … this is not purely a design or usability consideration

Bigger headlines and photos attracted print readers, but directional elements drewonline readers: 

Bigger headlines and photos attracted print readers, but directional elements drew online readers Gut check: Logical Navigation of a newspaper is well understood; not so of most Web sites Not good news for Web designers Not a call to bake in more navigation

Photos got a lot of attentionin print: 

Photos got a lot of attention in print Gut check: No s---! Imagery as a whole gets a lot of attention online, too Not when competing for attention with 300 other elements on an index page Good to hear a good news photo still wins

Internet designisn’t just aboutpleasingpeople’s eyes: 

Internet design isn’t just about pleasing people’s eyes

Great Internet designhelps peopleget things done: 

Great Internet design helps people get things done

Hot, hot, sexy, sizzling (and hot) design trends!!!!!: 

Hot, hot, sexy, sizzling (and hot) design trends!!!!! …that you can forget in five minutes: Rounded corners, watery reflections Unusually large form fields and text Tag clouds Font replacement, all-Flash UIs Bold tropical color palettes in large, flat tint blocks Semitransparent drag-and-drop Ajax widgets

…and the meanings behind them: 

…and the meanings behind them Rounded corners, reflections: more organic feel Large text: readability, clear messages All-Flash UIs: More design control, refined, familiar reading experience Bold palettes: Contrast helps guide the eye Ajax widgets: let them control experience, but for more than just news

‘Jobs to be done’ on news sites: 

‘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?

… which is whywe get home pageslike this …: 

… which is why we get home pages like this … Almost all text same size, same font, same spacing Too many mandatories!

Find, find, find!‘Search’ isn’t the job, it’s the method: 

Find, find, find! ‘Search’ isn’t the job, it’s the method

Our sites’ ‘long tail’: 

Our sites’ ‘long tail’ KnoxNews home page: 17% of overall traffic

Other side of ‘power law’: 

Other side of ‘power law’

How people find all that other stuff on your site: 

How people find all that other stuff on your site This is just initial inbound (17.3% of all finding methods)

Most Google referralspass by home page: 

Most Google referrals pass by home page

Do the math: 

Do the math It is likely that Google drives as much news-seeking traffic to the article level of your site as your home page and all navigation indexes combined How much time do you spend… Fidgeting with your home page ‘look’ … vs. … Working on SEO and links at the article level?

Typical news site search: 

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

But integrated search is growing: 

But integrated search is growing One box, no filters, and a Go button

…and here’s what you get: 

…and here’s what you get But, no refinement or “search again” cues

Good search liberates navigation: 

Good search liberates navigation

Is your content readyto be found?: 

Is your content ready to be found?

Optimize for search engines: 

Optimize 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 Good semantics in HTML documents Clear, keyword-rich taglines, titles and headlines Not just a design/programming consideration

Avoid these, or search spiders will: 

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

How site looks to a search engine: 

How site looks to a search engine Poodle Predictor, http://www.gritechnologies.com/tools/spider.go

HTML with good SEO practices: 

HTML with good SEO practices Title Specific metatags Semantic markup

HTML with good SEO practices: 

HTML with good SEO practices Anchors (hyperlinks) with title values Headings numbered by importance

SEO better investment than SEM: 

SEO better investment than SEM

And good SEO becomes good usability: 

And good SEO becomes good usability

Ways to measure usability: 

Ways to measure usability User testing Preselected tasks Self-selected tasks Mix tasks with “impressions” feedback Focus groups less effective for this Heuristic evaluation EyeTrack Combine methods?

Typical usability test case: 

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?”

Software reduces lab costs: 

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 for easier editing www.techsmith.com

What are usability heuristics?: 

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

So what’s the problem?: 

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!

Lessonsfromrecentdesign work: 

Lessons from recent design work

Form design too oftenan afterthought: 

Form design too often an afterthought

Data design too oftenan afterthought: 

Data design too often an afterthought

Browser-check everything: 

Browser-check everything

Home page doesn’t need 300 links: 

Home page doesn’t need 300 links

Color palette can be subtle: 

Color palette can be subtle

Users seem OK with wider pages: 

Users seem OK with wider pages

Liquid layouts are still too hard: 

Liquid layouts are still too hard

Classified splash pages are a mess: 

Classified splash pages are a mess

…but a little TLC helps!: 

…but a little TLC helps!

Most home pages fall apartin 2nd screen: 

Most home pages fall apart in 2nd screen

Great SEO resources: 

Great SEO resources See your site as search engines see it http://www.gritechnologies.com/tools/spider.go 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/

Great design resources: 

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/

The Eyes Have It:Online and Usability: 

The Eyes Have It: Online and Usability Jay Small Small Initiatives and E.W. Scripps Newspapers Interactive Group jay.small@smallinitiatives.com www.smallinitiatives.com