How to create a clickable breadboard in Miro

I got the idea of breadboards from Ryan Singer in his book Shape Up (opens in a new tab).

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 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.

A slightly different approach is using a Miro (opens in a new tab) 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.

Here's a video of how it works in practice. (opens in a new tab)