UX designers have long used documentation as a means of communicating functionality and interaction for digital products. It has been successful for a long time and thousands of digital goods have been delivered using this process. However, as our industry evolves, so do our processes and tools. Documentation alone is no longer enough. And prototypes on their own, do not provide enough detail. Bitovi combines documentation with prototypes to deliver a comprehensive handoff experience and project archive.
Documentation Alone
User interface documentation (sometimes referred to as a specification) has always been extremely important to the engineering team. Typically, the documentation describes a visual overview of the screens, styles, and interactions. This documentation is provided to the engineering team as individual images along with overlaid text (aka. “redlines”) describing the graphics. Without this information, they would be left with many questions or possibly forced to make decisions on their own (oh my!).
For a long time, this was the way we did things. It communicated our designs well and there was no real need for a change. That is until motion took over digital experiences: animation, micro-interactions, scroll-triggered effects, hover and focus states, gestures, motion-activated interactions (e.g., laying a phone face down), eye tracking, etc.
Documentation alone became obsolete, as the prototype took over the role of demonstrating what was previously communicated with written words. It was more efficient to show vs tell.
Prototypes Alone
Interactive prototypes quickly became the standard for many digital products. Rapid prototyping allows the designer and project stakeholders to quickly and efficiently adapt to the discoveries they make along the way. Prototypes are loved by the engineering team and the client because they can now experience and interact with something versus only imagining how it might work. In fact, many designers are finding that prototypes are replacing traditional documentation completely.
But just like written documentation alone, a prototype isn't enough by itself. A prototype can save you hours in meetings, but it cannot fully describe all of the interactions, component states, and expectations that the designer has crafted. While software and frameworks have come far, they simply do not allow us to design all of the functionality and interaction that the finished project will have. Therefore, using both documentation and interactive prototypes is the best way of communicating our designs to all stakeholders.
A Perfect Combination
At Bitovi, we have put this combination into practice and see the value on a daily basis. Our current tool of choice is Axure and we really dig it. Here's why:
- Prototypes can be created quickly to be used for usability testing from the beginning of a project
- We can quickly demonstrate functionality that normally requires a developer
- Axure has a built-in server for generating prototypes without any set-up
- We can quickly publish and share changes publicly with you and your team
- Setting up responsive and demonstrating breakpoints is easy
- All documentation and recommendations are published inline with the interactive prototype
- We are able to fail, discover, and learn fast before the development phase begins allowing us to quickly iterate on solutions
Bringing It All Together:
Here is what our process looks like for combining documentation and specification into one glorious masterpiece of interactive awesome.
Wireframes
Creating wireframes is usually the step after the initial Discovery phase, where we complete tasks like research, user personas, and user stories to name a few. We start with basic wireframes that will eventually turn into an interactive prototype. Wireframing is meant to help us understand and then define what the basic structure of the app might look like without spending too much time on it. After several iterations and some testing, we'll agree upon a set of wireframes for various views within the app.
Interactions
Interactive wireframing is one of the most important parts of our process. It helps us to learn quickly, fail, and repeat. During this process, we achieve a lot with much less effort than having a team of engineers build what might be thrown away later.
Our interactive wireframes can be anything from simple click-to-click screens showing a user flow to complex interactions between components with data simulation. Complex interactions like loading data, repeating data, or changing variables is one of the best highlights of Axure. Once we've agreed upon a solid set of wireframes and interactions we can begin documenting the pieces that haven't been visually expressed yet.
Documentation
In most cases, the interactive prototype will answer many of the obvious questions like:
- Where do I go when I click this button?
- What are the focus or hover states of this UI control?
- Does this menu open on click or on hover?
Closing Remarks
At Bitovi, we combine all these practices to give our clients and development team written documentation, style guides, interactive prototypes, and high-fidelity designs in one simple package. This allows us to provide more accurate product recommendations at a faster pace than we could before.
It’s exciting to think about how the user experience design and development industry will continue to innovate in these areas and how this will impact our day-to-day jobs. Thank you for reading!
Want interactive prototypes for your project? Get in touch.
user experience
