Menus:Designing
From KDE-HIG_Wiki
Menu elements include words (and sometimes icons) to designate menu titles and items, and symbols to designate keyboard shortcuts, hierarchical menus, separators, and the state of some menu items.
<todo> provide an image with labelled components (keyboard shortcuts, icons, etc) </todo>
| Table of contents |
Creating the Menu Structure
Guidelines
- Group standard functions in consistency with the KDE standard menus.
- The remaining items should be grouped according to conventional categories.
- If that is not possible, group the items according to logical or functional categories that are self-explanatory (e.g. Actions versus Objects).
- If a self-explanatory categorization is not possible, you have to group the items arbitrarily. If there are more than eight options in a menu, separate them visually in equally sized groups ( 4 items per group).
- Avoid more than fifteen items in top-level menus. If a menu has more items than this, consider moving a functionally related subset of items into a submenu or a new top-level menu.
- Avoid more than one level of submenus. If a submenu contains more than five items, consider giving it its own menu.
- Do not design menus with less than three items. Either move the items to another menu, or move other items to this menu. In case of a submenu, move the items to their parent menu.
Rationale
Creating an intuitive menu structure is crucial for the usability of an application. If users do not find the functions they are searching for due to an inadequate item arrangement, they are not able to fulfill their task. Often, it is not possible to decide which menu structure is best — especially in a complex application with many options. In that case, usability testing is of need.
Deep menu hierarchies should be avoided as they are hard to memorize, and physically difficult to navigate.
Implementation Notes
<todo> implementation notes? </todo>
Related
Standard Menus
Grouping Items in Menus
Guidelines
- Arrange items consistently within your application, and in consistency with other KDE applications.
- Within a group, move important functions to the top of the menu.
- Within a group, try to find a conventional order (e.g. days of a week), or make sure if there is another well-established order.
- If the sequence of usage is determined, arrange the items according to that sequence.
- If the frequency of usage is known, and the number of items is about eight, move the most frequently used icons to the top the menu.
- If none of the above rules is applicable, use an alphabetical order.
Rationale
Creating an intuitive menu structure is crucial for the usability of an application. If users do not find the functions they are searching for due to an inadequate item arrangement, they are not able to fulfill their task. Often, it is not possible to decide which menu structure is best — especially in a complex application with many options. In that case, usability testing is of need.
Implementation Notes
<todo> implementation notes? </todo>
Related
<todo> related? </todo>
Using Icons in Menus
Guidelines
- Do not use icons for menu titles.
- Use icons if they support the learnability of your application by showing up the relation to the function's appearance elsewhere in the application.
- Use icons if they represent something unique within the application.
- Use icons that are significant and selective (see section Designing Effective Icons).
- Use icons in consistency with your own application, and in consistency with other KDE applications. Whenever standard icons are existent, use them (see section Standard Menus).
Rationale
If applied carefully, icons add to the learnability of an application by supporting the perceptibility of certain functions. To do so, icons have to be selective: If a number of icons does not show any significant differences, it is hard to keep them apart. As a result, learning is rather hindered than supported.
The more icons you use, the higher is the danger that their significance declines. Therefore, firstly use icons for important functions which emerge at multiple locations within your application.
Implementation Notes
<todo> implementation notes? </todo>
Related
Designing Effective Icons
Standard Menus
<todo> </todo>Accessiblity: colors, icons
<todo> </todo>CI: Icons Design, Themes
