Top

Interactive Prototyping, Part 1

September 9, 2019

Wireframing and prototyping are two of the most important stages of the design process. Wireframes and prototypes enable you to present your design concepts and show a Web site’s or application’s basic functionality to your stakeholders and clients. It is important that your clients understand the significance of creating wireframes and prototypes for their overall project and the differences between these deliverables.

At one of my previous organizations, our design team was redesigning an ecommerce Web site. During a daily standup meeting, our client suggested that we skip the prototyping stage and, instead, start with front-end development, creating interactive screens with HTML, CSS, JavaScript, and Angular JS. This meant our team needed to design what the site was actually going to look like, as well as its functionality, in actual code.

This client did not understand the significance of prototyping. He believed that jumping directly into the front-end development phase would get him one step closer to his product-launch date. But this way of thinking is misguided. As UX professionals, we were responsible for making him aware that having a prototyping stage before jumping hastily into front-end development would spare everyone problems down the road.

Wireframes, Mockups, and Prototypes

In this article, which is Part 1 of a series of three articles, I’ll discuss the three main types of design deliverables that UX designers typically create:

  • wireframes
  • mockups
  • prototypes

Wireframes

A wireframe is kind of draft of a product design in which you sketch out the basic layout of the product. It shows the general scheme or layout of an application or component. Creating a wireframe is usually the first step in the design process. While wireframes differ in their level of detail, all of them show the intended placement of data and user-interface (UI) elements such as buttons, tab, icons, and drop-down menus. Although there is no need to explain each UI element in the wireframe in detail, if your whole product team is working on it or you want to showcase it to a client, a detailed view is preferable. When creating a wireframe, always consider the user. Before you begin wireframing, try answering the following questions:

  • Which UI elements are most important to the user?
  • Which UI elements are of secondary consideration?
  • How should you determine what content appears on each page of your wireframe?

The goal of creating a wireframe is to clearly show the layout of an app screen or Web page. However, you could decide to omit the wireframing stage of design if you are working on a simple project of limited scope. There are two types of wireframes:

  • low-fidelity wireframes
  • high-fidelity wireframes

Low-Fidelity Wireframes

Use low-fidelity wireframes to nail down all the engineering concepts at the very beginning of the user-centered design (UCD) process—for example, the major structures, navigation schemes, and content. These wireframes can help you to quickly demonstrate the application’s behavior and flow. Low-fidelity wireframing should be iterative and evolving in nature so you can improve your designs. By the time you finish iterating your wireframes, the development team should have enough material to validate all of your assumptions, including the text for a predelivery, development build.

Low-fidelity wireframes can take the form of simple paper-and-pencil or whiteboard sketches or diagrams, or you can create them using such applications as Evolus, Balsamic, or PowerPoint. Figure 1 shows a low-fidelity wireframe.

Figure 1—Low-fidelity wireframe of The Telegraph
Low-fidelity wireframe of The Telegraph

Advantages of creating low-fidelity wireframes include the following:

  • They’re easy to change and, thus, facilitate rapid development.
  • Designers are open to receiving feedback, comments, and suggestions on them.

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.

Figure 2—High-fidelity wireframe of The Telegraph
High-fidelity wireframe of The Telegraph

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.

Figure 3—Painting the future
Painting the future

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. 

UX Specialist at HCL Technologies Ltd.

Noida, Uttar Pradesh, India

Apurvo GhoshAs a UX Specialist at HCL Technologies, Apurvo works within a multidisciplinary team to deliver compelling UX designs and services that support business objectives and enhance the way people live, work, and communicate. Apurvo takes a keen interest in helping the team to cope with UX design technology transitions and adds value across teams. He creates solutions that address new challenges in UX design and the visualization of complex data. Apurvo is a Certified Usability Analyst.  Read More

Other Articles on Deliverables

New on UXmatters