A best practice in agile software development — and an important way that we help one another continuously hone our crafts as engineers, product managers, and designers at Giant Machines — is the after-action review (also referred to as a “retro”). In these periodic workshops, we identify tools or practices that we want to maintain, update, or drop. Time and again, in UX-heavy projects or UX-heavy phases of larger projects, the clickable prototype emerges as a critical tool for capturing and refining the user experience. I, and the rest of the team, wholeheartedly recommend using them when developing new software.
To bottom-line it, clickable prototypes, which are basically designs you can wire up to act like very dumb websites, are cheap to create (relative to coding), help you quickly understand whether your solution works or not, and even provide peripheral insight into missing requirements.
So what’s a clickable prototype?
For clarity, what we call a “clickable prototype” is basically a set of designs with “hot spots” that, when clicked, take you to another page of the design. If you’re using the right design tools, you may get animations out of the box too.
Here’s a GIF of me using a clickable prototype created in Figma. Note the cool modal background and animations.
Why?
What you’ll notice is that it acts a great deal more like an actual website than a static design file would. That’s significant for a few reasons.
First, in the context of client service industry, it helps our clients understand what we’re suggesting. Most of our clients aren’t designers or user experience experts, so asking them to fill in motion and transitions with their imagination is a stretch. Honestly, I suspect even experienced designers will miss things.
To our clients and potential clients, this first point also applies when seeking buy-in from colleagues in other departments of your own organization — up to and including senior leadership. Clickable, dynamic prototypes bring the same level of understanding to key stakeholders (whether support staff or CEO) who may only have a high-level understanding of what you are doing. This brings the work to life in the way reading a Business Requirements Document does not.
Second, using the designs like a website forces you to consider the usability of your solution as distinct from its attractiveness.
You get to see whether the user experience is intuitive and pleasing, and whether it is easily learned, in a way static images don’t encourage. As an extreme example, consider that the non-interactive designs for a swipe-heavy app like iPad’s photo gallery would be just a stack of photos. Putting the reviewer in the driver seat makes them consider how the solution nudges them in the right direction, maintains consistency across interfaces, and highlights relevant options that aren’t smack-dab on the “happy path.”
Third, and this is an extension of the previous benefit, if you’re using the designs like an app or website, you start to consider all the other things you’d like to be able to do. Using the designs while they’re masquerading as a tool helps you inhabit the end user’s perspective and identify features and functionality you might have missed in your first round of requirements.
Finally, you get all of the above quickly and cheap. Giant Machines does a fair amount of work on Lean projects, where the goal is to learn as quickly and inexpensively as you can, and clickable prototypes support those goals perfectly. Way back in the day, you would need to write at least some code to discover how well your designs solve your UX challenges. Using clickable prototypes allows you to move quickly, throw away bad ideas with little regret, and only start the relatively expensive job of coding once you’re fairly certain of your solutions.
It’s easy to forget this step of the process, and go right from wireframes to high-definition designs and/or code, especially if you’re more experienced and believe you can fill in the gaps with your imagination and memory. However, speaking even as an experienced product manager, who works with experienced designers, I strongly recommend always taking the nominal extra time to wire up your clickable prototypes and test your designs.
We certainly will.
