How Important Are Interactive Prototypes

By October 13, 2014 November 5th, 2019 development-related, Web Design

Prototypes are simply the draft versions of your website. The premise is it is much easier to change the website to be redesigned early on in the project than do so later. Prototypes are opportunities to do things right the first time. Thus, prototyping must be regarded as a fundamental part of any web design and development.

Before prototyping

Even before the prototyping process begins, there are prerequisites. Aside from working on the research and strategy for the project, there is also a need to develop the initial information architecture to map out the pathways towards coming up with a well-redesigned site. Further considerations include:

  • Client brief
  • Business requirements
  • Content requirements
  • Features requirements
  • User research
  • User scenarios
  • Heuristic evaluation
  • Usability testing
  • Audience analysis
  • Competitor analysis
  • Task flows

There are many tools that can be used in creating a prototype. Nonetheless, diligence in choosing which tools to be used in your project is a must among web designers and developers. The idea is deploying the tools that will adequately support the understanding of both the business objectives and the user needs.

The prototype created should be a testable representation of the website. This gives way to the next discussion.


Prototyping techniques

Approaches should be prescriptive. With this, the prototype needs not be tackled in a linear manner, but the goal remains. And that is, redesigning the website through combining decisions regarding information, interaction, navigation and interface while fulfilling the needs of the users and the requirements of the business.

In developing such testability, although project-dependent, there are specific ways to do so.

1) Fairly simple websites

Going straight and using an interactive prototyping tool is possible. Nonetheless, it still means considering specific design elements such as interaction, navigation and information.

2) Content-driven websites

Focusing on design elements like navigation and information separately through wireframing (page layout) is required. With this, the information design will be presented in a clearer manner – in a way that the users understand. The last process would be thinking about how the site should function.

Wireframes are typically low fidelity skeletal formats that developers slowly build into becoming high fidelity bespoke formats. Low-fi wireframes are reviewed by the project team. In fact, the goal is encouraging discussion and deeper thought about the redesign.

After compiling feedback from the group and making the necessary amendments to the wireframes, we will now move on to…


Interactive prototyping

An interactive prototype is a working simulation of the to-be-redesigned website. The goal is taking task flows, sketches, and wireframes into the two-dimensional realm. Through this, the developers, and together with the clients (if possible), are enabled to determine the interactions behind the components. In some instances, small interactive prototypes may be required for each feature and functionality.

Through interactive prototyping, further, the stakeholders may begin seeing the website taking shape. Not to mention, concerns are raised and addressed even before coding starts. There are three main advantages:

  • Testing and revising user interface
  • Refining interactions between the users and functionalities
  • Perfecting experience as iteration continues

Not every web redesign project will involve interactive prototyping. For a website with limited interactivities, producing interactive wireframe PDFs may be more appropriate instead. The process is commonly applicable for redesign projects that involve single to multiple areas of complex interactivity. This is particularly true when the areas are crucial in fulfilling user needs, business requirements, or both.

Interactive prototypes can be also tested by the users. However, if you are going to do this, let the developers know early in the process. The prototypes must be developed with the users in mind. Factors such as spaces, links and typographies are considered since they boost the users’ apprehension. As such, the users will continue testing the prototypes and not necessarily asking about it and its elements.

The interactivity renders dynamic and hands-on experience to the user. Users will get a real feel of the fixed and changing elements in the user interface. Yes, the prototypes are always two-dimensional which may provide unnatural or natural styles of interactions.

The approach to interactive prototyping could be low-fi or high-fi for demonstration purposes, depending on the need, complexity and timeline of the project. Whichever is more appropriate for the project, low-fi or high-fi prototypes are the answer to traditional mockups that cannot fully account for the interactive nature of the website to be redesigned.


As a final point, interactive prototyping can be the most exciting part of the planning process. This is where the developers can propose the craziest ideas that may or may not make into the final redesigned site.

First, early sketches are drawn quickly.

It is OK for the initial sketches to be loose, incomplete and lacking in detail. What is important is capturing the initial ideas in some form. Sketches are disposable, so there is no need to focus on the sketch quality. Instead, the focus should be focusing on the ideas that the sketch contains.

Second, failure is an indispensable option.

Rare is a client approving the sketches at first presentation. Clients give directions and concepts. However, working hard enough to suit both business and user requirements may mean discarding some of the ideas and decisions about themes, layouts and imageries.

Third, constructive criticisms are welcome.

Some of the ideas will be questioned and knocked down eventually. The goal is coming up with a stronger web design Philippines that is worthy of transforming into an active prototype. Keeping an open mind is an absolute must. Dan Brown said, “sometimes you can only hope to be ‘wrong in the right direction.”

Ultimately, the core insights behind developing interactive prototypes are communication and collaboration. Just giving concepts to the website developers won’t work. Rather, there should be an ongoing partnership among the project team members. It is very important that a member or two of the team is from the company itself. Better yet, the project team should also include the intended users of the website.

Interactive prototypes are processual, demonstrative and testable. It would be difficult to determine whether the site can ultimately fulfill the requirements of the client and users without them participating in the process.


Source: AGI Creative Team

Image credits: | |

Leave a Reply