SKETCHING THE UX: METHOD. Lesson 11 Sketching the UX: 10 plus 10 method

Transcription

1 User Centred Design 11 SKETCHING THE UX: METHOD Lesson 11 Sketching the UX: 10 plus 10 method

2 YOU NOW KNOW Software Architecture Definition, importance and examples Architectural Modeling Languages, interaction architecture examples Modelling the Interaction Architecture How to extract the interaction architecture from use cases / scenarios

3 TODAY Designing (Sketching) the User Experience Why should you sketch From sketches to prototypes Descending the design funnel Method

4 SKETCHING THE UX: THE WORKBOOK

5 01 WHY SKETCH?

6 WHY SHOULD YOU SKETCH? Sketching is about Design (not drawing) Fundamental tool Express, develop, and communicate ideas Part of a process Idea generation, design elaboration, design choices, engineering

7 WHY SKETCH? Create Early ideation Think about ideas Think through ideas Visualize how things come together Brainstorm (don t worry about quality) Invent and explore concepts

8 WHY SKETCH? Record Ideas you develop Ideas you come across Archive for later reflection

9 WHY SKETCH? Reflect, share, critique, decide Communicate ideas to others Invite responses Invite criticisms and alternatives Choose ideas worth pursuing

10 ADVANTAGES OF SKETCHES Quick to make

11 ADVANTAGES OF SKETCHES Quick to make Timely Provided when needed

12 ADVANTAGES OF SKETCHES Quick to make Timely Provided when needed Disposable Investment in the concept If you can t afford it to throw it away, it is not a sketch

13 EVOLUTION OF SKETCHES Vocabulary Resolution Rendering state

14 02 THE DESIGN FUNNEL

15 GETTING THE DESIGN RIGHT Generate idea Iterate and develop it

16 GETTING THE DESIGN RIGHT Generate idea Iterate and develop it but is it the best idea?

17 GETTING THE DESIGN RIGHT

18 GETTING THE RIGHT DESIGN Fixate on the first idea Local hill climb issue local vs. global maxima

19 DESIGN Getting the Design Right vs. Getting the Right Design

20 EXAMPLE: CELL PHONE DESIGN Iterative design

21 EXAMPLE: CELL PHONE DESIGN How do we get here with only iterative improvements?

22 GETTING THE RIGHT DESIGN 5 is the minimum to present

23 ELABORATION AND REDUCTION Elaboration Reduction Repeat Elaboration opportunity seeking Reduction decision-making Design process

24 THE DESIGN FUNNEL

25 THE DESIGN FUNNEL

26 03 FROM SKETCHES TO PROTOTYPES

27 SKETCH IS NOT A PROTOTYPE Difference is Purpose Form But it is a continuum sketch prototype

28 FROM SKETCHES TO PROTOTYPES Sketches: early ideation stages of design Prototypes: detailing the design investment

29 FROM SKETCHES TO PROTOTYPES Early design Brainstorm different ideas Multitude of sketches Rough out interface style Task centered walkthrough or WoZ Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Sketch variations and details Sketch or low fidelity prototypes Low to medium fidelity prototypes High fidelity prototypes Limited field testing Alpha/Beta tests Late design Working systems

30 A SKETCH SUGGESTS but does not limit design

31 OPENNESS AND FREEDOM Openness and freedom incomplete, room to create Tight and precise complete, nothing left to do

32 MINIMAL DETAIL Include only what is required to understand concept

33 DEGREE OF REFINEMENT Sketch as refined as the idea Solid idea à sketch more defined Hazy idea à rougher and less defined

34 : DESCENDING THE DESIGN FUNNEL

35 THE DESIGN FUNNEL Cycles through elaboration and reduction

36 THE METHOD 1. State your design challenge Problem to solve, client need, novel system that leverages a technology 1. Generate 10+ different design concepts that address that challenge Brainstorm, be as creative and diverse as possible, don t judge, capture essence of idea (not details)

37 THE METHOD 3. Reduce the number of design concepts Review all designs Discard ones that don t have merit Explain and get feedback from others (or based on reflection, repeat step 2) 4. Choose the most promising concepts Starting point for next steps (refine)

38 THE METHOD 5. Produce 10 details / variations of concept Generate different ways of realizing the concept Dig deeper (flesh out details) 6. Present ideas to group Solicit feedback (what could be improved?) 5. As your ideas change, sketch them out Go back to step 1, but deeper in the design funnel

39 EXAMPLE: DESIGN CHALLENGE How can two people connect their mobile devices for information exchange? Assumptions: They can do some limited communication

40 GENERATE 10 COMPETING CONCEPTS 1. Enter an agreed upon password

41 GENERATE 10 COMPETING CONCEPTS 2. Mimic rotation pattern

42 GENERATE 10 COMPETING CONCEPTS 3. Tracing across displays

43 GENERATE 10 COMPETING CONCEPTS 4. Speak a command

44 GENERATE 10 COMPETING CONCEPTS 5. Recognize phone s flash strobe pattern

45 GENERATE 10 COMPETING CONCEPTS 6. Bump 2 phones together

46 GENERATE 10 COMPETING CONCEPTS 7. Musical sequence

47 GENERATE 10 COMPETING CONCEPTS 8. Light / Dark patterns

48 GENERATE 10 COMPETING CONCEPTS 9. Three simultaneous taps

49 GENERATE 10 COMPETING CONCEPTS 10. Take picture of an identifiable feature on the other s phone

50 EXAMPLE: REDUCE OR REPEAT? Theme: You and the other person perform some action that both phones recognize as a handshake. It exploits a social convention where you both agree to do something Repeat? Other variations or other themes?

51 EXAMPLE: REDUCE Choice Cameras are the lowest denominator

52 ELABORATION ON REFINEMENT 1. Detail scenario; action a)

53 ELABORATION ON REFINEMENT 1. Action b)

54 ELABORATION ON REFINEMENT 1. Detail c)

55 ELABORATION ON REFINEMENT 2. Variation: flashing patterns

56 ELABORATION ON REFINEMENT 3. Variation: fiduciary tags

57 ELABORATION ON REFINEMENT 4. Variation: cooperative panorama

58 ELABORATION ON REFINEMENT 5. Variation: same picture

59 EXERCISE: JOIN YOUR LAB GROUP 30 SECONDS

60 EXERCISE: JOIN YOUR LAB GROUP

61 EXERCISE: What s your lab design challenge? Sketch 10 concepts First part of the method 30 minutes

62 EXERCISE: Present your ideas to other group(s) 10 minutes

63 YOU KNOW NOW Attributes of sketches Quick, timely, disposable A sketch is not a prototype The design process Get the right design Then get that design right

64 YOU NOW KNOW The design funnel Interplay between elaboration and reduction method Method to descend the design funnel First 10: elaboration Choosing: reducing Second 10: elaboration on refinement

65 THE ONLY STUPID QUESTIONS ARE THOSE THAT STAY WITH YOU What wasn t clear enough? What should be improved?