L8_COMP1649_Prototyping_1819.pdf
- 1. Human Computer Interaction and Design COMP1649 Design Thinking, Prototyping and Construction Dr Ralph Barthel
- 2. ● Why Prototyping? ● Low-‐fidelity, Mid-‐fidelity and High-‐fidelity Prototypes ● Prototyping Tools ● Prototyping Physical Products ● Research with Prototypes Lecture Overview
- 3. The activities and content in this lecture contribute to the learning outcomes : ● B. Carry out design research to inform development of systems and applications; ● C. Construct and create prototypes of human-‐ computer interactions; Learning Outcomes • 3
- 4. “Design thinking is a process for creative problem solving”. IDEO Design Thinking • 4
- 5. •Empathy (human-‐centered) •Ideation (generating lots of ideas) •Experimentation (Prototyping and Testing) Design Thinking • 5 Source: IDEO
- 6. Design Thinking -‐ a 6 Step Process Source: Nielsen Norman Group
- 7. “Prototypes provide the means for examining design problems and evaluating solutions. Selecting the focus of a prototype is the art of identifying the most important open design questions.” Houde and Hill
- 8. Prototyping ● Prototyping involves building a working model of part, or some aspect of, the system for evaluation before building the full system. ● It is a similar approach to that followed by engineers -‐ e.g. when a new car design is being developed. ● Prototypes can be low-‐, mid-‐ or high-‐fidelity. Source: Van Allen
- 9. Why prototyping? ● Thinking through making ● To enable convergent thinking ● Framing and setting of problems opposed to problem solving ● Explore the design space through a number of different ideas, approaches and assumptions and apply them to a particular context ● Prototyping is an important step in the design thinking process Source: Van Allen
- 10. Why prototyping? ● Discovery ● “Fail early and fail often” ● To experience interactions and behaviour before fully committing to building a product in that way ● To explore if your ideas stick in a real world context Source: Van Allen
- 11. What to prototype? ● Interactions and User flows ● Content ● Form ● Idea selection ● Technology ● Usability (later stages)
- 12. Design Sketches Low-‐Fidelity Prototypes High-‐Fidelity Prototypes Ideation Exploration and Ideation Usability Mid-‐Fidelity Prototypes Interactions & Behaviours
- 13. Low-‐Fidelity Prototypes ● A Low-‐fidelity prototype is one that does not look very much like the final product, e.g. a paper/cardboard model (rather than an electronic screen), storyboarding, sketching, Wizard of Oz experiments. ● Low-‐fidelity prototypes are useful because they tend to be simple, cheap, and quick to produce and modify. They are for exploration only (throw away).
- 14. Mid-‐Fidelity Prototypes ● A mid-‐fidelity prototype starts to look like your final prototype in at least one dimension. These prototypes have a good balance between cost and money; ● Mid-‐fidelity prototypes are useful because they allow to test interactivity and provide more context to users.
- 15. High-‐Fidelity Prototype • A high-‐fidelity prototype is a prototype that is close to the final product in detail and functionality. This enables to examine usability in detail and to make conclusions about how behaviour will relate to use of the final product.
- 16. Initial Ideas ———>Design Process ———-‐> Final Design Low-‐Fidelity Prototypes Effort Ideas, generating more ideas Mid-‐Fidelity Prototypes Selecting Ideas, Testing of user interactions, stake holder presentations, user flows High-‐Fidelity Prototypes Detailed evaluations of interactions and user flows
- 17. Low-‐fidelity Prototype Mid-‐Fidelity Prototype High-‐fidelity Prototype What for? Good for ideation and exploring different ideas; Testing of high-‐level concepts e.g. navigation; Testing of specific user interactions; Testing of user flows; Stakeholder presentations; Detailed user testing and testing of interaction flows; Stakeholder presentations; Pros? Fast, Cheap, Used with easily available materials; Creating alternative designs; More context; Good time/quality balance; Enable user testing; Easier “to read” for users and stakeholders; Testing of very detailed interactions; Visual design looks like final product; Complete design; Cons? Limited interactions; Lack of detail; Can not test user flows; Can lack context a user may require; More time intense; Still not fully functional; Expensive; Time-‐consuming; Advanced coding and prototyping skills required;
- 18. Prototyping Tools • Paper and Cardboard, 3D Print, Laser Cutting • Powerpoint/Keynote • Bespoke Prototyping Tools (e.g. Axure, Adobe XD) • Web/Mobile Development frameworks (e.g. Ruby on Rails, Django, Ionic) + Front-‐end (e.g. Bootstrap, Pure.css) Frameworks • Microcontroller (Arduino, Raspberry Pi) • Processing typically used for interactive art installations
- 20. Prototyping Digital Products •Screens! •Responsive Design, Mobile First Design •Designing for different interaction types (e.g. keyboard and mouse, touch interfaces, voice interaction) •Accessibility •Animations
- 21. Prototyping Physical Products •has become a trending area in IxD due to lower costs for electronic components •Creation of products with embedded sensors has become more accessible •Products have physical components and software applications that controls functions on the device •Ikea Deathstar lamp
- 22. Prototyping Physical Products •Electronics •Coding and Troubleshooting •Materials and Tactility •Fabrication (e.g. laser cutting and 3D printing) •Prototype fidelity levels (low-‐ and mid fidelity) more fluent •Start by creating user flows and circuit diagrams
- 23. Prototyping Physical Products •Low-‐fidelity -‐ e.g. Breadboard, Arduino Uno and Arduino IDE •Mid-‐fidelity-‐ increased portability e.g. battery packs, smaller micro controllers such as Trinket, LilyPad •High-‐fidelity -‐ printed PCB boards, 3D printing, Laser cutting, CNC milling
- 24. Fabrication Methods •Laser Cutting -‐ relatively quick and cheap. Does not require 3D modelling skills; Software used e.g. Rhino 2D, Autocad 2D, Illustrator •3D printing -‐ can be time-‐consuming expensive, costs vary based on print materials. Requires 3D modelling skills: Software used e.g. Rhino 3D, Sketchup, Blender.
- 25. Prototyping Case Study -‐ Information Mediators
- 26. Prototyping -‐ Initial Prototype in Paper
- 27. Prototyping -‐ Renderings in Graphic software
- 28. Prototyping -‐ Renderings in Graphic software
- 29. Prototyping -‐ Second Prototype in Foam
- 30. Prototyping -‐ Second Prototype in Foam
- 31. Prototyping -‐ Preparing for final Prototype
- 32. Prototyping -‐ Final Mould and 3D Printed dials
- 33. Prototyping -‐ Trial with Prototype
- 34. Activity ● Create a step by step plan how you could create a series of physical prototypes of increasing fidelity for your smart home hub (~15 minutes). ● Discuss your plan with the person sitting next to you and make some notes. Give peer feedback (10 minutes).
- 35. Testing Prototypes with Users • Planning the search • Conducting the Research • Synthesising the Research Based on: McElroy, 2017
- 36. Planning the Research • What are your assumptions and goals? • Questions -‐ • Establishing questions e.g. about prior experience with software, questions about general technology use; • Feedback questions -‐ used to test if the research goals are being met and get participants to interact with your prototype; Based on: McElroy, 2017
- 37. Planning the Research • Open session -‐ exploratory, users can use the product as they see fit. Minimal scaffolding. Great for overall feedback on the experience of a product. Requires a higher-‐fidelity level of the prototype; • Closed Session -‐ guided approach. Users are being prompted to complete specific tasks e.g. based on User flows. This requires you to built vertical prototypes. Based on: McElroy, 2017
- 38. Planning the Research • Ask open-‐ended and non leading questions • Test questions with co-‐workers • Ask users about their experience with the prototype not their opinions on how something should be done • Don’t give too much information away -‐ test users actions not their words • You could use a template e.g. usability.gov to help your structure your prototype evaluation activities Based on: McElroy, 2017
- 39. Conducting the Research • Finding Users -‐ friends and family (beware of bias), meet ups of special interest groups, community organisations, mailing lists… • Sometimes participation in research can be incentivised e.g. gift cards, vouchers • Make sure your personas are covered • New services that help with user testing e.g. usertesting.com can be used but normally require higher fidelity prototypes Based on: McElroy, 2017
- 40. Conducting the Research • Prepare all the materials e.g. participant information sheet, consent forms • Test you means of recording (e.g. audio, video) and decide how you (or someone else) will take notes • Assign time slots for each participant • Be observant and look also for non-‐verbal clues • Stay neutral (avoid verbal confirmations if a user is doing things in a “correct way”) • 4-‐8 testers per prototype as rule of thumb, more if you have multiple personas to test Based on: McElroy, 2017
- 41. Synthesising the Research • Organise your notes e.g post-‐its, lists • Group similar ideas or patterns into categories • Write out insights (good and bad) for each category as indication for issues and successes • Think about different solutions for encountered issues such as alternative user flows, different labelling etc. • Draw up recommendations for the next round of prototyping Based on: McElroy, 2017
- 42. Synthesising the Research • Prioritise your recommendations • Document design decisions and use user quotes or anecdotes to support these decisions • Present your findings to the wider team and the different stakeholders were appropriate • Integrate your prototyping activities with agile methods e.g. sprint cycles Based on: McElroy, 2017
- 43. PrimerPrototyping Ambient Experiences • Marshmallow Laser Feast Collective • Into the Forest • Dive into the eye of the animal
- 44. Session Summary •We discussed design thinking and why prototyping is an important aspect of design thinking; •We discussed different fidelity levels of prototypes and their application in digital and physical products; •We planned a prototyping research activity to apply what we have learned in the lecture; •We analysed the process of planning, conducting and synthesising research with prototypes
- 45. • Prototyping for Designers: Developing the Best Digital and Physical Products (McElroy, 2017) •The User Experience Team of One (Buley, 2013) •Designing Interactive Systems (Benyon, 2014) •Bill Buxton – Sketches vs. Prototypes ● Research Paper Prototypes and Stakeholders Additional Resources