User-Centered Design: Enhancing Products through Understanding Needs and Design Process

1. Midterm Review Christine Robson October 11, 2007

2. Midterm logistics • Soda 405 and Soda 320 • Closed book, closed notes, no electronic devices • Have the full class period

3. Design process NEEDS DESIGN EVALUATE IMPLEMENT Modified from Preece, Rogers, and Sharp, Interaction Design

4. Needs and need-finding • Identifying users needs • Latent needs, root causes • Not wants, symptoms, bugs • Techniques for eliciting and interpreting users’ needs • Interviews • Direct Observation • Needs belong to people (not entities)

5. Tools for need-finding • Market research/competitive analysis • Identifying gaps in the current market • Identifying gaps in competitors’ offerings • Business perspective, customer (rather than user) focus • Team with business folks • Interviewing prospective users • Direct observation

6. Direct Observation Observe participants engaged in the desired activity • In the typical context of that activity • In a manner that allows you to partner with them to elicit more rich details about the process You’ll need • Good participants • Good setting • Good timing • Flexibility

7. Asking vs. Observing • Some of the best designs are unnoticeable • Norman examples • Some work-arounds become invisible • Observing helps you see what, but often need to ask to understand why • Asking and observing are complementary • Immersion leads to direct observation and better interviews

8. Doing a Contextual Inquiry • Direct Observation + Interviewing • In natural context of activity • Intentionally pick participants, location, time • Follow where the participant leads (partner) • Learn user’s vocabulary • Gather artifacts, recordings

9. Outcome of CI • Experiencing it is perhaps the most important! • What are we going to do with all this data? • Analyze • Reporting Goal: Gain understanding of user

10. Goal of a CI • Gain understanding of user • What resources are used to accomplish task? • What hindrances encountered in accomplishing task? Analyze data to get better description and understanding of resources and hindrances

11. Resources used • Tools, devices • Cell phone, computer, shovel • Information • Web page, phone directory • Other people • Expert, peer, grad student

12. Hindrances encountered • Not having the right tool • Workarounds • Unable to access resources needed • Can’t find information • People unavailable • Unaware of important information • Confusion

13. Supplementary methods • i.e. Focus Groups & User Surveys • Conduct after contextual inquiry • Better understanding enables forming more focused questions • Adding more breadth • More time-efficient

14. Diary study • Asking people to keep a diary of their interactions with a computer system, any significant events or problems during their use of a system, or other aspects of their working life • Record the date and time of an event • Where they are • Information about the event of significance • Ratings about how they feel, etc.

15. Ethnography • Natural settings • a commitment to studying activities in the “natural” setting in which they occur • Descriptive • an interest in developing detailed descriptions of the lived experience • Members’ point of view • understanding the participant’s activity from the participant’s point of view • Focuses on what people actually do • understanding the relationship between activities and environment

16. Other methods • Participatory Design (PD) • Besides partnering in the observation process, users can also actively participate in the design process • Primarily reacting to prototype designs • User-Centered Design (UCD) • Focused on the user, not the technology (we’ve been presuming this)

17. Design process NEEDS DESIGN EVALUATE IMPLEMENT Modified from Preece, Rogers, and Sharp, Interaction Design

18. NEEDS DESIGN EVALUATE IMPLEMENT Design • Ideating – expressing ideas • Brainstorming • More ideas  more creative  better • Group vs. individual creativity • Representing • Sketching • Enacting

19. Storyboarding • Series of frames depicting key steps in reaching a goal • Mechanically, can use pin board for easy rearrangement / editing • Describe the interaction in context • Show user in at least 1st frame (establishing shot) • User and the environment • User and the system

20. Fidelity • Fidelity refers to the level of detail • High fidelity • Prototypes look like the final product • Low fidelity • Artists renditions with many details missing • Lo-fi prototypes • Sketches act as prototype • Designer “plays computer” • Other design team members observe & record • Might sound silly, but is surprisingly effective • Widely used in industry

21. Role-playing • Enacting scenarios, storyboards • Recording on video • Presentations • Publicity • Video records (showing up on YouTube) • Microsoft Surfaces (2007) • http://www.youtube.com/watch?v=QigsOR9r36k • Apple Knowledge Navigator (1987) • http://youtube.com/watch?v=3WdS4TscWH8

22. Bodystorming • Transformation of abstract ideas and concepts into physical experiences • Imagining the product already exists • Act as if it exists • In the context of how you would use it • Involving entire body in enacting usage • Oulasvirta et al., “Understanding contexts by being there: Case studies in bodystorming” • http://dx.doi.org/10.1007/s00779-003-0238-7

23. Personas • Archetypal users that represent the needs of larger groups of users, in terms of their goals and personal characteristics • Representing user research • Guide vision and design • Include: • Name • Demographic info • Picture • Paragraph descriptions : User motivations, Goals, Expectations, Personality • Imaginary but precise, specific but stereotyped

24. Card Sorting • Card sort when you have: • Lots of content • Content that could potentially be organized in multiple ways • Problems with navigation/users finding the correct content • Create cards that break down content to its constituent, generic parts • Allow users to organize and name their own categories

25. Design process NEEDS DESIGN EVALUATE IMPLEMENT Modified from Preece, Rogers, and Sharp, Interaction Design

26. Conceptual Model of a System • Design Model • The model the designer has of how the system works • System Image • How the system actually works • The structure and behavior of the system • User’s Model • How the user understands how the system works • Some “repair” between the designer and user • User manual • FAQ

27. Affordances • “...the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.” [Norman] • How a thing appears tells us how the thing can be used. • (Whether the implied use matches the intended use is a question for design.)

