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)

Zoom List

From Wiki
Jump to: navigation, search
marcelobarrosalmeida (Talk | contribs)
m (Fixing broken link to Little Springs.In this case, the articles disappears, not available anywere.)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''Original article published at [http://patterns.littlespringsdesign.com/ Little Spring]  under [http://creativecommons.org/licenses/by/3.0/ Attibuttion 3.0] but not available anymore.'''
+
{{ArticleMetaData <!-- v1.2 -->
 +
|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 -->
 +
|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= 20091031
 +
|author= [[User:Aadhar14b]]
 +
}}
 +
[[Category:Usability]]
 +
'''Original article published at [http://www.littlespringsdesign.com/ Little Spring]  under [http://creativecommons.org/licenses/by/3.0/ Attibuttion 3.0] but not available anymore.'''
  
 
<br>
 
<br>
Line 5: Line 28:
 
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.
 
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.
 
<BR>
 
<BR>
[[Image:Zoom_1.png]] &nbsp;&nbsp; [[Image:Zoom_2.png]]<BR>
+
[[File:Zoom 1.png]] &nbsp;&nbsp; [[File:Zoom 2.png]]<BR>
 
First item with focus & Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Second item with focus & Details <BR>
 
First item with focus & Details &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Second item with focus & Details <BR>
  
Line 28: Line 51:
 
<BR>
 
<BR>
 
----
 
----
--Submitted by - Aadhar14b[[Category:Mobile Design]][[Category:Usability]]
+
--Submitted by - Aadhar14b

Latest revision as of 03:43, 9 May 2012

Article Metadata
Article
Created: User:Aadhar14b (31 Oct 2009)
Last edited: hamishwillee (09 May 2012)

Original article published at Little Spring under Attibuttion 3.0 but not available anymore.


Contents

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

[edit] When Used

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

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

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



--Submitted by - Aadhar14b

This page was last modified on 9 May 2012, at 03:43.
102 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.

×