Sketch and Prototype

Dr Charles Martin

Announcements

Assignment updates:
- template repo will be available this afternoon I promise
- class reps: I’ll get invites out this afternoon I promise!
- questions on the forum welcome, look in the “assignments” category.

Apology: I completely changed what I planned to do in this lecture. This will be more fun / relevant to the assignment.

Plan for the class

Sketch
Prototype
Make

Making

Last week I talked a bit about identity in HCI.

The maker identity is really relevant to me.

Making things to find out what, whether, how, and why.

Making as research methodology.

The framing this week around sketches and prototypes as different things with rules may not be something I agree with!

Make Magazine Issue 1, 2005. (Charles was 2nd year maths/music student at ANU)

Sketching Design Ideas

What is a sketch?
What makes something a sketch?

What is a sketch?

quick
timely
inexpensive
disposable
plentiful
clear vocabulary
distinct gesture
minimal detail
appropriate degree of refinement
suggest and explore rather than confirm

(Buxton (2007), p.111-113)

What should a sketch include?

This is up to you, but it could have

title
annotations
short description
a drawing

Design Idea: An AR app on a mobile phone that allows mosaic makers to preview tiles before gluing. This can help to choose colours and preview placement and positioning before being fixed.

Activity: Sketching toolkit?

What’s your sketching toolkit? How do you develop ideas?

Discuss with someone for 2 minutes then we’ll hear some answers.

I give you permission to buy expensive notebooks and pens for this course.

Is a sketch a prototype?

No (apparently).

Getting the Right Design vs Getting the Design Right

Image source: Getting the right design and the design right (uxdesign.cc)

Bill Buxton sez! So do it! (Buxton, 2007)

Activity: Sketch Demo

Let’s sketch something:

How can tutors keep track of student questions, pain-points and successes during a tutorial?

Suggest a design idea on PollEverywhere: https://PollEv.com/charlesmarti205
Help me sketch it.

Prototyping

Bits and pieces for a hardware prototype.

What is a prototype

“primitive form”
the form that comes before… something.
in this context:
- a testable form
- a form we can experience
enables evaluation and iteration
primitive: should be somehow rough or limited

More of what a prototype is

manifestation of an idea (Doorley et al., 2018), e.g.:

a wall of post-its
a role-playing game
an activity
an object
a program
a website
an app

(Rogers et al., 2023) Figure 12.2: (a) model jet engine, (b) moving and sensing dress, (c) a teddy bear printed from a wireframe design

Why make prototypes

empathy gaining
exploration (build to think)
testing
inspiration
learn
solve disagreements
start a conversation
fail quickly and cheaply
manage solution-building (Doorley et al., 2018)

How t prototype from Doorley et al. (2018)

Game

EMPI (embodied musical predictive interface)

A later prototype (2019) (Martin et al., 2020)

Charades: Waterbottle Stamp (2025)

Storyboard

Wireframe

FaderJam (2016)

Prototype for a generative music app by Charles (turned out to be a bad idea)

Wireframe App

Paper-based prototype to help a child with autism to communicate
Functions and buttons
Positioning and labels
Shape of the device
No actual functionality

Kinds of Prototypes

all of the above were used to test ideas and drive evaluation
some are more like a final product
we use the word “fidelity” to mean how close a prototype is like a final product
low-fidelity: (low-fi) rough, quick, not like a final product
high-fidelity: (high-fi) more polished, slower to make, more like a final product

Prototype Definitions and Analysis

Filters and Manifestations

Filters: emphasise some aspects of a design, omit others. (Lim et al., 2008), (Rogers et al., 2023 Box 12.2)

Appearance: size, colour, shape, form, texture, sound
Data: size, type, use, privacy, organisation
Functionality: needs, features
Interactivity: input, output, feedback
Spatial Structure: arrangement of interface, intangible, tangible, 2D, 3D

Manifestations: an external representation of the design (Lim et al., 2008), (Rogers et al., 2023 Box 12.2)

Material: media used, physical, code, hardware etc
Resolution: level of detail and sophistication (fidelity)
Scope: range of functionality, needs addressed

The prototyping spectrum

High Fidelity Prototype
Low Fidelity Prototype
https://collection.maas.museum/object/115505
https://www.youtube.com/watch?v=k_9Q-KDSb9o

Prototyping - Low-Fidelity

Don’t look/act like the final product
Simple, cheap, quick to produce/modify
Support exploration of alternative designs/ideas
Important in early stages - exploration/modification
Not meant to be kept and used for the final product
Storyboarding, Sketching, Index Cards, Wizard of Oz

Rogers et al. (2023) Figure 12.1: PalmPilot wooden prototype

Low-Fi: Storyboards

a scenario is one story
a storyboard represents a sequence of events (can be sketches)
generated from scenario
break the story into steps
thinking through process
think about design issues

Rogers et al. (2023) Figure 12.12 travel organiser storyboard

Low-Fi: The Role of Sketching

Sketching - a key part of low-fidelity prototyping
“Sketching is not about drawing. Rather, it is about design” Saul Greenberg et al. (2012)
Sketching vocabulary, required elements

So a sketch is a prototype? Which is it?

Rogers et al. (2023) Figure 12.5: simple sketches for low-fidelity prototyping

Low-Fi: Card-Based Prototypes

Index cards (Small pieces of cardboard: 3x5 inches)
Each card represents one element of the interaction
A screen, icon, menu, dialog exchanges
User can step through the cards
Pretending to perform the task while interacting
Explore user experience

Rogers et al. (2023) Figure 12.12 travel organiser cards

Low-Fi: Paper and Cardboard Prototypes

Paper Prototyping

It’s not just the prototypes, but how you use them!

Low-Fi: Wireframes

Prototypes vs Wireframes

Wizard of Oz Experiments

Can we test a product that doesn’t exist?

user interacts with the software
a human simulates the software’s response
assumes a software product or app

Making Hardware Prototypes

Build working prototype systems in hardware
micro:bit - cheap, small, with IO on the board (hello comp2300!)
arduino, big ecosystem, not-as-good boards.
raspberry pi, cheap way to get Linux into a prototype
Bela (charles’ friends!), pricey but hard realtime OS is good for audio interactions.

Makey Makey

alligator clip to connect switches / sensors
works as a keyboard
e.g., banana spacebar
programmable arduino-like microcontroller

High-Fidelity

looks and acts more like the final product
answer design questions, learn about constraints
evolve through stages of fidelity
can be used in a real application setting
design-evaluate-redesign cycles
modify/integrate existing components / tools / kits

low- versus high-fidelity

Type	Advantages	Disadvantages
low-fi	- quick revision - multiple ideas - good for communication - good proof of concept	- limited error checking - poor specification for dev - facilitator driven - usability not clear - flow limitations
high-fi	- more functionality - more interactive - user driven - exploration and test - look and feel - marketing/convincing	- hard work - time consuming to fix - inefficient for proof of concepts - could be mistaken for a product - could set poor expectations

Compromises

compromise is inherent to prototyping
make something quickly to test a particular aspect
prototype must be built with the key issues in mind
robustness vs flexibility

Prototyping Starter Kit

Prototyping workshop for AI musical instruments at NIME 2024.

Post-its, notebooks, arts and craft materials

take one step up from sketching
paper version of your work testable
low tech, low-fi, low risk, low cost
from storyboards to cardboard mockups with moving parts

You’ll do this in the tutorial next week!

Digital Wireframe

wireframes are visual plans for a user interface focussed on structure.

Established part of UX design process. Can walk through details of an interactive system with stakeholders.

p5.js or Processing

Make interactive systems quickly with a “sketching in code” mindset.

Processing is the original (Java-based)
includes a simple IDE and library system
p5.js is a javascript port
includes an online editor

Fast, interactive, not good for “normal” web design.

Hardware Prototyping

Sketch in hardware.

Arduino, Microbit, Bela
soldering and circuit design
3D printing
fun, frustrating
can be expensive

Convincing to test with a “real” product, can be used in real-world experiences.

Alistair Riddell testing an electronic carillon key.

Web or Application Stack (of your choice)

Everybody has different skills and areas of interest.

where are you comfortable to experiment?
where do you want to build experience?
for Charles it’s usually:
- Python/Flask/Bootstrap
- or iOS/iPadOS, libpd (for sound)

Need to be careful to focus on prototyping. What does a prototype not need?

Go code. (Image: Photo by Luca Bravo on Unsplash)

Vibe Coding

GenAI is pretty good at making interactive websites!

just ask chattie to build a prototype of your idea.
fast, cheap
possibly a bit broken (bad if you don’t know how to fix)
risks?
problems?
affordances?

Not necessarily bad in HCI: can we vibe code way more prototypes than we could afford to build?

Vibe coding. Source: MIT Technology Review, April 2025.

Activity: prototyping by request

Can we live-code a prototype before the end of this lecture?

Choose a prototype idea on PollEverywhere: <PollEv.com/charlesmarti205>
Help me figure out how to prototype it.
???
💸💸💰💲

Sketching and Prototyping in your Assessment

in your assessments, sketches and prototypes are differentiated by role in a design process.
- sketches: part of ideation process, quickly find lots of ideas, explore the needs and solutions
- prototypes: lead to something testable, should articulate an interaction

Highest-fidelity is not necessarily better!

best prototypes demonstrate a design process
allow the important aspects of interaction to be evaluated
I want to see evidence (through your prototypes) of a considered design process
different prototypes may be appropriate for different designs

Questions

Who has a question?

References

Adiwangsa, M., Bransky, K., Wood, E., & Sweetser, P. (2025). A game of ChARades: Using role-playing and mimicry with and without tangible objects to ideate immersive augmented reality experiences. Companion Publication of the 2025 ACM Designing Interactive Systems Conference, 440–445. https://doi.org/10.1145/3715668.3736382

Buxton, B. (2007). Sketching user experiences: Getting the design right and the right design. Morgan Kaufmann Publishers Inc.

Doorley, S., Holcomb, S., Klebahn, P., Segovia, K., & Utley, J. (2018). Design thinking bootleg. Stanford dSchool website. https://dschool.stanford.edu/tools/design-thinking-bootleg

Lim, Y.-K., Stolterman, E., & Tenenberg, J. (2008). The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas. ACM Trans. Comput.-Hum. Interact., 15(2). https://doi.org/10.1145/1375761.1375762

Martin, C. P., Glette, K., Nygaard, T. F., & Torresen, J. (2020). Understanding musical predictions with an embodied interface for musical machine learning. Frontiers in Artificial Intelligence, 3. https://doi.org/10.3389/frai.2020.00006

Rogers, Y., Sharp, H., & Preece, J. (2023). Interaction design: Beyond human-computer interaction, 6th edition. John Wiley & Sons, Inc. https://quicklink.anu.edu.au/kv9b