28. Metaphors • A means to bring the real world into your interface • You’re borrowing a conceptual model the user has experience with, ie. • A presentation tool is like a slide projector • The painting metaphor in Photoshop • Use it if you have one, but don’t stretch for one if you don’t! • Beware of metaphors that are: too limited, too powerful, too literal or cute, or mismatched

29. Affordances and metaphors • Metaphors meant to “jump start” user’s conceptual model for a system • Affordances meant to “jump start” user’s conceptual model for interacting with an artifact • As with metaphors, if affordances are designed poorly, they thwart developing a correct conceptual model

30. Natural mapping • Naturally connecting user’s model with system model • taking advantage of physical analogies and cultural standards • Physical properties (stove burner layout) • Metaphorical/linguistic (on is up) • Analogous function (playback control buttons) “Natural” is individual and culture-specific

31. Command Based Interactions • Know exactly what to do and how to do it • Can be faster then traditional graphical interfaces

32. Direct Manipulation • User interacts with visual representation of data objects • Continuous visual representation • Physical actions or labeled button presses • Rapid, incremental, reversible, immediately visible effects • Computer objects as visible moveable objects • Icons to represent items • Items can be “picked up” and moved • Items can be “thrown out” • Items can be “copied”

33. Direct Manipulation- Design Principles • Affordances: Perceived and actual properties of a thing that determine how the thing could be used • Natural mapping: • Physical arrangement of controls should match arrangement of functions • Best mappings are direct, but natural mappings don’t have to be direct • Visibility: Capabilities and relevant parts of your system should be visible • Don’t make the user guess if you have functionality- show them! • Feedback: Always let the user know that you caught their action

34. How do you interact with your computer? • Keyboards • QWERTY vs. Dvorak • Chorded, Ergonomic, etc • Mouse • Joystick • Gesture Interfaces • Stylus • Touchscreens • Speech Interfaces

35. Natural Language Processing (NLP) • automated generation and understanding of natural human languages • language generation systems • convert information from computer databases into normal-sounding human language • natural language understanding systems • convert samples of human language into more formal representations that are easier for computer programs to manipulate

36. User Interface Consistency • The Principle of Least Surprise • Similar things should look and act similar • Different things should look different • Other properties • Size, location, color, wording, ordering • Command/argument order • Pre-fix vs. post-fix • Follow platform standards

37. Kinds of Consistency • Internal consistency within your application • External consistency with other applications on the same platform • Metaphorical consistency with your interface metaphor or similar real-world objects

38. Soft vs. Hard Buttons • Hard Buttons • “real” buttons • Generally have a single action • Soft Buttons • Programmable buttons or options • Can appear and disappear in different modes

39. Progressive vs. interruptive feedback • Feedback can be progressive, a part of the sequence of actions themselves • Feedback can also be interruptive, a break in the sequence of actions • Smooth is usually preferred to interruptive

40. Designing for experts and novices • Often difficult to design for both at once • Experts require rapid control and feedback. The computer is interrupted more by them • Novices require steady and comprehensible control and feedback. They are interrupted more by the computer

41. Stage Theory of Human Perception & Memory maintenance rehearsal Sensory Image Store Sensory Image Store WorkingMemory WorkingMemory Long Term Memory Long Term Memory elaboration decay decay,displacement decay? interference? • Working Memory: • Small capacity • ~ 7 +/- 2 chunks Long Term Memory: • Huge capacity “Short Term” • Visual information store • Auditory information store • Pre-attentive Processing

42. Recall vs. Recognition • Who were the seven dwarves in snow white? Grouchy Sneezy Smiley Sleepy Pop Grumpy Cheerful Dopey Bashful Wheezy Doc Lazy Happy Nifty Sleepy • Does that help?

43. Leveraging social behavior • Others benefit from my work • I benefit from others’ work • The more people who participate, the more interesting it is (viral) • Social side effects from individual work • Linking social benefits with individual benefits • Leveraging social work (Tom Sawyer)

44. Communities • Applications can foster online community • UI’s reflect the social characteristics of the community • examples: • Tagging websites • Virtual worlds

45. Design process NEEDS DESIGN EVALUATE IMPLEMENT Modified from Preece, Rogers, and Sharp, Interaction Design

46. Gulfs of execution and evaluation • Gulf of execution • How do I do it? • Gulf of evaluation • What did it do? evaluation execution

47. The Gulfs Where thought is required • Gulf of execution -- thinking required to figure out how to get something done -- transforming high-level intention into specific physical actions • Gulf of evaluation -- thinking required to understand what is being perceived -- transforming raw sensory data into an understanding of objects, properties and events

48. Semantic & Articulatory Distance • Semantic: is it possible to say what one wants to say? • Can it be said concisely? • Articulatory • Make form of expression similar to meaning of expression • i.e. onomatopoeia: “boom” of explosion; “cock-a-doodle-doo” of roosters. User’s Goals Meaning of Expression Semantic Distance Articulatory Distance Form of Expression

49. Modes & Mode Errors • Modes: states which have different meanings • A mode error occurs when a user performs an action that is appropriate to a different mode and gets an unexpected and undesired response. • Avoiding mode errors • Eliminate modes • Visibility of mode • Show me I’m in CAPS LOCK • Spring-loaded or temporary modes • Click to highlight • Disjoint action sets in different modes • No overlapping commands

50. Other Types of Errors • Description Error • Intended action is replaced by another action with many features in common • Putting the wrong lid on a jar • Capture Error • A sequence of actions is replaced by another sequence that starts the same way • Leave home and find yourself walking to class instead of where you wanted to go