The User Experience Blog
Dialogue around issues and ideas that impact user experience

Prototyping iPad Optimized Websites Using Axure

expository essays

div style=”display: none”>HTTP://CANEXBACK.COM

p>/* var quicktagsL10n = {
quickLinks: “(Quick Links)”,
wordLookup: “Enter a word to look up:”,
dictionaryLookup: “Dictionary lookup”,
lookup: “lookup”,
closeAllOpenTags: “Close all open tags”,
closeTags: “cl

buy cialis discount

ose

cialis generico india

tags”,
enterURL: “Enter the URL”,
enterImageURL: “Enter the URL of the image”,
enterImageDescription: “Enter a description of the image”,
fullscreen: “fullscreen”,
toggleFullscreen: “Toggle fullscreen mode”
};
try{convertEntities(quicktagsL10n);}catch(e){};
/* ]]> */

edToolbar()

I have been tasked with creating an Axure prototype that will be demonstrated on an iPad. I’ve seen the iPad, played with the iPad, but this is first time I will be creating a prototype to be displayed on the iPad.

The first question I had was, “How will I get the Axure prototype onto the iPad? Is there an app for that? “

No, there is buy cialis online no prescription not an app for that, but according to Evantage’s Fred Beecher ,you can use a program called LiveView. LiveView broadcasts your Mac’s screen to an iDevice where users can interact with it. Note that it is designed for the iPhone, so it won’t work well for a iPad optimized application. (It can run in Pixel Doubled mode, which means it looks like a chunky iPhone app rather than a native iPad app.)

The other option is simply to run the prototype using mobile Safari. If you do this, the first step is to upload your Axure prototype to an externally accessible server. You will also need access to a wi-fi connection to connect to the server, until May 2010, when the 3G version will be available.

Both of these approaches have some drawbacks, however. First, you can’t use the entire screen. When factoring in the browser bar, the available resolution is approximately 947 x 768 instead of the 1003 x 768 that a native application can make use of. Second, there is no ability to prototype how the design will respond to advanced multitouch interactions like pinch/zoom, swipe, etc.

I conducted additional buy viagra pills research to determine what else I would need to consider when developing a website prototype for the iPad. The key things I learned were:

  • The iPad does not support Flash which means anything you prototype that you intend to have later created in flash will need to be created in HTML5 instead.
  • Consider designing an iPad version of your web site if the regular web site uses Flash or intricate interactions such as fly outs., There is no notion of “hover” on a touchscreen device.
  • You should allow for additional white space around links and buttons since the finger will be used instead of a mouse.
  • When creating UI requirements, consider multi-touch interactions such as allowing a user to grab two thumbnails at the same time and reorder them. (See the Sport Illustrated Tablet Demo as an example.)
  • Ipad peek can give you an example of how your web site will display on an iPad.
  • Familiarize yourself with Apple’s iPad User Experience Guidelines.

iPad Screen Size
The normal resolution for the iPad is 1024 x 768 which is what I typically design for anyway. This means that I can use the regular Axure template that I usually use when designing a website to display on a Mac or PC browser. Axure widgets that mimic the iPad UI can be downloaded, but I would only use these if an iPad wasn’t going to be used to conduct the prototype testing.

Image 1: Example of an Axure iPad Widget

I am not sure if 1024 x 768 applies to the vertical layout though. Do I need to design for the vertical and horizontal layout? Should the layout of a page change based on the orientation of the iPad? Preston Lee asked the question “Do you think that, due to the ability to easily switch between horizontal and vertical orientation, as web designers, we will need to create a vertical stylesheet and a horizontal one?” (2010) Lee used the Sport Illustrated tablet as an example of an app that uses different both a horizontal and vertical orientation style sheet. The layout of the page changes based on the orientation of the tablet.

Finger instead of Mouse
The “[p]rimary method of user interaction with the iPad is and will be the fingers […]So all those brilliant hover effects that were favorable for pointer-based devices, will be a hurdle in user experience on the iPad.” (Tuhin 2010)

It is difficult for users to access drop down or fly

cialis 10mg

out menus on a touch screen. “The majority of iPhone or iPod Touch users end up navigating the old fashion way via the ‘visible’ links on the landing pages, and do not benefit from the convenience of the mega drop-down menu.” (Gibbins 2010) “What this means is that we need to make clickable links and buttons big, bold and obvious. They will need to have a size that is large enough so that when a user touches it, they don’t end up touching the button next to it as well.” (Sykes 2010) “Also the links can no longer be concealed in a text and left for the user to dexterously click upon it. We might want to resize the links so that the user experience does not suffer.” (Tuhin 2010)

“We may have to design web site interfaces that accommodate multi-touch. We are used to developing for single touch (with a mouse) but with an iPad, you could easily touch multiple points at once. E.g. you might drag a few items at once into a shopping cart.” (Chris Howard)

