Inklusive Designprinzipien

Drei Heißluftballons hängen zusammen an einem ruhigen, sonnigen Himmel

Mitwirkende: Henny Swan, Ian Pouncey, Heydon Pickering, Léonie Watson

Bei diesen Prinzipien des inklusiven Designs geht es darum, den Menschen in den Mittelpunkt zu stellen. Es geht darum, für die Bedürfnisse von Menschen mit dauerhaften, vorübergehenden, situativen oder sich verändernden Behinderungen zu gestalten – eigentlich allen von uns.

Sie sollen jeder Person, die an der Gestaltung und Entwicklung von Websites und Anwendungen beteiligt ist – Designer*innen, User-Experience-Expert*innen, Entwickler*innen, Produktbesitzer*innen, Ideengeber*innen, Innovator*innen, Künstler*innen und Denker*innen – einen umfassenden Ansatz für inklusives Design bieten.

Die Prinzipien

Vergleichbare Erfahrungen bieten

Stelle sicher, dass die Bedienoberfläche für alle ein vergleichbares Erlebnis bietet, damit Benutzer*innen Aufgaben auf eine Weise erledigen können, die ihren Anforderungen entsprechen, ohne die Qualität des Inhalts zu beeinträchtigen.

Gesamte Beschreibung

Ob aufgrund der Umstände, der Wahl oder des Kontexts – Menschen sind vielfältig. Da Menschen unterschiedliche Ansätze und Tools zum Lesen und Bedienen von Schnittstellen verwenden, sollte das, was die Bedienoberfläche allen Benutzer*innen bietet, in Bezug auf Wert, Qualität und Effizienz vergleichbar sein.

Beispiele

  • Inhalt für Alternativen: Eine grundlegende Alternative, sei es Alternativtext, ein Transkript, eine Audiobeschreibung oder Gebärdensprache, macht den Inhalt zugänglich, aber um gleichwertig zu sein, muss sie das Wesentliche des Originals erfassen.
  • Ergonomische Merkmale: Durch die Bereitstellung synchronisierter Untertitel wird ein Video zugänglicher. Wenn sie jedoch anpassbar, farbcodiert und neu positionierbar sind, sorgt das für ein vergleichbareres Erlebnis.
  • Benachrichtigungen: Benachrichtigungen, die in einer Bedienoberfläche angezeigt werden, sind optisch offensichtlich, erfordern jedoch eine proaktive Erkennung durch Benutzer*innen von Bildschirmleseprogrammen. Ein vergleichbares Erlebnis für blinde Menschen kann durch die Nutzung einer Live-Region erreicht werden. Die Benachrichtigung erfordert dann keine explizite Aktion seitens der Benutzer*innen.

Link zum Abschnitt Vergleichbare Erfahrungen bieten

Umstand beachten

Menschen nutzen Ihre Bedienoberfläche in verschiedenen Situationen. Stelle sicher, dass deine Bedienoberfläche den Menschen unabhängig von ihren Umständen ein wertvolles Erlebnis bietet.

Gesamte Beschreibung

Menschen sind Erstbenutzer*innen, etablierte Benutzer*innen, am Arbeitsplatz, zu Hause, unterwegs und unter Druck. Alle diese Situationen können Auswirkungen haben. Für diejenigen, die die Interaktion bereits als Herausforderung empfinden, beispielsweise Menschen mit Behinderungen, kann diese Auswirkung die Nutzung besonders erschweren.

Beispiele

  • Farbkontrast: Wird ein Interface im Freien verwenden, verringert ein guter Kontrast die Auswirkungen von hellem Sonnenlicht.
  • Kontextsensitive Hilfe: Benutzer*innen benötigen möglicherweise Hilfe, wenn sie zum ersten Mal auf ein komplexes Formular oder eine komplexe Interaktion stoßen. Diese Hilfe kann überflüssig oder sogar ablenkend werden, wenn ein Mensch mit dem Formular oder der Interaktion vertrauter wird. Die kontextsensitive Hilfe bietet die Wahl auf die Hilfe zuzugreifen und sorgt für eine bessere Kontrolle über die Seite.
  • Untertitel für Unterwegs: Videoinhalte werden auf Mobilgeräten konsumiert, und zwar möglicherweise an öffentlichen Orten, wo die Leute die Inhalte möglicherweise lieber konsumieren möchten, ohne unsozial zu sein. Bei kleineren Displays ist der Ton standardmäßig ausgeschaltet und die Untertitel aktiviert.

Link zum Abschnitt Consider situation

Sei konsistent

Nutze bekannte Konventionen und wende sie konsequent an.

Gesamte Beschreibung

