×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Master Detail

From Nokia Developer Wiki
Jump to: navigation, search
jappit (Talk | contribs)
(This article describes the Master Detail Mobile Design Pattern)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(3 intermediate revisions by 2 users not shown)
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.}}
This article describes the '''Master-Detail Design Pattern''', a commonly used technique to show data in a mobile application.
+
 
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090629
 +
|author= [[User:Jappit]]
 +
}}
  
 
==Description==
 
==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.
+
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==
 
==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:<br/>
 
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:<br/>
'''S60 Contacts application'''<br/>
+
S60 Contacts application<br/>
 
[[Image:Wrt_masterdetail_contacts.png]]<br/>
 
[[Image:Wrt_masterdetail_contacts.png]]<br/>
'''S60 Messaging application'''<br/>
+
S60 Messaging application<br/>
 
[[Image:Wrt_masterdetail_messages.png]]<br/>
 
[[Image:Wrt_masterdetail_messages.png]]<br/>
  
 
==Advantages==
 
==Advantages==
* Users can '''easily view, scroll and find items''' in the main view, and then view the details of the selected item
+
* 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
+
* Most users are familiar with the Master Detail approach, so already know how to behave when they encounter it in any new applications
  
 
==Disadvantages==
 
==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.
+
* 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==
 
==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.
+
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.
+
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==
 
==Use How==
The Master Detail Design Pattern is '''composed of 2 main views''':
+
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 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..).
+
* 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 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.
+
* 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.
+
* 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.
+
* 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==
 
==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'''.<br/>
+
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.<br/>
 
[[Image:Wrt_masterdetail_guidelines.png]]<br/>
 
[[Image:Wrt_masterdetail_guidelines.png]]<br/>
  
The '''Master View''' should offer functionalities useful to help users to find a specific item:
+
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]]
+
* 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]])
+
* ability to sort items based on different criteria ([[Mobile Design Pattern: Sorting]])
  
Useful features for the '''Detail View''' are:
+
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 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 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)
+
* the Detail View should have a BACK button to allow users to easily go back to the Master view (green overlay in picture above)

Latest revision as of 09: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 09:06.
80 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.

×