Digital-Signage-Gestaltung: 12 Regeln für lesbare Bildschirme

Gute Digital-Signage-Gestaltung beginnt mit einer Tatsache: Der Bildschirm wird aus mehreren Metern Entfernung gelesen, mit einem kurzen Blick, von jemandem, der eigentlich wegen etwas anderem da ist. Alles Weitere folgt daraus. Eine Botschaft pro Folie. Schrift, die für den entferntesten Leser gesetzt ist, nicht für den Monitor am Schreibtisch. Kräftiger Kontrast. Genug Standzeit, um alles zweimal zu lesen. Langsame Bewegung oder gar keine. Nichts Wichtiges am Rand, und ein Layout für das Format, in dem der Bildschirm hängt.

Die zwölf Regeln unten setzen das um. Wo eine Zahl hilft, steht sie da, ausdrücklich als Faustregel. Der letzte Test ist immer derselbe: Stellen Sie sich dorthin, wo der entfernteste Leser steht, und lesen Sie den Bildschirm.

1. Eine Botschaft pro Folie

Ein Plakat verträgt eine Überschrift, drei Aufzählungspunkte und Kleingedrucktes, weil Menschen davor stehen bleiben. Ein Infobildschirm bekommt nur einen kurzen Blick. Geben Sie jeder Folie eine Aufgabe: dieses Gericht, dieses Angebot, dieser Hinweis. Eine Folie mit Überschrift, einer erklärenden Zeile und einem Anlass zum Handeln (ein Preis, ein Datum, ein QR-Code) ist voll.

Ein schneller Test: Können Sie in fünf Wörtern sagen, wofür die Folie da ist? Brauchen Sie dafür einen Satz mit „und“, sind es zwei Folien. Folien kosten nichts, und eine Playlist nimmt so viele auf, wie Sie wollen.

2. Schriftgröße nach dem entferntesten Leser

Bildschirmgröße und Schriftgröße sind dieselbe Entscheidung. Die Faustregel auf unserer Hardware-Seite lautet: Der entfernteste Leser sollte für große Schrift höchstens sechs Bildschirmhöhen entfernt sein, für eine Karte, die Zeile für Zeile gelesen wird, höchstens vier. Wie Sie den Bildschirm selbst auswählen, steht im Artikel zur Bildschirmgröße.

Weil diese Regel in Bildschirmhöhen misst, lässt sich auch die Schrift als Anteil der Bildschirmhöhe angeben, unabhängig davon, wie groß der Bildschirm ist. Eine Faustregel, die dazu passt:

• Text, der Zeile für Zeile gelesen wird (Einträge einer Speisekarte, ein Dienstplan): mindestens etwa ein Zwanzigstel der Bildschirmhöhe. Bei einem Full-HD-Layout mit 1080 Pixeln Höhe sind das rund 54 Pixel Schriftgröße.
• Überschriften und Preise, die von weiter hinten lesbar sein sollen: etwa ein Zehntel der Bildschirmhöhe, rund 108 Pixel.
• Nichts Wichtiges unter der Zeilengröße. Kleingedrucktes auf einem Bildschirm liest niemand. Muss es sein, bekommt es eine eigene Folie.

Prüfen lässt sich das ohne Leiter. Öffnen Sie die Folie im Vollbild auf einem 13- oder 14-Zoll-Laptop und lehnen Sie sich auf Armlänge zurück, etwa 70 Zentimeter. Das sind ungefähr vier Laptop-Bildschirmhöhen, also dieselbe Entfernung in Bildschirmhöhen wie beim Gast, der an der Theke die Karte liest. Müssen Sie am Laptop die Augen zusammenkneifen, muss er es an der Wand auch. Für die Probe mit sechs Bildschirmhöhen gehen Sie auf etwa einen Meter zurück.

3. Halb so viele Wörter

Schreiben Sie die Folie, dann streichen Sie die Hälfte. Zuerst fliegen die Adjektive, dann alles, was das Bild ohnehin zeigt. „Kürbissuppe 4,50 €“ schlägt „Probieren Sie unsere leckere hausgemachte Kürbissuppe der Saison, heute für nur 4,50 €“.

Text, der scrollen muss, war zu lang. Das einzige Scrollen, das auf einem Bildschirm funktioniert, ist eine kurze Zeile im Laufband. Für einen Hinweis setzt die App Text ein paar Wörter in großer Schrift mittig und passt sie an den Bildschirm an, und das ist die richtige Grundeinstellung.

4. Kontrastvorgaben sind die Untergrenze

