1 / 58

Web Design and Usability

Web Design and Usability. Purpose & Style of This Course. To get a better understanding about designing a website that is user friendly No programming (Yes, bummer I know) Analyzing and Discussing I want your opinions!. Course Objectives: Session 1. Chapter 1 - Don’t Make Me T hink!

hestia
Télécharger la présentation

Web Design and Usability

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design and Usability

  2. Purpose & Style of This Course • To get a better understanding about designing a website that is user friendly • No programming (Yes, bummer I know) • Analyzing and Discussing • I want your opinions!

  3. Course Objectives: Session 1 • Chapter 1 - Don’t Make Me Think! • Usability basics • Chapter 2 - How We Really Use the Web • Scanning, satisficing, and muddling through • Chapter 3 - Billboard Design 101 • Designing for scanning, not reading • Chapter 4 - Animal, Vegetable, or Mineral • Why users like mindless choices • Chapter 5 - Omit Needless Words • The art of not writing for the Web • Chapter 6 - Street signs and Breadcrumbs • Designing Navigation

  4. Course Objectives: Session 2 • Chapter 7 - The Big Bang Theory of Web Design • Chapter 8 – “The Farmer and the Cowman Should Be Friends” • Chapter 9 - Usability testing on 10 cents a day • Chapter 10 – Mobile: It’s not just a city in Alabama anymore

  5. Introduction [ 9 ] Basic Terms • Useful: Does it do something people need? • Learnable: Can people figure out how to use it? • Memorable: Do they have to relearn it each time they use it? • Effective: Does it get the job done? • Efficient: Does it do it with a reasonable amount of time and effort? • Desirable: Do people want it? • Delightful: Is using it enjoyable, or even fun?

  6. Chapter 7 [ 84 ] The Big Bang Theory of Web Design The importance of getting people off on the right foot

  7. Chapter 7 [ 85-87 ] The Home Page Design Needs to accommodate: • Site identity and mission • Site hierarchy • Search • Teases • Hints of good stuff • Content promos • Newest, popular • Feature promos • Explore additional stuff • Timely content • Signs of life content • Deals • Shortcuts • Downloads • Registration

  8. Chapter 7 [ 87 ] The Home Page Design AND Needs to: • Show me what I’m looking for • It’s obvious to find what I want • ..and what I’m not looking for • Show me wonderful new stuff • Show me where to start • Give me direction • Establish creditability and trust • Create a good first impression

  9. Chapter 7 [ 87-88 ] The Home Page Design AND deal with: • That everyone wants a piece of it (complex sites) • Most desirable real estate of website • Too many cooks • Because it’s the first impression, everyone has an opinion on how it should look and what should be on it • One size fits all • Must appeal to all users

  10. Chapter 7 [ 88 ] The Home Page Design Stakeholders vs. Reality design

  11. Chapter 7 [ 88-89 ] The Home Page Design Reality • Will involve compromise • Main point to remember • Home page is conveying the big picture

  12. Chapter 7 [ 88-89 ] The Home Page Design Answers the following questions at a glance, correctly and with very little effort.

  13. Chapter 7 [ 90 ] The Home Page Design If people are lost when they start out, they usually just keep getting…loster. Spell out the big picture. What you mean and what they think can be different.

  14. Chapter 7 [ 91 ] Plausible Excuses…

  15. Chapter 7 [ 92 ] But…the Home Page? Really? Yes, really. Even though people may not start there, they eventually always end up there.

  16. Chapter 7 [ 93 ] How To Get the Message Across • The tagline • Next to the Site ID (more on this coming up) • The Welcome blurb • Concise description • The “Learn more” • Having a video to explain things is more common now

  17. Chapter 7 [ 94-95 ] How To Get the Message Across Guidelines: • Use as much space as necessary • Convey “what is the purpose of this site for?” • …but not too much space • Keep is short, the most important features • Don’t use the mission statement as a Welcome blurb • It’s one of the most important things to test • Show the home page to people outside of your organization • See if they can see the “main point” of the site

  18. Chapter 7 [ 96-97 ] Nothing beats a good tagline!TM • Taglines are efficient ways to get your message across • Good ones are clear and informative; explains what your site/organization does • Just long enough, 6-8 words • Convey differentiation and a clear benefit • Are NOT generic (not mottos) • Are personable, lively, and sometimes clever

  19. Chapter 7 [ 96-97 ] Nothing beats a good tagline!TM http://jquery.com/ http://www.w3schools.com/

  20. Chapter 7 [ 98 ] We Don’t Need No Stinking Tagline • If you are a household name • Amazon.com, google.com • Site is well known from its offline origin • Target, Walmart, Barnes & Noble

  21. Chapter 7 [ 98 ] The Fifth Question Well, now that I know what I’m looking at, where do I start? After a quick once over, user should be able to say: • Here’s where to start if I want to search • Here’s where to start if I want to browse • Here’s where to start if I want to sample their best/featured stuff http://www.target.com/ http://www.walmart.com/

  22. Chapter 7 [ 99 ] Golden Geese Targeting Don’t overcrowd the Home page with promotions. It will lower the overall page effectiveness. Tip: Set aside 1-2 spots for promotions and change them up monthly. This also gives more evidence of “signs of life”

  23. Chapter 8 [ 102 ] The Farmer and the Cowman Should be Friends Why most arguments about usability are a waste of time, and how to avoid them

  24. Chapter 8 [ 103 ]

  25. Chapter 8 [ 104 ]

  26. Chapter 8 [ 105 ] “Everybody Likes .” Like all web users, we tend to have strong feelings about what we like and don’t like about web sites. When working on a web team, it’s very hard to check those feelings at the door.

  27. Chapter 8 [ 106 ] Farmer vs. Cowmen The ideal web page as seen by someone whose job is…

  28. Chapter 8 [ 107 ] Farmer vs. Cowmen Designer vs. Developer Designer & Developer vs. Upper Management, Marketing, Business Development

  29. Chapter 8 [ 108 ] The Myth of the Average User There is no Average User ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC

  30. Chapter 8 [ 109 ] The Real Question Don’t ask “Do most people like pull-down menus?” Ask “Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?

  31. Chapter 8 [ 109 ] The Answer… Usability Testing. More coming up…

  32. Chapter 9 [ 110 ] Usability Testing on 10 cents a day Keeping testing simple –so you do enough of it

  33. Chapter 9 [ 112-113 ] Focus Groups are Not Usability Tests Focus Group: • A small group of people talk about experiences and reactions of products. They are quickly getting samples of users’ feelings and opinions about things. Usability Tests: • Involve watching one person at a time try to use something to do typical tasks so you detect an fix things that confuse or frustrate them.

  34. Chapter 9 [ 114-115 ] Truths About Usability Testing • If you want a great site, you’ve got to test • Testing one user is 100% better than testing none • Testing one user early in the project is better than testing 50 near the end

  35. Chapter 9 [ 117 ] Truths About Usability Testing

  36. Chapter 9 [117 ] Truths About Usability Testing

  37. Chapter 9 [ 124-125 ] How Do You Choose the Tasks to Test? • Will depend on what you have available to test • Choose enough tasks to fill up the allotted testing time • Word the tasks carefully. Include descriptions like “Find a book you want to buy or a book you recently bought” instead of “Find a cookbook under $14.” (Set a scene.)

  38. Chapter 9 [ 125-126 ] What Happens During the Test? • Welcome – Explaining the test. • The questions – In case participant is confused. • The Home page tour – Show participant and ask for their first thoughts. • The tasks – Watch participant and continually ask them to say what’s on their mind. Keep notes. • Probing – After tasks, as participant questions about their experience. • Wrapping up -

  39. Chapter 9 [ 137 ] Typical Problems Most common usability problems: • Users are unclear on the concept • Users don’t get what the site is about/offering or get it wrong • The words they’re looking for aren’t there • The wording on the site doesn’t match with wording they typically use • There’s too much going on • The site is too cluttered with content

  40. Chapter 9 [ 138-139 ] Deciding What to Fix • Make a collective list • Choose the 10 most serious problems • Rate them • Create an ordered list • Keep a separate list of low-hanging fruit (easy fixes) • Resist the impulse to add things • Take “new feature” requests with a grain of salt • Ignore “kayak” problems (user goes astray but comes back quickly)

  41. Chapter 9 [ 140 ] Alternative Lifestyles • Remote testing • Participant tests from home with screen sharing software and microphone. • Unmoderated remote testing • Services like UserTesting.com, you send in tasks and link to prototype, site, mobile app. Then you get a video back of a person performing tasks. No interaction with participant though.

  42. Chapter 9 [141 ] Top 5 Plausible Reasons For Not Testing

  43. Chapter 10 [ 143 ] Mobile: It’s Not Just a City In Alabama Anymore Welcome to the 21st Century – You may experience a slight sense of vertigo

  44. Chapter 10 [ 144 ] What’s the Difference? • Not much. Basic usability principles still apply. • BUT there are new added challenges for a smaller, touch based screens. • What to do?

  45. Chapter 10 [ 145 ] It’s All About Tradeoffs • Constraints • Things you have to do and things you can’t do • Tradeoffs • The less-than-ideal choices you make to live with constraints No hovering allowed

  46. Chapter 10 [ 145-147 ] It’s All About Tradeoffs • Constraints actually make design easier and foster innovation… • Having something pinned down can have a focusing effect… • IF you always remember to think about the user experience

  47. Chapter 10 [ 148 ] Need To Prioritize Even More • Things used in a hurry or frequently should be close at hand • Should be an obvious path to get to them • Tapping 3-5 levels acceptable on mobile devices as long as the scent of information is strong

  48. Chapter 10 [ 149 ] Remember… managing real estate challenges shouldn’t be done at the cost of usability.

  49. Chapter 10 [ 150 ] Things That Help • Allow zooming (CSS3 book, page 456) • <meta name=“viewport” content=“width=device-width”> • Don’t force a user onto a mobile site and leave them at the home page when they originally clicked on a link to a specific page • Always provide a link to the “full” website. Tablet users may not want the mobile version.

  50. Chapter 10 [ 151 ] Don’t Hide Your Affordances • Affordances are visual cues that suggest how things can be used. • Like doorknobs/handles • They are the meat and potatoes of a visual user interface • The more clear the cues, the more unambiguous the signal

More Related