×
Namespaces

Variants
Actions
Revision as of 16:49, 25 June 2009 by mayankkedia (Talk | contribs)

Options menu Usability

From Nokia Developer Wiki
Jump to: navigation, search


Description

A menu is a window that presents a list of commands to the user. A menu is arranged into lines, known as menu items, each of which contains a text label. Menu provides a convinient way to navigate between different forms and views in a application. When a user selects a menu item, the command handler is invoked which handles the command pressed. Option menu is an efficient way to allow user to perform some actions, specially in the case of softkey based non touch devices.

The Options menu is a menu list displayed in a pop-up window. It is activated by pressing the Options soft key. (Options is the default value of the left soft key.)

Example

Some guideline to design a good options menu are:

  • Menu should not cover whole screen of the application. Ideally it should not cover more than 70% screen of the application.
The maximum size is approximately the size of the standard main pane.
Good option menu example
OptionMenu1Good.JPG

Bad option menu example
OptionMenu1Bad.JPG


  • The content on the screen outside the menu pop-up should be dimmed.


Good option menu example
OptionMenu2Good.JPG

Bad option menu example
OptionMenu2Bad.JPG


  • Text is preferrable than icon in a menu item.
  • Text should be meaningful and easy to understand


Where possible use the conventionally known/used words to denote a menu option command text. Do not use texts which are either too technical or too tough to understand for the end user. Also make sure that the command does what the user expects it to do, do not surprise the user.


Meaning-less text used
Wrong terminology.JPG

Meaningful Text used
Right commands.JPG


  • It should provide scrollbar if all item in a menu are not visible at a time.


Option menu without scrollbar
Without scrollbar.JPG

Option menu with scrollbar
With scrollbar on menu.JPG

  • Add sub-menu to item if it has additional additional choices to display.


Option menu without logical grouping
Ungrouped options.jpg

Option menu with logical grouping
Grouped options.jpg

  • Hide menu item if its functionality can not be used. for example no need to show delete menu item if list does not contain any item.


Option menu with command not hidden as per context
Command not hidden.JPG

  • Use navigation key default action(s) to navigate between different menu item and sub-menu.
  • Provide Context-sensitive menu if required. Context-sensitive menus are secondary menus that are typically launched by pressing the Selection key (as opposed to the primary Options menu accessed via the left soft key). These menus are sensitive to the currently displayed view, and furthermore can be sensitive to the internal state of that view.
  • Use radio button/checkboxes only in the sub-menu


Use markable menu options like radio button/checkboxes only in the sub-menu, specially if they are more like custom setting choices. For instance if you are giving the user choice to select a specific number of the 3 pre-defined numbers, you might want to show an indication against the number chosen. This way the user can know what is currently selected/chosen.

Option sub-menu without indication
Without radio.JPG

Option sub-menu with indication
With radio.JPG

For details of drop down/context sensisitve menu, check :-

How to display drop down/fly out menu

  • The Options menu always loops, making it easy to reach the end of the list.
  • Some guidelines for submenus are:


1. The number of items should be low, so that the user does not need to scroll in order to see all of them.
2. Only one submenu level is allowed, i.e., a submenu cannot contain another submenu.

93 page views in the last 30 days.