Traversing the UX Prototyping Landscape
I was fortunate to enter the professional design world at just the right time.
The iPhone had broken the mobile space wide open, web fonts were available in abundance, and responsive web design practices were well underway. Where Adobe used to hold a monopoly on design, other small start-ups have emerged as industry leaders. Software leaders like InVision and even Google are turning heads as they quietly buy up design software left and right (more on that later).
Modern design has continued to evolve beyond pixel-perfect mockups. The designer is no longer constrained to delivering wireframes and icons, but can make use of a myriad of tools that increase their versatility and make design communication more powerful. Some tools range from research, to hand-offs, to code, but there’s no doubt that today’s big ticket item is the UI prototype.
While this isn’t an exhaustive audit of all available apps on the market (that’s what uxtools.co is for), it paints a picture of the diverse options available to the modern-day designer (See something that’s missing? Let me know in the comments).
Try putting five designers in a room and asking for their favorite prototyping applications. After considering platform preferences, imports, and sharing features you’ll likely get five different answers. Most applications have selectively prioritized speed, accuracy, or some other element of prototyping to stay competitive amidst a flood of alternatives. So, how do you choose which is best for you?
Think First, Prototype Later
A prototype is a validation tool. It’s used to convince, convey, or confirm structural and aesthetic ideas within an interface. As Bill Buxton explains, they must come later in the ideation process because of their cost:
“…Prototypes are more concentrated at the later stages where things are converging within the design funnel. Much of this has to do with the related attributes of cost, timeliness, quantity, and disposability. Essentially, the investment in a prototype is larger than that in a sketch, hence there are fewer of them, they are less disposable, and they take longer to build.”
Because of that cost, a prototyping platform shouldn’t be chosen based on its popularity or on the highest fidelity possible. Instead, it should yield the most information with the least amount of investment.
Think about the problem you are trying to solve, how much time you have to solve it, and what you need to move forward. Before settling on a specific tool or research method, I ask myself the following questions:
- What am I trying to learn from my prototype?
- Who is this for? A stakeholder, an engineer, or a user?
- How much time do I have to solve this problem? One hour, or one month?
- How could a prototype integrate with my workflow?
- Am I working alone on this project, or does someone else need to access this work too?
These high-level questions will lead you to the features that you need in a product. Are you handing off code to engineers? Do you need fine tuned animation and easing? Here’s my mental model of the many prototyping solutions available:
In most cases, you’ll want the biggest bang for your buck: whichever method most accurately answers your question with the least investment. Because after all, all design knowledge has a cost.
Prototyping in Practice
My team at Lucid Software is constantly analyzing and adjusting our process to deliver the maximum design value possible. This means being quick to adopt new practices and, in many cases, new tools. I’ve personally experimented with multiple prototyping apps, and I’ve seen the value each app can provide in different situations.
InVision
A quick and easy solution to a prototype is to stitch pages together with simple hotspots InVision. It’s a lightweight, quick building process that results in a simple, guided walkthrough. It integrates nicely with Sketch and Photoshop, and lets you build a working prototype within minutes.
Notice the blue box that appears when a user tries to explore other parts of the design? These prototypes tend to require some handholding, and are often used for very constrained actions and transitions, like switching pages and opening menus.
Don’t expect to animate individual assets and elements, though. These prototypes are limited to basic, raster images like JPG and PNG. They work perfectly for early ideations and proofs-of-concept.
Principle for Mac
Many prototyping tools allow you to move beyond screen transitions, and employ more intricate and detailed micro-interactions. I recently proposed one such animation that was difficult to communicate using static assets and hotspots. I needed consensus from product management, so I wasn’t overly concerned about remote testing or sharing capabilities.
Because I’m designing for a robust web app, Lucidchart, hover states and mouse movements are crucial. Several of these apps have gone the well-traveled road of mobile-only design platforms, so my attention quickly turned to Principle. It was desktop-friendly, worked on Mac, and touted its ability to handle micro-interactions.
Principle has taken a more fine-grained approach than InVision. A prototype takes more time to build in Principle, but allows for very fine tuned animation and easing of individual elements. Check out this GIF I produced in about 20 minutes:
If you’re familiar with Keynote’s Magic Move you’ll feel right at home. Principle detects the changes in position, size, color, and more as it transitions between various screen states. These features afford realistic, dynamic interactions that can’t be replicated with InVisions image-based platform.
Once I was finished, I exported the above GIF and fired it off in a Slack message. From conception to consensus this idea took under an hour, the results was high-fidelity, polished animation.
Principle is top notch for UI motion design. It’s obvious that it was designed from the ground up with this end in mind. For more involved design solutions like remote usability testing with data, however, Principle didn’t quite fill my needs.
HTML/AngularJS in Codepen
When I was tasked earlier in the year with improving the page tab experience in the Lucidchart Beta, I needed to get my ideas into the hands of customers. I wanted to send a working, dynamic version of my design to users and ask them to use it themselves.
Customers needed to create real pages and rearrange those pages to their liking. They needed to create, delete, and sort pages like they would in their own workflow. They needed to measure my design against their own priorities.
Only a select few of the available apps on the market take user input, and the input is often a simple field that can be typed into. My prototype needed user input that could be stored, manipulated, and presented in different locations throughout the prototype. I needed code.
I’m very vocal in my support of designers that code their own prototypes, like when I talked about using Codepen to user test. Creating a coded prototype is often a big investment, though, and not all designers have the time nor resources to do it. For that reason, InVision and Principle are great alternative for a simpler, guided experiences.
In the end I used our Angular component system Lucid Particle to code a realistic experience in Codepen:
The results were phenomenal. Instead of a guided walkthrough, participants were able to simulate their own working environment. Some customers average 3–5 pages while others use over 100, and each was able to evaluate the prototype through their own experiences.
With a realistic, dynamic prototype these participants gave extremely detailed and invaluable feedback that allowed me to craft the experience to their benefit. I was also able to share this prototype with the engineering team to communicate exactly how the interaction should work. The work I had done to write the CSS and time the animations quickened the development process.
Even though this prototyping experience was immensely successful, it doesn’t mean that a coded prototype is always the best prototype. The best prototype is the prototype that yields the most information and knowledge with the least investment.
The Current State of Prototyping
As you can see from the diagrams above, the market is currently stacked with “Clickable Prototype” tools. Several forward thinkers have set out to solve the same problem, and the design world is benefitting immensely from it. A few outliers are already rethinking how prototypes should be made, however, and I think this industry will look very different even within the next year.
Silverflows turned the issue on its head as it brought prototyping inside of the design process rather than after it. Macaw seeks to take the process a step further by generating real, usable code from the designs themselves. I’m usually skeptical of the one-size-fits-all approach, but this quote by Mike Finch has me convinced otherwise.
“I don’t know what sorcery [Macaw is] using to make the code but it’s amazing and beautiful.”
Consider the possibilities now that InVision has purchased both of these companies. The prototyping space will likely look much different even within the next year.
Google also purchased Form and Pixate, both competitors in the industry. Their recent update to Form suggest that these programs will be used to further their efforts with Material Design, and give designers and developers more access to platforms with which to create their Android/Material apps.
I also enjoy creating hybrid apps in my spare time with the Ionic Framework. They’ve been hard at work adding to their suite of tools with Ionic Creator. With Creator, a designer will be able to design with Ionic components, and export to App Store-ready code. These apps work on both iOS and Android, and so offer a full start-to-finish solution for building hybrid apps.
These innovative workflows are helping to offset the cost of the prototype that Bill Buxton outlined. In Pixate, Adobe XD, and Silverflows the designer is able to create designs and screen-navigation in the same space. No time is wasted migrating, importing, or transferring and the prototype can be synchronously created alongside the design on the same timeline.
Maybe next year we won’t even need to compare prototyping tools. Maybe by that time there will be one app to rule them all, from start-to-finish, from paper sketch to production code. Maybe.
Until then, it’s important to consider which prototyping tool is right for the job, and to continue asking the right questions. Currently there is no right answer to prototyping. But picking the right tool will save time, change minds, and take your design to the next level.
(This is a post from the design team at Lucid Software. We make collaborative diagramming and layout tools: Lucidchart and Lucidpress.)
