Cloud Intelligence™Cloud Intelligence™

Cloud Intelligence™

Designprinzipien in einer verteilten digitalen Welt

By Aleksandra WalczakJan 24, 20234 min read

Diese Seite ist auch in English, Español, Français, Italiano, 日本語 und Português verfügbar.

Eine barrierefreie Website lässt sich leichter bedienen und stärkt die Kundenbindung. Wir zeigen Designprinzipien, mit denen Besucherinnen und Besucher mit und ohne Behinderung das bestmögliche Erlebnis bekommen.

cloud-design-principles-doit

Wer die Barrierefreiheit seiner Website optimiert, schafft ein positives Erlebnis für alle

Barrierefreiheit ist für jede Website und jede digitale Oberfläche entscheidend: Sie sorgt dafür, dass alle Menschen die Inhalte nutzen können – unabhängig von etwaigen Einschränkungen. Sehr gute Ressourcen für barrierefreies Webdesign sind etwa die Web Content Accessibility Guidelines oder die Accessibility Checklist.

Tastaturbedienung

Ein wichtiger Aspekt der Barrierefreiheit ist die Bedienung per Tastatur. Sämtliche Interaktionen auf der Website müssen sich allein über die Tastatur ausführen lassen – ganz ohne Maus. Das ist entscheidend für alle, die keine Maus nutzen können, etwa Menschen mit motorischen Einschränkungen oder Personen, die mit einem Screenreader arbeiten. Auch geübte Anwenderinnen und Anwender, die per Tastatur navigieren, profitieren davon, denn das geht oft schneller als mit der Maus.

Barrierefreie Multimedia-Inhalte

Ein weiterer Aspekt der Barrierefreiheit ist es, Multimedia-Inhalte für alle zugänglich zu machen. Dazu gehören Untertitel für Videos und Audiodeskriptionen für Audiodateien. So können auch gehörlose und schwerhörige Menschen die Inhalte verstehen und genießen. Untertitel helfen außerdem in lauten Umgebungen oder wenn die im Beitrag gesprochene Sprache nicht verstanden wird – sie lassen sich leicht in mehrere Sprachen übersetzen.

Farbkontrast

Auch der Einsatz von Farbe spielt für die Barrierefreiheit eine zentrale Rolle. Texte auf der Website sollten ausreichend Kontrast zum Hintergrund haben, damit sie sowohl für Menschen mit Sehbeeinträchtigungen als auch bei direkter Sonneneinstrahlung gut lesbar bleiben. Mit diesem Color-Contrast-Checker können Sie prüfen, ob Ihr Text genug Kontrast zum Hintergrund hat. Außerdem habe ich dieses Plugin entwickelt, mit dem sich Farbkontraste direkt in Figma prüfen und anpassen lassen.

Verständliche Sprache

Verständliche Sprache hilft allen, eine Website zu erfassen – unabhängig vom sozioökonomischen Hintergrund. Setzen Sie auf eine einfache, klare Sprache. Das gilt besonders für behördliche Websites, auf denen oft komplexe und für viele unbekannte Informationen vermittelt werden. Ein gelungenes Beispiel ist gov.uk: Die Seite erklärt selbst komplizierte Visaverfahren klar und prägnant. Für mehr sprachliche Klarheit hilft die Hemingway App.

Designprinzipien

Bei der Entwicklung neuer Produkte sollten Sie ein paar Designprinzipien im Blick behalten. Stellen Sie zuerst sicher, dass Ihr Produkt die Bedürfnisse Ihrer Zielgruppe trifft. Nutzerforschung und Tests sorgen dafür, dass die Oberfläche bei der Zielgruppe ankommt und intuitiv verständlich ist.

Laut Jakobs Gesetz verbringen Menschen die meiste Zeit auf anderen Websites als Ihrer. Sie erwarten, dass Ihre Seite ähnlich funktioniert wie alle anderen – vertraute Muster erleichtern also die Navigation. Ein typisches Beispiel ist das Diskettensymbol zum Speichern. Ein anderes Icon wäre eine Hürde, weil Ihre Nutzerinnen und Nutzer dessen Bedeutung erst lernen müssten.

Neben etablierten Designmustern ist Konsistenz im Produktdesign essenziell. Konsistenz bedeutet, durchgängig dieselbe Sprache, dasselbe Layout und dieselben Designelemente zu verwenden. So fällt es leichter, das Produkt zu bedienen und sich darin zurechtzufinden.

Auch Feedback an die Nutzer ist wichtig. Das können Meldungen oder Benachrichtigungen sein, die über Erfolg oder Misserfolg einer Aktion informieren oder zeigen, was im Produkt gerade passiert. So wird der Systemzustand verständlich – und das Gesamterlebnis spürbar besser.

Ein weiteres Prinzip lautet: Weniger ist mehr. So verlockend es ist, möglichst viele Funktionen einzubauen – das kann Nutzerinnen und Nutzer schnell überfordern. Der sogenannte Flexibility-Usability-Trade-off besagt: Je flexibler ein System wird, desto schlechter seine Usability – es wird komplexer und umständlicher in der Bedienung. Im Design gilt es, diesen Zielkonflikt im Blick zu behalten und die richtige Balance zu finden.

Barrierefreies Design für alle

Eine barrierefreie Website lässt sich angenehmer und einfacher bedienen – die Wahrscheinlichkeit steigt, dass Besucherinnen und Besucher wiederkommen und zu loyalen Kunden werden. Wer die Barrierefreiheit seiner Seite mit den hier vorgestellten Designprinzipien konsequent verbessert, sorgt dafür, dass Menschen mit und ohne Behinderung das bestmögliche Erlebnis haben.

Im Artikel erwähnte Tools

Web Content Accessibility Guidelines

Accessibility Checklist

Color-Contrast-Checker

Color-Contrast-Plugin für Figma

Hemingway App