One of the most difficult concepts to communicate effectively when designing for mobile is a touch-based interaction. Describing interactions with wireframe annotations (check out this blog from Wireframes magazine), and teaching gestures through reference guides (check out this great one from Luke Wroblewski) only go so far in communicating what that experience will actually be like. Many times those descriptions can result in some hand-waving and statements like "pretend the menu slides in from the left and you see this" during presentations. This is where an interactive prototype can really shine.
As part of the OpenRoad UX team, we were faced with a project where we knew that an interactive prototype would be convey the interaction design that we were proposing to a new client. As part of the team, I conducted a “state of the union” review of the current landscape of prototyping tools and was impressed at how far they have come. With support for rich user interactions, mobile gestures, and even responsive prototyping, there’s a tool out there that’ll meet your needs.
I evaluated quite a few tools but I narrowed down my list to these five options for review. Some of the tools that didn't make the list were in various stages of beta, or did the same thing that one of the featured tools already did very well. I felt these specific tools offered something unique to the market:
- Pop Prototyping by WOOMOO INC.
- Solidify by Zurb
- InVision by InVision App Inc.
- Proto.io by SNQ Digital
- Prototyper by Justinmind
Napkin prototyping
Pop is a very interesting mobile-only tool that takes Dan Roam’s napkin idea to the next level. With an iPhone, a piece of paper, a pen, and an idea, you can be actively usability testing on a mobile device in the field very quickly. Literally all you do is sketch out the experience (napkin, paper, whatever’s handy), take pictures of each screen, and use the iPhone app (Android app coming soon) to add clickable hotspots to each image. It’s as easy as that to quickly validate a design in front of potential users.
Ideally this tool is used for evaluating a particular idea or a very simple interface and not meant for very large or complex interactions. This tool should be used near the beginning of the project to validate design ideas for fairly simple user flows and ideas.
(Elusive) desktop support
At OpenRoad, the UX Team was looking for a tool that can prototype a desktop experience as well as a mobile experience. It was surprising to see how many of the tools just focused on mobile prototyping and completely left the desktop experience out. Solidify, InVision, and Prototyper all feature support for the desktop, but only Prototyper supported some of the mobile specific features (gestures, responsive support) that emulates a mobile device well.
Prototyper definitely came out ahead because it combines most of the strengths of Proto.io’s mobile only approach and also doesn’t leave the desktop experience behind.
That being said, Proto.io is a great tool if your project doesn't have a desktop component. This tool has rich interaction and gesture support for mobile and would be more suitable for prototyping a native mobile app that could take full advantage of the rich library of interactions and gestures available.
Analytics in a prototype
It was interesting to see that only one tool, Solidify, featured analytics. For this reason, Solidify makes a compelling case for use in mobile testing. The stats that Solidify collects during each session are:
- Longest time spent on page
- Page the user was on before this page
- Page the user went to after this page
- The average amount of clicks
These types of analytics add an extra lens that will enhance the usability testing data analysis. Ideally this tool is used in conjunction with usability testing of an interactive prototype. For the statistics to be more meaningful the usability testing would have to be controlled with a strict set of well thought out tasks, much like remote task testing.
Feedback mechanism
Solidify, Proto.io, and Prototyper all offered some type of feedback mechanism that allowed reviewers to provide feedback on any aspect of the prototype, but InVision seemed to have the most formalized feedback system. Most of the tools allow reviewers to click on particular areas of the screen and start instant messaging-like conversations about that particular area of the interface. But InVision takes this a step further, by letting teams track the conversations as possible enhancements/bugs and, therefore, close them as the team iterates through their design process. It’s reminiscent of a rudimentary bug tracking system and provides an overview interface to track incoming comments on a per project basis.
This type of mechanism for feedback would aid a geographically spread design team in keeping track of opportunities for improvement and new design ideas, especially if the volume of feedback was quite substantial.
Wireframing tools
Both Proto.io and Prototyper provided not only the ability to import still images and apply clickable hotspots on top of them, but also provide a full wireframing suite as well. This can be very beneficial if you need to add functional form widgets (editable text fields and working drop down lists) to a prototype of an input form, or add new controls to a still image in a pinch if quick changes are required.
Responsive prototyping
Websites can and will be consumed from any type of internet-enabled device with a dizzying array screen sizes and different orientations. Our current tools for creating wireframes and mockups are great when dimensions are static, but are not super helpful when trying to design a responsive interface.
I was very excited when I heard that one of the features in Prototyper was responsive prototyping. It was the only tool that I evaluated that had this feature.
It allows you to detect ‘on-resize’ events, and serve up different layouts that correspond to your chosen responsive breakpoints. To facilitate this you can designate text elements as ‘liquid’, enabling them to flow naturally as the layout changes from breakpoint to breakpoint.
Although not perfect, seeing a tool like Prototyper try its hand on delivering responsive prototypes is definitely a sign of the times and encouraging for the future.
Verdict
Mobile wireframing tools have come a long way in a very short time. There are a ton of options out there and each one brings its own specific strengths to the table.
- Pop Prototyping showed up as a great way to validate simple mobile user flows in a very short time using limited resources.
- InVision proved to be a great communication tool for use with a geographically diverse team to handle feedback and opportunities for improvement.
- Solidify emerged as an intriguing candidate for usability testing for its inclusion of analytics.
- Proto.io looks to be a fantastic solution for prototyping a native mobile application.
- Prototyper was the greatest all-round solution with support for responsive prototyping and providing an arena to prototype for both mobile and the desktop.