Verwendung
Ein Kontextmenü soll verwendet werden, wenn zusätzliche Optionen zur Verfügung stehen, der Platz jedoch so begrenzt ist, dass nicht alle enthaltenen Optionen gleichzeitig angezeigt werden können.
Um zu verhindern, dass eine Vielzahl gleicher Funktionen zur Bearbeitung von tabellarischen Daten das User Interface überfrachten bietet sich an, optionale Funktionen in initial geschlossenen Kontextmenüs zu platzieren, die nur bei Bedarf geöffnet und ausgelöst werden können.
Die Einträge in einem Menü müssen keinen Bezug zueinander haben, sondern können auch Funktionen ganz unterschiedlicher Art abbilden. Sie müssen aber immer einen unmittelbaren logischen und auch räumlichen bzw. strukturellen Bezug zu den Daten haben, die mittels ihrer Funktionen bearbeitet werden.
Kontextmenüs öffnen auf der z-Achse immer über sämtlichen anderen Interface-Elementen und dürfen nie von anderen Inhalten oder Menüs überlagert werden.
Beschriftung der Optionen
Der Text der Optionen in einem Kontextmenü soll direkt und unmittelbar sein, damit Nutzende schnell eine Aktion erfassen und auswählen können. Aktionen, die eine Änderung von Daten mit erheblicher Tragweite bewirken könnten (Daten löschen, Konto löschen etc.) müssen als potenziell destruktive Aktionen gestaltet werden.
Icons
In der Regel enthalten Kontextmenüs nur eindeutig und nachvollziehbar formulierte Text-Labels zur Verdeutlichung der Funktionen. Optional können diese auch mit Icons aus der Icon-Library versehen werden. Allerdings muss dann sichergestellt sein, dass sämtliche Funktionen über Icons verfügen; Mischformen aus Funktionen mit und ohne Icons in einem gemeinsamen Menü sind nicht erwünscht.
Platzierung
Abhängig davon, wo das Kontextmenü in der Benutzeroberfläche angezeigt wird, erscheint das geöffnete Menü links oder rechts, oberhalb oder unterhalb, sodass es immer in Gänze sichtbar bleibt.
Interaction Design
Der rahmenlose Button des Kontextmenüs erhält bei Tastaturfokus zusätzlich zum Farbwechsel eine 2px breite abgesetzte Outline bzw. einen deutlichen visuellen Fokus-Indikator bei Swipe auf Touch-UIs. Mausklick, Eingabetaste Enter oder Leerschritt bzw. Tap öffnen das hinterlegte Menü.
Der Fokus bewegt sich per Tab-Taste bzw. Swipe auf Touch-UIs vom Button zum ersten Eintrag des nun geöffneten Menüs. Die Menüelemente sind auch mittels Pfeiltasten erreichbar und erhalten einen deutlichen visuellen Fokus-Indikator. Bei geöffnetem Menü wird dieses durch die Escape-Taste geschlossen, ohne dass eine Aktion ausgeführt wird.
Do’s and Dont’s
So:
- Kompakte Zusammenführung von Funktionen mit Anwendungscharakter
- Unmittelbare Zuordnung zu den Objekten, die bearbeitet werden sollen
So nicht:
- Verwendung als Navigationsmenü
- Kontextmenü mit nur einer enthaltenen Option
- Gemischt mit und ohne Icons
