adapting web interfaces to the iPad

I decided to write this on the heels on the impending iPad launch, but is is just as valid for the iPhone as well, maybe just a bit less obvious.

The core difference from a user interface designer’s point of view between interaction with content on a desktop and a iPhone/iPad can be summed in a few words : cursor input versus touch input, much of what i will go on to detail stems from this, some of it might seem obvious but it is the obvious that is often forgotten.

1 – Hover

There is no hovering, your user interface can not depend on hovering to display tooltips, to visually highlight/select menu items, to show and hide dhtml dropdown menu’s, to underline links.

– hover tooltips are just gone, there is nothing you can do to replicate them.
– hover selecting/highlighting menu items is also something gone entirely.
– hiding and showing dropdown menu’s when hovering out/into has to be changed with a hide/show toggle on click events.
– differentiating textual links from normal text by wether they change when hovering over is gone, you have to make sure you do not rely on this differentiate textual links from static text.

Your browser does not support video, upgrade to a HTML5 compatible browser.

2 – Cursor

Well there isn’t any, cursor that is, traditionally the cursor changes shape depending on the type of the interface element under it, this gives important feedback to the user.

– the cursor does not change to the hand over clickable interface elements so you have to make sure the element reflects the fact that it is a clickable element

that it reflects what exactly is it’s clickable area, and that it’s clickable zone does not have blind spots

– the cursor does not change to the vertical bar that is the visual hint of a element that accepts text input below the cursor, so you have to make sure text input fields are distinctive.

There are a lot of other things to keep in mind besides these two major aspects, scrolling for example is different, page scrolling is performed by touching anywhere in the page, scrolling of distinct elements within the page has to be handled differently, there is also no pixel precision like on desktops and the element directly under the finger is obscured from view.