Die Barrierefreiheitsrichtlinien für das Web verlangen ein Kontrastverhältnis von mindestens 4,5:1 zwischen normalem Text und Hintergrund, bei großer Schrift 3:1 (WCAG 1.4.3). Diese Werte gelten für einen Bildschirm in Lesenähe. An der Wand kommen Entfernung, Spiegelungen von Fenstern und Lampen und ein schräger Blickwinkel hinzu. Behandeln Sie die Werte deshalb als das Mindeste, nicht als Ziel.

In der Praxis heißt das:

• Dunkle Schrift auf hellem Grund oder helle auf dunklem. Mittelgrau auf Hellgrau ist der häufigste Fehler.
• Nie Text direkt auf ein unruhiges Foto setzen. Legen Sie ihn auf eine einfarbige Fläche, oder dunkeln Sie den Bildteil dahinter ab.
• Farbe nie allein Bedeutung tragen lassen. Rot und Grün sehen für viele Menschen mit Farbsehschwäche gleich aus, also braucht „ausverkauft“ neben dem Rot auch das Wort.
• Ein QR-Code gehört dunkel auf hellen Grund. Den liest jedes Handy, einen hellen Code auf dunklem Grund nicht jedes.

5. Hell oder dunkel, je nach Raum

Ein dunkler Hintergrund in einer gedämpften Bar oder einem Restaurant verhindert, dass der Bildschirm wie ein Leuchtkasten strahlt. Deshalb sind mehrere Designs der Menütafel dunkel. Ein heller Hintergrund passt in ein helles Café, eine Bäckerei oder ein Büro.

Hinter dem Schaufenster ist die Sonne die Konkurrenz, und dort zählt die Helligkeit des Panels mehr als Größe oder Gestaltung. Kein Farbschema rettet einen lichtschwachen Fernseher im direkten Licht. Der Vergleich Profi-Display oder Fernseher geht auf die Helligkeit ein.

Bleiben Sie innerhalb einer Schleife möglichst bei einer Variante. Eine Playlist, die zwischen weißen und schwarzen Folien hin- und herspringt, lässt den ganzen Raum flackern.

6. Standzeit für zweimaliges Lesen

Eine Folie, die verschwindet, während jemand sie liest, ist schlechter als keine. Eine Faustregel für die Standzeit: Lesen Sie die Folie langsam laut vor, stoppen Sie die Zeit und verdoppeln Sie sie. Für eine Überschrift mit Preis kommen vielleicht acht Sekunden heraus, für eine Seite der Speisekarte deutlich mehr.

Jeder Eintrag einer Playlist hat seine eigene Dauer. Setzen Sie sie einzeln, statt allem dieselbe zu geben. Apps mit mehreren Seiten takten sich selbst: Die Menütafel verteilt ihre Zeit auf ihre Seiten oder nimmt eine feste Sekundenzahl pro Seite, und die PDF-App blättert alle 5, 7 oder 10 Sekunden um.

7. Die Schleife gestalten, nicht nur die Folien

Niemand sieht eine Playlist von Anfang an. Menschen blicken in einem beliebigen Moment auf, bleiben so lange, wie sie da sind, und gehen. Daraus folgt zweierlei.

• Die Schleife passt zur Verweildauer. Wer in der Schlange steht, sieht einen Teil der Schleife; wer im Wartezimmer sitzt, sieht sie ganz, und das mehrmals. An die Theke gehört eine kurze Schleife, ins Wartezimmer eine längere mit mehr Abwechslung.
• Häufigkeit schlägt Position. Der erste Platz in einer Schleife bedeutet nichts. Ist die Karte das Wichtigste, gehört sie zweimal hinein.

8. Langsame Bewegung oder gar keine

Bewegung zieht den Blick an, und genau deshalb macht zu viel davon den Bildschirm zum Rauschen.

• Langsame Übergänge, wenige Schnitte. Ein Video mit schnellen Schnitten ist fürs Handy in der Hand gemacht, nicht für die Wand.
• Nichts darf blinken. Die Richtlinie erlaubt höchstens drei Blitze pro Sekunde (WCAG 2.3.1), weil Blinken bei Menschen mit fotosensitiver Epilepsie Anfälle auslösen kann. Auf einem Bildschirm im öffentlichen Raum bleiben Sie weit darunter. Selbst die App Notfallmeldung, deren einzige Aufgabe es ist, Aufmerksamkeit zu erregen, lässt ihren Rand langsam pulsieren, statt zu blinken.
• Keine scrollenden Absätze. Das Laufband läuft unabhängig von der Länge einer Nachricht mit gleichmäßigem Tempo; eine lange Zeile braucht einfach länger. Halten Sie die Zeilen kurz.

