1. What is Design? Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu Lecture #2 - January 24th, 2008 213: User Interface Design and Development

2. Today’s Outline 1) Definitions of Design 2) The Design Process 3) Norman’s Take on Design 4) Show & Tell

3. Design: 1) to create, fashion, execute, or construct according to plan 2)a: to conceive and plan out in the mind b: to have as a purpose c: to devise for a specific function or end Source: http://www.merriam-webster.com/dictionary/design

6. Design… is conscious keeps human concerns in center is a conversation with materials is creative is communication has social implications is a social activity - T. Winograd, Bringing Design to Software Slide from Jake Wobbrock

7. Design is about How How to do something, as opposed to specifying what to do Learn general methods and tools to envision, implement and evaluate Allows for re-use across a number of applications and operating contexts

8. Iterative Design Cycle NEEDS DESIGN IMPLEMENTEVALUATE Slide from Scott Klemmer

9. Design Phases (IDEO) Understand Observe Visualize & Predict Evaluate & Refine Implement Slide from Scott Klemmer

10. Design Phases (IDEO) Understand Observe Visualize & Predict Evaluate & Refine Implement Contextual Inquiry Personas Prototyping Heuristic Eval Usability Testing Scenarios

11. Contextual Inquiry CONTEXT - See the work where it unfolds PARTNERSHIP - Make yourself and the user collaborators in understanding the work INTERPRETATION - Assigning meaning to design team’s observations FOCUS - Shared starting point, orienting the team and user towards a common goal

12. Scenarios and Personas Task and Person-based caricatures of common usage contexts Keep design team members aligned after the inquiry phase is completed Serves as concrete yet flexible representation of a design situation or solution

13. Prototyping Developing rough versions of interfaces for ideation and initial testing Ranging from paper or cardboard cutouts to simple programming environments like Flash Allows design team to evaluate feasibility of a solution, and gather feedback from users

14. Heuristic Evaluation Assessment of an interface prototype by a small group of evaluators based on established design principles Low-cost method to evaluate early prototypes as part of iterative design process

15. Usability Testing Testing the performance of a candidate interface with potential users Including factors like efficiency, accuracy, learnability, memorizability and accessibility Results can be statistically analyzed to assess difference between interface alternatives

16. Donald Norman Trained in CS and Psychology, later a professor of Cognitive Science at UCSD Cognitive approach to user-interface design Focuses on aspects like affordances, constraints, models, feedback and visibility Less emphasis on aesthetics

17. Affordances “actual and perceived properties… that determine how the thing could be used.” Based on J.J. Gibson’s term in psychology - Norman really meant “perceived” affordance Focused on immediate cognitive aspects of the environment, as opposed to memory-based information processing

20. Mapping Relationship between controls, their movements and results in the World Natural mappings draw upon physical analogies and cultural standards, leading to immediate comprehension

23. Feedback “Sending information back to the user about what action has been done, what result has been accomplished” Allows the user to understand the incremental results of his actions Source: Donald Norman, Design of Everyday Things

26. Constraints Physical constraints limit the set of possible actions by the user This allows the designer to guide the user towards specific action sequences useful for achieving a particular task

28. Visibility Make the important functions immediately visible to the user Becomes more difficult when the number of functions exceeds the number of controls

33. Paradox of Technology Technologies start off complex, while designers struggle to balance user needs and technical capabilities Eventually, a simple and elegant design captures the market Competitors introduce new features, at the expense of added complexity…

35. Conceptual Models People like to understand why things are the way they are A conceptual model allows users to understand and remember the mapping between actions and the resulting effects Affordances, Mapping, Feedback, Constraints and Visibility can help users establish such a model

36. Designing for Errors When a task appears simple or trivial, users will most often blame any errors or mistakes on themselves When this happens repeatedly, the user may decide that they are incapable of performing this task (Norman calls this learned helplessness) Designers should account for errors in their designs

37. Action Cycle Perceive WORLD Interpret Evaluate Execution Sequence Intention Goals EVALUATION EXECUTION EXECUTION: Doing something to the World EVALUATION: Compare what happened with what we wanted

38. Example: Turning on a Lamp GOAL: Increase light in the room INTENTION: Turn on the lamp SEQUENCE: Walk to lamp, turn knob EXECUTE: [Walk to lamp, turn knob] PERCEIVE: [Hear “click”, see light] INTERPET: Lamp clicked and started emitting light EVALUATE: Light in the room increased. Success! Slide from Jake Wobbrock

39. Gulf of Execution “What do I do now?” By providing affordances, constraints, visibility and a good conceptual model, designers can bridge the Gulf of Execution

42. Gulf of Evaluation “Did I succeed?” By providing feedback and a good conceptual model, designers can bridge the Gulf of Evaluation

43. Show & Tell

44. Anyone have examples of really good or bad UIs?

45. For Next Time Read Beyer and Holtzblatt, Contextual Design, Chapters 1-3 and 6 Make sure you are signed up for the Mailing List Bring examples of interesting user tasks and/or applications you might want to study for your next assignment, which will go out next week