Vertraute Schnittstellen lehnen sich an etablierte Muster an. Diese sollten innerhalb der Bedienoberfläche konsistent verwendet werden, um ihre Bedeutung und ihren Zweck zu verstärken. Dies sollte auf Funktionalität, Verhalten, Redaktion und Präsentation angewendet werden. Du solltest die gleichen Dinge auf die gleiche Weise sagen und die Benutzer*innen sollten in der Lage sein, die gleichen Dinge auf die gleiche Weise zu tun.

Beispiele

  • Konsistente Designmuster: Verwende konsistente Web- und Plattformdesignmuster, um Vertrautheit und Verständnis aufzubauen.
  • Konsistenter Leitartikel: Verwende plattformübergreifend durchgängig einfache Sprache, einschließlich der redaktionellen Inhalte, auf die sich Screenreader-Benutzer*innen verlassen, wie z. B. Textalternativen, Überschriften, Beschriftungen für Schaltflächen usw. Es ist auch wichtig, den redaktionellen Stil konsistent zu halten, z. B. sicherzustellen, dass am Anfang der Artikel immer ein deutlich gekennzeichneter zusammenfassender Absatz steht oder dass Aufzählungszeichen immer mit einer fettgedruckten Definition beginnen.
  • Konsistente Seitenarchitektur: Verwende eine konsistente Seitenarchitektur über alle Templates hinweg, um Benutzer*innen das Durchsuchen und Navigieren wichtiger Inhalte zu erleichtern.

Link zum Abschnitt Sei konsistent

Kontrolle geben

Stelle sicher, dass die Menschen die Kontrolle haben. Menschen sollten in der Lage sein, auf die von ihnen bevorzugte Weise auf Inhalte zuzugreifen und mit ihnen zu interagieren.

Gesamte Beschreibung

Unterdrücke oder deaktiviere nicht die Möglichkeit, Standard Browser- und Plattformeinstellungen wie Ausrichtung, Schriftgröße, Zoom und Kontrast zu ändern. Vermeide außerdem Inhaltsänderungen, die nicht von Benutzer*innen initiiert wurden, es sei denn, es gibt eine Möglichkeit, dies zu kontrollieren.

Beispiele

  • Scrollsteuerung: „Unendliches Scrollen“ kann problematisch sein, insbesondere für Menschen, die per Tastatur navigieren, da sie nicht an dem Strom nachlandender Inhalte vorbeikommen. Geb die Möglichkeit, diese Funktion zu deaktivieren und durch die Schaltfläche „Mehr laden“ zu ersetzen.
  • Lass es aufhören: Einige Menschen finden, dass Animationen oder Parallaxen-Scrolling Übelkeit verursachen, andere empfinden sie als schlichte Ablenkung. Wenn sie automatisch abgespielt werden, sollten sie zumindest leicht zu stoppen sein, indem die Wiedergabesteuerung gut sichtbar ist.
  • Zoom zulassen: Es gibt viele Gründe, warum ein Mensch die Pinch-to-Zoom-Geste auf einem Touch-Gerät ausführen möchte. Stelle sicher, dass es nicht unterdrückt wird und dass der Inhalt bei der Verwendung nicht verdeckt wird.

Link zum Abschnitt Kontrolle geben

Biete Wahlmöglichkeiten

Erwäge die Bereitstellung verschiedener Möglichkeiten für die Erledigung von Aufgaben, insbesondere solchen, die komplex oder nicht standardisiert sind.

Gesamte Beschreibung

Es gibt oft mehr als eine Möglichkeit, eine Aufgabe zu erledigen. Man kann nicht davon ausgehen, welcher Weg bevorzugt wird. Indem du Alternativen für das Layout und die Aufgabenerledigung bereitstellst, bietest du Menschen Auswahlmöglichkeiten, die zu ihnen und ihren jeweiligen Umständen passen.

Beispiele

  • Mehrere Möglichkeiten, eine Aktion abzuschließen: Wenn möglich gebe mehrere Möglichkeiten zum Abschließen einer Aktion. Auf Mobilgeräten kann das Wischen zum Löschen eines Elements zusammen mit einer Bearbeitungsschaltfläche unterstützt werden, mit der Elemente ausgewählt und dann gelöscht werden können. Ein Beispiel hierfür ist in iOS-Mail.
  • Layout: Ziehe bei langen Inhaltslisten in Betracht, eine Raster- oder Listenlayoutoption anzubieten. Dies unterstützt Personen, die größere Bilder auf dem Bildschirm oder kleinere Zeilen wünschen.
  • Zugängliche Alternativen: Alternative Möglichkeiten zur Darstellung von Daten, wie z. B. Datentabellen für Infografiken, sollte Allen als Option zur Verfügung stehen und nicht als versteckter Link nur für Benutzer*innen von Bildschirmleseprogrammen. Zugängliche Alternativen können nicht nur einer bestimmten Zielgruppe, sondern allen Menschen zugute kommen, solange wir die Wahl bieten.

