Kernkraft

Anforderungen an digitale Erscheinungsbilder

Geschrieben von Bastian Ehl veröffentlich am in der Kategorie Design, UX
Digitale Anforderungen an Erscheinungsbilder

Das Corporate Design, also das visuelle Erscheinungsbild ist das Aushängeschild eines Unternehmens oder einer Marke. Es sollte möglichst unverwechselbar und von hohem Wiedererkennungswert sein – über alle Medien und Formate hinweg.

Es hakt aber leider immer wieder an einer typischen Stelle: Der Tauglichkeit für digitale Anwendungen.

Selbst 2020 sind Erscheinungsbilder immer noch häufig primär für Print optimiert und damit oft zu unflexibel für die Nutzung auf Webseiten. Wirklich crossmedial ist selten ein Erscheinungsbild gedacht, um zum Beispiel auch den Anforderungen an Intranet-Lösungen oder andere Unternehmens-Software gerecht zu werden.

Dabei ist die Notwendigkeit der flexiblen Anwendung ebenso alt, wie das Erscheinungsbild selbst. Betrachtet man die Heraldik in der Antike als Urtyp des Corporate Designs, sah man hier schon mit einer breiten Palette an Anforderungen konfrontiert. Einheitliche Farben für Waffenröcke, Flaggen und Schilde, aber auch ein Wappen, das gemalt oder gestickt werden konnte, waren typische Anwendungen. Gleichzeitig musste das Wappen aber auch einfarbig als Wachssiegel funktionieren.

Ritter und Wachssiegel

Mehr Schweizer Taschenmesser als Picasso

Aber springen wir wieder zurück ins Jahr 2020. Allein die Anforderungen, die eine responsive Darstellung an die Motiv-Auswahl und die Produktion eines Kampagnenmotivs stellt, überfordern nach unserer Erfahrung selbst große und etablierte Agenturen.

Noch eine Schippe drauf legt die Nutzung von Bewegtbild anstatt klassischer Fotografie in Kombination mit der Darstellung auf verschiedenen Endgeräten. Und da haben wir über die Anforderungen an Farben, Kontraste, Schrift und Logo-Gestaltung noch nicht mal angefangen nachzudenken.

Die Königsdisziplin bildet dann aber die schlichte Nutzung für Software, die im Unternehmenskontext verwendet wird. Hier spielen dann plötzlich die Arbeitsstättenverordnung und möglicherweise die Barrierefreie Informationstechnik Verordnung eine Rolle. Deren Anforderungen lassen dem Gestalter deutlich weniger Spielraum und fordern im Gegenzug auch noch die strikte Einhaltung verbindlich definierter Standards.

Erscheinungsbilder sind keine Kunst, sondern Gebrauchs-Design, dass flexibel vielen Zwecken dienen können muss. Es hängt nicht gerahmt im Museum, stattdessen zieht der Pförtner damit gerade die Schrauben der Eingangstüre fest.

Was muss also konkret beachtet werden?

Farben

Der Aufbau digitaler User Interfaces stellt klare Anforderungen an die im Corporate Design definierten Farben. Drei Farben werden allein für die üblichen Zustände interaktiver Elemente benötigt.

Button States

 

Darüber hinaus spielt der Kontrast der Farben untereinander eine große Rolle. Für eine optimale Lesbarkeit sollte zwischen Schrift und Hintergrund ein Mindestkontrast von 4,5:1 eingehalten werden. Auf im Business-Kontext eingesetzte Applikationen bezogen, stellen zu geringe Kontraste einen vermeidbaren Verstoß gegen die Arbeitsstättenverordnung dar. Sie wirken selbst für Nutzer mit einem ausgezeichneten Sehvermögen für eine vorzeitige Ermüdung und damit für einen Verlust an produktiver Arbeitszeit.

Kontrast - zu gering im Vergleich zu hoher Kontrast

 

Unterschätzt wird auch immer wieder die Wirkung auf Farben für Personen mit einer Farbsehschwäche. Knapp 10% der männlichen Bevölkerung leiden an einer Farbsehschwäche oder sogar Farbenblindheit. Frauen sind deutlich weniger betroffen.

Wenn zum Beispiel Statusmeldungen nur mit grün für „ok“ und rot für „Fehler“ codiert werden, kann eine Person mit Rot-Grün Schwäche diese nicht auseinanderhalten. Deshalb hat sich als Lösung etabliert, eine Doppel-Codierung von Farbe und Icon zu nutzen (siehe „Icons“ weiter unten).

Eine Farbsehschwäche kann auch Text und Hintergrund zu einer undefinierbaren Masse zusammenschmelzen lassen. Die Farbwelt sollte hier ebenfalls entsprechend in ihrer Wirkung evaluiert werden, um dieses Problem direkt zu umgehen.

