I recently developed a small prototype for usability testing of some new mobile website functionality using Axure RP Version 6. Here are a few things I learned:
- If possible, use Axure RP Version 6. It has mobile settings under the Generate Prototype menu that will save you from having to manually add to each page the HTML viewport meta tag every time you generate a new prototype. Screen shots of the settings panel are at the bottom of this post.
- Generate separate viewport tags for iOS and Android browsers like below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>
<meta name="viewport" content="width=480, target-densityDpi=device-dpi"/>
- For iPhone, you can design your prototype at 320 pixels wide for older devices. iPhone 4 will scale it up to 640 pixels wide so the prototype has the same appearance no matter what version of the iPhone your participant is using.
- For Android smartphones, design the prototype at 480 pixels wide. Tablets are another story and my testing did not include them.
- To create accordion effects on interface widgets, a common design pattern on mobile websites, you can use Dynamic Panels and Axure’s OnShow event with the Move action. See the advanced dynamic panel tutorial on Axure’s website.
- If you are opening the prototype on an iPhone from a home screen icon and want to hide the URL bar, use this meta tag:
<meta name="apple-mobile-web-app-capable" content="yes"/>
- Test on as many target Android devices as you can. The Android viewport tag worked on most devices I tested, but not all. The differences in Android pixel density and screen resolution necessitate more testing than is needed with Mobile Safari on the iPhone.
- Keep in mind you are building a prototype. It doesn’t need to work perfectly on all devices if you can just ask the test participant to zoom in during the session if needed. You should be explaining that they are interacting with a prototype as part of the test script so this should not be a problem.
For more on the iOS viewport, see Apple’s iOS Developer Library.
For more on targeting different screens size on Android, see the Android Developers Site.