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 06:06, 16 April 2012 by hamishwillee (Talk | contribs)

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

Mobile Design Pattern: Contextual Prompt

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

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

Contents

Description

A modal view containing a group of options, actions or information directly related (and contextual to) the focussed or active mode, object or view.

Advantage

  • Can be used to present a wide variety of actionable contextual options.

Disadvantage

  • Can suffer from poor discoverability.

Use when

  • To provide task-related options ‘just-in-time’.
  • To group options and reveal them to the user as close to the interaction as possible.

Use How

Several types of contextual menus are popular on mobile:

a. Softkey-mapped menus

These menus are most often triggered by pressing the left softkey and can include (a recommended maximum of) two levels of options. These menus do suffer from a certain lack of visibility however they are now so common that this is becoming less of a problem.


19-softkey-mapped-popup.jpg

Note: Carefully consider the context of use. If the user interface enables multiple selections (typically via Mark/Unmark commands) the contextual options must be adjusted to only display actions which can be executed on all marked items and/or feedback should be provided to explain to the user why certain actions will not be executed.


b. Contextual pop-up menus

These menus are triggered through selection of an on-screen icon or prompt. Depending upon the placement of the prompt, these menus can suffer from low discoverability and impede other interactions.

Direct manipulation: Contextual menus are often invoked by tapping an icon or—in the case of S60 5th Edition, executing a long tap on a list item.


20-long-tap.jpg

Figure: A simple short tap opens the detail view of the item while a long tap invokes a contextual menu.

See the Touch Utilities API within the Nokia Developer S60 5th Edition C++ Developers Library for more information regarding long-tap events.

Indirect manipulation: In this context, contextual pop-up implementation is more problematic as direct selection of a list item already has an expected behaviour.


22-icon-based-popups.jpg

Figure: The ‘arrow’ icon indicates that clicking Right will open a contextual menu. This cue is required as the typical behaviour is to click the Center softkey to ‘Open’ the focussed item. Without this additional cue, the menu might never be discovered.

c. Temporary contextual pop-ups

These pop-ups are temporary. They immediately appear once an item is focussed and automatically disappear once focus is removed. For this reason they cannot have focus themselves and therefore only contain contextual information.


23-temporary-contextual-popup.jpg

Figure: A. This mapping example opens a contextual pop-up as the user hovers over an icon (via the mapping application’s custom ‘crosshairs’). In examples B and C, the pop-up is triggered as soon as the item is focussed.

d. Hardware mapped pop-up menus

Certain devices include a bespoke key or physical control, which is exclusively designed to trigger a contextual pop-up menu.


24-hardware-mapped-popup.jpg


Design Tips

  • Once open, contextual menus should (ideally) have primary focus. It should not be possible to interact with the visible elements ‘behind’ the menu—even on a direct manipulation device.
This page was last modified on 16 April 2012, at 06:06.
82 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.

×