This site runs best with JavaScript enabled.

How to create a clickable breadboard in Miro


May 19, 2021

I got the idea of breadboards from Ryan Singer in his book Shape Up.

Borrowing from the field of electrical engineering, a breadboard is a fully functioning prototype without the industrial design. We can do the same for an interaction idea and choose not to specify any visual design.

To do this we specify three things:

  • Places — Things you can navigate to, like screens, modals etc.
  • Afforandances — Things users can act on, like buttons, menus but also interface copy.
  • Connection Lines — These show how affordances take users to different places.

Places go on top, affordances go underneath, connections define the flow.

A drawing of an electronics breadboard and a finished electronics product. The breadboard looks like a circuit board with a light bulb, dimmer and battery connected by long wires. It has no industrial design. The product has the same components but looks finished, with the bulb and dial artfully placed in an enclosure.

The same breadboard is modified. Now below the Setup Autopay place there is a new affordance called Pay Balance Now with a question mark.

By staying in low-fidelity, the breadboarding and fat marker sketching leave room for designers later in the process.

The problem

One problem with breadboards is that the connection lines can get messy.

messy connections

A slightly different approach is using a Miro board and using its ability to link to objects. Clicking on a link will move the current view to the linked object.

Because Miro zooms into the object that was linked, once you click a link, it can be helpful to link to a frame around the place/location in the breadboard. That way you never zoom in too far.

all locations

Here's a animated gif of how it works in practice.

Share article

Jesse © 2021