Recently I had the pleasure and challenge of jump-starting the information design of an iPad portal application. Here’s an overview of my research on iPad’s resolution, new UI elements, interaction gestures and UX guidelines.
Resolution
iPad offers 1024 x 768 pixels of crisp screen. It can be viewed in portrait or landscape and has no default orientation. The screen can be easily divided into a 2-by-2 or 3-by-3 grid, as shown below.
New UI Elements
With a screen five times as big as the iPhone, the iPad can accommodate new UI elements introduced in Apple’s iOS3.2 UI Kit. These elements take advantage of the bigger screen and provide opportunities to flatten an application’s information hierarchy. For a complete list of new UI elements with more details, please see “New UI Elements and Behaviors” in the iPad Human Interface Guideline. Here are some highlights:
Split view: a list in table view next to a detail pane to form a “master-detail” layout
Popover: a popup pane that is only visible when called.
Scope bar: a scope bar (see top buttons below) lets users change the context of information shown in a pane.
Compared to the iPhone, the iPad offers users extra room to perform spatial gestures like scrolling and sliding. Here is a usability finding on iPad carousels: “Users perceived carousels as an easy way to navigate. Because scrolling is relatively easy on the iPad, people were more likely to use the carousels than we’ve seen with websites accessed on desktop computers.” (Usability of iPad Apps and Websites, Raluca Budiu and Jakob Nielsen, 2010, p. 65).
New UX guidelines
New technology fosters new interaction behaviors. Given the new form factor and UI elements of the iPad, a few user experience guidelines become noteworthy:
◦Aim to support all orientations: because there’s no default orientation
◦Enhance interactivity: with new UI elements and a bigger screen, enhanced interactivity is possible on the iPad
◦Flatten your information hierarchy: iPhone’s small screen requires users to tap through multiple screens to accomplish a task. The larger iPad screen allows the showing and hiding of multiple panes on the same screen. A flattened information hierarchy that saves users’ time and effort is hence possible.
◦Reduce full-screen transitions and minimize modality: because multiple panes can be shown on one screen and users are allowed to navigate in a nonlinear way, jarring full-screen transitions or modality are less necessary.
◦Rethink lists: there are opportunities on the iPad to display more graphical lists (e.g., icons) or embed lists in a split view or popover
◦Consider popovers: an effective and elegant way to hide information or options that doesn’t need to be always present, and save space
◦Migrate toolbar content to the top: (from the iPad UI guideline) “With the additional width of the iPad screen, you should be able to provide all of your toolbar functionality in a single toolbar at the top. This gives you more vertical space for your focused content.”
No comments:
Post a Comment