Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
•Transferir como KEY, PDF•
0 gostou•763 visualizações
This document discusses improving website usability for happier visitors and stickier user experiences. It outlines seven key usability principles: create structure, use standards, be predictable, reduce barriers, add affordance, give feedback, and simplify. Following these principles can help users accomplish their goals and improve the user experience. The document provides examples and explanations for how to apply each principle to both the interface design and content of a website.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
Semelhante a Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010) (20)
Último
Último (20)
Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010)
- 1. Improving Your Website’s Usability for Happier Visitors and Stickier User Experiences Adam Dunford adam@steepleashton.com
- 3. ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá Usability for happier visitors and stickier User Adam Dunford
- 4. ÅÑÜÉä|Çz çÉâÜ jxuá|àxËá Usability for happier visitors and stickier User Adam Dunford
- 5. The $300,000,000 Button
- 6. Email: Password: Login Register
- 7. 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.
- 8. $300,000,000
- 9. How can that work for us?
- 11. “Every time you try to define usability, God kills a kitten.” —Jared Spool, UX icon
- 12. user ability
- 13. Can a user accomplish their goal?
- 14. Who is the user?
- 15. Hint: it’s not you.
- 16. The owners are not the users.
- 17. Neither are the designers. or developers.
- 18. “Because every person knows what he likes, every person thinks he is an expert on user interfaces.” —Paul Heckel, 1982
- 19. Use users to test usability.
- 20. So the user can accomplish their goal.
- 21. For every dollar a company invests to increase usability, it receives $10-$100 in benefits. —IBM study
- 23. 1. Create structure 2. Use standards 3. Be predictable 4. Reduce barriers 5. Add affordance 6. Give feedback 7. Simplify
- 25. “I need a quote here” —From someone
- 26. Organize Prioritize Group Separate Differentiate
- 31. 2.Use Standards
- 32. “Users spend most of their time on other sites.” —Jakob Nielsen
- 39. 3.Be Predictable
- 40. “A user interface is well-designed when the program behaves exactly how the user thought it would.” —Joel Spolsky
- 41. What does the user expect to happen?
- 56. “The most common user action on a Web site is to flee.” —Edward Tufte, Information Design Guru
- 66. 5.Add Affordance
- 67. “The only ‘intuitive’ interface is the nipple. After that it’s all learned.” —attributed to Bruce Ediger
- 68. Work around your users’ limitations.
- 70. Increase the size of your text. Make your form fields and buttons bigger. Add label tags to your form labels so that when someone clicks on it, the cursor moves to the field. Allow for toggling through your page using tabs. Add padding to links so that they’re bigger to click on. Provide descriptions for expected values. Have the page auto- focus on the first field.
- 73. 6.Give Feedback
- 74. Respond to every user action in a clear and obvious way
- 77. 7.Simplify
- 78. “Every time you provide an option, you're asking a user to make a decision.” —Joel Spolsky
- 85. Choices = Headaches —Joel Spolsky
- 90. “Simplicity is about subtracting the obvious, and adding the meaningful.” — John Maeda, The Laws of Simplicity
- 94. Usability isn’t just about interfaces.
- 95. Usability applies to content too.
- 96. Create Structure • Add sub-headings, bullets, and lists; break up long paragraphs Use Standards • Try common word choices: About Us, Contact Us, Our Services, etc.; be consistent with tag names
- 97. Be Predictable • Have a regular posting schedule; focus on a consistent topic or audience Reduce Barriers • Add search functionality; post your contact info in an obvious place
- 98. Add Affordance • Include descriptive titles & links; implement search (again!) Give Feedback • Respond to comments (or explain why you don’t)
- 99. Simplify • Clearly state your calls to action; prune your widgets; control your tags; post only article summaries on blog main page
- 101. “Nothing is really usable until you learn how to use it.” — Peter Meyers, “The Paradox of Usability”
- 102. Wordpress Plugins 1. What Would Seth Godin Do? 2. Smart 404 3. Add to Any 4. Search Everything/Relevanssi 5. Yet Another Related Posts Plugin 6. Dagon Design Sitemap Generator
- 103. Can a user accomplish their goal?
Notas do Editor
- 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