• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
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)

on

  • 396 views

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

Statistics

Views

Total Views
396
Views on SlideShare
387
Embed Views
9

Actions

Likes
0
Downloads
4
Comments
0

3 Embeds 9

http://paper.li 7
http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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) Improving Your Website's Usability for Happier Visitors & Stickier User Experiences (WordCamp Utah 2010) Presentation Transcript