---
title: "storyboards-mockups-paper-prototypes"
tags: 
- info203
- scott-video
---

Fidelity will increase over time.
![200](https://i.imgur.com/7qmn859.png)

## Storyboarding
focus on the **task**
communicate flow
not about pretty pictures
use timelimits ≈10 mins

### shows
- settings
	- people 
	- environment
	- task
- sequence
	- steps
	- what leads a user to use the app
	- what task
- satisfaction
	- why do they use the app
	- what do they accomplish
	- what needs does the system fill

### Benefits
- holistic focus
- avoids commitment to an interface
- helps get stakeholders onthe same page

### Examples
![](https://i.imgur.com/9PzIGWg.png)


## Paper prototyping
mockup of UI on computer
![](https://i.imgur.com/aGq3VKp.png)


### tips
- store materials in one place
- work quickly
- complex parts of interfaces can be verbally roleplayed
- backgrounds can be used to contain protoypes and provide context
- you can mix and match hardware and software
- when appropraite include matching OS elements

- get users to add to the design
- get stakeholders incolved


## Digital mockups
![](https://i.imgur.com/LOSt7gZ.png)
