Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: Master Detail

From Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Add Abstract. Tidy wiki text)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
Line 1: Line 1:
[[Category:Mobile Design]][[Category:Mobile Design Patterns]]
+
[[Category:Mobile Design Patterns]]
 
{{Abstract|This article describes the Master-Detail Design Pattern, a commonly used technique to show data in a mobile application.}}
 
{{Abstract|This article describes the Master-Detail Design Pattern, a commonly used technique to show data in a mobile application.}}
  

Latest revision as of 06:06, 16 April 2012

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

Article Metadata
Article
Created: jappit (29 Jun 2009)
Last edited: hamishwillee (16 Apr 2012)

Contents

[edit] 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.

[edit] 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
Wrt masterdetail contacts.png
S60 Messaging application
Wrt masterdetail messages.png

[edit] 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

[edit] 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.

[edit] 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.

[edit] 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.

[edit] 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.
Wrt masterdetail guidelines.png

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

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)
This page was last modified on 16 April 2012, at 06:06.
86 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×