Humane interface

I am testing several tools that can be used for mobile prototyping, some of them are generic and some of them are specific to iOS. With regards to Axure RP Pro in its newest 6th release, there’s some interesting new features which can become handy when it comes to simulating UI patterns that are typical of the iPhone/iPad environment.

As a side note, this post refers to HTML prototypes that can be viewed on an iPhone/iPad’s browser, or via emulators such as testiphone.com or ipadpeek.com. If you wish to simulate an iPhone App  and test it directly on the device, you might consider an iPhone/iPad specific tool, such as Appcooker.

“Include viewport tag” in the HTML prototype

The “Generate prototype” dialog in Axure RP Pro 6 contains a “Mobile/device” section where it’s possible to select the option to include the viewport tag in the HTML code. When generating a prototype for mobile screens, the viewport tag is what you need to scale the content to the real estate available on the device’s screen.

In the specific case of an iPhone, constraining the design into a 320/640 pixels wide layout (the width of the iPhone screen) on the Axure workspace is not enough. The content also needs to scale correctly and that’s where the new feature becomes essential.

All the information you need to set the viewport tag correctly for an iPhone/iPad prototype is available on the Apple’s Safari Development Library.

Drag and drop

In Axure 6, dynamic panels support a rich set of events including OnDragStart, OnDrag and OnDragDrop. Also, new conditions can be applied, so for example it’s possible to track the position of the cursor and/or of the panel being dragged and create conditions that are verified once any of these overlaps another widget. This allows to simulate typical iPhone/iPad UI patterns, such as dragging and flicking, with control over the minimum amount of pixel necessary in order to activate sliding effects, such as on the iPhone home screen. The latest Axure release at the time of writing fixed a bug so that drag and drop functionality created in Axure can be tested directly on an iPhone/iPad, but you can also either use a simulator (as those mentioned above), or a remote screen viewing application, such as Live View (check this link to see how it works: http://labs.ideo.com/2010/05/10/liveview-an-iphone-app-for-on-screen-prototyping/). If you enable the “Interpret touch as mouse event” option on your Mac, this very nice application allows you to interact on your iPhone with the files that are actually on your computer. Drag and drop works, even though it’s rather slow and I did not find the time yet to see if there’s a way to connect iPhone and Mac so it becomes more responsive.

Another possibility is to view the prototype in a normal browser, show the device as a static image and use a frame to display the designs so they fit into the screen estate.

More explanations on the new drag and drop functionality can be found on the Axure official blog: http://axure.com/cs/blogs/axure/archive/2010/12/16/Axure-RP-6-Drag-and-Drop-Interactions.aspx

New effects on panel move

Special effects such as acceleration or bouncing effect can now be applied to dynamic panels when they move, thus allowing a more accurate simulation of typical iOS effects. For example, the horizontal sliding effect from a page to the next one as on many iPhone apps/web applications can be created using a dynamic panel and activating an horizontal movement with some effect such as acceleration or bouncing after the panel has been dragged by a certain amount of pixels.

More step-by-step instructions to come…

Please stay tuned as I am planning to release a video demonstration and a much more detailed tutorial on this topic. Sorry I can’t be more detailed for the time being, I hope this helps!