Your SlideShare is downloading. ×

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. HELLO, Website Usability I: Foundations Professor Cathline Marshall c.marshall.nyu@gmail.comFriday, July 13, 2012
  • 2. PLEASE MAKE A NAME CARD.Friday, July 13, 2012
  • 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. 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. WHAT IS USABILITY?Friday, July 13, 2012
  • 8. Friday, July 13, 2012
  • 9. Friday, July 13, 2012
  • 10. Friday, July 13, 2012
  • 11. Friday, July 13, 2012
  • 12. Friday, July 13, 2012
  • 13. WHAT IS USABILITY?Friday, July 13, 2012
  • 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. “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. “...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. “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. DON’T MAKE ME THINK.Friday, July 13, 2012
  • 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. WHAT USERS LOOK FOR: Ease of use Speed Practicality Credibility Consistency Simplicity, simplicity, simplicityFriday, July 13, 2012
  • 21. HUMAN FACTORSFriday, July 13, 2012
  • 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. 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. HUMAN FACTORS INCORPORATES: Psychology Engineering Industrial design Graphic design StatisticsFriday, July 13, 2012
  • 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. 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. THE WEB HAS CHANGED.Friday, July 13, 2012
  • 28. Friday, July 13, 2012
  • 29. Friday, July 13, 2012
  • 30. Friday, July 13, 2012
  • 31. Friday, July 13, 2012
  • 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. HOW PEOPLE USE SITES.Friday, July 13, 2012
  • 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. Friday, July 13, 2012
  • 36. Friday, July 13, 2012
  • 37. Friday, July 13, 2012
  • 38. Friday, July 13, 2012
  • 39. Friday, July 13, 2012
  • 40. I’m a button. Really, I am.Friday, July 13, 2012
  • 41. I’m a button. Really, I am.Friday, July 13, 2012
  • 42. I’m a button. Really, I am.Friday, July 13, 2012
  • 43. I’m a button. Really, I am.Friday, July 13, 2012
  • 44. I’m a button. Really, I am.Friday, July 13, 2012
  • 45. What does this thing do?Friday, July 13, 2012
  • 46. What does this thing do?Friday, July 13, 2012
  • 47. SIGNIFIERS People search for clues to help them understand context.Friday, July 13, 2012
  • 48. Photo: CelticSong22Friday, July 13, 2012
  • 49. Friday, July 13, 2012
  • 50. Friday, July 13, 2012
  • 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. 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. NavigationFriday, July 13, 2012
  • 54. ButtonsFriday, July 13, 2012
  • 55. IconsFriday, July 13, 2012
  • 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. Why, oh why, do people search for a website if they already know its name?, July 13, 2012
  • 58., July 13, 2012
  • 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. WHY DOESN’T THIS IPAD WORK? (because it’s a magazine)Friday, July 13, 2012
  • 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. HOW PEOPLE USE SITES.Friday, July 13, 2012
  • 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. 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. 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. 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. WHY PEOPLE LEAVE SITES.Friday, July 13, 2012
  • 68. BACKGROUND MUSIC why is this playing?!Friday, July 13, 2012
  • 69. POP UPSFriday, July 13, 2012
  • 70. LONG WAIT TIMEFriday, July 13, 2012
  • 71. CAN’T FIND SOMETHINGFriday, July 13, 2012
  • 72. Friday, July 13, 2012
  • 73. CAN’T TELL WHAT IT’S ABOUT (, July 13, 2012
  • 74. PAGINATIONFriday, July 13, 2012
  • 75. INTERSTITIAL ADSFriday, July 13, 2012
  • 76. BAD NAVIGATIONFriday, July 13, 2012
  • 77. Friday, July 13, 2012
  • 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. Friday, July 13, 2012
  • 80. REQUIRED TO REGISTERFriday, July 13, 2012
  • 81. TOO MUCH MOVEMENT one exception.Friday, July 13, 2012
  • 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. LAME FONTSFriday, July 13, 2012
  • 84. COBWEBSFriday, July 13, 2012
  • 85. LACK OF CLARITYFriday, July 13, 2012
  • 86. Friday, July 13, 2012
  • 87. FLASH BASEDFriday, July 13, 2012
  • 88. NO ABOUT OR CONTACT PAGEFriday, July 13, 2012
  • 89. PR JARGON Blue-sky thinking = Creative Grey Beard = Corporate Head Seed = ShareFriday, July 13, 2012
  • 90. IT’S UGLY.Friday, July 13, 2012
  • 91. USER CENTERED DESIGNFriday, July 13, 2012
  • 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. ISO 9241-210 (formerly 13407) International standard for human-centered process.Friday, July 13, 2012
  • 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. 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. STEP #1: Identify your users. Who are they? What are their tasks and goals? What is their experience level?Friday, July 13, 2012
  • 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. 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. STEP #3: Create design solutions. (Think simplicity, simplicity, simplicity.)Friday, July 13, 2012
  • 100. STEP #4: Evaluate designs by testing usability.Friday, July 13, 2012
  • 102. enlargeFriday, July 13, 2012
  • 103. THE TEN USABILITY HEURISTICSFriday, July 13, 2012
  • 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. #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. DOFriday, July 13, 2012
  • 108. Friday, July 13, 2012
  • 109. DON’TFriday, July 13, 2012
  • 110. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 113. Friday, July 13, 2012
  • 114. DON’TFriday, July 13, 2012
  • 115. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 118. Friday, July 13, 2012
  • 119. DON’TFriday, July 13, 2012
  • 120. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 123. Friday, July 13, 2012
  • 124. DON’TFriday, July 13, 2012
  • 125. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 128. Friday, July 13, 2012
  • 129. DON’TFriday, July 13, 2012
  • 130. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 133. Friday, July 13, 2012
  • 134. DON’TFriday, July 13, 2012
  • 135. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 138. Friday, July 13, 2012
  • 139. DON’TFriday, July 13, 2012
  • 140. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 143. Friday, July 13, 2012
  • 144. DON’TFriday, July 13, 2012
  • 145. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 148. Friday, July 13, 2012
  • 149. DON’TFriday, July 13, 2012
  • 150. Friday, July 13, 2012
  • 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. DOFriday, July 13, 2012
  • 153. Friday, July 13, 2012
  • 154. DON’TFriday, July 13, 2012
  • 155. Friday, July 13, 2012
  • 156. USABILITY REVIEWSFriday, July 13, 2012
  • 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. 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. 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. 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. 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. USER AND BUSINESS GOALSFriday, July 13, 2012
  • 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. USER AND BUSINESS GOALS ...should be aligned.Friday, July 13, 2012
  • 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. 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. Friday, July 13, 2012
  • 168. WHAT’S THE RESULT? Bad user experience.Friday, July 13, 2012
  • 169. BUSINESS GOALS ARE UNIVERSAL Increase traffic to the site. Retain users. Improve conversion rates.Friday, July 13, 2012
  • 170. CONVERSION When a prospective customer takes the marketers intended action. -WikipediaFriday, July 13, 2012
  • 171. SALES Sign ups Contact form submissionsFriday, July 13, 2012
  • 172. HOW TO RETAIN USERS: Timely, relevant content Engage them Provide an experience SERVE THEIR NEEDS.Friday, July 13, 2012
  • 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. 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. DESIRABILITYFriday, July 13, 2012
  • 176. DESIRABILITY Delight comes not from the latest widget but from helping uses accomplish their goals.Friday, July 13, 2012
  • 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. Friday, July 13, 2012
  • 179. Friday, July 13, 2012
  • 180. Friday, July 13, 2012
  • 181. Friday, July 13, 2012
  • 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