Farben tragen maßgeblich zur visuellen Identität einer Benutzeroberfläche bei und beeinflussen die Stimmung und Wahrnehmung der Nutzenden.

Dieses Bedienkonzept definiert keine konkreten Farbwerte, sondern regelt die semantische Verwendung von Farben innerhalb der Benutzeroberfläche. Die konkrete Ausprägung (Farbwerte, Kontraste, Ableitungen) ergibt sich aus den gestalterischen Vorgaben des Projekts.

Im Folgenden beziehen sich die Begriffe „Farbpalette“, „Statusvarianten“ und „Gestaltungsrichtlinien“ auf die projektspezifisch definierten Vorgaben.

Die eingesetzte Farbpalette kann im Rahmen technischer, gesetzlicher oder gestalterischer Weiterentwicklungen angepasst werden. Die jeweils gültigen Farbdefinitionen sowie die zugehörigen Kontrastwerte sind der Designdokumentation zu entnehmen. Ergänzende Informationen zu Farbgrundlagen und Farbnutzung sind im Styleguide der Bundesregierung - Farben zu finden.

Farben sind funktional und semantisch konsistent einzusetzen. Folgende Bedeutungsbereiche sind visuell eindeutig unterscheidbar zu gestalten:

Eine Farbe darf nicht für widersprüchliche Bedeutungen verwendet werden. Visuelle Hervorhebungen müssen eindeutig einer semantischen Rolle zugeordnet sein.

Dos

Don’ts

Sofern aus fachlichen Gründen zusätzliche Abstufungen erforderlich sind (z. B. für Hintergründe, Flächen oder Hervorhebungen), dürfen Farben aus der Farbpalette abgeleitet werden.

Dabei ist sicherzustellen:

Helle Farbvarianten dürfen auf hellen Hintergründen nur eingesetzt werden, wenn die Anforderungen an Kontrast und Lesbarkeit erfüllt sind.

Applikationen können aus Gründen der fachlichen Strukturierung in Gruppen zusammengefasst werden. Jeder Applikationsgruppe kann eine eindeutige Identifikationsfarbe zugeordnet werden.

Diese Identifikationsfarbe dient ausschließlich der Wiedererkennbarkeit und Navigation. Sie trägt keine semantische Bedeutung im Sinne von Status- oder Systemmeldungen.

Die Identifikationsfarbe kann u. a. an folgenden Stellen eingesetzt werden:

Dos

Don’ts

Icons können als zusätzliche Elemente genutzt werden, um Funktionen und Inhalte auch visuell kenntlich zu machen. Dabei sollten Icons primär zusammen mit Text verwendet werden und nur in begründeten Fällen alleinstehend eingesetzt werden. Wenn Icons alleinstehend als Icon-Buttons oder Aktionselemente genutzt werden, sollte ihre Anzahl auf das notwendige Minimum beschränkt werden. Es wird empfohlen, alleinstehende Icons nur mit weit verbreiteter und allgemein bekannter Bedeutung zu verwenden.

In der folgenden Tabelle sind häufig verwendete symbolische Bedeutungen und deren empfohlene Einsatzbereiche aufgeführt. Sie dient der einheitlichen Verwendung von Symbolen innerhalb der Benutzeroberfläche.

Die konkrete Auswahl, Gestaltung und technische Einbindung eines Icon-Sets erfolgt in der jeweiligen Umsetzung oder Referenzimplementierung. Maßgeblich ist, dass Symbole konsistent, verständlich und barrierefrei eingesetzt werden.

Textelemente spielen eine entscheidende Rolle bei der Kommunikation mit den Nutzenden. Um benutzerfreundliche Texte verfassen zu können, ist es wichtig, die Art und Weise zu verstehen, wie Nutzende Texte auffassen und verarbeiten. In westlichen Kulturen wird in der Regel von links nach rechts und von oben nach unten gelesen. In Bezug auf Software und User-Interface-Design gilt diese Tatsache jedoch nur eingeschränkt, denn Nutzende lesen die Texte auf einem Bildschirm meistens nicht vollständig, sondern überfliegen sie nur kurz, um die für sie relevanten Informationen zu finden.

Die beim Design eines Frontends eingesetzten Elemente unterscheiden sich auch dadurch, wie stark sie die Aufmerksamkeit der Nutzenden auf sich ziehen. So werden Schaltflächen, Labels und andere interaktive Elemente gewöhnlich zuerst wahrgenommen, während statischer Text eher selten gelesen wird. Dieser Abschnitt definiert die typografischen Standards, sprachlichen Richtlinien und Längenbeschränkungen, die dazu beitragen, dass Texte klar, verständlich und ansprechend sind.

Frontends des Bundes sollen über die IT-Landschaft hinweg ein einheitliches Look-and-Feel bieten. Dies wird über den Einsatz der IsyFact und deren Komponenten gewährleistet. Dafür ist es notwendig auch bei der Schrift (im weiteren Font) einheitlich vorzugehen. Zur Anwendung kommt primär BundesSans.

BundesSans

