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 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. 


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.


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.

Monday, June 13, 2011

Are you afraid of Twitter?

This post is, certainly, not for tweet-o-holics, who wakeup and sleep with smart-phones on their sides. The post, also, respects an average Joe who manages to Tweet at least twice a week - either to report on their pathetically depressing meals or extremely ecstatic moods.

Believe it or not, even today, we have some social-media phobics - for obviously good and bad reasons. Be careful on social-media but paranoid. This post is one more attempt to motivate them to engage with twitter-verse.

As I am writing this post, I have 3748 Tweets and 286 Followers on Twitter.

My first tweet was tweeted in 2008. Then, like most of you, I gave up after my 10th tweet. "This ain't for me," was my response to myself. However, as Twitter grew more and more popular, I felt tremendous pressure from my User Experience (UX) community to become part of it - again.

Believe it or not, UXers are made to work on the bleeding edge of technology. They craft new experiences that leverage and explore the true potential of technology. I started again on Twitter in mid 2009 and never stopped after that.

Here is how I am benefitting from Twitter:
  1. Network with my UX community in and outside Keane.
  2. Learn about new articles, news and publications on UX and other areas without Googling about them.
  3. Hear people's opinions on various topics.
  4. Guage trends in technology, social media, and other areas.
  5. Sell my thoughts, ideas, and opinions on UX and other topics.
  6. Participate in discussions, debates, and sometimes just fun stuff.
  7. Hear about new job opportunities from my friends and followers.
  8. Believe it or not, I have got job offers through DM feature in Twitter.
Overall, it's a great tool with lot of potential. You will benefit from it only when you use it.

Let us discuss. Why do/do not you use Twitter?

And, of course, if you are/or going to be on Twitter, do not forget to follow me. My username is @praveenkvma

Tuesday, June 7, 2011

Paper Blinds

Scenario: New home. Forty one see-through glass windows. No blinds. The blinds installation guy takes three weeks.

Problem: How to protect the privacy of occupants?

Tools: A pair of scissors, duct tape, staplers, some architectural drawings, and a designer mind.

  1. Attack one window at a time.
  2. Measure the paper size, just once - of course, the size of paper will stay the same.
  3. Measure the window size.
  4. Use duct tape to stick the paper to create bigger surface area to cover the entire window.
  5. Use scissors to cut off extra paper.
  6. Use extra paper to create top and botton borders for extra stability and strength. This will help the blinds to stay straight.
  7. Staple the borders and tape them to the paper.
  8. Hang the freshly made paper blind using a step stool and duct tape.
  9. Voila, you just created your first paper blind.
  10. Keep repeating steps 1 through 10 until you have covered all your windows.
  11. Sip a cup of green tea, appreciate your creation, and wait for another three weeks to get "real" blinds.
Here are some of the pics: