From Analysis to Design: Sketching and Prototyping in Human-Computer Interaction

1. 5th Meeting From Analysis to Design:Sketching and Prototyping

2. Analysis produces lists of issues ( red⚡ ). They become requirements. However, the requirements serve the design process of the UI, not the software. Analysis  Design Human-Computer Interaction A

3. Design is Desireable to human Viable to business Feasible to technology Human-Computer Interaction A

4. Design Thinking A 5-Stage Process Human-Computer Interaction A

5. Design: Getting Started Contextual inquiry is empirical. Contextual analysis is inductive. Requirements extraction is deductive. Design is integrative. Design on the right diagram is narrowly refer to the creative human activity by which new ideas are synthesized and put together to make up parts of an interaction. Human-Computer Interaction A

6. How to Design? • Currently, we don’t know up front exactly what to design • We don’t know the real requirements • We don’t know the appropriate designs • We can’t get perfect information from users • There is very little of the software is independent to the user interface (UI) • So, we need to build and test repeatedly (Iterative Design) • But, it’s too expensive to build the real system and test it. Human-Computer Interaction A

7. Answer: Sketching and Early Prototypes • Sketch is used to decide what to design • Prototype is a simulation of interface • Buxton differentiates: Getting the right design vs. Getting the design right • Sketch is quick and cheap to create • Sketch is the first process in design Human-Computer Interaction A

8. Sketches vs. Prototypes Comparison between Buxton1) design exploration sketches and traditional low-fidelity refinement prototypes. 1) Buxton notes on sketch & prototype: http://hadziq.if.its.ac.id/hci2019/Buxton-SketchesPrototypes.pdf Human-Computer Interaction A

9. Sketch  Prototype for Ideation / Refinement for Evaluation / Usability Didactic Describe Refine Answer Test Resolve Specific Depiction • Evocative • Suggest • Explore • Question • Propose • Provoke • Tentative • Noncommittal Human-Computer Interaction A

10. Sketches Human-Computer Interaction A

11. Designer vs. User Mapping the Two-Side Mental Models Human-Computer Interaction A

12. Sketches and Ideation • Designers invent while sketching:They do not transfer their ideas to the sketch, they get the ideas from the sketch • Sketching aids the process of invetion. • Ideation is coming up with ideas to help solve the design problems. • Don’t have to be artistic. Be creative! Human-Computer Interaction A

13. Everyone can sketch, no need to be artistic Human-Computer Interaction A

14. Properties of Sketches Human-Computer Interaction A

15. The best way to a good ideais to have lots of ideas Linus Pauling Human-Computer Interaction A

16. Prototyping Although prototyping is a kind of implementation, design and prototyping in practice often overlap and occur simultaneously. We create the prototype as we create the design and its representation. Human-Computer Interaction A

17. Sketch  Prototype for Ideation / Refinement for Evaluation / Usability Didactic Describe Refine Answer Test Resolve Specific Depiction • Evocative • Suggest • Explore • Question • Propose • Provoke • Tentative • Noncommittal Human-Computer Interaction A

18. Drawing a Prototype • We can use any drawing tools: • Paper (literally), Visio (PC), Sketch (Mac), Illustrator, Photoshop, PowerPoint • Or use a prototyping tool: • Balsamiq, OmniGraffle (Mac), InVision, Axure Human-Computer Interaction A

19. Drawing a Prototype • Don’t worry about efficiency, robustness • Fake the data • No need “back end”, fake the system • Can be “wireframe”, just outlines not the “real look” • Support for behavior, e.g. changing screens • Goal: see some of interface very quickly Human-Computer Interaction A

20. Human-Computer Interaction A