Improving YourWebsite’s Usabilityfor Happier Visitors and Stickier User Experiences               Adam Dunford           a...
ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá   Usability forhappier visitors and stickier User       Adam Dunford
ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá   Usability forhappier visitors and stickier User       Adam Dunford
The $300,000,000     Button
Email:Password:    Login Register
Email:     Password:                Login Continue  You do not need to create an account to make purchases on our site.Sim...
$300,000,000
How can that work     for us?
What is usability?
“Every time you tryto define usability,God kills a kitten.”             —Jared Spool, UX icon
user ability
Can a useraccomplish their     goal?
Who is the user?
Hint: it’s not you.
The owners  are not the users.
Neither arethe designers.or developers.
“Because every personknows what he likes,every person thinks heis an expert on userinterfaces.”              —Paul Heckel,...
Use users to test   usability.
So the user canaccomplish their     goal.
For every dollar acompany invests toincrease usability, itreceives $10-$100 inbenefits.                    —IBM study
7 Usability Principles
1.   Create structure2.   Use standards3.   Be predictable4.   Reduce barriers5.   Add affordance6.   Give feedback7.   Si...
1.Create  Structure
“I need a quotehere”            —From someone
Organize Prioritize Group Separate    Differentiate
2.Use  Standards
“Users spend mostof their time onother sites.”            —Jakob Nielsen
Follow conventions
3.Be  Predictable
“A user interface iswell-designed when theprogram behavesexactly how the userthought it would.”                —Joel Spolsky
What does the userexpect to happen?
predictability ≠ consistency
4.Reduce  Barriers
“The most commonuser action on a Website is to flee.” —Edward Tufte, Information Design Guru
Provide for progressiveenhancement
5.Add  Affordance
“The only ‘intuitive’interface is thenipple. After that it’sall learned.”        —attributed to Bruce Ediger
Work around yourusers’ limitations.
Increase the size of your text. Makeyour form fields and buttons bigger. Addlabel tags to your form labels so thatwhen som...
6.Give  Feedback
Respond to everyuser action in a clear  and obvious way
7.Simplify
“Every time youprovide an option,youre asking a userto make a decision.”              —Joel Spolsky
Choices = Headaches             —Joel Spolsky
ReduceReplace HideRemove
“Simplicity is aboutsubtracting theobvious, and addingthe meaningful.”  — John Maeda, The Laws of Simplicity
Usability isn’t justabout interfaces.
Usability applies to   content too.
Create Structure•  Add sub-headings, bullets,   and lists; break up long   paragraphsUse Standards•  Try common word choic...
Be Predictable• Have a regular posting  schedule; focus on a  consistent topic or  audienceReduce Barriers• Add search fun...
Add Affordance•  Include descriptive   titles & links;   implement search   (again!)Give Feedback•  Respond to comments   ...
Simplify•  Clearly state your calls to   action; prune your   widgets; control your   tags; post only article   summaries ...
“Nothing is reallyusable until youlearn how to use it.”     — Peter Meyers, “The Paradox of                           Usab...
Wordpress Plugins1.   What Would Seth Godin Do?2.   Smart 4043.   Add to Any4.   Search Everything/Relevanssi5.   Yet Anot...
Can a useraccomplish their     goal?
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Upcoming SlideShare
Loading in …5
×

Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)

748 views
676 views

Published on

When designing a site or developing an application, the questions you ask--and the answers you give--about your users will make all the difference in your project's success.

Usability is "user ability" and this presentation explains its importance while giving essential interface design principles for better user experiences on the web.

