Prototyping

F27ID Introduction to Interactive Design

2021-2022

## Overview * What is the Prototyping? * Why and how prototypes are developed * Low-fidelity prototypes * High-fidelity prototypes * Examples * Questions and Discussion <aside class='notes'> Today's lecture will focus on concepts around prototyping. Such as, what is prototyping and types of prototyping. You will also be introduced to the prototyping software. This will be followed by various prototyping examples and discussion. </aside>

What is a prototype?

## What is a prototype? * In other design fields a prototype is often a small-scale model * For example: - a miniature car - a miniature building or town <aside class='notes'> The definition of a prototype is a first or preliminary version of a concept from which other forms are developed. </aside>

What is a prototype?

What is a prototype?

## What is a prototype? * In **interaction design**, a prototype is a limited **representation of the design** for a device you are trying to build * Allows users to interact with the device and explore the suitability of the design <aside class='notes'> Hence, a prototype in the context of interaction design is a representation of the design for evaluating and testing the suitability [pause] As the prototype provides a version of the design that users can interact to gather information. </aside>

## What is a prototype? * In interaction design it **can be** (among other things): - a set of cards - a storyboard, i.e. a cartoon-like series of scenes - a slide show - a video simulating the use of a system - a lump of wood (e.g. PalmPilot) - a cardboard mock-up - a piece of hardware with limited functionality - a piece of software with limited functionality * A model made of Plasticene, beads, string, **Lego** ... <aside class='notes'> Don't think a prototype is simply a build of the concept [pause] It can also be represented in a variety of forms [pause] For example, a set of cards or a physical model carved out of wood [pause] The different prototypes can be used to evaluate different aspects of the design. (like the usability or physical feel). </aside>

Which aspects to prototype?

## Which aspects to prototype? * Prototype the parts that most **need** to be tried out * **Novel** and innovative elements * Technical issues * Work flow, task design * Screen layouts and information display * **Difficult**, controversial, critical areas > You don't need to prototype everything! <aside class='notes'> This depends on the design. [pause] Which parts of the design are novel and untested [pause] Which parts of the design are most important [pause] For example, a part of the design could make or break the products success [pause] </aside>

<img src='.\images\lec04Slide11-2.png' style = ' box-shadow:none; border:0; width:60%; height:auto; ' > <aside class='notes'> Take a look at the image on this slide [pause] Some prototype applications may use emotional interface algorithms [pause] It gives participants feedback through visual, audio and motion sensors. </aside>

## Low/High Fidelity Prototypes <aside class='notes'> Let's move onto low and high fidelity prototypes. </aside>

## **Low** fidelity prototypes * Uses a medium which is **unlike the final medium**, e.g. paper, cardboard * Is **quick, cheap, and easily** changed * Examples: * Sketches of screens, task sequences * Cards or **'Post-it'** notes * Storyboards * 'Wizard-of-Oz' * Phone on a watchstrap (early smartwatch prototype) <aside class='notes'> Firstly, low fidelity prototypes [pause] You could see these as cheap, quick and easy to create and change prototypes [pause] Examples of these, include. paper models. playdoe. Storyboards. </aside>

## Example of low fidelity prototype **Doppio double-screen smartwatch** * Made from paper and magnets - (a) top attached to the side - (b) top hinged open - (c) top detached from the base. <img src='.\images\lec04Slide13-4.png' style = ' box-shadow:none; border:0; height:50%; width:auto; ' > <aside class='notes'> Here shows an example of a low fidelity prototype [pause] A Doppio double screen smartwatch [pause] Made from paper, with drawings and sketches to show the screen [pause] </aside>

## **How** to prototype? * **Sketching** is important to low-fidelity prototyping * Don't be inhibited about drawing ability. Practice simple symbols * Example: a quick storyboard that depicts how to fill a car with petrol <aside class='notes'> How to get started prototyping? [pause] Low fidelity prototypes come first and start with sketches [pause] </aside>

## Simple icons for sketches <img src='.\images\lec04Slide15-3.png' style = ' box-shadow:none; border:0; height:700px; width:auto; ' > <aside class='notes'> This slide shows some simple low-fidelity sketches [pause] [pause] </aside>

<img src='.\images\lec04Slide16-2.png' style = ' box-shadow:none; border:0; height:800px; width:auto; ' > <aside class='notes'> Some more prototyping sketch examples [pause][pause] </aside>

