Prototyping Techniques
On this page 9 headings
14. Why not code the first design immediately?
THINK Are we ready to code once we know the needs and requirements? Why shouldn’t we code the UI right away? Pause and write down your responses before reading further.
Initial design ideas might not be the best ones. Developing an interface takes time, money and effort (if users don't like it, you redesign from scratch). Prototypes let you quickly test on users, get feedback, iterate and pivot.
15. Prototype, feedback and iteration
Prototypes answer questions and support designers in choosing between alternatives. Purpose: test out the technical feasibility of an idea; clarify vague requirements; user testing and evaluation.
16. Levels of prototype fidelity
Prototypes differ by purpose, time of development and fidelity — how real the interface is compared to the final product. Storyboards and paper prototypes come early and don't resemble the final product much; digital mock-ups (e.g. Photoshop, PowerPoint) and interactive prototypes (e.g. a web app with fake data) move closer to it.
17. Storyboard: setting, sequence, satisfaction
A hand-drawn comic featuring Setting + Sequence + Satisfaction. Setting: people involved, environment, task being accomplished. Sequence: what steps are involved, what leads someone to use the app, what task is illustrated. Satisfaction: what motivates people to use the system, what it enables people to accomplish, what need it fills.
18. Storyboard example: Speak-Up
A virtual reality tool to help give effective presentations: simulates a presentation setting, records audio during the presentation, and provides hints.
| Storyboard element | Speak-Up |
|---|---|
| Setting | He has a presentation on Monday and practises in front of a mirror, but on the day he is nervous. |
| Sequence | A friend recommends Speak-Up; he chooses the type of audience and records his audio; the system gives feedback and comments; he sends the recording to his mentor; a second round of practice. |
| Satisfaction | He presents confidently in front of a large audience. |
19. Benefits of storyboards
Emphasizes how the interface accomplishes a task (without specific details); avoids commitment to a particular user interface (the storyboard communicates the task without implementing the application or committing to a detailed UI); shared understanding among stakeholders.
20. How paper prototyping works
A hand-drawn interface using multiple pieces of paper for the different screens.
21. Accessible digital-library paper prototype
Online library for Deaf and Hard of Hearing (DHH) and speech-impaired students — books in Indian Sign Language (ISL) and speech therapy. The first screen is login; the user can be a student, teacher or parent; clicking an option shows the next screen; choosing ISL opens a drop-down to choose the language.
Benefits: Easier than writing code for the UI; starts conversations about user interactions; elements can be changed immediately based on feedback.
22. Paper prototype vs digital mock-up vs interactive prototype
Digital mock-ups use tools like PowerPoint, Photoshop or Figma and are closer to the final product; buttons and links can be clickable, and they can be shown to clients for feedback before moving to the final product.
Prototypes facilitate conversations: storyboards → user tasks; paper prototypes → user interactions; digital mock-ups → visual design; interactive prototypes → picky usability details.