Interactive Prototyping, Part 1

High-Fidelity Wireframes

High-fidelity wireframes include more detailed UI elements, but should not be actual renderings of an app or Web page’s visual design. You should create high-fidelity wireframes only if a client or stakeholder asks for them or the product team is not yet aligned on the concept or the flow of the application after reviewing sketches, storyboards, or low-fidelity wireframes. High-fidelity wireframes enable users or the technical team to better understand a design concept. They can also help the technical team or client have a better understanding of the user’s expectations.

Typically, high-fidelity wireframes are less flexible in terms of making revisions, so you should choose the level of fidelity to use based on your level of confidence in your design concept.

Some popular tools you can use to create high-fidelity wireframes include OmniGraffle, Interface Libraries 3, and Keynote. Figure 2 shows a high-fidelity wireframe.

Advantages of creating high-fidelity wireframes include the following:

• They take less time to develop than mockups or prototypes.
• They match the client’s mental model.
• They effectively communicate the UI-design elements.
• They are an effective medium for winning over clients.

Mockups

Mockups show not only the arrangement of UI elements on a screen or Web page but also their fonts, colors, visual-design details, and iconography. Wireframes don’t include all of these small details. Mockups are more than just blueprints. They show the finished look of an application. The goal of creating mockups is to fully illustrate your ideas. However, mockups are static representations of the final product.

When creating a mockup, the UX designer determines the UI text and button labels, designs the icons, and lays out the UI elements. The designer also chooses any images that appear on a page. Before you start working on a mockup, try to answer the following questions:

• What specific color scheme should you apply?
• How should the navigation be organized?
• What input fields, icons, menus, buttons, or other components are currently missing?
• What is the common theme of your site or app?

Mockups help you to choose between different design alternatives and determine your final product design. If necessary, you can create several possible design options, then make the final decision in collaboration with the client. Once the mockup is complete, it is time to create a prototype.

Prototypes

“Prototyping is the conversation you have with your ideas.”—Tom Wujec

You might be wondering whether creating a prototype is necessary, but prototyping helps you to paint the future, by showing the current and future states of an application design, as well as the path you took to get there, as Figure 3 illustrates. The word prototype has a specific meaning. Its roots come from the Latin proto, which means origin, and type which means form or model. A prototype is an experimental model of an idea.

Prototyping is a way of representing the ideas you’re proposing so you can share them with others and determine their value. A prototype is not a static picture of a mobile app or a Web site, but an interactive model that displays particular states depending on the actions the user takes. While it might not behave exactly the same as the real app or site, it can be really close to the final product. You can also use a prototype for usability testing—whether it’s a digital prototype or a paper prototype. You can pilot test a prototype long before launch. A prototype is definitely more than a black-and-white drawing. It is a close rendering of the product you’re ultimately going to launch.

To clarify the process of creating a prototype, ask the following questions:

• How would users interact with the product?
• What is the sequence of screens or pages?
• What could you do to optimize the user experience?
• Are there any better alternatives for representing a particular interaction?

Prototyping displays all of the UI elements and demonstrates their actual visual representation. UX designers create three different types of prototypes, which are as follows:

• sketches or paper prototypes
• interactive prototypes
• native prototypes

Sketches or Paper Prototypes

Sketching is a fundamental part of the design process and can help you make key decisions pertaining to your designs. It can be as simple as drawing a rough sketch on a piece of paper, or you can create a very realistic sketch and share it with others. Sketching can be useful at any stage of the product-design process. You can use different types of sketches depending on who you are working with or what you need to communicate.

Paper prototyping is a fast, cheap way of testing an idea for a product or service. Creating paper prototypes is an integral part of the design-thinking methodology. You can get a better idea of user needs by showing paper prototypes during user interviews. Paper prototypes also provide the basis for experimenting during and after the interviews. Some common materials you can use when creating paper prototypes include the following:

• scissors
• tape
• glue sticks
• markers
• pencils
• poster boards
• paper and cardboard

If you want to visualize an app or Web site, you can begin by drawing a simple user interface. It does not matter if your paper prototype looks raw. In fact, this is actually preferable because it lets people honestly discuss the concepts. On design-thinking projects, paper prototyping is an innovative way of finding out about user needs.

Paper prototyping lets you quickly build out your design ideas, so if your prototype does not communicate those ideas effectively or a design doesn’t work well, you can discard it without regret.

Interactive Prototypes

Explaining abstract ideas in words can be tough. Interactive prototyping is a process of exploring design ideas by building an interactive experience that helps other people see your vision. Interactive prototypes are really helpful when you are trying to pitch an idea, explain design details to an engineer, or conduct a usability-test session to validate your design.

Most importantly, to create interactive prototypes, you do not need to code, so you can explore your ideas quickly and easily. Interactive prototypes are working models that UX architects create. They show how the finished product would look.

You can create digital prototypes that behave as the final app would, without any costly engineering effort. Interactive prototyping tools that are available on the market include Axure RP, Adobe XD, Balsamiq, InVision, and JustInMind.

Native Prototypes

Native prototyping requires writing some coding—for example, writing an Android app in Java or writing a Web application in HTML/CSS and JavaScript. When creating a native prototype, you should build and test your design ideas on real devices—and as much as possible, with real data and real users.

Conclusion

Prototyping is not new, and people have been aware of the value and return on investment (ROI) of prototyping for millennia. However, prototyping rich, digital user experiences can be challenging for UX professionals.

Often, companies tend to invest in exciting new ideas—brainstorming, then planning their design and implementation. But after launch, you might realize that what you thought were brilliant designs failed to impress your users. This happens when the assumptions on which you based your design solutions were wrong and can lead to substantial waste of time and money.

Even though prototyping is not a cake walk, if you do it in the right way, it can help you reap huge benefits. Quickly prototyping and testing your designs, early and often, is the best way to test your assumptions, learn about your users, and improve on your ideas. You can start with paper prototyping, wireframe in Visio or another tool in which you’re confident, then create a functional prototype. While there are many rapid-prototyping tools available on the market, I prefer to use Axure RP. In Part 2 and Part 3 of this series, I’ll be discussing the finer points of Axure.