When to Create Sketches
Typically, you’ll use sketching at the earliest stage of design. You’ll often create sketches to spark discussions about usability and project goals and generate design ideas. Either a UX designer can create the sketches or an entire product team can create them as a collaborative process. The sketching process might also involve other members of the UX team—designers and researchers—the marketing team, or other stakeholders. Once your product team has aligned on a sketch, you can use it to communicate the initial idea to other stakeholders and teams.
Benefits of Sketching
There are many benefits of sketching, but the key advantage is that it’s fast. You can create a sketch in just minute—either with pencil and paper, at a whiteboard, or using software. Sketching doesn’t require any programming knowledge. It is also cheap. When sketching is a collaborative process, it’s a helpful way of getting all stakeholders involved in the design process. Plus, sketches are easy to revise—either with an eraser or by re-arranging a collection of images.
Paper Prototypes
Paper prototypes are not the same thing as sketches. While teams also use them during the earliest phase of the design process, the structure of paper prototypes is more defined than that of set of sketches. While you’ll often draw sketches freehand, paper prototypes typically involve using stencils and cardboard to create more substantial, detailed mockups of various Web pages or application screens for use during usability testing. You can also couple these with Post-it Notes or other paper addons. Similar to sketching, paper prototyping is often collaborative and is a good first step before moving on to an interactive prototype. Figure 2 shows the use of tools for creating paper prototypes.
Image source: Smashing Magazine
When to Create Paper Prototypes
Just like sketches, you’ll usually create paper prototypes at the beginning of the design stage. Paper prototypes can be the first step of prototyping or the next step after completing your initial sketches. You can elaborate on simple sketches by adding Post-it Notes or using index cards to better show user flows or depict drop-down menus and other on-screen elements. Use paper prototypes to represent a user interface during usability testing early in the design process.
Benefits of Paper Prototyping
Similar to sketching, creating paper prototypes is fast, easy, inexpensive, and requires no technical knowledge. The process of creating a paper prototype is often collaborative. Paper prototypes are easy to revise, allowing teams to explore various user-flow options and design details.
Click-Through Prototypes
Click-through prototypes depict the elements on the pages of a Web site or the screens of an app, as shown in Figure 3. They link various screens through hotspots. These prototypes are more advanced versions of low-fidelity prototypes, as well as the simplest versions of interactive prototypes. Some applications help you create prototypes from scratch, while others let you upload your early sketches or paper prototypes, creating a digital form of those prototypes, so you can test and iterate your designs.
Image source: Smashing Magazine
When to Create Click-Through Prototypes
While sketches and paper prototypes are great initial steps, click-through prototypes help you to take things one step further. Creating a click-through prototype is a great way of testing product flows early in the design process.
Benefits of Click-Through Prototypes
Clickable prototypes more closely mimic a real user experience than sketches and paper prototypes do. Thus, they require less imagination on the part of your teammates. While they are more time consuming to create than their other low-fidelity counterparts, creating them is much less involved than creating high-fidelity prototypes.
High-Fidelity Prototypes
High-fidelity prototypes are more advanced than their low-fidelity counterparts. They are more aesthetically pleasing, and their function is closer to that of the final product. You’ll typically create high-fidelity prototypes further along in the design process, once a team has a firm grasp of what they want the finished product to embody. High-fidelity prototypes are sometimes better for usability testing than low-fidelity prototypes. Examples of high-fidelity prototypes include
- interactive prototypes
- digital prototypes
- coded prototypes
Interactive Prototypes
Interactive prototypes, such as that shown in Figure 4, are more advanced versions of click-through prototypes that can you create using a prototyping application that supports interactivity, but only medium-fidelity visual design. In a sense, they are the culmination of the process of sketching, then creating paper prototypes or click-through prototypes. Interactive prototypes are both clickable and responsive, enabling users to interact with them and see animations in response, and they’re more aesthetically pleasing than their low-fidelity prototype precursors.
Image source: justinmind
When to Create Interactive Prototypes
You’ll typically create interactive prototypes later in the design and prototyping process, once a product’s design and functionality are fairly well established. Because interactive prototypes are more realistic than low-fidelity prototypes, they’re better for soliciting feedback and doing usability testing.
Benefits of Interactive Prototypes
Interactive prototypes look somewhat more realistic than low-fidelity prototypes. They are also clickable and responsive, so they give stakeholders a pretty good idea of how the final product will look and behave. However, since you create these prototypes before the product is under development, there is still time to make design changes. You probably don’t need to know how to code to create such interactive prototypes because a variety of applications offer drag-and-drop user interfaces that make creating these prototypes a breeze.
Digital Prototypes Created with Prototyping Software
The most common type of high-fidelity prototype is a digital prototype that is developed using prototyping software that lets UX designers create aesthetically rich, interactive, and even animated product prototypes of a user interface that is almost ready for implementation. As shown in Figure 5, these prototypes are realistic looking and support more accurate testing of user-interface elements.
Image source: Protoshare
When to Create Digital Prototypes
Create a digital prototype only once a product and its flow are well thought out and have been approved by key stakeholders for final testing and implementation. Digital prototypes take much time and effort to construct, so creating them should never be the first step in the prototyping process.
Benefits of Digital Prototypes
Digital prototypes look—but don’t behave—as close to the final product as possible. However, they can be dynamic, animated, and offer smooth transitions between pages.
Coded, HTML/CSS Prototypes
Creating a coded prototype similar to that shown in Figure 6 is more complex because it requires the UX designer or prototyper to know how to code. These prototypes are the closest to the final design of a product and are the best option for generating user feedback.
Image source: Medium
When to Create Coded Prototypes
A coded prototype should be the final type of prototype you create. Because coded prototypes are the most realistic and closest to the final product, they’re ideal for usability testing. While digital prototypes look, but don’t behave like the final product, coded prototypes both look and behave as much like the final product as possible.
Benefits of Coded Prototypes
Coded prototypes are neither fast and easy to create, nor easy to revise. They are natively responsive, so people can view them on phones, tablets, or desktops. Creating coded prototypes is usually less collaborative than creating a low-fidelity prototype. However, these prototypes are very realistic. They both look and behave like the final product so are the best prototype for obtaining user feedback. Plus, you can host these prototypes on any Web server—whether public or private—so they are very easy to share with teammates, stakeholders, and potential customers or users—unlike other digital prototypes, which require specific applications to view them.
Enola Labs has best summarized the benefits of coded prototypes, saying:
“They provide an accurate, full user experience, with fully developed transition animations, button interactions, and dynamic data.”
Final Thoughts
While there are best practices for prototyping, the type and fidelity of the prototype you should create ultimately depend on project specifics and the UX designer’s preferences.
Create low-fidelity prototypes early in the design process when you are trying to represent your thoughts and collaborate with product teams to determine what the final product should be. Types of low-fidelity prototypes include sketches, paper prototypes, and clickable prototypes. Benefits of low-fidelity prototypes are that they’re
- fast
- cheap
- easy to revise
You should typically create high-fidelity prototypes later in the design process. They’re better for usability testing, as well as for getting a team’s final signoff on a product design before development begins. Types of high-fidelity prototypes include interactive prototypes, digital prototypes, and coded prototypes. They offer the following benefits:
- They’re more realistic in terms of both visual design and functionality.
- They require less imagination on the part of reviewers and approvers.
- They’re better for sharing with external parties and soliciting feedback
