Designing for the iPad

Question

I'd like to make my site accessible to people that have the iPad or other iOS devices.

What considerations do I need to take into account when designing a user interface that is compatible with the iPad or iOS in general?

Answer 1

Check out Jakon Nielsen's thoughts on the issue. The video linked at the bottom is only 3 minutes long and is interesting, if not directly useful.

General thoughts (no facts to back this up other than personal experience):

• If you need to fall back to a design for another platform, fall back to PC designs, NOT iPod designs. If you can get your hands on an iPad (soon), try browsing the default Amazon.com on iPad. It falls back to the default iPod Touch/iPhone UI, which has horizontal-fill buttons with text at the far right, and is basically unusable.
• It's easier to see small things than it is to click them. In my own experience, most text that is readable is not clickable, and I often need to zoom in on links (ie on Wikipedia).
• Test your designs in both portrait and landscape!
• Moving your hands around takes slightly more physical energy (and is less precise) than moving your mouse around.
• Using multiple tabs is more difficult than with PC (though probably easier than with iPhone). Links that take the user away from the site will probably do just that; don't expect them back any time soon.
• Accidental taps are more common than accidental clicks.
• Typing (even for search) is more difficult than with a keyboard.
• Embedded YouTube videos work.
• Remember the user base that buys iPads and design for them.
• Update: There are other web browsers. 95% of users probably use Mobile Safari, but it might be worth testing in a couple others. For example, I just discovered Stack Exchange sites don't work (can't post questions) in Atomic Web Browser.

Good luck!

Answer 2

This applies more to your general UI question:

Think "touch, don't click." How would you (or your potential clients) use the app with their hands? There is a fundamental difference between pointing at something with a mouse and pointing at something with your hand. Perhaps make the most important controls on the side so people can reach them easily? Experiment with different wire frames and ask people to assess the ease of use. User testing early in the process can greatly help refining your design.

Answer 3

The iPad was designed to browse the web. The big screen makes it possible to view the entire webpage width. So the design for the webpage should be fine on an iPad.

For the iPhone, iPod Touch, you could consider making a different design, creating an UI similar to native iPhone apps. There are tools you can use, to make this possible, but it will be a lot of work. Check out Sencha Touch, which can be used for iPads as well.

If you don't want to use something like Sencha Touch, another thing that you have to consider is that user interaction is quite different with these devices. They are touch based and not mouse based. An example is hover effects wont work with a touch based device. Also mouse clicks is different from the tap inaction that the browser on iOS capture. This means that you can improve user interaction, by customizing the JavaScript you use for iOS to make it more native and intuitive.

Apple has also made a Human Interface Guide for their native apps on iOS. It would be a good idea to look through this, as this is what the users will expect from native apps. Having webpages that conform to this, will help them understand your site.

Answer 4

I wrote a blog on things to watch for when designing sites that are optimized/ready for the iPad. You may find it useful.

Answer 5

Don't forget about the screen size and different possible layouts: iPad CSS Layout with landscape / portrait orientation modes

Answer 6

Two more issue I wanted to add, especially regarding adapting a an existing site or application rather than designing a new one - these might seem trivial, but still:

• Make sure your site or application don't reply on mouse over actions (like tooltips)
• Remember there's no right click (less common on the web, but sometimes found in web apps)

Answer 7

Elements need to be bigger than on a desktop app, because the finger is less precise than the mouse.

Having used some graphics apps lately I have seen that it can be very hard to place objects accurately with your fingers because they obscure the object you are moving. One way to fix this which it seems like apple did is to begin move only after you have moved the finger some, so it is no longer on top of the object you move.

Multiple select is very troublesome at the moment. I don't like the apple approach of tap one object with one finger and tap multiple object with the other to create a multiple selection. It falls apart once you need more than 4-5 objects. Drag select might work better. E.g. tab a selection tool first and then drag select multiple objects.