User Experience Principles for the iPhone, iPad, and Web

I’m working on iPhone and iPad applications, and have designed a number of websites and web products. In my last post, I provided some guidelines for making decisions about the features to include for each media. It’s also important to keep in mind the different strengths and weaknesses of the different hardware and design the right UI for each. Following are some high-level principles to guide the interface design.

iPhone: Thumbs Only & Task Focused

Duh. The phone is a hand-held device. It’s small, with very little real estate. People use their phones in all sorts of conditions: bright light to dim rooms at night; outdoors and indoors; in quiet places and loud ones; while standing, walking, and (unfortunately) driving.

Focus on:

Thumbs only use–people should be able to complete most tasks with one thumb, and the remainder with two thumbs.
Minimal information per screen. To keep it readable, provide only the information necessary for each task, and no more. Use a large font and clear layout. Enable features to drill down or scroll to additional, supplementary information.
Quick completion. Make sure tasks can be completed quickly, with as few physical actions and screen changes as possible.
Remember, the iPhone is one screen at a time. All tasks should be designed for a single window, replacing the contents of the current window rather than opening a new one.
Handle interruptions, drops, etc. elegantly. Count on them and ensure no data loss and an easy return to the task, after the interruption.

iPad: Viewing and Touching

The iPad is for touch: tapping, pulling, dragging, etc. It’s not for typing. It’s great for viewing content. So, design for the viewing and touching experience. Don’t design for typing.

Focus on:

As much as feasible, allow users to complete tasks without using the keyboard. For example, if users need to specify a date or time, don’t make them type numbers, given them a clickable calendar and a spin box.
Take advantage of the screen size and the visual nature of the iPad to convey information graphically when possible and appropriate.
Allow manipulation of information in and through graphics.
Like the iPhone, the iPad is one screen at a time (for now, at least). All tasks should be designed for a single screen, replacing the contents of the current window when necessary rather than opening a new one.
Optimize for linear task sequences, because of the single window and touch nature of the environment. Task sequences can be longer and more leisurely than on the phone, though.
Continue to assume interruptions, and handle them well.
Provide information users need to complete their tasks and take advantage of the ability to drill-down, surf, and move back and forth between screens or views.

Web (Computer): Typing and Clicking

The Web is the default experience, and there is lots of information about how to design for the Web. Key to remember is that users in this context want access to all the features and will most likely be using a mouse and keyboard.

Focus on:

Optimizing for keyboard use, and mouse clicking, with reasonable periods of keyboard only or mouse-only use.
Multiple windows, as users can and will have more than one window open, can easily move between them to complete tasks, and are comfortable doing so.
Using the greater real estate to provide more information, and make it easy to take many different actions on the information on each screen.
Feel free to use text more than you might on the iPhone or the iPad. In fact, where you’re providing the same functionality as the iPad/iPhone, and those apps let the user manipulate graphics, you may well choose to change the presentation to text on the Web.

There’s a lot more to designing applications on these different platforms, but those are some of the high-level differences guiding me. What about you? What principles have you discovered?

Those are some the of the principles I’ve discovered for deciding what range of features to include.

Don’t forget to check out my other posts in this series:

Picking features: Feature design principles for the iPhone, iPad, and Web
Revenue strategies: Business models principles for the iPhone, iPad, and Web