Post Image

What Is a Prototype: A Guide to Functional UX

by
Jerry Cao
Jerry Cao

Prototypes are one of the most important steps in the design process, yet still confusing for some designers and project teams.

No wonder it’s unclear—a prototype can be almost anything, from a series of sketches representing different screens to a pixel-perfect prelaunch interface.

In this post, we’re going to define “prototype,” explain different variations and how to make them, and most importantly, dive into the ways they keep your UX design focused on users.

What Is a Prototype, Exactly?

The most basic definition of prototype is, “A simulation or sample version of a final product, which is used for testing prior to launch.” The goal of a prototype is to test products (and product ideas) before sinking lots of time and money into the final product.

Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement. Once a draft of your product idea is in the hands of real users, you’ll finally see how they want to use the product. You can then go back and adjust your initial guesswork.

image03

A quick landscape of prototyping fidelities. (Image credit: Fred Beecher, used with permission from author, Boxes & Arrows)(View large version)

Prototypes have 4 main qualities:

  • Representation — The actual form of the prototype, i.e., paper and mobile, or HTML and desktop.
  • Precision — The fidelity of the prototype, meaning its level of detail, polish, and realism.
  • Interactivity — The functionality open to the user, e.g., fully functional, partially functional, or view-only
  • Evolution — The lifecycle of the prototype. Some are built quickly, tested, thrown away, and then replaced with an improved version (this is known as “rapid prototyping”). Others may be built and improved upon, ultimately evolving into the final product.

One of the most common misconceptions about prototyping is that it only needs to be done once or twice at the end of the design process. This is not true. One of our mottos at UXPin is “test early and test often.”

You should prototype every possible iteration of your design—even your first, most basic idea.

Prototypes aren’t simply beta tests that have the look of the final version; they are any version of your product that can be used for testing. As long as it gives you new insights into how people will naturally use the product, it doesn’t matter whether it’s paper, low-fidelity, high-fidelity, or HTML.

The Most Useful Prototyping Methodology

As we said above, prototypes can be a wide variety of things. For this post, we’ll break them into three general categories: paper, digital, and HTML.

Paper Prototyping

A practice that existed well before the Internet, paper prototyping works best in the early stages of design, mainly for testing product ideas.

It’s as straightforward as it sounds—simple screens are drawn on paper and configured to mimic a digital interaction. A common practice for testing these prototypes is to have one person play “the product,” switching the sketches according to how the user behaves.

image05

A low visual/low functional paper prototype. (Image credit: Cathy Fisher)(View large version)

Advantages

  • Fast — You can make a quick paper prototype in 5 minutes, which is why paper works so well for testing ideas. You can draw one quickly (even during a brainstorming meeting), and it’s no big loss if the idea falls flat.
  • Inexpensive — Since you only need paper and basic office supplies, paper prototypes are practically free. (If you want to improve the level of precision, you could buy specialized equipment like stencils or a mock phone cradle, but these are optional.)
  • Team-building — Paper prototypes are fun to make, which can strengthen team bonds! There’s just something about a group of people working together and using their hands that builds unity.
  • Documentation — Unlike digital and HTML prototypes, paper prototypes can be kept lying around as a reference for future iterations. Notes and revisions can be written on them, too, consolidating what you need in one place.

Disadvantages

  • Unrealistic — No matter how skilled the art or craftsmanship, paper prototypes are still a poor substitute for a digital system; there’s always a limit to the usability data collected.
  • False positives — Sometimes, paper prototypes don’t actually test what you had in mind. People might give feedback on the prototype itself (e.g. boxes aren’t uniform), rather than the idea it represents.
  • No gut reactions — Paper prototypes rely on the user’s imagination, adding a break between when they see the stimulus and respond to it. That “gut” reaction is crucial for a successful UX.

Considering the advantages and disadvantages, we recommend paper prototyping only during those early stages when most of a project is still abstract. The further you get into the design process, the bigger the gap between paper prototypes and the final product.

For more information on paper prototyping, check out these helpful resources:

Digital Prototyping

Digital prototypes are the most common form of prototyping, and are realistic enough to accurately test most interface elements, They are also much easier to produce than HTML prototypes.

Digital prototypes can be built using apps and software made specifically for prototyping. You can even make simple digital prototypes using presentation software like PowerPoint or Keynote.

image02

