Resize Graphics and Photos for iPad and iPhone
Best Image Formats for iPhone and iPad
Optimize Web Designs for the iPhone

How Users Navigate in a Touch Screen World

The way that your website visitors interact with your pages and navigate your links is dramatically different on an iPhone or iPad than a desktop or laptop computer. Site visitors using an iPhone or iPad are using their fingers — not a mouse, keyboard, or stylus. That means links should be easy to identify and big enough that users don’t accidentally click on too many at a time with a fingertip.

Also keep in mind that rollover effects don’t work the same way on an iPhone or iPad as they do on a desktop browser. Rollover effects, and similar hover effects, which cause something to happen as a user rolls a cursor over an image or other element on a web page, are automatically converted to "on click" events in an iPhone or iPad.

In this figure, you see a common design technique on the web – a row of thumbnail images that are linked to larger versions. On your computer, you’d roll your cursor over each image to view the larger version; on an iPad those rollover events would be converted to links, triggered by the touch of a finger.

image0.jpg

Design your links to work on the touch screen, and make sure to test whether rollover effects and drop-down menus can be activated with the touch of a finger, as well as a mouse.

To make navigation easy for iPhone and iPad visitors, you need to

  • Make links easy to click: Separate links with enough space between them to make it easier to tap them using only a fingertip. (As a guideline, Apple recommends that links be set to occupy at least 44 pixels by 44 pixels of space.)

    This recommendation is the same for both the iPhone and iPad because it's based on the size of a finger, not on the resolution of the device or the size of the screen. (Even though some fingers are fatter than others, 44 pixels is a good guideline.)

  • Make links easy to see: Style links so that they’re easy to distinguish from other text and elements on a page. Remember that your visitors may be distracted or in a hurry and may be in low light or, worse, bright light when using either of these highly portable devices. Distinguish links by using text and images that contrast sharply with the background.

  • Organize links: Group links to related elements together, and if you have a sub-navigation menu within a site, organize those links into their own, easily recognized sections.

  • On the smaller iPhone screen, place navigation menus at the bottom of the screen, not at the top: Navigational links can occupy a lot of room on a mobile screen.

    Rather than clutter the top of your design with links, include a single Menu button at the top of each page, as shown in this design, and create a link that jumps down to the bottom of the page, where you can include more links without burying the content.

    image1.jpg

The design shown in this figure was created for Microsoft by the talented designer Sia Ea, who works at Ansible Mobile.

blog comments powered by Disqus
Screen Resolution and Color Depth on Hand-Held Devices
Web Design for the Desktop and Other Devices
Send the Right CSS to Target the iPhone
Insert Images into Page Designs for iPhone
Create a Semantic Structure for Web Pages
Advertisement

Inside Dummies.com