# Storyboards * A series of **sketches** showing how a user might progress through a task using the device * Used **early in design** * Often used with scenarios, bringing more detail, and a chance to role play <aside class='notes'> Now we'll move onto storyboards. [pause] A storyboard is a graphic organizer that consists of illustrations or images displayed in sequence for the purpose of pre-visualising a motion picture, animation, motion graphic or interactive media sequence </aside>

## A Storyboard <img src='.\images\lec04Slide18-3.png' style = ' box-shadow:none; border:0; height:350px; width:auto; ' > <img src='.\images\lec04Slide18-4.png' style = ' box-shadow:none; border:0; height:350px; width:auto; ' > <img src='.\images\lec04Slide18-5.png' style = ' box-shadow:none; border:0; height:350px; width:auto; ' > <img src='.\images\lec04Slide18-6.png' style = ' box-shadow:none; border:0; height:350px; width:auto; ' > <aside class='notes'> Example of a storyboard sequence [pause] Used for: elicit social and cognitive understanding of bullying [pause] demonstrate and understand language abilities of age group what do children talk about after school </aside>

# Card-based prototypes * Index **cards** (3 x 5 inches) * Each card represents one screen or part of screen * Often used in website development and smartphone app development <aside class='notes'> Cards=based prototypes can be applied to a variety of contexts [pause] implemented correctly, they can improve the user experience aspect </aside>

## Card-based prototypes <img src='.\images\lec04Slide20-3.png' style = ' border:0; width:500px; height:auto; ' > <img src='.\images\lec04Slide20-4.png' style = ' border:0; width:500px; height:auto; ' > <aside class='notes'> Here shows an example of a card-based prototype [pause] </aside>

## Wizard-of-Oz * The user interacts with the computer, but a developer is responding to the input and providing the response, rather than the system. <img src='.\images\lec04Slide21-4.png' style = ' border:0; width:400px; height:auto; ' > <aside class='notes'> In the field of human–computer interaction, a Wizard of Oz experiment is a research experiment in which subjects interact with a computer system that subjects believe to be autonomous, but which is actually being operated or partially operated by an unseen human being </aside>

<img src='.\images\lec04Slide22-2.png' style = ' box-shadow:none; border:0; height:700px; width:auto; ' > Wizard of Oz <aside class='notes'> Visual illustration of a wizard-of-oz scenario. [pause] </aside>

## What can go wrong with Wizard-of-Oz? * Humans can do more than computers so they may build **unrealistic expectations** * Human wizards may find it hard to limit themselves to a feasible computer's response <aside class='notes'> Of course, the wizard-of-oz approach has limitations [pause] For example, the interaction mechanisms can be difficult to model or provide unrealistic expectations </aside>

## Revision Question A low-fidelity prototype is typically done at the end of the development process? * a. true * b. false <aside class='notes'> This should be an easy question. [pause] Take a moment to think about your answer [pause][pause][pause] </aside>

## Answer * b. false <aside class='notes'> Did you guess correctly?[pause] Low-fidelity prototypes are cheap approximations done early in the development cycle. [pause][pause] </aside>

## Summary of Low-fidelity prototypes * Cheap to build * Easy to evaluate multiple concepts * Identify market requirements * Good for proof-of-concept and communication * But: - No error checking - Limited as a specification - Not much use after requirements are established - Limited navigation and flow - Look-and-feel different from the end product <aside class='notes'> To summarize low-fidelity prototypes before we move onto high-fidelty [pause] We have listed the pros and cons. [pause] Crucially, low-fidelity prototypes usually come first and are a quick, cheap and easy way to evaluate a concept. [pause] But remember, low-fidelty prototypes have [pause] no error checking, limited features, and have low-quality look and feel. </aside>

# **High**-fidelity prototypes <aside class='notes'> Now we'll move on to talk about high-fidelity prototypes. </aside>

## High-fidelity prototypes * **Complete functionality** (for at least part of the system) * Fully interactive * User driven * Clear navigation, **final** look-and-feel * Useful for **testing and exploring** * Part of specification for final product * Marketing and sales * But * **Expensive** and time consuming to build * Inefficient for proof-of-concept * Less effective for requirements <aside class='notes'> high-fidelity prototypes are highly functional and interactive. They are very close to the final product, with most of the necessary design assets and components developed and integrated. Hi-fi prototypes are often used in the later stages to test usability and identify issues in the workflow. </aside>

## **Example** of high-fidelity prototype Doppio double-screen smartwatch (Seyed et al, CHI 2016) * Doppio double-screen smartwatch * Made from two Sony smartwatches * Provided **all basic operations and some apps** * Weather app * Photosharing app * Still a bit clunky <aside class='notes'> An example of a high-fidelity prototype is the Doppio. [pause] The prototype provided all basic operations and some apps. </aside>

## What to do with your prototype? <aside class='notes'> Once you've got a prototype, what do you do with it? </aside>

## What to do with your prototype? * Discuss with other **designers** * Show to managers and customers * Show to users and get **feedback** * Interviews, focus groups * Try it out **"for real"**, let users try it, get feedback * Try **experiments** * Try tasks * In the lab or "in the wild" <aside class='notes'> In addition to using your prototype for testing and evaluating the quality of your design, it also provides a resource for sharing and discussing concepts with other designers. [pause] For management to see the product or help develop promotional material [pause] Of course, at the end of the day, the prototype is for getting REAL feedback. </aside>

## An Instrumented prototype <img src='.\images\lec04Slide32-2.png' style = ' border:0; width:100%; height:auto; ' > <aside class='notes'> This slide shows an image of an early stage high-fidelity prototype [pause] As you can see the prototype is more than just cardboard and pictures but has circuits and basic funtionality added for testing. </aside>

## "In the wild" Google Glass * User **experience** experiment * Not a statistical experiment! But still valuable. * "Explorers" took the glasses home, wore them when and how they liked - "in the wild", not in a lab * Did the glasses work? How did wearers react? What did they do with them? * Expect to discover the unexpected * Big question turned out to be: How did other people react? * Experiment had a big effect on the design of VR/AR glasses (HoloLens) * Were Google Glasses prototypes? <aside class='notes'> Using new technologies such as Google Glass to accelerate prototyping. [pause] This provides a method to accelerate the innovation process </aside>

<img src='.\images\lec04Slide34-2.png' style = ' border:0; width:100%; height:auto; ' > <aside class='notes'> As shown in the slide, google glass enhancing the working process. </aside>

## Compromises in prototypes * We **can't prototype everything** about an interface * All prototypes involve compromises * For software-based prototyping maybe there is a slow response? Sketchy icons? Limited functionality? * Two common types of compromise * **'horizontal'**: Provide a wide range of **functions**, but with little detail * **'vertical'**: Provide a lot of **detail** for only a few functions * The **compromises** in our prototypes mustn't be ignored or forgotten. The prototype isn't the full product which will still need engineering. <aside class='notes'> Prototpying is important [pause] However, you can't prototype everything. [pause] Always a compromise [pause] </aside>

## Construction Taking the prototypes (or **learning** from them) * **Quality** must be attended to: usability (our focus!) and also reliability, robustness, maintainability, integrity, portability, efficiency, etc * The product must be engineered * Evolutionary prototyping vs **'Throw-away'** prototyping <aside class='notes'> Some prototypes may be used repeatedly during the evolution process of a product versus quick and dirty prototypes [pause] Ultimately the prototypes help designers learn and develop the final product. </aside>

# Prototyping Tools <aside class='notes'> We'll now look at some prototyping tools </aside>

* Introduction to Figma * Starting, setting-up and using the Figma **(https://www.figma.com/)** <aside class='notes'> There are lots of different prototyping tools for interfaces. One that we use in this course is Figma . [pause] </aside>

## Short Video on Figma <aside class='notes'> </aside>

## Short Video on Developing Prototyping with Figma ### for Beginners (Note Figma Youtube Channel has Range of Tutorials, Demos and Resources) https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA <aside class='notes'> </aside>

## Summary * Prototyping * What, why, how * **High and Low-fidelity prototypes** * Using prototypes with **scenarios** * From **prototype to construction** <aside class='notes'> In summary after this short lecture, you should feel comfortable with what prototyping is. [pause] Including high and low fidelity approaches [pause] Going from a prototype to a final product. </aside>

## Recommended reading Chapter 11 (4th edition) or Chapter 12 (5th edition) <img src='.\images\lec04Slide38-4.png' style = ' border:0; height:400px; width:auto; ' > <img src='.\images\lec01Slide26-3.png' style = ' border:0; height:400px; width:auto; ' > <aside class='notes'> It is recommended you read chapter 11 on the subject to help broaden your comprehension around prototyping. </aside>

## To do this week ... * Read over the lectures * **Review** the revision questions * Work through the labs and tutorial practicals * Experiment (get into good habits) <aside class='notes'> This week, continue to review the course materials. Practice the revision questions and work through the lab exercises. </aside>