Also called: Digital Prototype, Clickthrough Prototype
See also: LEGO prototype, Paper Prototype, Working Prototype
Difficulty: Intermediate
Evidence strength
Relevant metrics: Time to complete task, Deviance from optimal path, Qualitative feedback, Unsaid response (body language)
Validates: Feasibility
How: Tie screens together by defining click targets and gesture actions so that one task leads to another task and screen. Evaluate the effectiveness of the linking structure and navigation on your site to see whether users can understand how to get around the site and complete their intended task.
Why: Although its creation consumes time, the end result feels more like a real live product including quick system response. Where paper prototyping can facilitate understanding and discussion, clickable prototypes provide the foundation for real usability and preference testing.
This experiment is part of the Validation Patterns printed card deck
A collection of 60 product experiments that will validate your idea in a matter of days, not months. They are regularly used by product builders at companies like Google, Facebook, Dropbox, and Amazon.
Get your deck!Before the experiment
The first thing to do when planning any kind of test or experiment, is to figure out what you want to test. To make critical assumptions explicit, fill out an experiment sheet as you prepare your test. We created a sample sheet for you to get started. Download the Experiment Sheet.
A clickable prototype is not the first thing you should build
The earlier in your design process you can identify and fix problems, the easier and less expensive it will be to build prototypes (then hopefully you won’t need that many). Before a clickable prototype comes a paper prototype, and before the paper prototype comes a customer discovery interviews and surveys. That said, clickable prototype is a great precursor to building actual working stuff.
Start small, quick, and cheap. The further into a process you get, as the fidelity of what you’re building increases, the more expensive it becomes to make changes.
Building realistic concepts
Digital and clickable prototype allow building realistic, clickable proof of concepts that lay the foundations for users and stakeholders to get a feel of what is being built. Prototypes help us test our assumptions and move progressively toward finished solutions of higher fidelity.
As opposed to Lego- or Paper prototypes, clickable prototypes often feel and act so realistic, that many users in fact are in doubt whether it is a fully functioning product or not. Consider not polishing your prototype too much, making it “ugly” in some cases, to help testers feel confident in giving constructive critique.
As digital prototypes often represent the first concrete take on how a final product could look like, they can be a great tool to get everyone involved in the design process. The short time it takes building a prototype allows designers to iterate fastly and present new solutions after a session of critique. In this way they can help keep the conversation going, so that designers don’t disappear for weeks on end building complicated solutions to problems that perhaps don’t exist.
Benefits of clickable prototypes
Many clickable prototype creation tools are online tools with the option of providing a link for stakeholders to view or comment on your prototype. This allow stakeholders to view and play around with the prototypes remotely. Your client doesn’t need to be in the same room.
High-fidelity prototypes like clickable prototypes are useful for bringing a design to life. Not only the concept but also the visual design and the interaction design. By using real content in your prototypes instead of “lorem ipsum” type, testers can experience how a the feel of a product will actually function and flow.
After the experiment
To make sure you move forward, it is a good idea to systematically record your the insights you learned and what actions or decisions follow. We created a sample Learning Sheet, that will help you capture insights in the process of turning your product ideas successful. Download the Learning Sheet.
Popular tools
The tools below will help you with the Clickable Prototype play.
-
UXPin
Create both lo-fi and hi-fi prototypes and comment and collaborate with your team
-
InVision
Popular prototyping tool that covers all stages of the prototype development
-
Preely
Early-stage prototyping
-
Proto.io
Create detailed prototypes with micro-interactions, animations, and standard UI.
-
Adobe XD
Adobe's take on allowing designers to build immersive clickable prototypes.
Related plays
- UX Prototypes: Low Fidelity vs. High Fidelity by Kara Pernice
- What is a website prototype? by Experience UX