9. Mit stummem Bildschirm rechnen

Die meisten Bildschirme in Läden, Büros und Wartezimmern laufen stumm oder hängen in einem lauten Raum. Ein Browser startet Videos außerdem stumm, bis jemand auf die Seite klickt (die Android-App spielt den Ton ohne diesen Schritt), und die Bereiche eines geteilten Bildschirms spielen nie Ton. Also:

• Untertitel fest ins Video einbrennen, sobald jemand spricht.
• Videos wählen, die ohne Ton verständlich sind: das Produkt im Einsatz statt einer Person, die in die Kamera spricht.

10. Wichtiges vom Rand fernhalten

Viele Fernseher vergrößern das Bild am HDMI-Eingang leicht und schneiden die Ränder ab. Das nennt sich Overscan. Schalten Sie ihn in den Bildeinstellungen aus; je nach Hersteller heißt die Option etwa „Just Scan“, „Screen Fit“ oder „Full Pixel“. Lassen Sie danach trotzdem Rand: Eine verbreitete Faustregel hält Text und Logos mindestens 5 % von jeder Kante entfernt.

Läuft auf dem Bildschirm ein Laufband, halten Sie dessen Streifen oben oder unten frei, denn das Band läuft über alles, was gerade spielt.

11. Für das Format gestalten, in dem der Bildschirm hängt

Hoch- und Querformat sind verschiedene Flächen, nicht dasselbe Layout gedreht. Gestalten Sie in Format und Auflösung des Bildschirms: 1920 × 1080 quer, 1080 × 1920 hochkant. Full HD passt für die meisten Räume. 4K kostet mehr Speicher, Download und Rechenleistung, und aus vier Metern Entfernung erkennt auf einem 55-Zoll-Panel niemand die 4K-Auflösung.

Hochkant passt für die Speisekarte an der Tür oder neben der Schlange, für ein Plakat oder eine Liste. Quer passt für die meisten Bildschirme über der Theke und für alles mit Video. Die eingebauten Apps richten sich nach beidem: Jedes Design der Menütafel funktioniert hochkant, und die App Zonen & geteilter Bildschirm hat neben den Quer- auch Hochformat-Layouts. Legen Sie Bilder im Format des Bildschirms an, damit nichts beschnitten wird und keine schwarzen Balken entstehen.

12. Einheitlich bleiben

Einheitlichkeit macht aus einer Reihe von Folien einen geschlossenen Auftritt statt eines Stapels Flyer.

• Eine Schriftfamilie, höchstens zwei. Nehmen Sie eine mit offenen, einfachen Buchstaben. Dünne Schnitte und Schreibschriften zerfallen auf Distanz.
• Dieselbe Farbe bedeutet immer dasselbe: Preise in der Markenfarbe, Warnungen in einer Farbe, die sonst nirgends vorkommt.
• Das Logo immer in derselben Ecke, oder nur auf manchen Folien. Nicht jede Folie braucht es.
• Die Apps angleichen. Die Menütafel übernimmt Logo, Markenfarbe und Währung; Uhr und Countdown nehmen eine Akzentfarbe; die App Text nimmt Schrift- und Hintergrundfarbe, die App QR-Code die Farben von Code und Hintergrund. Fünf Minuten dafür, und die Apps sehen aus wie Teil Ihrer Gestaltung, nicht wie ein eingefügtes Widget.

Die Digital-Signage-Gestaltung testen, bevor sie an die Wand geht

Nehmen Sie die Folie, bei der Sie am unsichersten sind, und machen Sie den Laptop-Test. Dann spielen Sie sie auf den echten Bildschirm und lesen sie von der hintersten Stelle im Raum, zu der Tageszeit, zu der sie laufen wird. Die Vorschau im Dashboard nutzt denselben Code wie der Player; was Sie freigeben, ist also genau das, was läuft. Über Spiegelungen und Entfernung sagt Ihnen aber nur der Raum etwas.

Was auf die Folien kommt, steht in der Liste mit Digital-Signage-Ideen. Für Speisekarten im Besonderen geht der Artikel digitale Speisekarte gestalten auf Hierarchie und Fotos ein. Die 21-tägige Testphase enthält jede App und jedes Design der Menütafel, auf einem Bildschirm, ohne Kreditkarte.