First presented at WordCamp Utah 2010 (http://2010.utah.wordcamp.org/)

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
748
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • I’m Adam Dunford, I am designer and information architect. \n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • I’m Adam Dunford...and I love cowboys.\n
  • http://www.uie.com/articles/three_hund_million_button/\nJared Spool tells the story of an undisclosed ecommerce site for whom his team did usability testing. They brought people in, gave them money, and set them loose on the site to buy things.\n\n
  • When people went to checkout, they were presented with a simple form, including two buttons.\nFirst-time shoppers resented having to register. one said “I’m not here to enter into a relationship. I just want to buy something.”\nRepeat customers weren’t any happier. Many couldn’t remember their login information.\n
  • “The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: "You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout."\n\n
  • The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.”\n
  • \n
  • We want this presentation to be practical, so we’re going to forego any formal definitions of.\nThere’s User Experience, Interaction Design, Baxley's model of universal user interface, Challis Hodge’s experience design model, Peter Morville’s honeycomb, blah, blah, blah...nope, none of that.\n\nBesides..\n\n
  • And Jared Spool is like the god of usability\nWe’re going to stick with a simpler definition...\n
  • usability is user ability.\nPut another way….\n
  • This is a question we should be returning to constantly in our websites, is what we’re adding making it easier for the user to accomplish their goal.\nNow notice we aren’t saying “a goal” or even “my goal” but the one they set out to accomplish.\nAnd before we can even define what their goals are or should be, a more basic question should come up….\n
  • who is using our website? who do we want to use our website?\n
  • \n
  • \n
  • \n
  • So before we get into any specific usability advice, we want to make one thing clear.\n
  • This is the key to any successful usability effort.\n
  • \n
  • Or, in the case of a certain anonymous ecommerce company, $300 million in benefits.\n
  • \n
  • [after reading them] mention that these aren’t all mutually exclusive--creating structure simplifies things and when you simplify things that means you’re being more predictable.\n
  • \n
  • \n
  • Organize your interface\nPrioritize via hierarchy\nGroup related things together\nSeparate unrelated things\nDifferentiate dissimilar things\n
  • Better separation, appropriate emphasis\n
  • Font size used to prioritize\n
  • columns separating products, bars separating navigation\n
  • similar content grouped together, box colored background\n
  • \n
  • \n
  • \n
  • two-column, top-level navigation\n
  • two-column blog content\n
  • navigation across the top, chunking focus areas along the bottom\n
  • recent entries, twitter updates\n
  • http://www.intersmash.com/300images/\n
  • \n
  • \n
  • Underlines for links, red for error messages, click on header image to go to home page\n
  • when you go to submit a recipe, what do you expect will happen?\n
  • and what about clicking gallery?\n
  • good websites don’t spawn a new window or start downloading a pdf without making it pretty clear beforehand.\n
  • On the other hand...In Skype, if I want to login, I would expect to go where? “Already have Skype?” right?\n
  • Wrong! It takes me to this page, not a login page.\nIn fact, the original link has changed, and a new top-level tab has appeared “Account”\n(Besides, this is from a Mac--I’m not sure I care too much about an “all-new Skype for Windows”)\n
  • It’s only when I click on Account or Buy Skype Credit that I get the login page\nAnd look at that, the top sub nav changed again, only this time does it give me what i would have expected the first time “Sign In”\n
  • \n
  • Use common navigation for all pages\nPlace repetitive actions in the same location\nOrder buttons\n
  • \n
  • \n
  • \n
  • \n
  • http://wordpress.org/extend/plugins/art-direction/\n
  • \n
  • \n
  • So what you need to do to reduce barriers is to one: make your site load fast and then two: indicate clearly who you are, what you’re all about, and perhaps most importantly of all--what you want them to do. This is the call to action and every page should have one (at least one).\n
  • Upload now! login\n
  • sign-up now\n
  • The flipside of reducing barriers is adding functionality to make it quicker or easier to get things done.\nAs HTML alone doesn’t do that very well, we have AJAX, Javascript, Flash and so forth to provide for cool in-page interaction.\nThe one caveat of adding all this fancy stuff is that not every browser allows for that, so we must develop for the lowest common denominator first and then build from that. The bare minimum being, no plugins, javascript off, even images turned off.\n
  • interestingly, this is a service, a best practices repository of interface design and i can’t get in.\n
  • Luckily, they’ve since updated that page, still indicating that I need Silverlight, but they also provide an html-only version.\n
  • Hooray for progressive enhancement!\n
  • And one of the worst culprits? 37Signals.\nBasecamp requires javascript to even log on (although to their credit, their website doesn’t).\nYes, you could argue that they are just following their idea of “opinionated software”--after all, they’ve dropped actively supporting or testing for IE6--but is it a decision you’re willing to make, when 18-25% of users still run it.\n
  • Contrast that with Google, which provides a fully-functional email experience without javascript.\n
  • Up to this point, we’ve tried to avoid as much jargon as possible. Fitt’s law, Hick’s law, cognitive load, and the like.\nHowever there is one that, if you aren’t familiar with, you really should start using.\n
  • Affordance is really all about what makes something easy to do.\n
  • \n
  • And yes, there’s always something. If it’s not lack of flash support for a mobile device, it’s surfing on a slow EDGE network. If it’s not not javascript turned off, it’s accessibility and a visually impaired person. Make it easier for them to do what they want to do. Remeber, it’s their goal, not yours, and they’ll blame you, not their Commodore 64 if things aren’t working right.\n
  • \n
  • \n
  • \n
  • \n
  • Provide updates (spinners, alerts, progress bars, faded boxes)\nError messages – make them clear, highlight problems\nFeedback before they do anything – add descriptions (use optional rather than required)\n
  • \n
  • Feedback is a bigger deal with applications than with websites, but anything you can do to let your users know what’s going on, the better.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • haha, st00p1d M$! That never happens with apps on OSX! It’s unpossible!\n
  • uh….\n
  • umm….\n
  • http://www.joelonsoftware.com/items/2006/11/21.html\n\nThe thing is, although he’s referring to giving users headaches, the same applies to website designers and owners too.\nWho do you want to have the headaches? You? Or your users?\n
  • There are four basic ways to simplify:\nreduce - concise, simple wording\nreplace - use an icon or a dropdown\nhide - progressive disclosure - I NEED AN “R” WORD\nremove - get rid of it\n\ndecrease\ndelay/defer\ndelete\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://thenonbillablehour.typepad.com/nonbillable_hour/2010/08/is-your-website-for-your-clients-or-for-your-peers.html\n
  • http://www.usereffect.com/topic/paradox-of-usability\n
  • \n
  • This is a question we should be returning to constantly in our applications, is what we’re adding making it easier for the user to accomplish their goal.\nNow notice we aren’t saying “a goal” or even “my goal” but the one they set out to accomplish.\nAnd before we can even define what their goals are or should be, a more basic question should come up….\n
  • Gen. Stanley A. McChrystal, the leader of American and NATO forces in Afghanistan, was shown a PowerPoint slide in Kabul last summer that was meant to portray the complexity of American military strategy, but looked more like a bowl of spaghetti.\n\n“When we understand that slide, we’ll have won the war,” General McChrystal dryly remarked, one of his advisers recalled, as the room erupted in laughter.\n\nhttp://www.nytimes.com/2010/04/27/world/27powerpoint.html\n
  • \n
  • \n
  • Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)

    1. 1. Improving YourWebsite’s Usabilityfor Happier Visitors and Stickier User Experiences Adam Dunford adam@steepleashton.com
    2. 2. ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá Usability forhappier visitors and stickier User Adam Dunford
    3. 3. ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá Usability forhappier visitors and stickier User Adam Dunford
    4. 4. The $300,000,000 Button
    5. 5. Email:Password: Login Register
    6. 6. Email: Password: Login Continue You do not need to create an account to make purchases on our site.Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.
    7. 7. $300,000,000
    8. 8. How can that work for us?
    9. 9. What is usability?
    10. 10. “Every time you tryto define usability,God kills a kitten.” —Jared Spool, UX icon
    11. 11. user ability
    12. 12. Can a useraccomplish their goal?
    13. 13. Who is the user?
    14. 14. Hint: it’s not you.
    15. 15. The owners are not the users.
    16. 16. Neither arethe designers.or developers.
    17. 17. “Because every personknows what he likes,every person thinks heis an expert on userinterfaces.” —Paul Heckel, 1982
    18. 18. Use users to test usability.
    19. 19. So the user canaccomplish their goal.
    20. 20. For every dollar acompany invests toincrease usability, itreceives $10-$100 inbenefits. —IBM study
    21. 21. 7 Usability Principles
    22. 22. 1. Create structure2. Use standards3. Be predictable4. Reduce barriers5. Add affordance6. Give feedback7. Simplify
    23. 23. 1.Create Structure
    24. 24. “I need a quotehere” —From someone
    25. 25. Organize Prioritize Group Separate Differentiate
    26. 26. 2.Use Standards
    27. 27. “Users spend mostof their time onother sites.” —Jakob Nielsen
    28. 28. Follow conventions
    29. 29. 3.Be Predictable
    30. 30. “A user interface iswell-designed when theprogram behavesexactly how the userthought it would.” —Joel Spolsky
    31. 31. What does the userexpect to happen?
    32. 32. predictability ≠ consistency
    33. 33. 4.Reduce Barriers
    34. 34. “The most commonuser action on a Website is to flee.” —Edward Tufte, Information Design Guru
    35. 35. Provide for progressiveenhancement
    36. 36. 5.Add Affordance
    37. 37. “The only ‘intuitive’interface is thenipple. After that it’sall learned.” —attributed to Bruce Ediger
    38. 38. Work around yourusers’ limitations.
    39. 39. Increase the size of your text. Makeyour form fields and buttons bigger. Addlabel tags to your form labels so thatwhen someone clicks on it, the cursormoves to the field. Allow for togglingthrough your page using tabs. Addpadding to links so that they’re biggerto click on. Provide descriptions forexpected values. Have the page auto-focus on the first field.
    40. 40. 6.Give Feedback
    41. 41. Respond to everyuser action in a clear and obvious way
    42. 42. 7.Simplify
    43. 43. “Every time youprovide an option,youre asking a userto make a decision.” —Joel Spolsky
    44. 44. Choices = Headaches —Joel Spolsky
    45. 45. ReduceReplace HideRemove
    46. 46. “Simplicity is aboutsubtracting theobvious, and addingthe meaningful.” — John Maeda, The Laws of Simplicity
    47. 47. Usability isn’t justabout interfaces.
    48. 48. Usability applies to content too.
    49. 49. Create Structure• Add sub-headings, bullets, and lists; break up long paragraphsUse Standards• Try common word choices: About Us, Contact Us, Our Services, etc.; be consistent with tag names
    50. 50. Be Predictable• Have a regular posting schedule; focus on a consistent topic or audienceReduce Barriers• Add search functionality; post your contact info in an obvious place
    51. 51. Add Affordance• Include descriptive titles & links; implement search (again!)Give Feedback• Respond to comments (or explain why you don’t)
    52. 52. Simplify• Clearly state your calls to action; prune your widgets; control your tags; post only article summaries on blog main page
    53. 53. “Nothing is reallyusable until youlearn how to use it.” — Peter Meyers, “The Paradox of Usability”
    54. 54. Wordpress Plugins1. What Would Seth Godin Do?2. Smart 4043. Add to Any4. Search Everything/Relevanssi5. Yet Another Related Posts Plugin6. Dagon Design Sitemap Generator
    55. 55. Can a useraccomplish their goal?

    ×