Openbravo's User Experience Lab
GUI design, ERP Usability and Visual Design

Creating Interactive Mock-ups on iPad

Friday, March 9, 2012

A week ago I started to search for a mock-up tool for tablets. What I wanted to do is to use a set of ready-made page designs and add interactivity to make it come alive. This is business as usual for desktop: I have been doing this for years in tools as simple as Powerpoint or in Dreamweaver by just dropping image maps (linked hotspots) on top of bitmap images. It turned out to be quite hard to find similar tools for tablet and mobile.

The whole point of an interactive mock-up is that it gives the user the impression that they are dealing with a fully functional application. Interactive mock-ups are used to test a much more detailed version of your application design than you would do using wireframes. The difference between mock-ups and wireframes is in the level of maturity. Wireframes are used to communicate the functional flows, the specifications and the layout of an application with very low fidelity. Most designers intentionally draw wireframes in black and white using sketchy lines to make sure their audience understands that everything is still rough. Mock-ups are the next iteration of wireframes. They add more look & feel, interactions, color and graphical elements. Ultimately there is the prototype which is a first real implementation of the design intent. It is developed by engineers and it aims to prove that the technology can do what the designers had in mind.  Here´s an image showing the different stages:


The different stages in application design

Application design comes to life in the mock-up stage and the user - or client - may even think the application was built already. Let me just give you a tip as a side note: Always make sure to communicate that in this stage not a single line of code was written yet and that everything is just smoke & mirrors.

There are plenty of wireframe tools on the market for PC/Mac but also web based applications that do a good job. Here´s an overview of a few years ago that is still valid as things have not changed that much. Good quality wireframe apps for tablets are thinner on the ground and it really gets hard to find a good interactive mock-up builder. Deceptively, most wireframe apps for iPad promise easy image importing but fail on the delivery. Images either have a maximum size, a maximum amount (e.g. ProtoTap) or just can´t deal with full-size rendering in high quality  (e.g. iMockups). Also, when you need to use your mockup for usability testing, you don't want disturbing toolbars that come with the app, as they distract the user who can't distinguish between the controls of your app and the mock-up app. Most mockup tools just don't seem to be designed by designers.

In theory, you could create interactive mockups in HTML (images + hotspots) the same way for tablet as you would do for desktop. The problem however, lies in the playback. The iPad does not allow users to run local html files in the browser, an annoyance of iOS. Android is more flexible but here we run into the second problem: Images are not scaled optimally in the browser which results in nasty slider bars appearing.

So after wasting too many euros on useless - for my purpose - wireframe apps in the App Store (it´s a shame that you can´t return an app if it doesn't do what it says on the tin), I finally found a decent interactive mockup builder app in the business category; a place where I did not expect it. Don´t get fooled by the boring name but mind you: Presentation Link  is quite an exciting find for interaction designers that need to test their work on users. Presentation Link lets you import your images (or PDF presentation) from Dropbox or iTunes. You can then add transparent hotspots on top of these images that turn dead pixels into interactive components. Just draw a rectangle on top of (an image of) a screen element and tell it which slide should appear next when tapping it. By adding enough images that represent different scenarios, you can get very close to the behavior of the final application. Here´s a little demo of Presentation Link:

 
How to create a simple interactive mockup

Presentation Link might actually disappoint tablet users that are looking for a fully fledged presentation maker à la Powerpoint or Keynote but this was obviously not the intention of Zuhanden GMBH, the authors of this tool. Knowing that slick presentations and interaction designs are much better produced on desk/laptop computers, Presentation Link just imports external beauty, links it together in a non-linear way and presents high quality, snappy clickable mockups that can be used for usability testing and demonstrations.

0 comments: