Mobile Prototyping with Axure 7 — Save 50%
Quickly deploy innovative user experience designs to mobile devices for responsive prototyping using the exciting new features of Axure 7 with this book and ebook
In this article by Will Hacker, the author of the Mobile Prototyping with Axure 7, we will learn about getting our work on the mobile devices. The main reason for creating a prototype is to exercise a design idea to see if it matches the expectations of stakeholders and can be easily used by the people for whom we are designing. If it doesn't, and we fail, that's OK. That's why we make prototypes. Failing fast and learning from that are important parts of iterative design.
In this article we'll look at:
- Publishing prototypes to AxShare
- Creating home screen icons
- Creating app splash pages
(For more resources related to this topic, see here.)
Axure 7 makes it easy to get our work on real devices so we can test out ideas on a device in the lab or field, and so we can let stakeholders experience the design on the intended device with their own hands.
To let users access our prototype on their own devices or the one we control for demonstration or usability testing, we are going to need to find a way to host it in an available web server. Fortunately, because our prototype is a collection of web pages and related files, we can use any web server that can be accessed by the device in question.
One of the easiest ways to get our prototype on a device and in the hands of users is to use the free AxShare service as a hosting environment. To publish to AxShare, you first need to set up an AxShare account. To do this, go to http://share.axure.com and you'll be able to create a free account that allows for the hosting of 10 prototypes. If you need to host more prototypes or want a custom domain, there is also an AxShare subscription product. Once the account is created, publishing a prototype to AxShare just requires a click on the AxShare button in the top toolbar pane of the prototype editor.
When we publish to AxShare, we see the dialog box as shown in the following screenshot. We use it to sign in to our AxShare account and can save the sign in credentials. In this dialog box, we can choose to create and upload a new prototype or update an existing one, and decide if we want to use password protection to restrict access to our work. When a new prototype is uploaded to AxShare, it will automatically create a prototype ID that allows people to access it using a mobile web browser.
Remember that Axure ultimately creates HTML files, even when we are simulating fullscreen native apps. We'll see the dialog box shown in the following screenshot when publishing, which confirms we are uploading our files and provides us with the URL we can use to get the prototype on a mobile browser. The random characters at the end of the URL are the prototype ID that AxShare created.
One thing to note is that the URL provided in the dialog box links to the main prototype page, which includes the left panel used to navigate pages or do variable debugging. When sending a prototype to a mobile device, we are going to want to get the exact URL of our home screen and not the main prototype file. This means the URL for a prototype at http://share.axure.com/C1374Q/ will need to be updated to include a specific screen URL so it ends up being more like http://share.axure.com/C1374Q/publishing.html. We can get this URL by closing the left navigation panel after selecting our start screen, and then copying the URL from the desktop browser address bar. And with this URL the person accessing it on a phone is getting our intended start page.
One thing to be aware of when hosting prototypes on AxShare or any cloud-based solution is that there may be network latency just as there is with real mobile websites due to the speed of the network being used and general network traffic. If we need the prototype to behave more real like a native app in which much of the user interface and some data is already on the device, we should consider using HTML 5 device caching.
Home screen icons and splash pages
If we want our app to look like it is running in fullscreen mode like a native app, we can add a home screen icon, an iOS splash screen, and hide the browser's navigation. To do this, add the home screen and splash page PNG images at the sizes specified in the Mobile/Device panel of the Generate Prototype dialog box. We also need to select the checkboxes for the Hide address bar and Hide browser nav (when launched from iOS home screen) options. This panel is also used to generate the HTML viewport meta tag and instruct the mobile browser to hide the address bar and browser navigation in iOS. We can also set the iOS status bar to use the default appearance, a black background, or a black translucent background. For each prototype, we'll want to experiment with these settings to see which works best for our project.
We can add the prototype to the home screen using native browser and OS functionality (this differs between iOS and Android, and even between different versions of Android). On an iPhone 5 which is running on iOS 7, our PNG image appears as an iPhone home screen as shown in the following screenshot:
The splash screen will load as a fullscreen image prior to our main prototype page loading, so users see a fullscreen image as seen in the following screenshot, when they first tap the home screen icon to open our prototype. This is one way to make our prototype feel more like a native app.
In this article we saw how prototypes can be tested or demonstrated on mobile devices using tools, such as AxShare. We also saw how to create home screen icons and splash pages.
Resources for Article:
- Creating and configuring a basic mobile application [Article]
- Common design patterns and how to prototype them [Article]
- Creating mobile friendly themes [Article]
|Quickly deploy innovative user experience designs to mobile devices for responsive prototyping using the exciting new features of Axure 7 with this book and ebook|
eBook Price: $17.99
Book Price: $29.99
About the Author :
Will Hacker is a Lead Interaction Designer at GE Capital, where he works on multidevice designs for commercial lending software. He's used Axure for several years as part of his iterative design and prototyping process, and spent two and a half years working exclusively on mobile design, prototyping, and usability testing for Cars.com. He has also written about user experience and mobile design for Smashing Magazine and UX Booth, and is a frequent speaker at UX design events in Chicago. He holds a Master's degree in Human-computer Interaction from DePaul University. He tweets at @willhacker and blogs at willhacker.net.