Menus
There are two types of menus: Option menu and Context menu.
Option menu
Options menu contains functions related to the current view and is initially hidden in the view.
- An option menu indicator is displayed when option menu is available.
- Tapping on the option menu indicator gives assistive motion effect that helps users to detect that swiping should be used to open the option menu.
- Option menu is accessed by swiping up from the bottom of the screen.
- If the view doesn't have option menu, then the bottom swipe doesn't do anything.
Closed by either:
- Tapping the area outside of the option menu
- Flicking menu down
- Pressing back key. First key press closes the option menu and shows the view behind the menu. Second key press exits the application view.
- Selecting one of the items.
Layout:
- Displayed on top of the current view, the background is dimmed.
- Presented as textual list.
- Contains 1 to 4 functions.
- If there are more than 4 items in option menu, it can be scrolled to view more items.
Guidelines for option menu content:
- Keep the number of items in option menu as low as possible.
- Place most frequent/important actions first, so that less used items are hidden if the menu becomes scrollable.
- Option menu should not include "Exit". User can exit the view or app with back key or side swipes.
- Actions that are available elsewhere, e.g. in the toolbar, should not be duplicated in the option menu.
Below is an example of option menu available in view and swiped up to view the contents.
Option menu and Category bar
Option menu can exist in the view also when category bar or tabs are displayed.
- The option menu and category bar/tabs are in separate layers.
- When option menu is swiped up to reveal, the option menu overlay covers the category bar/tabs.
Below is an example of a view having both option menu and toolbar
Note: The Category bar is not a mandatory component of the application and even when it exists, it doesn't need to be filled up before the Option menu is taken into use. Having only Option menu and no toolbar (i.e. Category bar with toolbar function) is good design when options are not frequently used and seeing more content is more important. Having only one function in the Category bar and other functions hidden from the view in Option menu is also a good design solution when that one function is primary and other functions are less used. Rarely used functions would create unnecessary noise for the view.
Context menu
Context menu is used in views where multiple items are displayed and its functions should apply only for one specific item.
- It shall not contain any general functions or functions that are applied for multiple items.
- It is not used for navigation, e.g. opening the item.
- Accessed with long press on a single item.
- When context menu is used in the view, long press can't have any other functionality (e.g. opening arrange mode).
- Can be used for list and grid items.
- Difficult to discover, should not be used as the only option for a certain action (use it as shortcut instead).
Closed by either
- Tapping outside of the context menu
- Pressing back key
- Flicking menu down.
- Selecting one of the items.
Layout:
- Presented aligned to the bottom of the view.
- Dims the background view.
- The item that was long pressed is visually highlighted (selected) in the background view.
- Can contain 1 to 4 items.
- If there are more than 4 functions that can be applied to the item:
- the 4 most important ones are presented in the context menu.
- The rest of the functions are available by opening the item (by tapping to open) and presenting those in Option menu or Category bar.
- If in the UI there is no item specific view where the rest of the functionality can be offered, then all functions are presented in the context menu and the menu can be scrolled. For example, in the Browser, user can press and hold on an image on web page to open the context menu for the image. The image cannot be opened to an item viewer, thus all functions for the image are displayed in the context menu.