Low fidelity UXPin prototype created during a Yelp redesign exercise.

Advantages

  • Realistic interactions — You’re able to test how the user interacts with an environment comparable to the final product (depending on fidelity).
  • Flexibility — Test early and test often! You can start with lo-fi prototypes that become progressively more advanced as the design process moves forward.
  • Speed — Paper prototypes may have the edge, but if you want a computerized interface, digital prototypes are faster than HTML. Speed varies from app to app, but most have user-friendly interfaces and features like interactive elements or drag-and-drop.

Disadvantages

  • Learning curve — Before you can build your prototype, you’ll need to learn the software. (But since most have user-friendly interfaces, it shouldn’t be too difficult).
  • Transitioning to code — Depending on the software, translating your designs into code can be hit or miss; incompatible elements might be lost in the transition, meaning you’ll have to fix them from scratch.

A prototype’s success is affected by the software, and each designer tends to prefer some more than others (and of course, we’re a little biased here). For more hands-on advice, check out the links below:

HTML Prototyping

The last category, HTML prototyping, is only recommended for designers who are confident in their coding ability. HTML prototypes have numerous advantages, but they come with technical cost.

image00

Low Visual/High Functional Prototype built in HTML. (Image credit: Mike Hill)(View large version)

Advantages

  • Technical foundation for final product — Assuming you’re not building a throwaway prototype, an HTML prototype provides the groundwork for final code right from the start—which is a huge energy and time saver down the road.
  • Platform agnostic — You can test your prototype on virtually any OS or device, and the user won’t need to run outside software.
  • Low cost — HTML prototypes let you skip steps in the process—and you don’t need to buy prototyping software. If you’re short on funds and know the language, this could be the most economical option.

Disadvantages

  • Dependent on designer skill level — Your HTML prototype is only as good as your ability to code. If you’re not sure you’re up to the task, it’s better to go with the convenience of prototyping software.
  • Inhibits creativity — Diving straight into code means you’re essentially doing two things at once: designing and coding. This can create a sort of tunnel-vision where you “forget” about the user and the UX, whereas prototyping software gives you more room to explore and can even suggest new ideas with built-in libraries.

If you think you’re up for it, read these articles for more advice on HTML prototyping:

The Prototyping Process

There’s no one, best process for prototyping, but some are definitely better than others. Below are the three most effective processes, each suited to different needs.  

(Note: We advise that you ALWAYS test the prototype when going from lo-fi to hi-fi.)

Lo-fi Digital => Hi-fi Digital => Code

This is the standard process most designers follow—and it’s what we used during the UXPin redesign.

A lo-fi digital prototype (which could be as simple as an interactive wireframe built in a digital tool) tests crucial elements like navigation and IA early on. This means feedback can be incorporated before it gets too hard to make changes.

Next, the hi-fi prototype provides detailed feedback on something more closely resembling the final product, so that everything’s already in place when it’s time to code.

image01

High fidelity prototype created during a Yelp redesign exercise. (View large version)

Paper => Lo-fi Digital => Code

This is a highly efficient method that can save you time and resources, and it’s especially useful for experimental projects.

Paper prototypes can go a long way in conceptualizing the project, especially when there isn’t much relevant data on hand. To stay on track, a lo-fi prototype is then used to test concepts in action. If you have the resources, you can always create a hi-fi prototype; otherwise, go straight to coding.

image02

Low fidelity prototype created during a Yelp redesign exercise. (View large version)

HTML Prototyping => Code

If you know coding well, this process is quite streamlined.

Essentially, the prototype evolves alongside the design process and seamlessly becomes the final product (or its primary component). This process results in minimal waste—no throwaway prototypes, no extra steps, and no extra software costs.

Even so, keep in mind the disadvantages of an HTML prototype, most notably its dependence on the designer’s coding skill and its limited contributions to creative freedom.

Further Reading

The points in this article are selective highlights from our free design ebook, The Ultimate Guide to Prototyping.

This all-encompassing guide explores every corner—from the way prototyping fits into the overall design process, additional descriptions of individual prototypes, 10 prototyping best practices, advice on usability testing, and lots of tools and resources. There’s even a guide on how to turn Photoshop and Sketch files into interactive prototypes.

If you want the full treatment on prototypes, download the free ebook.

Jerry Cao

by Jerry Cao

Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you