×
Namespaces

Variants
Actions
(Difference between revisions)

Zoom List

From Nokia Developer Wiki
Jump to: navigation, search
Nokia Ron (Talk | contribs)
m
hamishwillee (Talk | contribs)
m (Fix external links in internal format)
Line 1: Line 1:
[[Category:Mobile Design]][[Category:Usability]]
+
'''Original article published at [http://patterns.littlespringsdesign.com/index.php/Zoom_List  Little Spring Design]  under [http://creativecommons.org/licenses/by/3.0/ Attibuttion 3.0]'''
 
+
'''Original article published at [http://patterns.littlespringsdesign.com/index.php/Zoom_List| Little Spring Design]  under [http://creativecommons.org/licenses/by/3.0/| Attibuttion 3.0]'''
+
  
 
<br>
 
<br>
Line 14: Line 12:
  
 
===Design Guidelines===
 
===Design Guidelines===
<UL>   
+
 
<LI>Never use more than 2 columns
+
* Never use more than 2 columns
    <LI>The two columns should contain data that the user needs to see simultaneously. <LI>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 two columns should contain data that the user needs to see simultaneously.  
    <LI>The columns for the zoomed-in item does not have to be the same as the list.
+
** 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.
<LI>    The zoomed-in item should have a maximum of 3 (maybe 4) lines.
+
**The columns for the zoomed-in item does not have to be the same as the list.
<LI>    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.  
+
* The zoomed-in item should have a maximum of 3 (maybe 4) lines.
</UL>
+
* 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.  
 +
 
 
===Rationale===
 
===Rationale===
<UL>
+
 
<LI>This pattern can be seen as a way to show 6 columns of data in a 2 column list.  
+
* This pattern can be seen as a way to show 6 columns of data in a 2 column list.  
<LI>This is relevant in situations where only 2 columns is used for comparison across rows.  
+
* This is relevant in situations where only 2 columns is used for comparison across rows.  
<LI>This pattern saves the user from opening a separate "details" view.
+
* This pattern saves the user from opening a separate "details" view.
</UL>
+
 
 
<BR>
 
<BR>
 
----
 
----
--Submitted by - Aadhar14b
+
--Submitted by - Aadhar14b[[Category:Mobile Design]][[Category:Usability]]

Revision as of 02:00, 25 May 2011

Original article published at Little Spring Design under Attibuttion 3.0


Contents

Introduction

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 1.png    Zoom 2.png
First item with focus & Details        Second item with focus & Details

When Used

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

Design Guidelines

  • 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.

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.



--Submitted by - Aadhar14b

77 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.

×