Modern technology design requisites a high degree of interactivity: navigation bars change with a user's scroll location, boxes expand on click to show and hide supporting information, lists are dragged and dropped to re-order, etc. Designers must consider all possible user interactions to create the most streamlined, intuitive user experience in their products.
Sharing and delivering interactive designs can take a variety of formats depending on what you are trying to accomplish, and who you are delivering to.
The Importance of Prototyping
In this post, I'll walk you through various prototyping approaches, and describe in which contexts one would choose each. Ultimately, the different methodologies described below have three facets you should consider when deciding upon which route to embark:
- The level of communication between departments
- The timeline you have to deliver upon
- Your stakeholders’ degree of what I call design elasticity: the ability to conceptualize abstract visual / interactive ideas from verbal or written communication
I'll use illustrations demonstrating the levels of each of these for all the prototyping methods we cover.
Paper Prototypes (Static Deliverables)
The early web was state-based: clicking a link took me to another page, which had a collection of links that took me to subsequent pages, and so forth. An understanding of Javascript was an advanced skill set, and frameworks had yet to be developed that would facilitate easier use of the language. As such, interactive components were rare. Designers’ static deliverables fit the needs of these technological products: since there were few interactive, moving components, the designs could be effectively represented by static comps created in Photoshop, InDesign, and other print layout tools.
As technology has progressed, an understanding of the benefits of a higher degree of interactivity in user experience has led towards more user experience design being contingent on interaction. The nature of static design tools, however, makes it difficult to represent interactive design ideas given the deliverables’ inherent lack of interactive components. Ultimately, this has led to the proliferation of prototyping tools in order to more effectively elaborate interactive design concepts.
Interactive Prototypes vs. Static Deliverables
Prototypes exhibit two main benefits lacking in static deliverables:
- They save development time as ideas are shown rather than inferred
- They allow for more effective communication of design ideas with stakeholders earlier in the process
As such, they can be a very effective mechanism for delivering design ideas.
However, depending on the project structure and its goals, static deliverables—“paper prototypes”—can still be effective in the design process. If the product is better represented through a state-based information architecture, for one, static deliverables work perfectly. Additionally, if the team structure provides a lot of communication between teams and a highly-agile iterative design / development process, static deliverables can be effective. When determining which path to embark upon, one should consider the communication structure of the organization, the stakeholders involved, and the degree of interactivity required in the finished product when deciding whether to proceed with static mockups or more robust prototypes.
Lo-Fidelity Prototypes
Lo-fidelity prototypes attempt to span the gap between the restrictions of static comps and wireframes, encompassing a deliverable that may illustrate some of the interactive design concepts, but lacks the refinement of a finished product. The visual design system may not be fully conceptualized, for example, and the designer may choose to represent information in black and white, using placeholders for the content in order to present a proposed vision of the information architecture.
When to Prototype in Lo-Fidelity
Such deliverables are popular among designers that consider themselves wholly of a UX persuasion, as they may be less comfortable concepting how an information architecture translates into a visual design system. These types of prototypes are often accompanied by “visually designed” static comps in order to give a more robust representation of the final product.
Conversely, other lo-fidelity prototypes may present a high degree of visual design polish, but lack robust interactive states. Many prototyping tools allow designers to easily define “hit areas,” hotspots that on click take the user to another page or section of the design. This is helpful for visual designers, as they can focus more effort on creating the visual aspects of an information hierarchy, then link together their designs later to illustrate user flow. However, the creation of more robust and sophisticated interactions is limited in this design process.
Potential Pitfalls with Lo-Fidelity Prototypes
Both lo-fidelity and paper prototypes, therefore, requisite a high level of communication between design, development, and key stakeholders, as the deliverables are merely an approximation of the finished product. Either the visual or interactive design system is under-represented, and ultimately such deliverables face many of the same risks as static comps: misunderstanding of the design ideas resulting in wasted development time, the need to present sophisticated ideas verbally or in writing, wasted time in meetings elaborating on under-represented design ideas, etc.
Another potential problem is the over-fragmentation of design ideas, which can result in a poorly conceived design that lacks unity. As much as organizations love to segment responsibility into separate roles (UI, UX, Visual, Interaction, etc), design is a discipline contingent on the creation of
“something that is made of many parts and is yet somehow more than or different from the combination of its parts” - Gestalt
In the context of design, therefore, the over-fragmentation of responsibilities without a unified approach to product creation often results in a poorly conceptualized product. The product could be crippled by creating interaction, interface, experience, and visual design in separate vacuums.
Depending on the context, lo-fidelity prototypes can be a good mechanism for delivering design. They are often effective at delivering new products within an already established visual design system. The way different interactions are presented visually has already been established, therefore the way a user flows through an application interactively is the main goal of the deliverable.
Hi-Fidelity Prototypes
Showcasing the entirety of a design—its visual, interface, and experience design—the hi-fidelity prototype is the holy grail of interactive design deliverables. In a hi-fidelity prototype, stakeholders, developers, and users can fully interact with the deliverable, providing a number of benefits to the organization.
Benefits of Hi-Fidelity Prototyping
First, hi-fidelity prototypes ensure more effective and efficient communication between departments. Often, time is saved as developers can fully understand how an interaction is structured before embarking on the wrong path and wasting valuable development time. Stakeholders appreciate hi-fidelity prototypes, as well, as they can fully grasp the interactive and visual design concepts in one consolidated deliverable. Hi-fidelity prototypes, therefore, save resources by ensuring effective communication of design ideas to developers and stakeholders.
Another benefit of creating hi-fidelity prototypes is their facilitation of more robust user experience research. A user can fully interact with the prototype, thereby illustrating gaps in the design in real time. Many hi-fidelity prototypes accommodate for the introduction of analytics software into the deliverable itself, as well, providing additional, supporting methods of conducting user research. Google Analytics can be incorporated into html-generated prototypes, for example, facilitating user experiments and A/B testing. Ultimately, the ability to incorporate user testing earlier in the product development lifecycle creates a more efficient process and results in a better product: development time is saved as the design is modified before it begins being built, and iterations occur before the first release of the product.
Further, depending on your stakeholders, a hi-fidelity prototype can increase sales potential, thereby directly impacting your company’s bottom line. At CrossCap, we are designing modules for the manipulation and analysis of marketing campaigns at the world’s largest retailers. Selling a client on a particular module—many of which have yet to be developed—is much easier when the client can sit down and fully interact with the future product. Delivering hi-fidelity interactive prototypes, therefore, has contributed to the company's bottom line by increasing sales.
Problems in Creating Hi-Fidelity Prototypes
There are many benefits to producing hi-fidelity interactive prototypes. Unfortunately, many current prototyping tools lack the sophistication to portray both robust visual and experiential design concepts. Today's prototyping tools are limited in their scope, specializing in either one or the other. Axure, for example, has a robust interaction design suite, allowing for the easy manipulation of elements, yet lacks the sophistication provided in other more visually-oriented tools, such as color palettes, advanced shape manipulation, etc.
On the other end of the spectrum lie tools like Quartz Composer, which will easily allow you to incorporate sophisticated visual design comps, but illustrating advanced interactions requisites elaborate manipulation of patches and advanced knowledge of the tool.
Given current tools’ lack of a holistic, gestalt-driven approach to designing technology, creating hi-fidelity prototypes puts an increased burden on the design department, as tools need to be carefully massaged in order to produce the desired result. In order to create hi-fidelity prototypes, for example, we have had to hack into Axure to inject interaction-design-focused Javascript directly into the generated html. Using Sketch with framer.js has posed similar problems, requiring an advanced workflow contingent on a cross-disciplinary approach to design.
Our design team clears these barriers in creating hi-fidelity interactive prototypes through a multi-disciplinary team structure: we have a team ranging from highly-proficient visual designers to code-centric front-end developers, plus a few members who straddle the line between. This allows each member to utilize his or her skill set in contributing towards a single deliverable that is more robust in nature. As a result, the team structure creates a greater level of efficiency, saves time and resources, and contributes to the sales potential of our products. Whereas some organizations segment the design team and their deliverables into different units (UI in Photoshop, UX in Axure, etc.), our team’s strength lies in unifying varying skill sets under a single goal and deliverable.
Conclusion
There are many benefits to producing hi-fidelity prototypes when designing technological products: they save development time, create more effective communication between departments and stakeholders, contribute to a more efficient process, and—depending on the organization—increase sales potential. Ultimately, however, your decision upon which route to take should be contingent upon the organization, the stakeholders, the timeline, the nature of the deliverable, the level of communication between departments, and the organization’s product development philosophy.
The effectiveness of design is measured in its execution. While hi-fidelity prototypes facilitate execution of design ideas by providing more effective communication that results in better appropriation of resources, they are in no means the only vehicle on the path to creating a great product. When considering which route to take in creating your deliverables, consider the pro’s and con’s of different methodologies listed above, your team resources and its skill set, your organizational structure and philosophy, and who you are delivering design to in order to embark upon the best path and create the best product.
In my next post, I will illustrate these high-level prototyping approaches with examples of each deliverable format to further guide you towards the right path to take with interactive deliverables.