Link zum Abschnitt Biete Wahlmöglichkeiten

Priorisiere Inhalte

Helfe Benutzer*innen, sich auf Kernaufgaben, Funktionen und Informationen zu konzentrieren, indem du diese innerhalb des Inhalts und Layouts priorisierst.

Gesamte Beschreibung

Schnittstellen können schwer zu verstehen sein, wenn Kernfunktionen nicht klar dargestellt und priorisiert werden. Eine Website oder Anwendung bietet möglicherweise viele Informationen und Funktionen, aber die Benutzer*innen sollten sich jeweils auf eine Sache konzentrieren können. Identifiziere den Hauptzweck der Bedienoberfläche und dann die Inhalte und Funktionen, die zur Erfüllung dieses Zwecks erforderlich sind.

Beispiele

  • Aufgabenschwerpunkt: Zeige Funktionen und Inhalte bei Bedarf nach und nach an, nicht alle auf einmal.
  • Aufgaben priorisieren: Eine E-Mail-Anwendung dient hauptsächlich dem Schreiben und Lesen von E-Mails. Die Schaltfläche „Verfassen“ ist daher auf allen Bildschirmen und früh in der Fokusreihenfolge vorhanden. Der Posteingang hat Vorrang vor anderen E-Mail-Listen, z. B. „Gesendete“ und „Spam“-Nachrichten. Weniger genutzte Funktionen wie das Markieren oder Organisieren von E-Mails in Ordnern erscheinen später in der Fokusreihenfolge, da sie im Allgemeinen nur verwendet werden, wenn die Hauptaufgabe, das Lesen der E-Mail, abgeschlossen ist.
  • Inhalte priorisieren: Der Hauptinhalt einer Nachrichtenartikelseite ist die Geschichte, daher sollte sie sowohl visuell als auch in der Reihenfolge der Quelle vor anderen Inhalten stehen. Verwandte Inhalte, wie etwa ähnliche Artikel, sollten darauf folgen und nicht verwandte Inhalte danach.
  • Priorisiere Leitartikel: Links, Überschriften und Schaltflächen sollte eine einfache Sprache verwenden und den Haupttext an die erste Stelle setzen. Dies gilt sowohl für sichtbaren als auch für verborgenen Text. Dadurch ist der Text für Benutzer*innen von Bildschirmleseprogrammen sowohl visuell als auch akustisch leicht zu lesen. Einfache Sprache kommt auch Nicht-Muttersprachler*innen zugute und ist einfacher zu übersetzen.

Link zum Abschnitt Priorisiere Inhalte

Inhalte mit Mehrwert

Berücksichtige den Wert von Funktionen und wie sie das Erlebnis für verschiedene Menschen verbessern.

Gesamte Beschreibung

Funktionen sollten die Benutzbarkeit aufwerten, indem sie effiziente und vielfältige Möglichkeiten bieten, Inhalte zu finden und mit ihnen zu interagieren. Berücksichtige Gerätefunktionen wie Sprach-, Geolokalisierungs-, Kamera- und Vibrations-APIs und wie die Integration mit angeschlossenen Geräten oder einem zweiten Bildschirm Wahlmöglichkeiten bieten könnte.

Beispiele

  • Integration mit angeschlossenen Geräten oder zweitem Bildschirm: Die Verwendung von Sprachschnittstellen zur Steuerung von Multimedia, der Suche nach Inhalten, der Ausgabe von Musik oder TV bietet einen Mehrwert für Menschen, die Schwierigkeiten haben, andere Schnittstellen zu nutzen.
  • Integration mit Plattform-APIs: Erweitere die Funktionalität mithilfe von Plattformfunktionen. Die Vibrations-API macht Benachrichtigungen für gehörlose und schwerhörige Menschen besser nutzbar, während die Geolokalisierungs-API es Menschen mit Mobilitätseinschränkungen erleichtert, standortbasierte Dienste zu nutzen.
  • Erleichtere die Aufgabenerledigung: Füge den Eingabefeldern eine Schaltfläche „Passwort anzeigen“ hinzu, damit Menschen überprüfen können, ob sie den Text richtig eingegeben haben, oder füge eine Touch-Identifizierung für passwortgeschützte Bereiche hinzu.

Link zum Abschnitt Inhalte mit Mehrwert