Zoom List

From MobileDesign

There is a discussion of this article on the Talk:Zoom_List page.

The user requires more detail to make a choice than with a simple list of just titles, but the screen is too narrow to display additional information.

Zoom list

First item has focus.

Second item has focus.

Third item has focus.

[edit] When Used

Additional and actionable information can be shown in 2 or 3 lines.

[edit] Design

• Never use more than 2 columns
• The two columns should contain data that the user needs to see simultaneously. In the telephone directory example, shown, the list displays the name and the place. These two pieces of information is what the user needs to see in context in order to find the right item.
• The columns for the zoomed-in item does not have to be the same as the list.
• The zoomed-in item should have a maximum of 3 (maybe 4) lines.
• The height of the zoomed-in item should be an exact multiple of the height of an list item, or the list will jump when it is scrolled.

[edit] Rationale

This pattern can be seen as a way to show 6 columns of data in a 2 column list. This is relevant in situations where only 2 columns is used for comparison across rows. This pattern saves the user from opening a separate "details" view.

[edit] Examples

• This pattern widely used in Sony Ericsson feature phones.

[edit] Resources

• TBC