Website Usability | Class 1


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website Usability | Class 1

  1. 1. HELLO, Website Usability I: Foundations Professor Cathline Marshall c.marshall.nyu@gmail.comFriday, July 13, 2012
  2. 2. PLEASE MAKE A NAME CARD.Friday, July 13, 2012
  4. 4. COURSE OBJECTIVE: To provide a foundation that will allow students to successfully build a usable website. We will look at the roles information architecture, navigation, design, and writing play in creating a usable website. Additionally, we will perform a usability test. Each class will have lecture and workshop segments.Friday, July 13, 2012
  6. 6. WORKSHOP #1 Please divide into three groups. GROUP #1: GROUP #2: GROUP #3: Answer: What is the purpose of the site? What can you do on the site? What do you think the main goal of the site is? Can you find the contact info?Friday, July 13, 2012
  7. 7. WHAT IS USABILITY?Friday, July 13, 2012
  8. 8. Friday, July 13, 2012
  9. 9. Friday, July 13, 2012
  10. 10. Friday, July 13, 2012
  11. 11. Friday, July 13, 2012
  12. 12. Friday, July 13, 2012
  13. 13. WHAT IS USABILITY?Friday, July 13, 2012
  14. 14. Usability is “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.” (ISO 9241-11)Friday, July 13, 2012
  15. 15. “In human-computer interaction and computer science, usability usually refers to the elegance and clarity with which the user interface of a computer program or a web site is designed.” (Wikipedia)Friday, July 13, 2012
  16. 16. “...the measure of the quality of a user’s experience when interacting with a product or system,” whether a Web site, a software application, mobile technology, or any user- operated device.” (, July 13, 2012
  17. 17. “Usability really just means making sure that something works well: that a person of average (or even below average) ability and experience can use the thing - whether its a Web site, a fighter jet, or a revolving door - for its intended purpose without getting hopelessly frustrated.” (Steve Krug)Friday, July 13, 2012
  18. 18. DON’T MAKE ME THINK.Friday, July 13, 2012
  19. 19. THINGS THAT MAKE US THINK: Where do I start? What do they do? Clever names/Marketing induced names Links that are not self evident Navigation in non traditional places Where’s the contact info? Where do I sign in?Friday, July 13, 2012
  20. 20. WHAT USERS LOOK FOR: Ease of use Speed Practicality Credibility Consistency Simplicity, simplicity, simplicityFriday, July 13, 2012
  21. 21. HUMAN FACTORSFriday, July 13, 2012
  22. 22. HUMAN FACTORS Forms the basis of usability testing. Has its roots in military research. Understanding how people think and interact with their environment.Friday, July 13, 2012
  23. 23. THE HISTORY OF USABILITY The study of human factors dates back to World War II, when the growing complexity of fighter planes created a need for more user friendly designs.Friday, July 13, 2012
  24. 24. HUMAN FACTORS INCORPORATES: Psychology Engineering Industrial design Graphic design StatisticsFriday, July 13, 2012
  25. 25. HUMAN FACTORS SPECIALISTS: Design products for improved safety & ease of use Design systems to accommodate specific user groups Raise productivity by improving human performance Improve information displays to reduce human errorFriday, July 13, 2012
  26. 26. THREE MILE ISLAND A control panel status made engineers think that a valve had been engaged, while the status simply meant that the valve had been attempted to be engaged.Friday, July 13, 2012
  27. 27. THE WEB HAS CHANGED.Friday, July 13, 2012
  28. 28. Friday, July 13, 2012
  29. 29. Friday, July 13, 2012
  30. 30. Friday, July 13, 2012
  31. 31. Friday, July 13, 2012
  32. 32. WORKSHOP #2 Scenario: You’ve just rented a new apartment and your landlord told you to open an account with ConEd to get your electricity turned on. Go for it.Friday, July 13, 2012
  33. 33. HOW PEOPLE USE SITES.Friday, July 13, 2012
  34. 34. AFFORDANCE The perceived ability of an object to behave in a certain • way, by nature of its design. •The quality of an object which allows one to perform an action.Friday, July 13, 2012
  35. 35. Friday, July 13, 2012
  36. 36. Friday, July 13, 2012
  37. 37. Friday, July 13, 2012
  38. 38. Friday, July 13, 2012
  39. 39. Friday, July 13, 2012
  40. 40. I’m a button. Really, I am.Friday, July 13, 2012
  41. 41. I’m a button. Really, I am.Friday, July 13, 2012
  42. 42. I’m a button. Really, I am.Friday, July 13, 2012
  43. 43. I’m a button. Really, I am.Friday, July 13, 2012
  44. 44. I’m a button. Really, I am.Friday, July 13, 2012
  45. 45. What does this thing do?Friday, July 13, 2012
  46. 46. What does this thing do?Friday, July 13, 2012
  47. 47. SIGNIFIERS People search for clues to help them understand context.Friday, July 13, 2012
  48. 48. Photo: CelticSong22Friday, July 13, 2012
  49. 49. Friday, July 13, 2012
  50. 50. Friday, July 13, 2012
  51. 51. PUT IT IN CONTEXT People need some way of understanding the product or service. Forget affordances: what people need are signifiers. They are broader and richer. They provide valuable clues to sift information.Friday, July 13, 2012
  52. 52. DESIGN ELEMENTS Websites rely on pictures and icons to convey messages. Design elements that give the user context: Navigation Buttons IconsFriday, July 13, 2012
  53. 53. NavigationFriday, July 13, 2012
  54. 54. ButtonsFriday, July 13, 2012
  55. 55. IconsFriday, July 13, 2012
  56. 56. MENTAL MODELS Our ideas of how things work. Are an explanation of our thought process about how something works. Includes what we think is true, not necessarily what is actually true.Friday, July 13, 2012
  57. 57. Why, oh why, do people search for a website if they already know its name?, July 13, 2012
  58. 58., July 13, 2012
  59. 59. USER ACTIONS Users plan actions based on their models. People expect websites to act alike. Goal is to create interfaces that match how people think something should work.Friday, July 13, 2012
  60. 60. WHY DOESN’T THIS IPAD WORK? (because it’s a magazine)Friday, July 13, 2012
  61. 61. DIAGNOSING PROBLEMS Understanding the concept of mental models can help you make sense of usability problems. Users expect to know which elements on a page are clickable. On e-commerce sites they expect to see photos. Headings, labels and categories will differ depending on target audience.Friday, July 13, 2012
  62. 62. HOW PEOPLE USE SITES.Friday, July 13, 2012
  63. 63. YOU HAVE LESS THAN TWO MINUTES TO COMMUNICATE THE FIRST TIME A PROSPECTIVE CUSTOMER VISITS YOUR WEBSITE. Every page must justify its claim on their time. If a page doesn’t do that immediately and clearly, users go elsewhere. Most people don’t even bother scrolling to see what’s farther down the page.Friday, July 13, 2012
  64. 64. THE AVERAGE USER... ...will fail a third of the time when trying to complete a task. ...will choose sites that have proven useful in the past. ...will spend 1 minute 49 seconds on a site before abandoning. ...will visit 3.2 sites (besides search engines) to find a site. ...has only a 12% possibility of revisiting a site.Friday, July 13, 2012
  65. 65. MORE ABOUT USERS... Users don’t read they scan. Users don’t make optimal choices. Users don’t figure out how things work. Users don’t always come through the homepage.Friday, July 13, 2012
  66. 66. GUIDELINES Let users know where they are and how to proceed. Company name or logo in upper left corner Direct, one click link to home page Search (ideally in upper right corner) Consider using breadcrumbs to orient userFriday, July 13, 2012
  67. 67. WHY PEOPLE LEAVE SITES.Friday, July 13, 2012
  68. 68. BACKGROUND MUSIC why is this playing?!Friday, July 13, 2012
  69. 69. POP UPSFriday, July 13, 2012
  70. 70. LONG WAIT TIMEFriday, July 13, 2012
  71. 71. CAN’T FIND SOMETHINGFriday, July 13, 2012
  72. 72. Friday, July 13, 2012
  73. 73. CAN’T TELL WHAT IT’S ABOUT (, July 13, 2012
  74. 74. PAGINATIONFriday, July 13, 2012
  75. 75. INTERSTITIAL ADSFriday, July 13, 2012
  76. 76. BAD NAVIGATIONFriday, July 13, 2012
  77. 77. Friday, July 13, 2012
  78. 78. POOR INFORMATION SCENT - dictates maximum benefit for minimum effort - users access if their paths show cues related to desired outcome - progress must seem rapid to be worth the effort required to reach the destination - don’t use made up wordsFriday, July 13, 2012
  79. 79. Friday, July 13, 2012
  80. 80. REQUIRED TO REGISTERFriday, July 13, 2012
  81. 81. TOO MUCH MOVEMENT one exception.Friday, July 13, 2012
  82. 82. TYPOS & POOR GRAMMAR My suns is cutting wood with a acts but they ain’t aloud to drink ail in front of there ant.Friday, July 13, 2012
  83. 83. LAME FONTSFriday, July 13, 2012
  84. 84. COBWEBSFriday, July 13, 2012
  85. 85. LACK OF CLARITYFriday, July 13, 2012
  86. 86. Friday, July 13, 2012
  87. 87. FLASH BASEDFriday, July 13, 2012
  88. 88. NO ABOUT OR CONTACT PAGEFriday, July 13, 2012
  89. 89. PR JARGON Blue-sky thinking = Creative Grey Beard = Corporate Head Seed = ShareFriday, July 13, 2012
  90. 90. IT’S UGLY.Friday, July 13, 2012
  91. 91. USER CENTERED DESIGNFriday, July 13, 2012
  92. 92. WHAT IS USER CENTERED DESIGN? Design philosophy that focuses on the end user through: Planning Phase Design Phase Development Phase Requires research on end user.Friday, July 13, 2012
  93. 93. ISO 9241-210 (formerly 13407) International standard for human-centered process.Friday, July 13, 2012
  94. 94. ISO 9241-210 (formerly 13407) 6 key principles that will ensure your design is user centered: 1. The design is based upon an explicit understanding of users, tasks and environments. 2. Users are involved throughout design and development. 3. The design is driven and refined by user-centered evaluation.Friday, July 13, 2012
  95. 95. ISO 9241-210 (formerly 13407) The process is iterative. The design addresses the whole user experience. The design team includes multidisciplinary skills and perspectives.Friday, July 13, 2012
  96. 96. STEP #1: Identify your users. Who are they? What are their tasks and goals? What is their experience level?Friday, July 13, 2012
  97. 97. KNOW YOUR USERS Who are the users? What do they need to do, their tasks? What do they currently do? How satisfied are they with their current routines? What is their experience level? What kind of environment are they working in? What are their preferences, and their goals?Friday, July 13, 2012
  98. 98. STEP #2: What functions are required? What information do they need? What form should it be? How do users think it should work?Friday, July 13, 2012
  99. 99. STEP #3: Create design solutions. (Think simplicity, simplicity, simplicity.)Friday, July 13, 2012
  100. 100. STEP #4: Evaluate designs by testing usability.Friday, July 13, 2012
  102. 102. enlargeFriday, July 13, 2012
  103. 103. THE TEN USABILITY HEURISTICSFriday, July 13, 2012
  104. 104. THE TEN USABILITY HEURISTICS These are ten general principles for user interface design. They are called “heuristics” because they are more in the nature of rules of thumb than specific usability guidelines. -Jacob Nielsen, 1994Friday, July 13, 2012
  106. 106. #1 VISIBILITY OF SYSTEM STATUS The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.Friday, July 13, 2012
  107. 107. DOFriday, July 13, 2012
  108. 108. Friday, July 13, 2012
  109. 109. DON’TFriday, July 13, 2012
  110. 110. Friday, July 13, 2012
  111. 111. #2 MATCH BETWEEN SYSTEM AND THE REAL WORLD The system should speak the users language, with words, phrases and concepts familiar to the user, rather than system- oriented terms. Follow real-world conventions, making information appear in a natural and logical order.Friday, July 13, 2012
  112. 112. DOFriday, July 13, 2012
  113. 113. Friday, July 13, 2012
  114. 114. DON’TFriday, July 13, 2012
  115. 115. Friday, July 13, 2012
  116. 116. #3 USER CONTROL AND FREEDOM Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.Friday, July 13, 2012
  117. 117. DOFriday, July 13, 2012
  118. 118. Friday, July 13, 2012
  119. 119. DON’TFriday, July 13, 2012
  120. 120. Friday, July 13, 2012
  121. 121. #4 CONSISTENCY AND STANDARDS Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.Friday, July 13, 2012
  122. 122. DOFriday, July 13, 2012
  123. 123. Friday, July 13, 2012
  124. 124. DON’TFriday, July 13, 2012
  125. 125. Friday, July 13, 2012
  126. 126. #5 ERROR PREVENTION Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.Friday, July 13, 2012
  127. 127. DOFriday, July 13, 2012
  128. 128. Friday, July 13, 2012
  129. 129. DON’TFriday, July 13, 2012
  130. 130. Friday, July 13, 2012
  131. 131. #6 RECOGNITION RATHER THAN RECALL Minimize the users memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.Friday, July 13, 2012
  132. 132. DOFriday, July 13, 2012
  133. 133. Friday, July 13, 2012
  134. 134. DON’TFriday, July 13, 2012
  135. 135. Friday, July 13, 2012
  136. 136. #7 FLEXIBILITY AND EFFICIENCY OF USE Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.Friday, July 13, 2012
  137. 137. DOFriday, July 13, 2012
  138. 138. Friday, July 13, 2012
  139. 139. DON’TFriday, July 13, 2012
  140. 140. Friday, July 13, 2012
  141. 141. #8 AESTHETIC AND MINIMALIST DESIGN Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.Friday, July 13, 2012
  142. 142. DOFriday, July 13, 2012
  143. 143. Friday, July 13, 2012
  144. 144. DON’TFriday, July 13, 2012
  145. 145. Friday, July 13, 2012
  146. 146. #9 HELP USERS RECOGNIZE, DIAGNOSE, & RECOVER FROM ERRORS Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.Friday, July 13, 2012
  147. 147. DOFriday, July 13, 2012
  148. 148. Friday, July 13, 2012
  149. 149. DON’TFriday, July 13, 2012
  150. 150. Friday, July 13, 2012
  151. 151. #10 HELP AND DOCUMENTATION Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the users task, list concrete steps to be carried out, and not be too large.Friday, July 13, 2012
  152. 152. DOFriday, July 13, 2012
  153. 153. Friday, July 13, 2012
  154. 154. DON’TFriday, July 13, 2012
  155. 155. Friday, July 13, 2012
  156. 156. USABILITY REVIEWSFriday, July 13, 2012
  157. 157. Your blog name is too long, it doesn’t A search box is a great thing to have, sound like a website name. It also and this is the perfect place to put it. sounds like it’s referring to a specific discovery. A shorter blog name will allow people to remember your site and URL more easily. You don’t need a comment feed.. Unless you know for a fact that your users are using this feature, just having a This small square should not be there, it post feed is fine enough. Then you don’t links to different version of the about even need to have all that text, the page with no title.You can delete that orange icon is an industry standard. page to get rid of the square. This title is too long. People get confused by page titles that do not Though aesthetically pleasing, this image describe the page intuitively and just doesn’t say “science”. It speaks concisely. It should read “About” or more to travel and history, and the “About The Blog” discovery of ancient worlds as opposed to new studies in science. Who are you? How are you associated with science? I can’t even find your full name on this page! It is important that There is too little typographic hierarchy you include an “About the Author” page on your site. Not even the site’s name to establish your credibility and put a or the post titles really come out and face to the site. grab your attention. It all looks like a wall of text, which makes it harder for a user to navigate. You should not display the full blog post on the homepage. Show the title and an excerpt, and allow the user to “read As the eye can only comfortably track 7 more” if they’re interested. This keeps to 10 words a line, your sentences are a users from having to scroll down tad too long. through articles that they have no interest in. Your blog posts could benefit from the Though the design (layout/color palette/ addition of relevant images that fonts) of your website isn’t necessarily summarize what the content is about. bad, we don’t feel that it communicates Right they appear as just a big, gray box to your target audience effectively. If of text intimidating text. you are looking to make science accessible and understandable to laymen, the design should reflect that. HOMEPAGE The current design seems too scholarly, clinical, and outdated.Friday, July 13, 2012
  158. 158. These questions (links) would make for excellent callouts, but not necessarily navigational links. Because this is green, I am assuming Too many navigation options! this is the page that I am on, but it is not. Too much movement.Very distracting. This block could be confused with advertising and may be ignored. Unappealing image. Most Popular Topics (is this different than the blog topics?), Today’s News, Popular Links, Latest News. SO MUCH TO CHOOSE FROM! I don’t know where to start? What is most important? This opens in a new window, with new colors.Very disorienting. These buttons are totally lost among all the options on this page. Seeing Fans is nice, but just adds to the clutter and creates further distraction on this very busy page. I need a little hint as to what Is this advertising? attainivf is before I click. This is too vague.Friday, July 13, 2012
  159. 159. This can move to the bottom of the page.Clean this area up. Remove the image of Everyone takes these credit cards.Las Vegas, Make it a clean and simplelogo like all your competition does. Remove all this. Replace with: Register for Free with a link to register. And have Log In button. This appears to be an ad! Why would you encourage users to LEAVE your This whole area takes up valuable real estate. On site to play Fantasy Football? Doesn’t Sport’s Advisors, the ads are smaller allowing the even open in another window. left side bar to come up. Also, the content of the ads are much more compelling. I would reconsider what if anything you want to put here. I would remove everything in this green block and replace with this.This is a wonderful service, but itpushed down the menu ofhandicappers which is what peopleare going to be looking for. They canget the scores via your top navigation.You may want to consider saying “LiveScores” Remove the word Menu. Not needed. Move this whole block up. HOMEPAGEFriday, July 13, 2012
  160. 160. This blur looks like it is a mistake. The logo on the homepage is customarily larger and more prominent. It is getting lost on this page because of lack of contrast and the blurring of the image. Navigation is too light in color. No contrast. Needs to be more obvious. This Giving aid link is too passive. No one will see it. This extranet link may be confusing if it refers to the CLUB.. The site map link should be more prominent. While you can have news bites on the homepage, that is not the role of the homepage.The role of the homepage is to communicate what the company is, the value the site offers over the competition and the product or services offered. Presently, it does NONE of those things. The novice user can feel overwhelmed by homepages that do not help them understand their options. They may become embarrassed and blame themselves. They will just leave the site and go to a more welcoming site. The challenge is to design a homepage that gives the user access to important features without cramming them onto the page itself. Focus and clarity are most important, as are the users goals. They need to be identified early. I question if they have been. Search box is not obvious. It needs to be moved to the Who is IAAATA and SNA? The word “HOT” does not belong on a site of this nature. upper right as that is now standard practice and where Partners? Agencies? It cheapens the work and seems inappropriate. most users will look for it. Plus it is buried in with the Memberships? Should at the contact information and not self evident. very least have a link so the uninformed user can research what they are.Friday, July 13, 2012
  161. 161. WORKSHOP #3 Please break into groups. Find a site to do a “heuristic” (usability) review. Be prepared to share your observations with the class.Friday, July 13, 2012
  162. 162. USER AND BUSINESS GOALSFriday, July 13, 2012
  163. 163. BUSINESS GOALS “Customer experience is the defining success factor in business for the next twenty years. Learning from customers, creating the experience they want, measuring the success of what you do, continually fine-tuning the service and returning to customers to learn more--this now must be the primary mission of any business that has customers. If you create a great customer experience, you’ll almost certainly win.” Mark HurstFriday, July 13, 2012
  164. 164. USER AND BUSINESS GOALS ...should be aligned.Friday, July 13, 2012
  165. 165. KNOW THE BUSINESS Having a satisfied user doesnt necessarily build a satisfied company. Interview the stakeholders, get to understand their strategy and business goals. Ultimately usability must serve the bottom line.Friday, July 13, 2012
  166. 166. HERE’S WHAT HAPPENS: Suits decide on business goals Convert to strategy Brings in design team Do it cheap Put everything on the homepage Put my division on the top of the hierarchy Hide the contact info Get to market asapFriday, July 13, 2012
  167. 167. Friday, July 13, 2012
  168. 168. WHAT’S THE RESULT? Bad user experience.Friday, July 13, 2012
  169. 169. BUSINESS GOALS ARE UNIVERSAL Increase traffic to the site. Retain users. Improve conversion rates.Friday, July 13, 2012
  170. 170. CONVERSION When a prospective customer takes the marketers intended action. -WikipediaFriday, July 13, 2012
  171. 171. SALES Sign ups Contact form submissionsFriday, July 13, 2012
  172. 172. HOW TO RETAIN USERS: Timely, relevant content Engage them Provide an experience SERVE THEIR NEEDS.Friday, July 13, 2012
  173. 173. HOW TO IMPROVE CONVERSION: Easy to use site Clear hierarchy Calls to action Communicate value Study analytics A/B testing SERVE THEIR NEEDS.Friday, July 13, 2012
  174. 174. HOW TO INCREASE TRAFFIC: Interesting, original copy In-bound links Search Engine Optimization (SEO) E-blasts/Newsletters Social Media SERVE THEIR NEEDS.Friday, July 13, 2012
  175. 175. DESIRABILITYFriday, July 13, 2012
  176. 176. DESIRABILITY Delight comes not from the latest widget but from helping uses accomplish their goals.Friday, July 13, 2012
  177. 177. DESIRABILITY Brings value to the user Highlights value Persuades user of value Adds emotional value to user piano stairs PentagramFriday, July 13, 2012
  178. 178. Friday, July 13, 2012
  179. 179. Friday, July 13, 2012
  180. 180. Friday, July 13, 2012
  181. 181. Friday, July 13, 2012
  182. 182. HOMEWORK WEEK #1 1. Surf the web. Find one site that is easy to use. One that isn’t. Tell why. 2. If you had to do a comprehensive usability plan for the Coca Cola website or Microsoft Web site, which would you chose and why? Type your answers and submit next week. 3. Download “Research Based Web Design & Usability Guidelines.”  Read chapter one and two. 4. Look at the site you reviewed at the start of the class. Write down what changes you would make to make the site more user- friendly. Type your answers and submit next week.Friday, July 13, 2012