The Eyes Have It: Online and Usability

1
The Eyes Have ItOnline and Usability

• Jay Small
• Small Initiativesand E.W. Scripps Newspapers
  Interactive Group
• jay.small_at_smallinitiatives.com
• www.smallinitiatives.com

2
EyeTrackgut check
3
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?

4
People read two waysmethodical 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

5
Alternative story formshelped readers understand

• Gut check Logical
• Communicate in the most efficient manner
• But this is not purely a design or usability
  consideration

6
Bigger headlines and photos attracted print
readers, but directional elements drewonline
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

7
Photos got a lot of attentionin 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

8
Internet designisnt just aboutpleasingpeoples
eyes
9
Great Internet designhelps peopleget things done
10
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 colorpalettes in large, flattint
  blocks
• Semitransparentdrag-and-dropAjax widgets

11
and the meanings behind them

• Rounded corners, reflectionsmore organic feel
• Large text readability, clear messages
• All-Flash UIs More design control, refined,
  familiar reading experience
• Bold palettes Contrast helpsguide the eye
• Ajax widgets let them control experience,but
  for more than just news

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

13
which is whywe get home pageslike this

• Almost all text same size, same font, same
  spacing
• Too many mandatories!

14
Find, find, find!Search isnt the job, its
the method
15
Our sites long tail
KnoxNews home page 17 of overall traffic
16
Other side of power law
17
How people find all that other stuff on your site
This is just initial inbound (17.3 of
all finding methods)
18
Most Google referralspass by home page
19
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?

20
Typical news site search

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

21
But integrated search is growing

• One box, no filters, and a Go button

22
and heres what you get

• But, no refinement or search again cues

23
Good search liberates navigation
24
Is your content readyto be found?
25
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?sectioncarsid141refhom
  e
• http//sitename.com/2006/05/18/news/headline-here/
  
• Content-to-code ratio
• Good semantics in HTML documents
• Clear, keyword-rich taglines, titlesand
  headlines
• Not just a design/programming consideration

26
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

27
How site looks to a search engine

• Poodle Predictor, http//www.gritechnologies.com/t
  ools/spider.go

28
HTML with good SEO practices
Title
Specific metatags
Semantic markup
29
HTML with good SEO practices
Headings numbered by importance
Anchors (hyperlinks) with title values
30
SEO better investment than SEM
31
And good SEO becomes good usability
32
Ways to measure usability

• User testing
• Preselected tasks
• Self-selected tasks
• Mix tasks withimpressions feedback
• Focus groups lesseffective for this
• Heuristic evaluation
• EyeTrack
• Combine methods?

33
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 Id 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?

34
Software reduces lab costs

• Morae
• Users 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 observerscan mark timeline
  foreasier editing
• www.techsmith.com

35
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

36
So whats 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 dont get how much
  your site offers, and how hard youve worked to
  help them find it
• Again, good search can help!

37
Lessonsfromrecentdesign work
38
Form design too oftenan afterthought
39
Data design too oftenan afterthought
40
Browser-check everything
41
Home page doesnt need 300 links
42
Color palette can be subtle
43
Users seem OK with wider pages
44
Liquid layouts are still too hard
45
Classified splash pages are a mess
46
but a little TLC helps!
47
Most home pages fall apartin 2nd screen
48
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/

49
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/

50
The Eyes Have ItOnline and Usability

• Jay Small
• Small Initiativesand E.W. Scripps Newspapers
  Interactive Group
• jay.small_at_smallinitiatives.com
• www.smallinitiatives.com