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.

Revision as of 03:26, 9 May 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Mobile Design Pattern: Multi-selection List

From Wiki
Jump to: navigation, search
Article Metadata
Article
Created: User:Yiibu (06 May 2009)
Last edited: hamishwillee (09 May 2012)


This design pattern is part of the Mobile Design Patterns series.

Contents

Description

A list whose purpose is to clearly emphasize (and enable) selection of multiple items in any order.


35-multi-select.jpg

Advantages

  • Can be extremely useful in high productivity scenarios such as deletion or management of email.

Disadvantages

  • Will require scrolling if the list is long.
  • Can require many clicks on indirect manipulation devices as activation of each control will require two clicks (one to focus, and one to activate).

Use when

  • When the user is required to provide multiple parameters or data choices ex. Choose several email recipients, choose several Tags to filter a list.


Use how

  • A list of choices is provided with a check box or tick box appended to each item.
  • Unless the user is returning to a previously edited multi-selection list, all items begin unchecked.
  • Under certain contexts, the selection is part of a larger task. In this case, a task-specific control is provided to enable the user to indicate completion. Ex. In the image above, the list is triggered as part of an ‘image-tagging’ task. The OK command is therefore provided to enable the user to complete the selection of tags and appends these to the (previously) chosen image.

Indirect manipulation

• On indirect manipulation devices, the user navigates up and down the list using the Up and Down keys. Similar to radio buttons, the user must first focus the control, then click to activate it. • Selections are indicated by clicking the Center and/or Left softkey. Once an item has been selected, a tick is added to that list item’s tick box. • The user is free to tick and un-tick as many items as needed.

Direct manipulation and web

  • On touch devices, the user simply taps a tick box to mark the selection. Once an item has been selected, a tick is added to that list item’s check box.
  • The user is free to tick and un-tick as many items as needed.


Design Tips

  • Tick boxes are now a very well recognized control. Where possible, do not reinvent the wheel (or in this case the box)—especially if the technology or platform you are designing for includes a native tick box component.
  • When styling tick boxes, ensure there is clear contrast between the active and inactive state.


36-custom-tick.jpg

Figure: This S60 application uses a custom tick box component. The tick has been replaced with a check mark and the overall style of the component differs from the standard S60 offering.

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

×