Mobile Prototyping Has Never Been Easier

Prototyping is by far my favorite activity to perform as a UX Designer, followed up naturally with user research. Prototyping is a natural problem solving technique that allows you to quickly create a vision of the solution, or multiple solutions, for a design problem and share that vision with others. In most cases, it’s cheap and takes a fraction of the effort that proof of concept development entails.
A couple of years ago I remember prototyping up various mobile concepts and it was a chore; my prototypes contained many hacks to make them behave appropriately. Over the last year, the need for these hacks has diminished as new tools and updated versions of existing tools have been released to meet the growing demand of mobile prototyping. Below is a collection of some new and old prototyping tools that you can use to start building a vision for your mobile apps and sites prior to making large investments in development and design.

Fireworks and TAP

Fireworks will always have a special place in my heart when it comes to prototyping. It was one of the first prototyping tools, excluding counting paper, that I used when learning the process and methods of interactive prototyping. By utilizing a plug-in called TAP, you can build state-based prototypes of an iOS design and build them in HTML with touch capabilities that then can be tested on an iOS device. Using the features that TAP provides, you can take rough, hand-sketched ideas or detailed concepts and see how they behave off the monitor and on the actual iOS device it will be used on.

Resources for Fireworks and TAP
iOS Prototyping With TAP And Adobe Fireworks (Part 1)
iOS Prototyping With TAP And Adobe Fireworks (Part 2)
Rapid prototyping in Fireworks
Create Interactive Prototypes With Adobe Fireworks

Axure RP Mobile Prototypes

Hidden in the release of Axure RP 6.5 came the ability to build out an Axure prototype that could be viewed and used on mobile devices. We’ve used this feature often with our clients that wish to explore a mobile solution and want to retain some of the interaction design patterns that were being used in their desktop apps and sites. Along with the feature that builds the prototype for the mobile view, many libraries exist that provide various design patterns for the different devices that exist on the market today.

Resources for Axure RP Mobile Prototypes
Mobile Prototyping With Axure RP
Axure RP
Axure for Mobile

UX Pin Mobile Kit

Good UX Means Good Business

In a world where technology is rapidly advancing and user expectations are rising, it’s no longer enough to have an average user experience; to delight your users and surpass your competition you must strive for the exceptional.

Get the Guide

The role of paper prototyping continues to grow and mature within the UX profession, and thanks to UX Pin, UX Designers have a new toolset to assist them with their paper prototypes. The Mobile Kit that UX Pin offers comes with notepads the shape and size of iPhones, common mobile design patterns and elements, and the ability to take a picture of your paper prototypes and upload them to the UXPin App. This is a great resource for working collaboratively with your fellow designers or even your clients.

Resources for UX Pin Mobile Kit
Mobile Kit for iPhone
UXPin App

POP – Prototyping on Paper

My design thinking and ideas never start off using a computer or even a tablet. When I feel like I have enough information about the problem, the users, and the projects goals I break out my notepad or sketch sheets and begin sketching. Before using POP, I would need to take photos of my sketches and load them into Axure and use image maps to flag hot spots that would drive interaction and navigation. Now using POP, I can use those same photos and build that rough prototype right on my phone. This is a great resource if you’re out on the move and don’t have the luxury of sitting at your desk and wiring up the prototype to collect user or stakeholder feedback.

Resources for POP – Prototyping on Paper
POP App
Review of POP

Proto.io

Not all prototyping tools are installed apps. A new breed of prototyping tools have joined the market that are browser based. Proto.io is a web application that allows you to layout your design, wire up the interactions, and deploy a mobile prototype for a variety of devices and resolutions. These prototypes can be viewed and used on mobiles devices, and even support a variety of touch-based interactions.

Resources for Proto.io
Proto.io
Review of Proto.io

Foundation HTML Framework

For those designers that are comfortable working with code, or for developers that have an eye for design, there exists the Foundation Framework. This HTML and CSS framework is responsive and allows you to quickly layout and program up an interactive prototype in working HTML. This type of prototype can follow any of the others listed above as a design matures and the solution has been tested to ensure it will be usable for the end user.

Resources for Foundation HTML Framework
Foundation 3
Getting Started With Foundation
Review of Foundation
Wrapping Up
New design tools are always popping up as the demand for them grows, and the tools listed in this post are just a sample of those that are available. No tool is THE tool when it comes to prototyping. The best tool to use when prototyping is the one you are comfortable using and the one that best communicates the intent behind your design so you can validate it with users.