Download presentation
Presentation is loading. Please wait.
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.