Wednesday, June 15, 2011

How to run Axure prototypes on iPad or Microsoft Surface




Update 12/7/2012: I realized that GoodReader experience was frustrating both for me and my clients. Therefore, I was looking for alternate ways to demo iPad apps.

Lately, Axure started cloud share at www.share.axure.com to enable easy sharing of prototype with clients. It opened a new way to interact with prototypes. I did some research for iPad browsers that offer hide feature for browser chrome. Fortunately, I found Atomic Web Browser, which offers full screen browsing.

The interaction experience is much better on Atomic Web Browser than GoodReader. The only caveat is the browser control bar, which floats on the screen. The controls are transparent gray - so, they don't bother a lot on white background. However, the controls stand out against black background, as indicated in the attached image.

Remember: Atomic browser requires internet connectivity.




Microsoft Surface users need not to worry about full screen browsers. IE10 is provides full screen view on Windows 8. Mozilla is also developing a full screen browser.
--------------------------------------------------------------



As a User Experience Architect, I create and present Axure prototypes, on a day-to-day basis, for various platforms. Axure generates HTML output which can be rendered with ease on any browser.

These days I am working on a a couple of iPad applications; which requires me to present Axure prototypes on iPad. Safari is an option to run the HTML on iPad but the browser's header and footer make the demo look more for the web than the iPad.

Here is what you can do to get the true iPad app experience. Get rid of the browser. 

How?

Create your prototype without iPad frame. Use canvas size of 1024x768 pixels. (You may have to tweak your canvas a little to fit properly on iPad, as, I believe, Axure doesn't offer pixel perfect rendering.

Next....

Download goodreader from the App Store. It costs only $4.99. Install the app on your iPad.

Once the app is installed - All you have to do is:
  • Connect the iPad to your computer that you sync with
  • Open up iTunes
  • Select the iPad from the devices on the left sidebar
  • On the right pane of the screen, click on "apps" and scroll down the page until you see the last section called “File Sharing”
  • Click on GoodReader
  • Click “Add…”
  • Browse to and select your zip file with the demo in it

Once added:
  • Launch the GoodReader app on your iPad
  • Click on your zip file on the left
  • Click on Manage Files on the right
  • Click on Unzip
This will create the directory structure for the app.

To launch the demo all you have to do is:
  • Launch the GoodReader app on your iPad
  • Select the proper directory for the demo
  • Click on index.html (and then you are in). Or, to get rid of Axure frame, click on home.html or whatever your first Axure page is.
Voila, you just created a true Axure prototype for iPad.


Note: To avoid GoodReader toolbar to appear while demo-ing, try pressing and holding the buttons/links in the prototype instead of tapping it. It works for me.

15 comments:

  1. I'm working on an iPad prototype as we speak. Can't wait to try this!

    ReplyDelete
  2. All the best for your prototype! You are gonna enjoy the goodreader demo on iPad for sure.

    ReplyDelete
  3. What resolution do you work at for your prototype?

    ReplyDelete
  4. The reason I ask is if I open a 768x1024 prototype in GoodReader, the app automatically zooms out so my prototype does not fit the screen as an app would.
    Thanks, and sorry, I don't know why my name appears like that.

    ReplyDelete
  5. Hi 7c81cb64-9dac-11e0-b445-000bcdcb5194,

    Yes, it's weird to see a name like this. Looks like a key.

    Anyway, Here is what my Axure resolutions are for landscape mode:

    X=983 Y=743

    These are Axure dimensions. You can play with it a bit more to make it pixel perfect. But, this is very close to perfection.

    Thanks,
    Praveen

    ReplyDelete
  6. Tried it, works! Thanks for the inspiration

    ReplyDelete
  7. Quote: "Note: To avoid GoodReader toolbar to appear while demo-ing, try pressing and holding the buttons/links in the prototype instead of tapping it."


    That last comment is one issue that I've found pretty annoying that makes presentations a bit too jumpy. Its fine for informal discussions, but for showing clients when you want it to be just perfect it can be annoying. One tap in Goodreader that isn't just perfectly timed causes the navigation to open and shut which is distracting. I found an alternative solution by deploying the CHM file and using in CHM+. The developer of CHM+ was even kind enough to make some setting changes for me to have this work very smoothly. I posted the details here:
    http://forum.axure.com/mobile-prototyping/3848-best-way-get-prototypes-ipad-execs.html#post14092


    Hope that helps.

    ReplyDelete
  8. "Note: To avoid GoodReader toolbar to appear while demo-ing, try pressing and holding the buttons/links in the prototype instead of tapping it. It works for me."

    Based on this, I'm assuming that while goodreader might be a solution for client demos, it doesn't do much to help with prototype testing with users. Is that accurate?

    Does anyone have advice on building Axure prototypes to test on an iPad or iPhone that somehow hide the browser and make it feel like a real app?

    ReplyDelete
    Replies
    1. I just updated my post. Please use Atomic Web browser. However, it does require internet connection.

      Delete
  9. Hi,

    you can also use AxShare for demos / user testing, which includes getting rid of the browser header and footer. Instructions how to do that are here:

    http://www.uxphil.com/?p=328

    You can take it one step further and deploy your prototype as a native app:

    http://www.uxphil.com/?p=331

    Hope this helps!

    Phil

    ReplyDelete
  10. BTW, the instructions are described with an iPhone, but the process for iPad is identical.

    ReplyDelete
  11. Hi everyone,

    we have currently finished beta version of iOS prototype viewer called ProtoSee (http://www.facebook.com/ProtoSee).

    The app is intended for off-line viewing and beautiful, seamless presentation of high-fidelity prototypes on iPhones (4, 4S, 5), iPads (all kinds) and even iPods Touch. Before we get the app to the AppStore, we would like to collect some feedback, thus we are looking for beta testers.

    If you have an iOS device running iOS 5+ and do some (high-fidelity) prototypes, please consider joining in ;) Contact me via facebook (ProtoSee page) or at lojza.filip@gmail.com for further info.

    ReplyDelete
  12. At Allori we've developed HTML Presenter for this:

    http://bit.ly/html-presenter

    It synchronizes zipped HTML from Dropbox or an SFTP server and displays your prototype fullscreen and works offline.

    ReplyDelete