User Interface Design

1. User Interface Design

2. Two major opportunities for design during software development &

3. Motivation • On most projects usability is the highest priority non-function quality attribute. I can’t remember ever participating in a requirements gathering meeting when the users or their representatives didn’t stress (more often—plead), “make it easy to use”. • An application’s user interface (UI) can and usually does make or break the application. • Many people don’t make a distinction between an application and it’s UI. For them the UI is synonymous with the application*. • Usability is a major product differentiator. Many people choose one product over another simply on the basis of usability (e.g. iPhone).

4. Motivation [Cont] • The importance of good usability is increasing as user base and application base broaden • The improved price/performance of hardware (thanks Moore’s Law!) is creating a larger, broader and more diversified user base for application development. Many more people are using computers today than just a few years ago and people are using computers for more tasks. • The desire to automate an increasing number of tasks puts new demands on usability. For example, many users don’t have time for extensive training before they use an applications such as ATM machines, museum kiosks and airport check-in terminals.

5. Motivation [Cont] • Users are less tolerant of difficult-to-use interfaces • There are rising expectations in terms of usability. Superior UI design of a few widely used applications sets a new standard for ease of use users expect with other applications as well. • Experience with software that is a pleasure to user has made users less tolerant of confusing interfaces, especially when it comes to discretionary software (users have a choice).

6. Related areas of study • Usability is a multidisciplinary research area attracting researchers from: psychology, computer science, and sociology. • There are several areas of study that deal with usability (each from a slightly different perspective): • Human-Computer Interaction (HCI), Computer-Human Interaction (CHI) • Interaction Design, User-Centered Design, Contextual Design, Participatory design, Goal directed design • User Experience (UX) • Human Factors, Ergonomics • Each approaches usability from a different perspective, but all are concerned with making computers—more generally devices—easier and more enjoyable to use.

7. Topic Outline • What is usability? • Financial impact of improved usability. • Usability Engineering – a systematic process for creating easy-to-use interfaces. • Assessing usability in an existing product • Heuristic Evaluation – inspectors review the user interface of a software system and check it for compliance with established usability heuristics or principles. • Empirical user testing – usability testing with real users.

8. Usability is one of many factors contributing to software success

9. Usability is an abstract concept that is comprised of its own sub factors

10. Usability Defined • Usability is: • In general, usability is a measure of how easy a system is to use. In this context, usability is non-functional requirement or quality attribute. • More specifically, 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] • It is also a term that describes the study of ease of use, including methods and techniques for improving human computer interaction. • Usability of a software system is more than just program behavior. It also includes usability of documentation, installation procedures, etc.

11. Factors that determine software usability • Learnability – how easy is it to use for the first time? • Familiarity – Does it work the way users expect it to work? • Consistency – Office products (Word, Excel, etc.) are mostly consistent. • Predictability – can uses predict where an option will be found, what a button will do, etc.? • Simplicity – new users usually prefer a minimalist UI • Efficiency – once users learn how to accomplish a task how easy is it to perform the task? • Memorability – how easy is it to use the application after not using it for a long period of time? • Low error rate (few errors and it is easy to recover from errors that are made) • Confidence and Satisfaction – how pleasant or enjoyable is the application to use?

12. A hierarchy of usability needs Three important goals of UI design are to develop software that is: Effective (utility) Easy to use Enjoyable These three goals definea hierarchy of needs: If it worksI’ll consider it. If it’s easy touse I will be pleased. If it’senjoyable I’ll develop anemotional attachment. Enjoyable Easy to use Effective

13. Financial Impact of Usability • The effects of improved usability can be substantial. • Estimating the potential ROI of usability improvements starts with estimates of the number of users, approximate hours they will spend with the product each day, the loaded salary of the average user and expected lifetime of the system. (Loaded salary includes salary plus benefits and other overhead.) • For example, 2,300 users, costing $28 hour, using the product an average of 3.5 hours a day for 3 years: u = 2300 h = 3.5 s = $28 y = 3

14. Financial Impact of Usability [Cont] • From this you can calculate the financial impact (potential ROI) of specific improvements in usability. • For example, improvements in learnability that reduce training time by a half a day are worth: 2300 * 4 * $28 = $257,600 • Improvements in overall usability that increase productivity by 10% would result in a yearly saving of: 2300 * 3.5 * 236 * $28 * 10% = $5,319,440

15. Financial Impact of Usability [cont] • Because the formula deals with costs incurred at different points in time (investment is upfront and savings accrue over time), one of the cash flows needs to be converted into the time frame of the other. (see the lesson on economics for how to do this). • On software projects (as in the economy) incentives need to be structured to make the best use of resources. The cost of improved usability is incurred by the development organization during the project. The benefits are realized over time in increased productivity and satisfaction. Some how the development group has to be incentivized to make prudent investments in usability. Example: development organization could be charged back (or credited) for application training and support.

16. Usability Engineering • The first step in usability engineering is to understand the users and their tasks. This can be accomplished in part through task and function analysis. Task analysis involves observing users in order to understand their needs. How do they currently approach their work? What services will they need from the system in order to accomplish their work? The output of task analysis is the information needed to write use cases: categories of users (roles), the goals associated with each type of user and workflows or scenarios leading to goal resolution. Function analysis looks beyond current work practices to identify the purpose of the observed user activities. For example, task analysis might reveal receptionists making phone calls to patients reminding them of upcoming appointments. The task here is calling patients. The function is to remind patients of an upcoming appointment. Email and text messaging are alternate methods of accomplishing the task.

17. Usability Engineering [cont] • Set UI goals and priorities. UI design is just another form of design. Trade-offs are inherent in any design process. Some principles of good UI design might contradict others. Example: UI should look like existing competing applications to take advantage of existing user model but we also want to be innovative and improve on existing solutions. • Create a conceptual design and validate it with a prototype. Prototyping gives feedback early in the development process. Users don’t always know what they want or what is possible. With a prototype you can experiment with different design options without incurring all the costs of implementation.

18. Usability Engineering [cont] • Implement a portion of the UI design. This is likely to be a more detailed implementation than was possible during the prototyping phase. • Assess usability • Heuristic evaluation – Use principles of good design to do heuristic evaluation of system increments. • User testing – Do empirical testing with a representative sample of users.

19. Assessing Usability • The two primary methods of assessing the usability of a product are: • Heuristic Evaluation – Experts assess an existing design according to established concepts and principles of UI design as well as specific guidelines for the platform. For example, both Apple and Microsoft publish UI design guidelines for the different platforms they support. • User Testing

20. Concepts in UI Design • Conceptual models • Feedback • Constraints • Affordances

21. What would you do? You and your buddies are driving up a Colorado mountain road on a hot summer day when your car, a ‘85 Chevy Impala, starts to overheat. There is no room to pull over. One of your friends suggests turning on the heater. Another laughs at the idea, noting you want the car cooler not hotter. What do you do?

22. Conceptual Models • A conceptual model is a personal understanding of how something works. • A good conceptual model helps you make correct decisions concerning the operation of a device. • Operation of a program is made more difficult if you approach it with the wrong conceptual model. For example, Windows Movie Maker doesn’t follow the File/Open File/Close document model. If you expect it to follow the document model of say Word, you will be quite frustrated trying to execute a File/Save before quitting.

23. Conceptual Models [Cont] • The user’s conceptual model of a software system is formed from their interaction with the system, their prior experience with other computer programs and their knowledge about the world. • The programmer should, to the extent possible, design around the user’s existing conceptual model (expectations). • If the user’s existing conceptual model is insufficient, the programmer can extend it using metaphors and training. For example, the metaphor of the trash can is used to make deleting a file easy and understandable.

24. Users and developers have different conceptual models.

25. Cockpit of a Boeing 767 • Does this look confusing to you? • If so, now you know how users feel when they lack the mental model needed to interpret the UI in front of them.

26. MIT’s Agnes Suit • When designing products for others, it helps to be able to see the world from their perspective. • MIT’s AgeLab created the Agnes suit so that product designers could experience the world as an older adult. • Short of a lobotomy, there is no Agnes suit for software engineers.

27. Possible reasons why some UI designs fall short • Programmers sometimes let their detailed knowledge of the implementation influence their decisions on UI design. They design a UI that is easy to use only if you understand the implementation. Users find it difficult to use because they don’t have privileged knowledge of the implementation. • For programs that are open source, usability might not be the highest priority. • Programmers might design a UI that is comfortable to them when they aren’t representative of the target users.

28. Is it OK for developers to be put in charge of UI design? • There is no substitute for getting input from real users during requirements definition and doing usability testing with real users during system design. • Some go as far as saying: developers shouldn't’t be put in charge of UI design. I would qualify this statement with: When usability is a high priority, developers without training in usability (and the ability to adopt the user’s mental model) shouldn't’t be put in charge of UI design.

29. Feedback • Users like to know what’s going on and how their input will be interpreted. • Feedback shows the state of the system and the effect of user action. • Feedback on input is important because it makes the user feel confident their actions were received (and gives the user the feeling of being in control). • For example, buttons often change their expression to look depressed (not sad but indented) when selected. • Example: many browsers use a spinning wheel to indicate a web page is loading.

30. Response time feedback • The rule-of-thumb for response time feedback is: • Operations taking less than 0.1 second appear to the user to be instantaneous. Users might benefit from feedback or confirmation the operation occurred, but since the delay is imperceptible, there isn’t time to give feedback during the operation. • Operations taking 0.1 to 1.0 second will have a noticeable delay, but in most cases special feedback isn’t necessary. (In fact showing feedback on operations taking less than 1 second might even be distracting.) • Response time feedback should be given for any operation lasting longer than 1 second. • For operations taking 1 to 10 seconds, users just need confirmation that the operation is in progress. • For operations lasting longer than 10 seconds, users may want to take a break or perform other work while they are waiting. The progress indicator should indicate how long the operation is likely to take.

31. Response time indicators • For operations lasting 1 to 10 seconds, a reasonable response time indicator is a animated icon such as a spinning ball or wheel. • For operations lasting 10 seconds or more a progress bar or percent done indicator is recommended: • This lets the user know the system is making progress and approximately how long until it will be finished.

32. Constraints • Constraints restrict allowed behavior. • Constraints help to avoid user errors. • Example: most connectors (USB, VGA, etc.) are designed such that there is only one way of making the connection. • Example: the printed versionof a product key often includesdashes for readability. Whenprompting for a product key,you can put constraints onallowable input so there is noconfusion about whether or notuser needs to type –’s.

33. Affordances • Affordance = visual clues to an object’s function and use. • Affordance refers to the perceived and actual properties of an object that suggest how it is used. • A flat plat at one side of a door affords pushing.

34. Affordances [Cont] • Objects can give off thewrong clues. For example,in the image on the rightthe bar affords pulling butthe label indicates theproper action is pushing.

35. What does this bottle rocket afford?

36. Affordances in programming • Hyperlinks should be underlined and blue • Buttons should be shaded with a 3D effect indicating they can be pressed. • Favor standard UI controls from operating system. These are the ones users are most likely to be use to.

37. What does this application window afford?

38. Intuitive vs. Familiar When someone asks for an “intuitive” interface what they usually want is a familiar one. Human instincts aren’t of much help when interacting with most programs. Interfaces are easy to use and easy to learn when they are familiar; when they leverage what we already know; when they provide experiences that are consistent with past experiences. Is the iPad intuitive or familiar? Is the iPad instinctive to use? Children seen to have no problem using an iPad. Does that make it instinctive?

39. UI Design Principles Simple and natural dialogs Safe exploration and forgiveness Direct manipulation Consistency Instant gratification Use shortcuts and accelerators Minimize the cognitive costs of your application Spatial Memory Minimize user’s memory load Help and documentation

40. Simple and natural dialogs • Speak the user's language. Use words, phrases and concepts familiar to the user. • Favor a minimalist design. When in doubt, leave it out. • “Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility”

41. Example • Evaluate the following according to heuristics for UI design.

42. Error Messages • Error messages are a special case of dialog with the user. • A good error message will indicate the problem and constructively suggest a solution without shouting at the user or making the user feel inferior. (Example: syntax errors you get in modern IDE’s.)

43. Example Error Messages • Good Error Message: (TBD) • Bad Error Message:

44. Safe exploration and forgiveness Exploration is one of the best ways to learn a new system. Encourage, or at least don’t do anything to discourage, exploration. You can do this by avoiding unpleasant consequences of exploration. Users are encouraged to explore when your program is forgiving. Forgiveness means that actions on the computer are generally reversible. Examples Always warn users before they initiate a task that will cause irretrievable data loss. (In a helpful way) Make actions reversible. Provide multi-level undo

45. Direct manipulation Favor direct manipulation of onscreen objects over commands. When the user performs operations on the object, the impact of those operations on the object is immediately visible. Allow the user to feel they are directly controlling the object they are working with. Example Drag and drop in IE Changing the length ofa video clip on the timelinein Premiere

46. Consistency Consistency in the interface allows users to transfer their knowledge and skills from one application to another. There are different levels of consistency: Consistency within the current instance of your product Consistency with earlier versions of your product Consistency within a family of products you offer Consistency with other products on the same platform Consistency with user expectations When there are conflicts, narrow-scope consistency (within an application) have priority over broad-scope consistency (other products on the same platform). Examples Ctrl-c for copy and Ctrl-v for paste are reflexive for most Windows users.

47. Instant gratification People like to see immediate gratification from the actions they take. (Skip the splash screen?) Users should achieve some level of success within the first few seconds of using your software. Good Example Many programs start with ablank document and controlsyou need to begin workingout front. Bad Example Microsoft Access.

48. Use shortcuts and accelerators • Cater to a range of users from novice to casual to expert. • Expert users are interested in working efficiently. Shortcuts and accelerators can facilitate this. • Changes made to the UI to support expert users shouldn't negatively affect novice users.

49. Minimize Cognitive Costs Just as financial costs are a barrier to purchase, cognitive costs can be a barrier to use. Most people don’t have the time, energy or patience to parse a complicated interface. Most people will scan the page looking for obvious clues how to proceed. Users look for visual cues like color and form that can be immediately processed rather than invest the time it takes to read and comprehend text Expecting users to read is such a quaint idea.

50. Cognitive cost of reading an email tl;dr The cognitive cost of reading this email was too much for the recipient.