From Forum Nokia Wiki

This article describes the Master-Detail Design Pattern, a commonly used technique to show data in a mobile application.

Contents 1 Description 2 Examples 3 Advantages 4 Disadvantages 5 Use When 6 Use How 7 Design Tips

Description

The Master Detail Design Pattern is a method to represent data by using two separate views: one to show the available items, and another to show the details of a single item.

Examples

The Master Detail approach is one of the most widely used in mobile applications, and it's so possible to find many examples of use, as:
S60 Contacts application

S60 Messaging application

Advantages

• Users can easily view, scroll and find items in the main view, and then view the details of the selected item
• Most users are familiar with the Master Detail approach, so already know how to behave when they encounter it in any new applications

Disadvantages

• The Master Detail approach requires users to switch from a view to another to view items' details. This kind of interactions can be not suited for all scenarios, and alternative approaches can be used as well.

Use When

This Design Pattern is useful in all those situations where a set of items must be represented, and each item contains detailed data that must be shown to the user.

When the item detail data is short (in the order of 1-2 lines of text), an alternative to the Master-Detail pattern is represented by the Fisheye List (described here: Fisheye List), that allows to view the item's detail without the need of a separate view.

Use How

The Master Detail Design Pattern is composed of 2 main views:

• 1 Master View that lists the available data items. Each item is listed with a short description. The Master View typically uses Scrolling (Mobile Design Pattern: Scrolling) when the available items overflow the view's available space.
• 1 Detail View, used to show the details of a single item. The Detail View can contain different types of content, depending on the details to be shown (e.g.: text, images, etc..).

The interaction pattern usually follows these steps:

• The user selects one of the available items by using the UP/DOWN keys of the navigation pad. Optionally, also the LEFT/RIGHT keys can be used for faster scrolling.
• By pressing the FIRE key (central key of the navigation pad), the user is typically brought to the Detail View for the currently selected item.
• In order to go back to the Master View, a BACK command is typically used (e.g.: by using a softkey) within the Detail View.

Design Tips

This sections proposes some common guidelines useful when implementing the Master Detail design pattern. The following picture shows how these guidelines are implemented in the S60 Contacts application.

The Master View should offer functionalities useful to help users to find a specific item:

• fast text-based search (purple overlay in picture above), allowing users to search for items matching a specific text, as described here: Mobile Design Pattern: Searching
• ability to sort items based on different criteria (Mobile Design Pattern: Sorting)

Useful features for the Detail View are:

• the ability to use the RIGHT/LEFT key of the navigation pad to let users view the details of the next/previous available item (yellow overlay in picture above)
• the title of the Detail View should use the same text of the item description used for the Detail View (red overlay in picture above)
• the Detail View should have a BACK button to allow users to easily go back to the Master view (green overlay in picture above)