Usability principles 1


Published on

Usability Engineering tra

Published in: Technology
  • Be the first to comment

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

No notes for slide
  • Jane It is easy to want to focus on the first part of this “equation” because buttons, lists, browsers, and widgets in general are familiar to us. We can talk more concretely about those things we can see rather than about how someone might perceive information or react to a prompt. However, the widgets that appear in an interface are a collection of touchpoints with the user. These touchpoints are the results of a great deal of anlaysis of human behavior, work habits, environmental anlaysis, and user feedback. UI design is not graphic design. The graphic element of UI design is only the presentation level of all user interaction with the system. You also have a very good article in your resources section called “ Usability is Not Graphic Design .” This article discusses the common misconception that what a usability engineer does is makes things pretty.
  • Jane If you remember only four things from this class, I hope it is these four principles. If you can remember them, they will be your guide to dealing with every UI decision or problem that arises.
  • Jane Let’s talk about human limits. Not in the sense that human beings are dumb or that they can’t do anything right. We’re talking here about basic human-computer interaction points from a human point of view. There is a very interesting book called Things that Make us Smart by Don Norman. In that book, Norman points out that it’s OK to have human strengths and weaknesses because computers also have strengths and weaknesses. Usability problems arise when there is a situation that reveals the weaknesses of the user or the weaknesses of the computer. Another possibility is some mismatch of how the two work together. Example: sorting a list of alphanumeric strings for 8 hours visual inspection
  • Jane Lot’s of eye movement causes visual fatigue--the more people have to search a screen for information or scrutinize a screen to figure out what to do, the more taxing it is on their eyes. Over the course of a day, people who have to struggle with visual clutter or mayhem will become very visually fatigued. Color and highlighting indicate meaning. People give meaning to color. This has strong implications for cultural or international designs--different colors mean different things in different cultures. 9% of men and 2% of women have some form of color blindness or color confusion. Don’t rely on color alone to provide cues. Consistent format goes back to the first point. If every screen presents a new layout or inconsistent placement of buttons, the effort to use the application increases. People scan--This has particular significance in dialog boxes. There needs to be a visual indicator in danger situations so that people slow down and read at least some of the info in the dialog. Scan - conclusion “it’s not there.”
  • Erin Attention Spans: Between individuals and Across Individuals Our software is just one piece of their tasks to get their job done. Fatigue: Leads to increased probability of errors Senses: Shop Floor - noisy environment Key Combinations - where they keys are Keyboard/mouse on Web: Tab and Enter are supported on Web, and sometimes Esc; otherwise you can’t count on keyboard shortcuts. More mouse clicks needed to do the same thing on the web as in a GUI. After last bullet: Quote from Thornton May presentation to AIIM on 9/28/98: “2/3 of all the people who have ever lived to age 65 are alive today” People are staying in the workforce longer - new challenges for design.
  • Erin--slide & short term memory activity Limit a person’s memory load. Note: example of limiting memory load is to show a file name rather than expecting the user to remember the file name as they move between windows. Provide Context! Example of breaking down decision-making into chunks: group boxes around a group of widgets that are related. Sorting options so that they can look at the data in different ways to make different decisions. Exaggerated sense of time when in a hurry - e.g., stoplights. Need for Visual Indicators - feedback. (OMF example of opening worklist 5 times) ACTIVITY: short term memory activity goes here. Should take no more than 10 minutes. See notes on next page.
  • Jane People expect the interface to communicate WITH them, and believe that computers will follow the same rules of communication that exist for human to human interaction. They expect the interface to be flexible and give them feedback. Emotions: Users may have had a negative or positive experience with a previous system and they tend to generalize those emotions to your new system. People “like” a system or “trust” the system. People want computers to be predictable. As they work, they want to be able to predict the computer will respond, or even to eliminate thinking about the possibility of any unpredictable response. Context provides specific meaning and interpretation options. Out-of-context information takes longer to understand and is often misunderstood. Context on a software screen is developed through title bar names, labels, and grouping of information. Mental models are picture of how something should work or act. People develop mental models based on their own experiences, and these models may not always be correct. (Example--lights and windshield wipers in a car--where are they located?) (Example--Frau and the defroster in the new car) Book “The Media Equation” by Reeves and Nass, 1996.
  • Jane To summarize what we’ve been talking about, this is a list of the basics. These are design constraints that must always be at the forefront of your mind as you design an interface or as you evaluate an interface or as you write about an interface.
  • As we discuss these stages, we will point out 3 things at each stage: 1. What the “market at large” is doing during the stage. 2. What development teams generally tend to do during each stage, based on market behavior. 3. Usability issues and user perceptions during each stage. (Instructor - would a blank table with the 3 headings be easier for people here?)
  • Jared Spool refers to the first stage of a product in the market as Raw Iron. After 1st bullet: NOVELTY (Show four bullet points) (After last bullet point): As users get more and more sophisticated, and as products get more “plentiful” this stage gets shorter and shorter. Technology has really changed the length of this stage. There are some factors that are critical to this stage and also at all of the future stages we will discuss--we are not going to focus these in detail. However, a company’s market position is a key factor here and in all of the future stages. That means that based on whether a company is a market leader, a contender, a niche player, or a startup, the company’s exact behavior during a stage may be influenced by their market position. That is a whole other class, so we’re not going to go there--but keep that thought in the back of your mind as we get into discussions about the stages and what they mean.
  • The transparency stage is somewhat difficult to explain without giving examples of products that have become transparent. One example of a product that is on its way to becoming transparent (and some would say already is transparent) is the PC. Price has become a differentiator. There are still a few features that are valued as must-haves, but most PC’s are alike in feature and function.
  • These section headings (e.g. ANALYSIS, DESIGN, TESTING) are not methodology phase names. They are simply labels to group the type of duties we perform. The ANALYSIS duties are started during the Concept phase and finished during the System phase Conceptual Design is started during the Concept phase and finished during the System phase Collaborative Design and Image Creation occur during the System and Implementation phases The TESTING duties can be performed during any phase
  • Usability principles 1

    1. 1. Usability Engineering - 1 Sameer Chavan
    2. 2. Designing for Humans What is a User Interface? “ The place at which independent systems meet and act on or communicate with each other” <ul><li>Software User Interface </li></ul><ul><ul><li>“ Narrowly defined, the software interface comprises the input and output devices and the software that services them; </li></ul></ul><ul><ul><li>Broadly defined, the interface includes everything that shapes user’s experiences with computers, including documentation, training and human support” </li></ul></ul>
    3. 3. Designing for Humans <ul><li>To the user, the interface is the system. </li></ul><ul><li>People just want to get work done. </li></ul><ul><li>If the user can’t find it, the function isn’t there. </li></ul>
    4. 4. Designing for Humans <ul><li>Visual limits </li></ul><ul><li>Motor limits </li></ul><ul><li>Cognitive limits </li></ul>Humans have limits
    5. 5. <ul><li>Excessive eye movement causes visual fatigue. </li></ul><ul><li>Color and highlighting connote meaning. </li></ul><ul><li>Visual coding helps users make decisions (i.e., gray out unavailable options). </li></ul><ul><li>Consistent format and layout aid visual searching. </li></ul><ul><li>People scan. They don’t read. </li></ul>Designing for Humans Visual limits
    6. 6. <ul><li>Attention spans fluctuate. </li></ul><ul><li>Users become tired. </li></ul><ul><li>Users may not be able to use all of their senses. </li></ul><ul><li>Users have different levels of manual dexterity. </li></ul><ul><li>There are keyboard and mouse differences between desktop and the Web applications </li></ul><ul><li>The population is aging. </li></ul>Designing for Humans Perception & motor limits
    7. 7. <ul><li>Errors increase as people get interrupted, so limit memory load. </li></ul><ul><li>Break down decision-making into manageable chunks. </li></ul><ul><li>People are problem-solving as they work. Don’t complicate the process. </li></ul><ul><li>People have an exaggerated sense </li></ul><ul><li>of time as they work. </li></ul>Designing for Humans Cognitive limits
    8. 8. <ul><li>Humans expect relationships. </li></ul><ul><li>Humans get emotional. </li></ul><ul><li>Humans want and expect predictability and consistency. </li></ul><ul><li>Humans need context. </li></ul><ul><li>Humans create mental models. </li></ul><ul><li>Humans need forgiveness. </li></ul>Designing for Humans Human expectations
    9. 9. <ul><li>Users must understand the objects and actions used to solve a problem. </li></ul><ul><li>Allow for easy problem-solving. </li></ul><ul><li>Reduce distractions. </li></ul><ul><li>Provide adequate feedback. </li></ul><ul><li>Reduce error situations, or if they occur, allow users to easily resolve them. </li></ul>Designing for Humans Summary
    10. 10. Design Problem
    11. 11. What is Usability? <ul><li>Efficiency </li></ul><ul><ul><ul><li>-Highly productive </li></ul></ul></ul><ul><li>Memorability </li></ul><ul><ul><ul><li>- Easy to remember </li></ul></ul></ul><ul><li>Errors </li></ul><ul><ul><ul><li>- Low error rate </li></ul></ul></ul><ul><li>Satisfaction </li></ul><ul><ul><ul><li>- Pleasant to use </li></ul></ul></ul><ul><li>Learnability </li></ul><ul><ul><ul><li>- Easy to learn </li></ul></ul></ul>
    12. 12. UI Design Owner Engineer Architect Building a Custom - made house
    13. 13. UI Design User Programmer U.I.Designer Building a Software Product
    14. 14. UI Design <ul><li>Real World Experiences </li></ul><ul><li>Tasks </li></ul><ul><li>Processes </li></ul><ul><li>Tools </li></ul><ul><li>Results </li></ul>User’s Conceptual Model Programmer’s Model <ul><li>Platform </li></ul><ul><li>Operating System </li></ul><ul><li>Shell </li></ul><ul><li>Development tools </li></ul><ul><li>Guidelines </li></ul>U.I.Designer’s Model <ul><li>User’s Conceptual Model </li></ul><ul><li>Programmer’s Model </li></ul><ul><li>User Interface design principles and guidelines </li></ul>
    15. 15. What if the Engine Designers make bike?
    16. 16. What if the Engine Designers make bike?
    17. 17. What if the Engine Designers make bike?
    18. 18. Actual Required Bike Design
    19. 19. Software Life Cycle <ul><li>Stage 1: Raw Iron </li></ul><ul><li>Stage 2: Checklist Battles </li></ul><ul><li>Stage 3: Productivity Wars </li></ul><ul><li>Stage 4: Transparency </li></ul>Four Stages of Market Maturity
    20. 20. Stage 1: Raw Iron Stage <ul><li>Users are excited about a new product concept. </li></ul><ul><li>Users are excited by the most basic capabilities. </li></ul><ul><li>Users are tolerant of/oblivious to usability problems. </li></ul><ul><li>Users are willing to pay for training or even special technicians to operate the product. </li></ul><ul><li>Whatever alternatives are available, they are less attractive than the new product. </li></ul><ul><li>“ Usability” here often means that the product is in the field and working. </li></ul><ul><li>Development team is focused primarily on solving technical and delivery issues so the company can get the product out the door </li></ul>
    21. 21. Stage 2: Checklist Battles <ul><li>One or more competitors have entered the market. </li></ul><ul><li>Functionality becomes the key differentiator for customers. </li></ul><ul><li>Users gravitate toward the product with the feature set that best meets their needs. </li></ul><ul><li>If users are unsure about which functionality to choose, they choose “loaded” products. </li></ul><ul><li>If choosing between “easy-to-use” and “has-the-feature-I-need,” users almost always pick the latter. </li></ul><ul><li>“ Usability” here usually means having the right functions. </li></ul><ul><li>Developers are under pressure to add more functionality and fix bugs </li></ul>
    22. 22. Stage 3: Productivity Wars <ul><li>All vendors offer similar functionality. </li></ul><ul><li>Market has become more sophisticated and end users have increased expectations for usability. </li></ul><ul><li>Users are unwilling to accept a product that takes time to learn. </li></ul><ul><li>Buyers/end users consider their own productivity over other factors when deciding what to buy. </li></ul>Developers work to improve the ease of learning and speed of use; this is accomplished by regularly evaluating usability and sometimes by adding helper functions such as wizards
    23. 23. Stage 4: Transparency <ul><li>Products have become a commodity. </li></ul><ul><li>Various vendors provide nearly identical products. </li></ul><ul><li>Price becomes a key differentiator. </li></ul>- Usability means that the product has essentially become invisible to users. - There is no advantage in further modifying the product for the targeted market. - Companies focus on lowering production costs
    24. 24. Market Maturity Model Technology Focus User Focus Market Maturity Over Time
    25. 25. Users don‘t like Unexpectations Access denied O.k., and now you‘ll do exactly what I‘m telling you !
    26. 26. <ul><li>To succeed in market, Superior Technology is not just enough, we must supply a satisfying user experience </li></ul>Technology Maturity Model Donald Norman ….”Invisible Computers”
    27. 27. Usability & Software Development life cycle Understand the User & .. Do user Task Analysis Define User Requirements Develop Interactions Concept Develop Prototypes Test Test Software Development Test Release Test Requirements Capture Design Development Usability Evaluation / Usability Testing
    28. 28. What suits one customer might not suit the next
    29. 29. <ul><li>ANALYSIS </li></ul><ul><ul><li>User Analysis, Task Analysis </li></ul></ul><ul><li>DESIGN </li></ul><ul><ul><li>Conceptual Design, Collaborative Design, Image & graphic Design </li></ul></ul><ul><li>TESTING </li></ul><ul><ul><li>Usability Testing, Heuristic Review </li></ul></ul><ul><li>TRAINING </li></ul><ul><ul><li>UI Principles Training </li></ul></ul><ul><ul><li>Usability Standards </li></ul></ul><ul><ul><li>Usability Workshops </li></ul></ul>Usability services
    30. 30. <ul><li>Identify users of the software , their characteristics and the goals they are trying to achieve – </li></ul><ul><ul><li>via surveys, interviews, and focus groups </li></ul></ul><ul><ul><li>who our users are </li></ul></ul><ul><ul><li>what their needs are </li></ul></ul><ul><ul><li>current product perceptions </li></ul></ul><ul><ul><li>most important tasks </li></ul></ul><ul><li>Remember- its easy to imagine that you are the user </li></ul>User Analysis
    31. 31. <ul><li>About 72% of the US population </li></ul><ul><li>are sensers; only 28% are intuiters </li></ul><ul><li>Users are not like you </li></ul><ul><li>When Intuiters Design... </li></ul><ul><li>We’ll put it on the right mouse button.” </li></ul><ul><li>Sensers, who like to see interfaces that are concrete, down-to-earth, and related to the physical world, are more likely to forget how to access the pop-up menu on the right mouse button, lacking the visual clue. </li></ul>User Analysis
    32. 32. <ul><li>System Requirements </li></ul><ul><li>Describe the technical limitations consider when designing the interface: </li></ul><ul><ul><li>Color palette (web vs. Desktop) </li></ul></ul><ul><ul><li>Monitor size </li></ul></ul><ul><ul><li>Screen resolution </li></ul></ul><ul><ul><li>Browser & version (for web applications) </li></ul></ul><ul><ul><li>Performance implications (speed) </li></ul></ul><ul><ul><li>Ram </li></ul></ul><ul><ul><li>Disk space </li></ul></ul><ul><ul><li>Version of integrated software </li></ul></ul>User Analysis
    33. 33. <ul><li>Job description/title </li></ul><ul><li>Typical activities associated with job (general) </li></ul><ul><li>Hardware experience </li></ul><ul><li>Software experience (range) </li></ul><ul><li>Experience with other applications </li></ul><ul><li>Where user is when s/he uses our product </li></ul><ul><li>When user uses product (time of day, hours per week) </li></ul><ul><li>How frequently user uses product </li></ul>Task Analysis
    34. 34. <ul><li>“ To create a product that must satisfy a broad audience of users, logic will tell you to make it as broad in its functionality as possible to accommodate the most people. Logic is wrong. ” </li></ul><ul><ul><ul><ul><ul><li>Alan Cooper, Inmates Running the Asylum, SAM, 1999 </li></ul></ul></ul></ul></ul><ul><li>What kind of car would you get if you put all of the features a soccer mom wants, a carpenter wants and a budding executive wants? </li></ul><ul><li>Configuring software to accommodate varying needs is easier than configuring steel. </li></ul>Quotes
    35. 35. <ul><li>An analogy: building design & Software Design </li></ul><ul><li>Conceptual Design </li></ul><ul><ul><li>Building : framework and floor plans </li></ul></ul><ul><ul><li>UI: conceptual model supporting work </li></ul></ul><ul><ul><li>tasks and guiding user through them </li></ul></ul><ul><li>Screen Layout </li></ul><ul><ul><li>Building: fixtures and furniture </li></ul></ul><ul><ul><li>UI: laying out controls and data to facilitate task completion </li></ul></ul><ul><li>Visual Design </li></ul><ul><ul><li>Building: lighting, sound management, interior design </li></ul></ul><ul><ul><li>UI: choosing visual components and arranging screen elements for aesthetic appeal and enjoyment </li></ul></ul>DESIGN - Conceptual Design
    36. 36. <ul><li>Ad-hoc consultation </li></ul><ul><li>review of UI elements during implementation </li></ul><ul><li>review of specification and design documents </li></ul><ul><li>iterations of the product earlier in the lifecycle (ie. errors will be caught, and corrected, earlier) </li></ul>DESIGN - Collaborative Design
    37. 37. <ul><li>UI Design Guidelines </li></ul><ul><ul><li>product strategy, consistency, layout, ease of use </li></ul></ul><ul><li>UI Design Patterns </li></ul><ul><ul><li>Navigation, screen/page patterns, page layout patterns </li></ul></ul><ul><li>UI Conceptual Design </li></ul><ul><ul><li>UI principles, rationale, features, and requirements/goals for each project/release </li></ul></ul><ul><ul><li>illustrative, detailed designs for the most important user tasks,as well as on any new/important features, or UI elements </li></ul></ul><ul><li>Images </li></ul><ul><ul><li>Splash screens, login pages, home page images, icons </li></ul></ul><ul><ul><li>Image library available upon request </li></ul></ul>DESIGN Standards & Guidelines
    38. 38. <ul><li>There are various types of prototypes: </li></ul><ul><ul><li>Low-fidelity: drawings of software, perhaps hand-drawn on paper </li></ul></ul><ul><ul><li>Medium fidelity: electronic drawings of software, perhaps containing some graphics </li></ul></ul><ul><ul><li>High fidelity: actual working software, </li></ul></ul><ul><ul><li>often with limited functionality compared </li></ul></ul><ul><ul><li>to the actual application being designed </li></ul></ul>Software Prototype
    39. 39. <ul><li>Give a Task to complete </li></ul><ul><li>Actual observation of user while on work </li></ul><ul><li>Capturing his mouse movements </li></ul><ul><li>Recording his emotions and experiences </li></ul><ul><li>Take user feed back </li></ul><ul><li>Compare competitive Applications </li></ul><ul><li>Demo </li></ul>TESTING - Usability Testing
    40. 40. <ul><li>Expert evaluation of an existing design, prototype, build, or competing product </li></ul><ul><ul><li>point out areas of strengths and weaknesses in the design </li></ul></ul><ul><li>A low-cost addition to other testing or as a quick stand-alone service </li></ul><ul><li>Relies on an evaluator's (or a team of evaluators') assessment based on expertise and established usability principles </li></ul><ul><li>Demo </li></ul>TESTING - Heuristic Review
    41. 41. <ul><li>Thanks ! </li></ul><ul><li>[email_address] </li></ul>