Diese Schriftart wurde extra für Inhalte des Bundes entwickelt und zur Verfügung gestellt. Die BundesSans ist eine humanistische serifenlose Schrift. Rationalität und äußerste Klarheit kennzeichnen ihre Formensprache. Die BundesSans gehört zu den sogenannten humanistischen Serifenlosen und entspricht den Empfehlungen des DBSV hinsichtlich der Leserlichkeit von Schrift. Auch in der DIN 1450 - Leserlichkeit - werden Humanistische Antiqua (mit Serifen) und Groteskschriften (ohne Serifen) als besonders gut leserlich bezeichnet.

Sprachumfang

Folgende Sprachen werden von den Schriften BundesSerif, BundesSans und BundesSans Condensed unterstützt (nur lateinische Schriftzeichen):

Afrikaans, Albanisch, Aserbaidschanisch, Asu, Baskisch, Bemba, Bena, Bosnisch, Bretonisch, Cebuano, Chiga, Deutsch, Dänisch, Embu, Englisch, Esperanto, Estnisch, Filipino, Finnisch, Französisch, Friaulisch, Färöisch, Galizisch, Ganda, Grönländisch, Gusii, Hawaiianisch, Ido, Inari-Samisch, Indonesisch, Interlingua, Irisch, Isländisch, Italienisch, Javanisch, Jju, Jola-Fonyi, Kabuverdianu, Kalenjin, Kamba, Katalanisch, Kikuyu, Kinyarwanda, Kornisch, Korsisch, Kroatisch, Kurdisch, Kölnisch, Lettisch, Ligurisch, Litauisch, Lojban, Lombardisch, Luhya, Luo, Luxemburgisch, Machame, Makhuwa, Makhuwa-Meetto, Makonde, Malagasy, Malaiisch, Maltesisch, Manx, Meru, Mohawk, Morisyen, Māori, Niederdeutsch, Niederländisch, Niedersorbisch, Nord-Ndebele, Nord-Sami, Nord-Sotho, Norwegisch (Bokmål), Norwegisch (Nynorsk), Nyanja, Nyankole, Obersorbisch, Okzitanisch, Oromo, Polnisch, Portugiesisch, Quechua, Rejang, Rombo, Rukiga, Rumänisch, Rundi, Rwa, Rätoromanisch, Samburu, Samoanisch, Sango, Sangu, Sardisch, Schlesisch, Schottisches Gälisch, Schwedisch, Schweizerdeutsch, Sena, Shambala, Shona, Siswati, Slowakisch, Slowenisch, Soga, Somali, Spanisch, Sundanesisch, Swahili, Süd-Ndebele, Süd-Sotho, Taita, Taroko, Teso, Tongaisch, Tschechisch, Tsong, Tswana, Turkmenisch, Türkisch, Ungarisch, Usbekisch, Vunjo, Walisisch, Walliserdeutsch, Wallonisch, Westfriesisch, Wolastoqey, Wolof, Xhosa, Zhuang, Zulu

Die Liste entspricht der Sprachenzeichennorm ISO 639-1-3.

Nicht-lateinische Fließtextschriften

Nicht-lateinische Schriften umfassen Schriftsysteme, die anstelle lateinischer Schriftzeichen zum Beispiel arabische, kyrillische oder chinesische Zeichen beinhalten. Mit einem Schriftsystem lassen sich meist mehrere Sprachen schreiben (zum Beispiel mit dem arabischen Schriftsystem Sprachen wie Arabisch, Urdu, Paschtu, Persisch (Dari/Farsi)).

Die Notwendigkeit der Darstellung nicht-lateinischer Schriften ergibt sich durch die DIN 91379 „Zeichen und definierte Zeichensequenzen in Unicode für die elektronische Verarbeitung von Namen und den Datenaustausch in Europa“ mit Ausgabedatum 2022-08. Basierend auf UNICODE wurde für jedes nicht-lateinische Zeichen, das in EU-Mitgliedsstaaten verwendet wird, beispielsweise griechische oder kyrillische Zeichen, eine eindeutige Zuordnung zu einem lateinischen Zeichen vorgenommen. Die DIN 91379 wendet sich vorrangig an Behörden und Organisationen, die IT-Verfahren betreiben, welche dem behördenübergreifenden Datenaustausch oder dem Datenaustausch mit Bürgerinnen, Bürgern sowie der Wirtschaft dienen und deckt in ihrer Gesamtheit die EU-Amtssprachen und die Amtssprachen Islands, Liechtensteins, Norwegens und der Schweiz ab sowie die deutschen Minderheitensprachen. Um fehlende UNICODE-Zeichen in der BundesSans zu ergänzen, kommt sekundär die Schriftart Liberation zum Einsatz.

Liberation

Die Schriftart Liberation soll ausschließlich für fehlende UNICODE-Zeichen in der BundesSans verwendet werden. Denn beim Einsatz von Liberation muss beachtet werden, dass bei dieser Schriftart das große I und das kleine l leicht verwechselt werden können. Da dies die Lesbarkeit und damit die Barrierefreiheit beeinträchtigen kann, muss bei der Darstellung von I und l in jedem Fall auf BundesSans zurückgegriffen werden.

