What is Design? - PowerPoint PPT Presentation

what is design n.
Skip this Video
Loading SlideShow in 5 Seconds..
What is Design? PowerPoint Presentation
Download Presentation
What is Design?

play fullscreen
1 / 45
What is Design?
Download Presentation
Download Presentation

What is Design?

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  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

  4. 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

  5. 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

  6. NEEDS DESIGN EVALUATE IMPLEMENT Iterative Design Cycle Slide from Scott Klemmer

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

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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

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

  17. 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

  18. 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

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

  20. 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…

  21. 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

  22. 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

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

  24. 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

  25. 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

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

  27. Show & Tell

  28. Show & Tell Anyone have examples of really good or bad UIs?

  29. 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