Icons
Icons können repräsentativ für viele Dinge wie z.B. Aktionen, Dateien, Geräte und Verzeichnisse stehen.
Overview
Intro
Icons können repräsentativ für viele Dinge wie z.B. Aktionen, Dateien, Geräte und Verzeichnisse stehen. Grundsätzlich sollen Material Design Symbols im Mate Design System verwendet werden. Falls sich kein Icon eignet, können durch UX Designer erstellte Icons verwendet werden (siehe Abschnitt Individuelle Icons). In wenigen Ausnahmefällen sind aktuell noch Vaadin Icons im Einsatz.
Icons Overview
Verwendung
| 👍 Do | 👎 Don't | ....wenn Aktionen, Dateien, Geräte und Verzeichnisse prägnant dargestellt werden sollen ....wenn Platz im Interface gespart werden muss ....wenn die Wahrnehmung von vielen Daten, repräsentiert durch Icons, gesteigert werden soll ....wenn die Erinnerbarkeit von Elementen gesteigert werden soll (in Kombination mit stets sichtbarem Text) | ....wenn es für den Nutzer nicht ersichtlich ist, was mit einem Icon gemeint ist (z.B. komplexe Aktion durch Icon dargestellt, ohne jeglichen textuellen Hinweis z.B. durch einen Tooltip ) |
|---|
Guidelines
Einsatzmöglichkeiten
Icons in Buttons
Ein Beispiel sind Icon Buttons. Diese müssen immer mit aria-label Attributen und Tooltips versehen werden, damit die Barrierefreiheit gewährleistet ist und Nutzer leichter verstehen können, welche Funktionen ausgelöst werden.Alle Informationen zur Verwendung von Icons bei Buttons sind in der Dokumentation der Buttons zu finden.
Icon Button
Icons mit Text
Icons können auch in Kombination mit Text verwendet werden. Der Text ist für Nutzer sichtbar und wird von Screenreadern erfasst und vorgelesen. In diesen Fällen ist keine zusätzliche Verwendung von aria-label-Attributen oder Tooltips erforderlich.
Icon mit Text
Icons zur Darstellung eines Status 0 oder 1
Die beiden Icons check_circle und cancel werden vorwiegend verwendet, um binäre Zustände visuell darzustellen – also Situationen, die entweder Ja (1) oder Nein (0) ausdrücken.
Check Cancel Icons
Darstellung in Tabellen
Die Darstellung binärer Zustände („Ja“/„Nein“) richtet sich danach, ob mehrere Zeilen gleichzeitig den Wert „true“ annehmen können und ob eine fachliche Bewertung in „positiv“ und „negativ“ sinnvoll ist.
- Nur eine Zeile kann „true“ sein
- Mit semantischer Bewertung→ Positives Icon anzeigen
- Ohne semantische Bewertung→ Neutrales Icon anzeigen
- Mehrere Zeilen können „true“ sein
- Mit semantischer Bewertung → Positive und negative Icons anzeigen
- Ohne semantische Bewertung → Neutrale Icons für „true“-Werte anzeigenDas folgende Schaubild dient dazu, die Richtlinien und verschiedenen Anwendungsfälle für die Darstellung der binären Zustände „Ja“ und „Nein“ anschaulich darzustellen.
Entscheidungsbaum für die Darstellung binärer Zustände
Hinweis: Es ist dabei auf eine barrierefreie Gestaltung zu achten. Bei leeren Zellen muss zudem ein aria-label (z.B. "Nein") hinterlegt sein, damit Screenreader-Nutzer diese Information hören können. Ohne diesen Text werden die Zellen vom Screenreader übersprungen, wodurch die Information für diese Nutzergruppe nicht zugänglich ist.
| 👎 Don't | …bei einem Tabellentitel wie ‚Status‘ wären die Werte ‚Ja‘ oder ‚Nein‘ missverständlich, da ein Status nicht binär sein kann. Stattdessen werden Badges eingesetzt, die den Status eindeutig beschreiben, z. B. ‚Nicht bearbeitet‘, ‚In Bearbeitung‘ oder ‚Abgeschlossen‘. |
|---|
Parameter
Die Material Symbols können über verschiedene Parameter angepasst werden. Die Parameter können auf der offiziellen Seite von Google ausprobiert werden, auf der noch weitere Erklärungen zu den Parametern zu finden sind. Siehe: https://fonts.google.com/icons?icon.query=home&icon.style=OutlinedMehr Informationen für Entwickler sind hier zu finden: https://developers.google.com/fonts/docs/material_symbols
Style
Grundsätzlich dürfen nur Outlined Material Symbol vom Style "Sharp" verwendet werden. Andere Material Icon Styles (Rounded & Outlined) werden nicht unterstützt und dürfen auch nicht verwendet werden.
Fill
Es sollen nur Outlined Material Design Symbols verwendet werden (Fill = 0).
Fill = 0
Weight
Als Weight soll immer der Standartwert "400" verwendet werden.
Grade
Als Grade soll immer 0 verwendet werden.
Größe
Um konsistente Interfaces zu gewährleisten, sollen die Icons in der Regel eine Größe von 24px*24px haben. Dazu ist es möglich abhängig vom Anwendungsfall durch Entscheidung des UX-Designers Icons in anderen Größen darzustellen. Die Größen werden in nachfolgender Tabelle zusammengefasst.
| Größe | Token | Verwendung | Beispiel Icon in Größe |
|---|---|---|---|
| 16px*16px | mate-icon-sizing-sm | In Absprache mit UX Designer in Sonderfällen | Größe S |
| 20*20px | mate-icon-sizing-sm-md | In Absprache mit UX Designer in Sonderfällen | Größe S-M |
| 24px*24px | mate-icon-sizing-md | Im Regelfall | Größe M |
| 32px*32px | mate-icon-sizing-lg | In Absprache mit UX Designer in Sonderfällen | Größe L |
Farben
Für die Farben der Icons gelten die gleichen Richtlinien des Mate Design System wie für die restlichen Interface Elemente. Diese sind zu finden unter Colours.
Icons als interaktive Elemente
Wenn Icons als interaktive Elemente verwendet werden sollen, können sie als Teil eines Buttons verwendet werden und erben die Farbe der jeweiligen Variante. Mehr hierzu ist in der Dokumentation zu den Buttons unter dem Abschnitt "Icon Button" zu finden. Dazu können sie als interaktive Icons verwendet werden, die technisch zwar auch ein Button sind, aber dezenter gestyled sind, um das UI farblich nicht zu überlasten.
| Token | Verwendung | Beispiel Icon in der jeweiligen Farbe |
|---|---|---|
icon interactive | Interaktive Icons | Farbe - Icon interactive |
icon interactive hover | Interaktive Icons im Hover Zustand | Farbe - Icon interactive hover |
icon interactive active | Interaktive Icons im Active Zustand | Farbe - Icon interactive active |
icon interactive selected | Interaktive Icons im Selected Zustand | Farbe - Icon interactive selected |
icon interactive disabled | Interaktive Icons im Disabled Zustand | Farbe - Icon interactive disabled |
icon interactive contrast | Interaktive Icons auf kontrastierendem Hintergrund | Farbe - Icon interactive contrast |
Icons als nicht interaktive Elemente
Nachfolgend werden die Farben für nicht interaktive Icons dargestellt.
| Token | Verwendung | Beispiel Icon in der jeweiligen Farbe |
|---|---|---|
icon not interactive | Bei nicht interaktiven Icons, die normale Informationen kommunizieren. Beispiele hierfür sind Telefonnummer, Ort und E-Mail Adresse. | Nicht interaktiv - Icon |
icon success | Bei Icons, die Erfolg kommunizieren. | Nicht interaktiv - Erfolg |
icon danger | Bei Icons, die Fehler oder Gefahr kommunizieren. | Nicht interaktiv - Gefahr |
icon warning | Bei Icons, die Warnungen oder einen atypischen Status kommunizieren. | Nicht interaktiv - Warning |
icon info | Bei Icons, die besondere Informationen oder einen atypischen Status kommunizieren. | Nicht interaktiv - Information |
icon neutral | Bei Icons, die einen neutralen Status besitzen (zum Beispiel in neutralen Badges oder Callouts) | Nicht interaktiv - Neutral |
Individuelle Icons
Falls sich für den konkreten Anwendungsfall kein Icon eignet, können eigene individuelle Icons von UX Designern mit einem vektorbasierten Design Tool (z.B. Adobe Illustrator) erstellt werden. Hierbei sind die Material Design Richtlinien zur Erstellung von Icons zu beachten und das Icon Design Template zu verwenden (Beides ist zu finden unter https://m3.material.io/styles/icons/designing-icons ). Falls es bereits ein ähnliches Material Design Icon zum gewünschten Icon gibt, ist es ratsam dieses herunterzuladen und abzuändern. Des Weiteren gelten auch hier die Richtlinien des Design Systems zur Verwendung der Icons. Besonders wichtig ist, dass Pfade vor der Einbindung von individuellen Icons vor dem Export in Flächen und Konturen (outlined stroke) umgewandelt werden, um eine optimale Darstellung zu gewährleisten (siehe outlined stroke). Die Icons müssen nach der Erstellung als .svg Datei exportiert werden und von Entwicklern als solche eingebunden werden.
Aktuell verwendete Icons
| Icon | Name | Bedeutung | Verwendung in | Iconset | | --------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------- | --------------------- | |
Größe M
| home | Startseite | Applikationsleiste | Material Design Icons ||| |
Group
| groupin Material Icons people | Benutzerverwaltung | Applikationsleiste: als QBEN Nutzer |
Material Design Icons ||| |
Übergeordnete Einstellungen
| settings | Übergeordnete Einstellungen | Kopfleiste | Material Design Icons ||| |
Hilfe (global)
| help | Hilfe (global) | Kopfleiste | Material Design Icons ||| |
Benachrichtigungen
| notifications | Benachrichtigungen | Kopfleiste | Material Design Icons ||| |
Navigationspanel
| menu | Menü/ Navigationspanel | Titelleiste | Material Design Icons ||| |
Schließen
| closein Material Icons clear | Schließen, Feld Inhalt löschen | Titelleiste, Kombinationsfeld, Date Picker, Time Picker, Date Time Picker | Material Design Icons ||| |
arrow_back
| arrow_back | Zurück-Navigation | Titelleiste | Material Design Icons ||| |
Suche
| search | Suche | Navigationspanel, Hilfesystem, Lookup Modaldialog aufrufen | Material Design Icons ||| |
Person
| person | Person | Name-Wert-Facette | Material Design Icons ||| |
Telefonnummer
| callin Material Icons phone | Telefonnummer | Name-Wert-Facette | Material Design Icons ||| |
E-Mail-Adresse
| mail in Material Icons email | E-Mail Adresse | Name-Wert-Facette | Material Design Icons ||| |
Location_on
| location_onin Material Icons place | Adresse | Name-Wert-Facette | Material Design Icons ||| |
expand_more
| expand_more | Ausklappen, mehr anzeigen, Priorität: Gering | Dropdown-Liste, Kombinationsfeld, Aufgaben / Benachrichtigungen, OK.Verkehr | Material Design Icons ||| |
expand_less
| expand_less | Einklappen, weniger anzeigen, Priorität: Hoch | Dropdown-Liste, Kombinationsfeld, Aufgaben / Benachrichtigungen, OK.Verkehr |
Material Design Icons ||| |
Check_circle
| check_circle | Erfolg, Etwas trifft zu (Tabelle), Wert 1, Ja | Tabelle, Hochruf, Prozessnavigation, Erledigter Workflow Schritt/ Erledigte Aufgabe in OK.FINN RebAOW, Positive Werte in Tabellenzellen, Positive Werte in
Name-Wert-Facetten | Material Design Icons ||| |
Help_outline
| help | Hilfe (kontextspezifisch) | Hilfesystem | Material Design Icons ||| |
Hilfeartikel
| article | Hilfeartikel | Hilfesystem | Material Design Icons ||| |
Information
| info | Information | Tooltip, Hochruf | Material Design Icons ||| |
Warnung
| warning | Warnung | Hochruf | Material Design Icons ||| |
Open_in_new
| open_in_new | In neuem Tab öffnen | Navigationspanel, List Box | Material Design Icons ||| |
In Element gehen
| east | In Element gehen | Tabelle | Material Design Icons ||| |
Arrow_forward
| arrow_forward | Weiter | Funktionsleiste | Material Design Icons ||| |
Arrow_back
| arrow_back | Zurück | Funktionsleiste | Material Design Icons ||| |
Erfolg
| check | Erfolg | Prozessnavigation | Material Design Icons ||| |
Cancel
| cancel | Abbruch, Misserfolg, Etwas trifft nicht zu (Tabelle), Wert 0, Nein | Negative Werte in Tabellenzellen, Negative Werte in
Name-Wert-Facetten, Übersprungener Schritt
im Wizard | Material Design Icons ||| |
Fehler
| error | Fehler | Schritt ungültig (Prozessnavigation), Hochruf | Material Design Icons ||| |
Kalender
| calendar_today | Kalender | Date Picker, Date Time Picker | Material Design Icons ||| |
Uhrzeit
| schedule | Uhrzeit | Time Picker, Date Time Picker | Material Design Icons ||| |
Betrag in Euro
| euro | Betrag in Euro | Numberfield | Material Design Icons ||| |
Fehlerprotokoll
| summarize | Fehlerprotokoll | QJOB | Material Design Icons ||| |
Jobpaket
| topic | Jobpaket | QJOB | Material Design Icons ||| |
Job
| description | Job, OK.PERS | Auswertungen | QJOB, OK.PERS Applikationsleiste | Material Design Icons || |
Vorlagentemplate
| draftin Material Icons insert_drive_file | Vorlagentemplate | QDVS | Material Design Icons ||| | 
Tabelle: Sortieren
| sort | Tabelle: Sortieren | Tabelle | Vaadin ||| | 
Caret-up
| sort | Tabelle: Spaltenkopf aufsteigend | Tabelle | Vaadin ||| | 
Caret-down
| sort | Tabelle: Spaltenkopf absteigend | Tabelle | Vaadin ||| |
More_vert
| more_vert | Overflow Verhalten: Menüpunkte anzeigen, Menüpunkte anzeigen, Mehr als drei Inline Aktionen (Tabelle) | Tabelle, Grid Toolbar | Material Design Icons ||| |
Wichtig
| flag | Wichtig, zu beachten | Tabelle | Material Design Icons ||| |
List Box ausklappen
| chevron_right | List Box ausklappen (z.B. im Menü), Wechsel zwischen Tabs (Prozessnavigation), Wechsel zwischen Abschnitten (Anchor-Nav) | List Box, Prozessnavigation, Anchor-Nav | Material Design Icons ||| |
Wechsel zwischen Tabs
| chevron_left | Wechsel zwischen Tabs (Prozessnavigation), Wechsel zwischen Abschnitten (Anchor-Nav) | Prozessnavigation, Anchor-Nav | Material Design Icons ||| |
OK.PERS | Personal
| groups | OK.PERS | Personal | OK.PERS Applikationsleiste | Material Design Icons | |
Platzhalter
| star | Platzhalter | Applikationsleiste | Material Design Icons ||| |
OK.PERS | Verwaltung
| perm_data_setting | OK.PERS | Verwaltung | OK.PERS Applikationsleiste | Material Design Icons | |
Log
| history | Historisierung / Log / Protokoll (OK.PERS Vorschlag) | Applikationsleiste | Material Design Icons ||| |
Download
| download_for_offline | Download | OK.FINN Veranlagung | Material Design Icons ||| |
In Progress
| autorenew | In Progress, Arbeitsschritt in Fortschritt | Tabelle | Material Design Icons ||| |
Aufgabe abgeschlossen
| published_with_changes | Arbeitsschritt/Aufgabe abgeschlossen | Tabelle | Material Design Icons ||| |
sync_problem
| sync_problem | Arbeitsschritt/Aufgabe abgebrochen/fehlerhaft | Tabelle | Material Design Icons ||| |
Vorgang starten
| play_circle_filled | Vorgang starten | Tabelle | Material Design Icons ||| |
Vorgang pausieren
| pause_circle_filled | Vorgang pausieren | Tabelle | Material Design Icons ||| |
Vorgang stoppen
| stop_circle | Vorgang stoppen | Tabelle | Material Design Icons |||
Barrierefreiheit
Falls ein Icon nicht über einen nebenstehenden Text zur Erläuterung seiner Bedeutung verfügt, müssen aria-label Attribute und Tooltips verwendet werden, um die Barrierefreiheit und die Screenreader Unterstützung zu gewährleisten. Falls Text daneben steht, ist dieser von den Nutzern wahrnehmbar und wird von Screenreadern vorgelesen.
Tastaturbedienung
Wenn es sich bei Icons um interaktive Elemente handelt, wie bei Icon Buttons, sind diese über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") fokussierbar. Sobald dann ein Icon fokussiert ist, wird ein Tooltip mit der Beschreibung der Aktion des Icons geöffnet. Ist ein Icon im Fokus kann die Aktion des Icons mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgelöst werden.