Your SlideShare is downloading. ×
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

572
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. …

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
572
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Improving YourWebsite’s Usabilityfor Happier Visitors and Stickier User Experiences Adam Dunford adam@steepleashton.com
    • 2. ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá Usability forhappier visitors and stickier User Adam Dunford
    • 3. ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá Usability forhappier visitors and stickier User Adam Dunford
    • 4. The $300,000,000 Button
    • 5. Email:Password: Login Register
    • 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. $300,000,000
    • 8. How can that work for us?
    • 9. What is usability?
    • 10. “Every time you tryto define usability,God kills a kitten.” —Jared Spool, UX icon
    • 11. user ability
    • 12. Can a useraccomplish their goal?
    • 13. Who is the user?
    • 14. Hint: it’s not you.
    • 15. The owners are not the users.
    • 16. Neither arethe designers.or developers.
    • 17. “Because every personknows what he likes,every person thinks heis an expert on userinterfaces.” —Paul Heckel, 1982
    • 18. Use users to test usability.
    • 19. So the user canaccomplish their goal.
    • 20. For every dollar acompany invests toincrease usability, itreceives $10-$100 inbenefits. —IBM study
    • 21. 7 Usability Principles
    • 22. 1. Create structure2. Use standards3. Be predictable4. Reduce barriers5. Add affordance6. Give feedback7. Simplify
    • 23. 1.Create Structure
    • 24. “I need a quotehere” —From someone
    • 25. Organize Prioritize Group Separate Differentiate
    • 26. 2.Use Standards
    • 27. “Users spend mostof their time onother sites.” —Jakob Nielsen
    • 28. Follow conventions
    • 29. 3.Be Predictable
    • 30. “A user interface iswell-designed when theprogram behavesexactly how the userthought it would.” —Joel Spolsky
    • 31. What does the userexpect to happen?
    • 32. predictability ≠ consistency
    • 33. 4.Reduce Barriers
    • 34. “The most commonuser action on a Website is to flee.” —Edward Tufte, Information Design Guru
    • 35. Provide for progressiveenhancement
    • 36. 5.Add Affordance
    • 37. “The only ‘intuitive’interface is thenipple. After that it’sall learned.” —attributed to Bruce Ediger
    • 38. Work around yourusers’ limitations.
    • 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. 6.Give Feedback
    • 41. Respond to everyuser action in a clear and obvious way
    • 42. 7.Simplify
    • 43. “Every time youprovide an option,youre asking a userto make a decision.” —Joel Spolsky
    • 44. Choices = Headaches —Joel Spolsky
    • 45. ReduceReplace HideRemove
    • 46. “Simplicity is aboutsubtracting theobvious, and addingthe meaningful.” — John Maeda, The Laws of Simplicity
    • 47. Usability isn’t justabout interfaces.
    • 48. Usability applies to content too.
    • 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. 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. Add Affordance• Include descriptive titles & links; implement search (again!)Give Feedback• Respond to comments (or explain why you don’t)
    • 52. Simplify• Clearly state your calls to action; prune your widgets; control your tags; post only article summaries on blog main page
    • 53. “Nothing is reallyusable until youlearn how to use it.” — Peter Meyers, “The Paradox of Usability”
    • 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. Can a useraccomplish their goal?