Prototypes are simply the draft versions of your website. The premise is it is much easier to change the site 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
Many tools can be used in creating a prototype. Nonetheless, diligence in choosing which ones your project should use 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 to be tackled linearly, 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 more precise 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. The project team reviews low-fi wireframes. 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, together with the clients, 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.
Three advantages of interactive prototyping
- 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. The same concept applies to mobile app development from scratch.
The users can also test interactive prototypes. 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 design contains.
Second, failure is an indispensable option.
Rare is a client approving the sketches at the 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 more robust web design process 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. Instead, there should be an ongoing partnership among the project team members. A member or two of the team must be 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.
