10 Tips for Prototyping Your Designs

Even though there’s a wide variety of prototyping techniques, they all share plenty of common ground. In this article, I’ve distilled years of prototyping tips and best practices from the best specialists in the field, as well as from our own experiences over at UXPin.

Tailor the Prototype to Your Audience

The type of prototype you present matters. What may work well for a session with your design and dev teams may not be as effective in a general staff meeting.

It’s not so much about limiting what to present — since you want to involve and be transparent with all stakeholders as much as possible — but more about how to present prototypes and choosing the right level of fidelity.

Low-fidelity prototypes are good in instances where you’re trying to show a conceptual design solution at the earlier stages of a product.

On the other hand, a high-fidelity prototype can be easier to understand for non-design and non-technical folks since it’s visually closest to the final product.

Perhaps a paper prototype might work well when presenting the prototype to a senior executive or engineer who just wants to get a quick overview of the main design concept.

Or maybe you need a mid-fidelity prototype to initiate a collaborative design session amongst team members.

Using the appropriate type of prototype for the situation ensures that your design concepts are clearly conveyed to the audience.

Prime Your Audience

The creator of the prototype will be intimately familiar with every aspect of his or her work.

However, the people testing and evaluating the prototype will be seeing it for the first time, so the creator of the prototype will need to explain and prepare them before the prototype is demonstrated so that there aren’t any misunderstandings or confusion.

For instance, for a low-fidelity prototype, we need to make sure we clarify upfront that feedback and evaluation should be focused on functionality and user flows, rather than aesthetics.

On the other hand, if we’re presenting a mid-fidelity or high-fidelity prototype, we can center the discussion on the visuals and interactions.

Involve Your Users (Participatory Design)

Participatory design builds user-feedback into the design process.

Participatory design can be done in a number of ways, including paper prototyping exercises, user testing, brainstorming sessions and so forth.

The idea behind participatory design is user-involvement can give us insights about problems related to usability and user experience early in the process.

source: poweredbysilas.com

Participatory design is more of an observant collaboration. It’s different from usability testing because we are involving users right at the beginning stages of ideation and concepting, not purely for the sake of validating design decisions, but rather, to actually use their feedback to help develop the design.

Focus on User Flows and Scenarios

Prototypes don’t need to be pretty, but they need to work. They must clearly demonstrate the key ideas behind the design.

source: wireframes.linowski.ca

Here’s a process our team followed when we redesigned Yelp as an exercise:

Step 1: Sketch the page flows

We started by crafting how users could optimally flow through the site.

After two iterations on the site map, we spent another two iterations filling in navigational and content details (menus, image containers, etc.)

Step 2: Create a low-fidelity digital prototype

Once the sketches were done, we moved into the UXPin app to start the digital prototyping process. We created three to five variations of each page, ran a few quick hallway-usability tests, and then iterated on the prototypes as needed based on the feedback.

Step 3: Increase fidelity as a final touch

Once the user flow was finalized and we were satisfied with the functionality, we focused on visual details like typography, icons and images. We also imported graphics from Photoshop into the UXPin app, merging our design mockup and prototyping phases together.

As we finalized the prototypes, we also tweaked the functionality as needed.

Make User Interactions as Simple as Possible

Fewer clicks mean less friction, which means better user flow.

But don’t let the 3-click myth restrict your design decisions.

You could theoretically create a site with all of its pages accessible in one click from the site’s front page, but that would detrimentally increase the cognitive strain users will experience while navigating the site because they’d need to sift through a ton of information all at once.

source: grundyhome.com

It’s more important to consider the productiveness of each interaction. An interaction must make the user feel they’re moving closer to accomplishing their tasks and goals. It’s excellent if that can happen within three clicks, but if you need more user interaction, you should choose the best option.

In our ebook, Web UI Patterns 2014, we covered Virgin America’s airline-ticket-booking user flow. The task of booking a flight couldn’t optimally be completed in three clicks or less; it took roughly nine steps.

Yet, despite breaking the three-click rule, the user flow of booking a ticket was still simple and pleasant.

source: uxpin.com

Don’t Neglect Animations

While animations and transitions might be simplified in a functional prototype, or completely absent in a low-fidelity or paper prototype, the important thing is that we think about them early in the process.

source: blog.uxpin.com

Knowing where and how animations will be implemented — whenever we get to them — will help us create a more unified user experience.

Animated interactions can make your prototype feel more like the end-product, and that can be beneficial during user testing, so it’s not a bad idea to prototype them if you have the time and resources.

Sketching: The Prototype for the Prototype

Just like the prototype is a distilled version of the final product, a sketch is a distilled version of the prototype.

The traditional design process goes something like this:

1. Sketching
2. Wireframing
3. Design mockups
4. Prototypes
5. Development

The process often varies based on the project’s needs, resources and limitations. Some people skip wireframing and mockups entirely, jumping straight into prototyping. Others prefer building wireframes first, then diving straight into code.

No matter what method you use, though, starting with a rough sketch is a quick and inexpensive way to help organize your concepts, ideas and thoughts.

Sketching can turn abstract ideas that are floating around in your head into something a little more concrete.

If you have concerns about your drawing ability — don’t be! As you can see in the image below, it’s not about looking pretty. The goal is to organize and explore your thoughts, concepts, and creating a basic structure.

source: uxpin.com

Don’t Let Code Hold Back Your Prototypes

If you’re purely a designer, code might not be your strong suit.

In this day and age, with so many tools and options at your disposal, your level of coding knowledge shouldn’t discourage you from creating prototypes. While a functional prototype does have its benefits, it’s not a strict requirement.

There are plenty of prototyping options: Paper prototyping, the Wizard of Oz method, using Keynote/PowerPoint, as well as specialized prototyping tools that have graphical user interfaces.

source: carolynchuwong.com

A low-fidelity prototype can let you get away with minimal or no coding. A paper prototype requires no code whatsoever, and could be an easy way to quickly and clearly express your ideas to your team.

Also, tools like InVision, Axure and our app allow you to build high-fidelity prototypes without code.

Test Your Prototypes with Real Users

Testing your prototypes lets you discover problems early.

Use personas and user scenarios to keep you on track as you create the prototype, then validate your assumptions with in-person moderated tests or affordable online usability testing through UserTesting, USERcycle, etc.

Start with a low-fidelity prototype, since it makes users more comfortable giving honest feedback, then iterate and test your interactions and animations with a high-fidelity prototype.

If you only have the budget or time for one round of testing, we suggest creating a mid-fidelity prototype. They still look like works-in-progress (which encourages honest feedback) and you’ll still be able to test key components like interactions, user flows and site content.

Between each prototyping stage, we always run quick usability tests. Here are a few tips that have helped our team throughout the years.

Test before you build

By running card sorting and tree testing, you can actually test the effectiveness of your information architecture (IA) before you’re deep into the prototype.

Card sorting helps you see how users create their own navigation schemes.

Tree tests let you see the effectiveness of your current IA concepts while users accomplish core tasks.

Don’t use Lorem Ipsum

Placeholder text is distracting, confusing and lacks meaning. Actual content will simulate your end-product better.

Use real images and icons whenever possible

We also don’t recommend placeholder images and icons for usability testing. Your images and icons don’t need to be polished, but users should be able to perceive their general forms.

If necessary, at least use realistic placeholder content

In some instances, you can get away with placeholder content so long as they can effectively represent the final content.

Prototype Only What You Need

Prototyping is a means to an end, not the end in and of itself.

We can get so caught up trying to build the perfect prototype, but this will only postpone development of the actual product.

While you don’t want to rush the prototyping phase, you also don’t want to be stuck in this stage for too long.

source: devartia.com

Further Reading

To learn more about prototyping, grab our free ebook The Guide to Prototyping. Our book covers different prototyping tools and tactics, and discusses case studies from companies such as Google Ventures, ZURB, IDEO and many more.

Related Content

• Wireframes vs. Prototypes: What’s the Difference?
• Ultimate Guide to Website Wireframing
• A Guide to Design Mockup Fidelity
• The Benefits of Wireframing a Design