Typical Behavior

Menus behave by reacting when a user selects an option, typically in the form of a 'click'.

The menu responds to a 'click' by carrying out the function that the user has selected. It is common behavior for menus to display contain one or more sub-menus, allowing for organization and efficiency. Accordian menus, for example, can expand/collapse to displace more/fewer options. This makes it easier for the user to navigate through a multitude of options without being overwhelmed with too much information at one time.

Events

The most relevant menu event is the click. A click event indicates that the user has selected a particular action or item from the list. Another event is the hover, indicating that a pointing device is explicitly within the button’s bounds. Another event is the scroll, allowing the user to maneuver through the available options. Some platforms or implementations have included other components into an item, like a swipe, which can display alternative actions for the item, or a checkbox.

In this instance, a click tells it whether to advance deeper or retreat out of the app. Scroll moves the selector around to allow the user to “click” what they want to.

State Diagram

Component in Action

iOS Contacts

Pebble Timeline

Variants

Grid - Apple TV Homescreen

OS X Color Picker

These are only a few of the many interfaces that can be used to display options or actions. Depending on the content displayed, it may be better to create a custom interface. In the case of the OS X color picker, instead of listing names of colors in a standard menu, they opted to recreate a crayon box and visually display what the available colors are. In the case of the Apple TV, while you could simply list all possible apps, they opted for a grid to take better advantage of the wide aspect ratio of a TV. An easy way to locate menus in Google’s system is to search for three parallel bars, which clearly indicate more options.

Priority Metrics

The basic menu being a fundamental component since the creation of the command-line interface, it has had plenty of time to mature and is on virtually every platform. As such, all usability metrics are important to it. The origins of menus date back to the days of pen and paper, as an easy way to organize equivalent information.

Users who are seeing a menu for the first time are immediately familir with its use by its similarity to the pen and paper. This makes learnability easy as the concept is present from childhood. Between platforms and across time, the fundamentals of a basic menu haven't changed which maximizes memorability.

Users must have no delays with using menus because it is the intermediate step between choosing an action or item and that action being performed or moving on with the item selection. Efficiency is of the essenence here. The primary time consumer is the scrolling of a manu that cannot fit onto the screen in its entirety. Depending on the platform, the scrolling event must be responsive.

Users should never select an item in the menu by mistake. This is more in the realm of the interface component that is used within the item in the menu than the menu itself. However, for example, scrolling the menu should not be mistaken for selecting a particular item. This is up to the platform to make sure that the compents that can be used within items don't conflict with the menu itself.

Learnability: The learning curve for Android Auto is significantly worse than for Apple Carplay. Efficiency: Android Auto is more complicated than Apple’s simple, gridded layout, but can only accomplish the same amount of work. Memorability: Although it took a while to learn the system, once learned, is intuitive and usable. Errors: Not many errors other than how to activate the “Hey Google” button. That took a few minutes of playing around with the system and trial and error. Satisfaction: Doesn’t look at nice as Apple Carplay due to a non-adjusting aspect ratio (tested on two phones).

Key Characteristics

Feedback

Perhaps the most important interaction design principle that a menu must follow is feedback. Users must never doubt whether:

1. the scroll event was performed and the listings changes displayed
2. the item they have currently selected (for platforms needing abstract pointing)
3. the action being performed on a particular item (dependant on the platform and the available actions for an item)

Pebble Guidelines

According the Pebble design guidelines, some of the most important parts of the interface should be the speed of the interaction. Something else they emphasize is the the creation of a unique UI that isn't necessarily dependent on the Pebble UI. Simplicity is king.

iOS Guidelines

According to the iOS Guidelines, the most basic menu is the Table View. It displays data by dividing data into rows. The most basic type is plain, which options for a header, a footer, and an index that can be presented along the side of the list to more easily navigate the list. The second general type is grouped, whereby each group can have a header and/or footer. An index is not typical for this type.