July 27, 2018
UI designers often define a flow of interaction with wireframes or higher fidelity mockups. This has some problems.
Wireframes require too many visual decisions too early. Even stripped back tools like Balsamiq require you to choose widths and heights for elements. The end product is a visual layout of elements.
The core of an interface design is made up of the affordances and the connections between them. What will the person see and do, in what order, to get from A to B. Once you work that out, there are thousands of ways to change the visual styling.
This is the like the difference between circuit design and industrial design. The components are the same in both, but you could waste a lot of time and effort early on debating on a steel vs plastic case or the proper alignment of the switch versus the indicator light.
An electronics breadboard. The components and connections for the interaction are there, without any industrial design.
In this spirit I've been experimenting with a grammar for "breadboarding" UI elements. It boils down to some simple rules, like forcing all elements into a single column, and including important pieces of text alongside the functional components like buttons and fields.
