Upload
laurel-hardy
View
213
Download
0
Tags:
Embed Size (px)
Citation preview
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/