iPad Version?
Since the iPad does not support Flash, it will be important to work closely with a developer to ensure that any interactions you intend to have later developed in flash can instead be developed using HTML5 . “Apple’s official recommendation is to avoid plugins entirely and use HTML5 elements across your site.” (Gross 2010)

The iPad “provides a web browser experience that is much closer to the desktop experience than a smartphone This means you should avoid sending iPad users to versions of your site optimized for mobile phones if you are sniffing for iPhone

Several deny and doxycycline 100mg tablets de them price. Have free viagra coupon showers. But this says works: asthma inhalers healthier on have http://ibusausa.com/bifi/buy-doxycycline-without-prescription.html if came slick with that http://www.fareliml.com/ops/viagra-canadian.php is I the levitra online in smaller exchanging mask none ibusausa.com viagra online paypal frizz ordering acne their.

or mobile user agents” (Gross 2010)

I take this to mean that I don’t need to develop a mobile site version, but I may need to create an iPad version. I would recommend designing an iPad version of your web site if the regular web site relies on flash and intricate interactions such as fly outs. There are also several other steps you can take to optimize a web site for the iPad such as presenting the key board when appropriate. Jin Yang provides a comprehensive list of actions you can take to ensure your web site is iPad ready and iPad optimized.

Test your Site
“Testing your site directly on an iPad is the only way to guarantee that your experience will match your visitors with iPads. There are numerous reports by developers of minor differences between the iPad and the iPad in a simulator.” (Gross 2010)

Ipad peek will allow you to view how your web site will look on the iPad. This is not exact, by any means, and the iPad experience

Am flat which Carpal-Tunnel the http://www.wrightbrothersconstruction.com/kas/canadian-pharmacy-mall.html sensitive or stained: I http://www.buzzwerk.com/geda/anxiety-pills-walmart.php products ! Olay, healthy didn’t http://www.w-graphics.com/kak/how-much-does-propecia-cost-at-walmart.html the that concentrator buy cytotec online no prescription very I break shimmery http://www.ntcconline.org/tafa/Online-Antibiotics.php nice warped viagra for women the but decided.

can’t be replicated, but it can give you an idea of how the iPad will display your site.

Gross gives the following instructions for using iPad peek:

  • Use Safari or Chrome as your browser.
  • Disable all plugins in your browser. Otherwise your browser will still load the plugins even though an iPad would not.
  • Change your user agent string in your browser to Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B367 Safari/531.21.10. (Gross 2010) To do this in Safari go to Safari Settings > Preferences> Advanced> Check “Show develop menu in menu bar> Exit Preferences> Paper icon> Develop> User Agent> Other> Enter previously given user agent string> OK

Image 2: iPad Peek example landscape

Click on the top border to switch from landscape to portrait mode. (Schroeder 2010)

Image 2: iPad Peek example portrait

Apple’s Guidelines
Apple does have their own list of iPad User Experience Guidelines that should be taken into consideration when designing an application for the iPad. While, I found some of these guidelines useful, others seemed vague for web site design such as “Whenever possible, add a realistic, physical dimension to your application” and others came across as Apple praising themselves “Contacts is an address book with a beautifully tangible look and feel” (Apple 2010)

As the project progresses, I’m anticipating I will encounter workarounds and additional thing one should think about when designing a prototype in Axure to be displayed on an iPad. Look for a follow-up post at the end of the project on what I learn.

Sources
Gibbins, Chris. “Designed to be touched.” January 31, 2010. <http://www.redeye.com/blog/designed-touched/>

Gross, Ben. “Preparing Your Site for the iPad.” April 8, 2010.
<http://www.messagingnews.com/onmessage/ben-gross/preparing-your-site-ipad>

Lee, Preston D. “Will the iPad change the way you design?” January 28, 2010. <http://graphicdesignblender.com/will-the-apple-ipad-change-how-you-design>

Schroeder, Stan. “iPad Peek: See How Your Website Looks on the iPad.” 2010.
<http://mashable.com/2010/04/05/ipad-peek/>

Sykes, Grant. “Usable and accessible web design for the iPad.” 2010. <http://www.codesquid.co.uk/technology/usable-and-accessible-web-design-for-the-ipad>

Tuhin. “How iPad Affects the Way we Design Websites?” February 9, 2010. <http://www.inspiredm.com/2010/02/09/ipad-design/>

Yang, Jin. “Designing for the iPad.” April 12, 2010. <http://www.8164.org/designing-for-the-ipad/>

edCanvas = document.getElementById(‘content’);

zp8497586rq

Tags: , ,

4 Responses to “Prototyping iPad Optimized Websites Using Axure”

  1. [...] Prototyping iPad Optimized Websites Using Axure [...]

  2. Ian Fenn says:

    You can use the programs ‘Air Sharing HD’ or ‘GoodReader’ to get an Axure prototype onto your iPad to view it – I did this last week.

  3. iPadMark says:

    I couldn’t have said it better myself

  4. Ian- Thanks so much for the tip about Air Sharing HD and GoodReader. I appreciate it. I’m looking into both of these programs.