Barrierefreiheit von Text

Zusätzlich zu einem klar leserlichen Schriftschnitt sind auch die Gestaltungsmerkmale von Text, Farbe und Größe entsprechend zu berücksichtigen. Die fehlerhafte Anwendung von Texten kann somit direkt zu einer Reduzierung der Benutzerfreundlichkeit des entsprechenden Frontends führen.

Die Standard-Schriftart für Bedienelemente und Inhalte ist BundesSans (14 pt, regular). Grundsätzlich gilt, ausreichende Schriftgrößen sind abhängig vom Betrachtungsabstand, von der Art des Textes und von der Sehschärfe der Lesenden. Individuelle Schriftgrößen können mit dem Schriftgrößenrechner auf leserlich.info ermittelt und entsprechend an den Nutzungskreis angepasst werden.

Rechtschreibung

Zu einem klaren, professionellen Gesamterscheinungsbild trägt auch eine korrekte Rechtschreibung sowie eine konsistente Groß- und Kleinschreibung bei. Während bei englischsprachigen Frontends zwischen verschiedenen Formen der Groß- und Kleinschreibung unterschieden wird, reicht es bei deutschsprachigen Frontends aus, die korrekte deutsche Rechtschreibung anzuwenden. Eine Ausnahme besteht darin, dass das erste Wort der Beschriftung eines Bedienelements immer großgeschrieben wird, unabhängig von der jeweiligen Wortart.

Vermeidung von technischem Jargon

Text muss immer in der Sprache der Nutzenden verfasst werden. Im Folgenden werden einige Beispiele für technische Begriffe und deren Übersetzung in allgemein verständliche Sprache aufgezeigt.

Dos

Don’ts

Bilder und Grafiken ergänzen den Text und vermitteln Informationen auf visuelle Weise. Sie unterliegen in erster Linie der Fachlichkeit beziehungsweise dem inhaltlichen Kontext und sollten nicht allzu oft als Schmuckgrafiken in Frontends integriert werden. Hier werden die Leitlinien für die Verwendung von Grafiken festgelegt, einschließlich Stilrichtlinien, Bildgrößen und im Ansatz deren Barrierefreiheit.

Jedes Bild benötigt eine Bildunterschrift und ein aussagekräftiges Alt-Attribut, um die Barrierefreiheit von Frontends zu unterstützen. So können die Inhalte für alternative Ausgabegeräte oder beim fehlerhaften Laden zugänglich gemacht werden. Des Weiteren soll die Bildgröße an den Inhalt angepasst werden, um sicherzustellen, dass die Informationen den Nutzenden übermittelt werden und kein horizontales Scrolling erforderlich ist.

Schriftgrafiken

Schriftgrafiken können nicht oder nur eingeschränkt an Benutzeranforderungen angepasst werden, weshalb sie nicht genutzt werden dürfen. Logos sind hiervon ausgenommen. Gründe dafür sind, dass ihre Farben und Schriftgrößen nicht individuell eingestellt werden können und die Schriftkanten bei einer Zoomvergrößerung meist unscharf werden.

Schmuckgrafiken

Schmuckgrafiken können zwar genutzt werden, sollten jedoch so wenig wie möglich eingesetzt werden. Solche Grafiken müssen entsprechend als Schmuckgrafik gekennzeichnet sein und benötigen deshalb auch keine Alt-Attribute.

Dos

Don’ts

Überschriften ermöglichen es Nutzenden, schnell die Hauptthemen einer Seite zu erfassen und sich zu orientieren. Sie helfen, Inhalte in logische Abschnitte zu gliedern, wodurch Nutzende die Informationen leichter aufnehmen und navigieren können.

Best Practices für die Verwendung von Überschriften

Zugänglichkeit

Typografie und Design

Stile und Akzente

Labels dienen dazu, Eingabefelder und andere Bedienelemente klar zu kennzeichnen, sodass Nutzende genau verstehen, welche Informationen erforderlich sind und welche Aktionen durchgeführt werden können. Ein konsistentes und gut durchdachtes Design von Labels trägt wesentlich zur Verbesserung der Benutzererfahrung bei.

Labels sind nicht nur visuelle Hinweise, sondern auch wesentliche Bestandteile der Barrierefreiheit. Sie ermöglichen es Screenreadern, die Beziehung zwischen einem Eingabefeld und seiner Beschreibung zu verstehen, was besonders für sehbehinderte Nutzende von großer Bedeutung ist. Ein korrekt implementiertes Label sorgt dafür, dass alle Nutzenden, unabhängig von ihren Fähigkeiten, Benutzereingaben und andere interaktive Elemente problemlos nutzen können.

Best Practices für die Verwendung von Labels

Zugänglichkeit

Stil und Design

Interaktive Elemente

Schaltflächen und Links: Labels können auch für interaktive Elemente wie Schaltflächen und Links verwendet werden. Hier sollten ARIA-Labels (aria-label) oder ARIA-Beschreibungen (aria-labelledby) eingesetzt werden, um die Zugänglichkeit zu verbessern. Beispiel: