User Interface: die Etymologie von Bento Menu und Co. (Teil 2)

Im ersten Teil dieser Wortherkunfts-Serie gingen wir einigen beliebten Elementen im UI Design auf die Spur und haben erfahren, dass Breadcrumbs, Radio Buttons, Tabs und viele mehr ihre Namen Antiquitäten und Gegenständen aus dem Alltag verdanken. Im zweiten Teil gehen wir weiteren Begriffen auf die Spur. Weshalb Bento, Döner, Meatball und Hamburger Menu im User Interface so heissen, erfährst du hier.

Bento Menu: Unterschiedliche Applikationen unter einem Dach

Im UI Design beschreibt ein Bento Menu ein Navigationsmenü mit Rastermuster. Es ist benannt nach den japanischen Bento Boxen, die zum Transportieren von Mahlzeiten dienen. Speziell an ihnen ist, dass sie in verschiedene Fächer unterteilt sind, sodass sich das Essen nicht vermischt. Auch in der User Interface werden Bento Menus verwendet, um eine Übersicht verschiedener Anwendungen und Funktionen innerhalb einer Website respektive einer App zu öffnen. Ein weitläufiges Beispiel ist das Bento Menu auf der Google-Website, das alle Apps anzeigt und es erlaubt, einfach unkompliziert zwischen ihnen zu navigieren.

Döner Menu: Filtern und Sortieren im User Interface

Es ist eines der beliebtesten «Sortieren nach»-Filtersymbole: das Döner Menu. Es besteht aus übereinandergestapelten Linien von unterschiedlicher Länge: Die längste zuoberst, die kürzeste, zentriert zu unterst. Dieser konischen Form verdankt sie auch seinen Namen: Sie ist nämlich der Form einer Döner-Fleischrolle ähnlich. Der Begriff Döner stammt übrigens aus dem Türkischen und heisst so viel wie «sich drehen», was wiederum Bezug auf die drehende Bewegung des Dönerspiesses beim Braten nimmt.

Kebab Menu: Optionen zum Aufklappen

Eins vorweg: Döner und Kebab sind nicht dasselbe. Das haben auch die Foodies erkannt, die Elemente im UI Design benannt haben. Döner beschreibt die drehende Bewegung des Fleischspiesses, Kebab die Art der Fleischzubereitung. Im Arabischen und Türkischen steht Kebab also für gebratenes Fleisch. Das Kebab Menu nimmt also auf die fertige Speise Bezug, bei der sich im Querschnitt das Fleisch zwischen zwei Brotlagen befindet. Dargestellt wird es mit drei vertikalen Punkten, die ein kleines Inline-Menü öffnen, das sich wie eine Liste öffnet. Das Menü beinhaltet in der Regel zusätzliche Optionen und befindet sich oben rechts.

Hamburger Menu: Seitenmenü par excellence

Wie ein abstrahierter Hamburger sieht das Hamburger Menu aus: Drei gleich lange, übereinanderliegende horizontale Linien – wie zwei Brötchen und ein Patty. Es kommt vor allem in Websites und Apps zur Anwendung. Es macht User*innen darauf aufmerksam, dass es hinter diesen drei Linien noch mehr zu entdecken gibt. Sobald darauf geklickt wird, öffnet sich ein Seitenmenü oder eine Navigation.

Meatball Menu: Vielseitiges, horizontales Element im User Interface

Drei horizontale Punkte stellen das Meatball Menu dar. Der Name deutet auf die drei runden Bällchen hin, die sich wie Meatballs aneinanderreihen. Es öffnet ein Menü mit zusätzlichen Optionen. Da es ein horizontales Element ist, lässt es sich im Web und in Apps einfacher wiederholend einsetzen. Es eignet sich demnach auch gut für Tabellen und weitere horizontal gegliederte Elemente.

Icon: Vom religiösen Symbol zum Aktions-Trigger im User Interface Design

Das Wort Icon ist vom griechischen Wort «eikenai» abgeleitet, das «ähnlich sein oder ähnlich erscheinen» bedeutet. In gewissen Religionen werden Statuen religiöser Figuren als Ikonen bezeichnet, weil zu ihnen gebetet wird, als wären sie das, was sie darstellen. Im heutigen Kontext sind Icons vor allem Symbole auf dem Computerbildschirm, die eine Anwendung oder eine Funktion beschreiben. Auf dem Desktop ist es beispielsweise das Symbol für den Papierkorb. Im Webdesign sind weitläufige Beispiele das Lupen-Symbol in der Suchleiste, das Zahnrad als Einstellungen-Ikon, der Brief als Sinnbild für die Kontaktaufnahme oder das kreisförmige Refresh-Zeichen. Icons können dabei helfen, Inhalte und Aktionsmöglichkeiten besser zu vermitteln.

Card: Inhalt auf einen Blick

Cards sind kleine rechteckige oder quadratische Module, die Informationen enthalten in Form von Buttons, Text, Bildern etc. Sie zeigen verschiedene Inhalte nebeneinander an, auf die User*innen klicken können. Sie sind eine Alternative zu herkömmlichen Listen, durch die sich Besucher*innen durchklicken müssen. Optisch sehen sie auf wie klassische Spielkarten, weshalb sie auch deren Namen angenommen haben.

Es gibt zahlreiche UI Elemente, die auf Apps und Websites implementiert werden können. Möchtest du dein User Interface und somit auch die User Experience optimieren? Wir helfen dir weiter.