Fidelity is often considered as a single spectrum: how close to the "real" experience of a product will a demonstration convey? In our work as interaction designers at gravitytank, we find it more useful to consider the relative fidelity of three distinct attributes of prototypes:
Visual
what is the desired level of "polish" to the visual design?
High visual fidelity represents the final, ideal state of a product
Low visual fidelity is quickly achieved and resembles a sketch or wireframe
Functional
how close to a final product is the interactivity?
High functional fidelity demonstrates through interactivity the ideal interaction model for a component or the entirety of a product
Low functional fidelity demonstrates potential features through visual representation with minimal or no interactivity
Specific
what percentage of a final feature set is represented?
Breadth-first prototypes explore the overall architecture of a product without conveying the details of every interaction
Depth-first prototypes convey the complete details of a limited set of interactions
Considering the above spectrum, we might consider three generic buckets to encapsulate the range of prototypes we build:
Interactive walk-throughs provide a step-by-step tour through a product concept. Interaction and animation are typically limited and visual fidelity varies. Examples include a clickable wireframe created with HTML or a series of mock-ups connected using an online prototyping tool.
visuals: variable
functionality: low to medium
scope: breadth-first
Recorded walk-throughs are a quick and dirty means of demonstrating functionality and intent. These often take the form of screen recordings with voice-over narration.
visual: variable
functional: low to medium
scope: depth-first
Animated simulations are detailed compositions that use motion graphics to convey the user experience of a concept. These are often videos, presentations, or animated GIFs that forego interactivity in favor of demonstrating the dynamic motion and transitions of an ideal product.
visual: high
functional: low
scope: depth-first
We use many different methods to build our prototypes, in various formats, from clickable wireframes built in Axure to lightweight Ruby applications that approximate the look and feel of a final product. Below we've listed some of the more common items in our toolbelt, with some pros and cons for each:
HTML+CSS+JS
+ industry standard, extensible, reusable, adaptable
+ work and collaborate with common + free tools (i.e. git, text editor)
- steeper learning curve
Axure
+ quickly creates complex interactions with built-in logic
+ lots of options through libraries and UI Kits
- difficult to use in collaboration
- moderate learning curve
Invision
+ easy to collaborate and annotate work
+ seamless workflows using Photoshop, Sketch, and DropBox
- limited interactivity and motion; primarily for clickable walk-throughs
Marvel
+ easy to use webapp allows quick prototypes from most browsers
+ easy to update and collaborate using DropBox
- limited interactivity and motion
Framer
+ if you can use Javascript, you can use Framer
+ seamless workflows with Photoshop plugin
+ great at prototyping one-off, complex interactions and motion
- resource heavy, not for complete walk-throughs
- steep learning curve if unfamiliar with JavaScript
Keynote
+ familiar tool available to many designers
+ animations are quick and intuitive to build
- ease of use comes at cost of control
- output is of lower functional and specific fidelity
After Effects
+ highest level of realistic visual fidelity
+ extreme control of timing, transitions, and compositing
- steep learning curve
- more complex than is often necessary for prototypes
The list above is far from inclusive of the current prototyping offerings in the wild–the number of new apps, services, and hacks of existing tools seems to grow weekly. We're always experimenting with new ways to capture our concepts and convey them to clients and potential users, and while the number of tools available to use in the cause may grow and fragment, the basic considerations in assessing fidelity and conveying intent remain.