Beispiel Farbblindheit

Schrift

Es sollte eine Schrift gewählt werden, die auch an Bildschirmen gut lesbar ist. Das wird primär durch zwei Faktoren erreicht. Zum einen eine möglichst große X-Höhe der Schrift und zum anderen der Verzicht auf Serifen.

 

Höhe der Schrift

 

Insbesondere größere Organisationen haben aber, meist unbemerkt und auch selten an die Agentur gebrieft, noch mehr Anforderungen an eine Schrift. Mittelständische und Großunternehmen setzen immer mehr Individualsoftware ein. Diese folgt in ihrer Gestaltung meist dem Corporate Design.

Hier gilt die Arbeitsstättenverordnung und damit eine Pflicht zu einem Mindeststandard bei der Ergonomie des User Interfaces. Für Schriften bedeutet das konkret die Einhaltung der DIN 1450, der Norm für Lesbarkeit. Zahlreiche Schriften gibt es aus diesem Grund extra in einer DIN zertifizierten Version, bei der Form, Strichstärken etc. entsprechend optimiert sind. Damit wird sichergestellt, dass auch Mitarbeiter mit Einschränkungen des Sehvermögens problemlos mit der Software arbeiten können.

 

DIN1450-konforme Schrift

 

Zudem ist grundsätzlich zu prüfen, ob das definierte Schriftsystem auch alle Anforderungen an eine digitale Nutzung erfüllt, oder ob es mehrere Systeme geben muss, die auf ihren jeweiligen Zweck hin optimiert sind.

Eine einfache Kontrollfrage ist an dieser Stelle: Passen die definierten Schriftarten, -größen und -schnitte zur üblichen Syntax für den Content auf Webseiten (H1, H2, H3, Lead-Text, Fließtext etc.)?

Logo

Um in allen Viewports zu funktionieren, braucht es meist mehrere Ausprägungen des Logos, oder aber die Möglichkeit einer flexiblen Anordnung von Signet, Wortmarke und ggfs. eines Claims.

responsives Logo

 

Das Logo sollte so gestaltet werden, dass es auch noch in einer kleinen Darstellung einwandfrei erkennbar bleibt. Alternativ ist eine vereinfachte Version zu definieren. Insbesondere feine Linien und ein hoher Detailreichtum verursachen bei der Skalierung Probleme bis hin zur völligen Unleserlichkeit.

skaliertes Logo

 

Linien sollen nur waagerecht, senkrecht oder im 45° Winkel verlaufen, da es sonst zu hässlichen Treppenbildungen kommt. Je weiter Retina-Displays auch in den Desktop-Bereich vordringen, desto unwichtiger wird aber diese Anforderung.

Bilder

Bilder, insbesondere wichtige Kampagnenmotive, die über alle Kanäle genutzt werden sollen, müssen erfahrungsgemäß in mehreren Ausprägungen produziert werden. Wurde früher ein Motiv für eine Großflächenkampagne fotografiert und dann einfach auf der Webseite weitergenutzt, ist das spätestens seit der Einführung von Responsive Design nicht mehr möglich. Zu unterschiedlich sind die einzelnen Viewports.

Viewports

 

Bei Videos muss sich die Story auch ohne Ton erschließen, wenn sie automatisch starten sollen. Zudem darf ein Beschnitt des Bildausschnitts auf verschiedenen Viewports ebenso nicht Teile der Handlung unsichtbar machen. Das bedingt in den meisten Fällen auch hier die Produktion mehrerer Varianten.

Icons

Ein fester Bestandteil von digitalen User Interfaces sind Icons. Sie dienen entweder als Ergänzung zu Texten auf Schaltflächen als Erklärungshilfe für den Nutzer, können aber auch eigenständig für den direkten Aufruf von Funktionen genutzt werden.

Beispiel Icons

 

Auch für Icons sollte ein homogener Stil definiert werden, der sich harmonisch in das Erscheinungsbild einfügt. Die Wahl der Methapern sollte stets erwartungskonform erfolgen. Setzen Sie also keine neuen Ausprägungen für etablierte Standardfunktionen wie Warenkorb, Menü, Kontakt etc. ein.

Doppelcodierung von Systemmeldungen und Schaltflächen hilft Nutzern mit eingeschränktem Sehvermögen.

Doppelcodierung fehlender Eingabe

In Farbe und bunt

Sie benötigen Beratung rund um Ihr Erscheinungsbild oder haben Optimierungsbedarf?

Unsere Gestaltungsexperten freuen sich auf ihre Mail oder einen Anruf.