Prototyping tools, clickthroughs and physical prototyping

Intuition

Once a sketch is worth keeping, you want it to behave: tap here, land there. Prototyping tools add that behaviour without making you write the product.

Prototyping tools link screens through hotspots

The lecture says there are tools developed for the sole purpose of prototyping, either code-based or code-free. It shows logos with free and paid labels, but those did not survive extraction, so which tool is free is not recorded here. It points to Figma’s guide on wireframing best practices.

A clickthrough is a prototype that links multiple screens together via hotspots, areas the user can interact with. To go from paper to digital, upload your existing images and add hotspots. The lecture mentions linking wireframes in Balsamiq, and phone apps POP by Marvel (iPhones) and Prott (Android).

Physical prototyping applies the same principle to electronic products

Physical prototyping mostly concerns electronic products such as wearable technology and tangible UI. The principle is unchanged: test ideas quickly. Resources are physical computing kits (build and code prototypes and devices using electronics, for example Arduino, BBC micro:bit, MaKey MaKey) and rapid fabrication: 3D printing, laser cutting and printed electronics. The lecture ties this to the COMP5047 Pervasive Computing unit.

Optional aside

The Week 7 worksheet asks you to run object/operation analysis, choose interaction types, metaphors and interface types, draw a storyboard, sketch wireframes and iterate until you have a wireflow, then swap feedback with another group. It is project work, so it is not answered here.

Recall

What links the screens of a clickthrough, and what is it called?

Hotspots: areas of a screen that the user can interact with.