How to run Balsamiq wireframes on mobile

whiteboardingThere are many new desktop and web-based wireframing applications, but Balsamiq is still a favorite go-to tool for many product managers and UX designers.    The main reason Balsamiq is far better than simple Powerpoint or Omnigraffle wireframes is that Balsmiq wireframes are interactive.  The compiled wireframe is functional, giving your engineering and marketing teams a visceral experience of actually using the proposed functionality.    Viewers can tap on buttons and links, see page transitions within the wireframe, and get a feel for how the app would actually behave.

balsamiq screen sizeThis interactive experience is far more valuable than just looking at pretty Photoshopped mockups of an app.   “We need to avoid the mindset that we need to develop a picture perfect Photoshop mockup for every deliverable.  Instead, get feedback earlier. If we work as part of a balanced, cross functional team, then we can constantly get feedback from other members of the team and learn more quickly than if we design on our own.”

What about mobile?

One obvious missing feature in Balsamiq is the ability to run the wireframes on a mobile device itself.   Sure you can mockup mobile screens, but what about running the wireframe on mobile?  Do UX designers need to abandon Balsamiq and switch to mobile / tablet based prototyping tools?  Not necessarily.  Here are some tips on how to leverage your existing Balsamiq toolset and run wireframes on mobile:

Balsamiq-desktopDefine your mobile screen size

First determine which phone you will be porting your wireframe.  For the purpose of this test I chose my HTC One, which has a 1080 x 1920 screen size.   Of course the same process will also apply for iOS.  Using the same screen aspect ratio, I reduced my workable Balsamiq screen size down to 270×480.

Export your mockups to PNG without margins

When you’ve finished your mockups, export them to PNG images instead of a PDF document.   You will link those PNGs together later on your mobile device.  Grab the set of PNGs and move them to your mobile device’s photo gallery via Dropbox or your preferred desktop -> mobile file transfer method.

Success!

Success!

Use the POP prototyping app

For the purpose of this test I used the POP prototyping app.   Open the app and create clickable areas and links within images from the app.  Note that links you defined in Balsamiq won’t work on mobile.  You’ll need to recreate those links in the POP app.   To define links, identify a tappable area, then define which page it should link to.  Once your links are all defined and tested, give it a test drive.  Check that your images fit the screen correctly and that all links are working.  Transitions from page to page are a bit clunky, but it’s completely functional.   You just build a light mobile app that shows functionality that doesn’t exist in your production version!

Next, hand users your phone and watch them click around the app.  Success!

Advertisements

One Response

  1. And how about saving an interactive prototype to PDF and opening that up on your mobile device?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: