Product

Clickable Prototype

Lay out multiple screens and allow users to navigate between them

Illustration of Clickable Prototype

Also called: Digital Prototype, Clickthrough Prototype

See also: Paper Prototype, Working Prototype

Difficulty: Intermediate

Strength of evidence
35

Relevant metrics: Time to complete task, Customer feedback

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

Want to learn more?

Receive a hand picked list of the best reads on building products that matter every week. Curated by Anders Toxboe. Published every Tuesday.

No spam! Unsubscribe with a single click at any time.

Idea Validation playbooks