Denken Sie an Ihre Lieblingswebsite oder ‑App. Was macht sie zu Ihrer Lieblingswebsite oder ‑App? Denken Sie nun an eine Website oder App, die Ihnen nicht gefällt. Was gefällt Ihnen nicht? Wie Nutzer mit Ihrem Design interagieren und wie sie Ihre Website und App erleben, kann variieren.
Diese Erfahrung kann sich ändern, je nach Tageszeit, verwendetem Gerätetyp, ob sie in der Nacht zuvor ausreichend geschlafen haben, ob sie krank sind, ob sie assistive Technologien verwenden und vieles mehr. Bei fast acht Milliarden Menschen weltweit sind die Möglichkeiten, wie Nutzer Ihre Designs verwenden und erleben, unbegrenzt.
Inklusives Design
Wie können wir alle potenziellen Anforderungen der Nutzer gleichzeitig erfüllen? Inklusives Design Beim inklusiven Design wird ein nutzerzentrierter Ansatz verwendet, der Inklusion, Nutzerfreundlichkeit und Barrierefreiheit miteinander verbindet.
Im Gegensatz zu universellem Design, das sich auf ein einzelnes Design konzentriert, das von möglichst vielen Menschen verwendet werden kann, konzentrieren sich die Prinzipien des inklusiven Designs darauf, für eine bestimmte Person oder einen bestimmten Anwendungsfall zu entwerfen und dieses Design dann auf andere auszuweiten.
Es gibt sieben barrierefreie inklusive Designprinzipien:
- Vergleichbare Benutzeroberfläche: Achten Sie darauf, dass Ihre Benutzeroberfläche für alle Nutzer gleich ist, damit die Nutzer Aufgaben entsprechend ihren Anforderungen erledigen können, ohne die Qualität der Inhalte zu beeinträchtigen.
- Situation prüfen: Achten Sie darauf, dass Ihre Oberfläche unabhängig von der jeweiligen Situation den Nutzern eine wertvolle Erfahrung bietet.
- Einheitlichkeit: Verwenden Sie bekannte Konventionen und wenden Sie sie auf logische Weise an.
- Kontrolle geben: Sorgen Sie dafür, dass Nutzer auf Inhalte zugreifen und mit ihnen interagieren können, wie sie es bevorzugen.
- Auswahl anbieten: Bieten Sie Nutzern verschiedene Möglichkeiten, Aufgaben zu erledigen, insbesondere solche, die komplex oder nicht standardmäßig sind.
- Inhalte priorisieren: Helfen Sie Nutzern, sich auf die wichtigsten Aufgaben, Funktionen und Informationen zu konzentrieren, indem Sie diese Elemente im Inhalt und Layout in der bevorzugten Reihenfolge anordnen.
- Mehrwert schaffen: Überlegen Sie sich, welchen Zweck und welche Bedeutung die Funktionen haben und wie sie die Nutzung für verschiedene Nutzer verbessern.
Nutzeridentitäten:
Bei der Entwicklung eines neuen Designs oder einer neuen Funktion stützen sich viele Teams auf Nutzeridentitäten, um sich durch den Prozess zu führen. Personas sind fiktive Charaktere, die Ihre digitalen Produkte verwenden und häufig auf quantitativen und qualitativen Nutzungsstudien basieren.
Personas bieten außerdem eine schnelle und kostengünstige Möglichkeit, diese Funktionen während des Design- und Entwicklungsprozesses zu testen und zu priorisieren. Sie helfen dabei, Entscheidungen im Zusammenhang mit Website-Komponenten zu treffen, indem sie dem Gespräch eine Ebene aus der realen Welt hinzufügen, um die Strategie abzustimmen und Ziele zu erstellen, die auf bestimmte Nutzergruppen ausgerichtet sind.
Berücksichtigung von Behinderungen
„Menschen sind alle unterschiedlich. Ich kann nur aus meiner Erfahrung sprechen. Wenn Sie eine gehörlose Person treffen, haben Sie eine gehörlose Person getroffen – nicht alle von uns.“
Meryl Evans vom ID24-Vortrag Deaf Tech: Travel Through Time from Past to Future.
Personas können als Tool für inklusives Design verwendet werden, wenn Sie Personen mit Behinderung in Ihre Personas einbeziehen. Es gibt viele verschiedene Möglichkeiten, dies zu tun. Sie können behindertenspezifische Personas erstellen, bestehenden Nutzeridentitäten Beeinträchtigungen hinzufügen oder sogar ein Personaspektrum erstellen, um die dynamische Realität von situativen, vorübergehenden und dauerhaften Behinderungen abzubilden.
Unabhängig davon, wie Sie Menschen mit Beeinträchtigungen in Ihre Personas einbinden, sollten diese nicht auf realen Menschen oder Stereotypen basieren. Und Personas sind niemals Ersatz für Nutzungstests.
- Name: Jane Bennet
- Alter: 57 Jahre
- Standort: Essex, Vereinigtes Königreich
- Beruf: UX-Ingenieur
- Beeinträchtigung: Handzittern aufgrund der Parkinson-Krankheit bei jungen Menschen
- Ziele: Mit der Spracheingabe Codevorschläge einfacher hinzufügen; Fahrradzubehör mit minimalen Tastenanschlägen online finden.
- Frustrierende Elemente: Websites ohne Unterstützung nur über die Tastatur; Apps für das Design mit kleinen Bereichen für die Touch-Interaktion.
Als UX-Entwicklerin entwirft und erstellt Jane Seiten, die für die Relevanz der Website ihres Unternehmens entscheidend sind. Sie unterstützt den ganzen Tag über viele Teammitglieder. Sie ist die Königin der technischen Probleme und die erste Anlaufstelle in der Abteilung, wenn etwas unerwartet nicht funktioniert.
Da ihre Feinmotorik durch Zittern beeinträchtigt ist, fällt es ihr zunehmend schwer, eine Maus zu verwenden. Sie greift immer häufiger auf die Tastatur zurück, um im Web zu surfen. Jane hat sich schon immer für ihre körperliche Fitness engagiert. Sie liebt Straßenrennen und BMX. Umso härter war es für sie, als sie letztes Jahr mit der jungen Parkinson-Krankheit diagnostiziert wurde.
Behinderungssimulatoren
Seien Sie äußerst vorsichtig, wenn Sie Simulatoren für Behinderungen verwenden, um Ihre Personas zu emulieren oder zu ergänzen.
Simulatoren für Behinderungen sind ein zweischneidiges Schwert, da sie Mitgefühl oder Empathie wecken können. Das hängt von der Person, dem Kontext, in dem der Simulator verwendet wird, und vielen anderen nicht kontrollierbaren Faktoren ab. Viele Befürworter der Barrierefreiheit nutzen Simulatoren für Beeinträchtigungen und empfehlen, nach Filmen, Demos, Anleitungen und anderen Inhalten zu suchen, die von Menschen mit Behinderung erstellt wurden, und aus erster Hand mehr über ihre Erfahrungen zu erfahren.
„Ich denke, wir müssen ganz ehrlich sein: Keine Simulation hat Auswirkungen auf einige der wichtigsten Erkenntnisse, die wir den Sehenden ins Herz und in den Kopf pflanzen möchten. Die Blindheit ist nicht das Merkmal, das uns definiert. Die Missverständnisse und niedrigen Erwartungen an Blinde sind unser größtes Hindernis.
Diese Missverständnisse schaffen künstliche Hürden, die uns daran hindern, in vollem Umfang mitzumachen, und diese falschen Einschränkungen führen zu etwas, das uns zurückhält.“
Mark Riccobono, Präsident der National Federation of the Blind
Heuristiken für die Barrierefreiheit
Erwägen Sie, beim Erstellen Ihrer Personas und Designs Heuristiken in Ihren Workflow einzubinden. Heuristiken sind Regeln für das Interaktionsdesign, die 1990 von Jakob Nielsen und Rolf Molich eingeführt wurden. Diese zehn Prinzipien wurden auf der Grundlage langjähriger Erfahrung im Bereich der Usability-Ergonomie entwickelt und werden seitdem in Design- und Mensch-Computer-Interaktionsprogrammen verwendet.
Im Jahr 2019 hat das Designteam von Deque eine neue Reihe von Heuristiken zur digitalen Barrierefreiheit entwickelt und veröffentlicht. Laut ihren Recherchen können bis zu 67 % aller Barrierefreiheitsfehler für eine Website oder App vermieden werden, wenn die Barrierefreiheit Teil des Designprozesses ist. Das ist eine enorme Auswirkung, die sich erzielen lässt, bevor überhaupt eine Codezeile geschrieben wird.
Ähnlich wie bei den ursprünglichen Heuristiken gibt es zehn Heuristiken für die Barrierefreiheit, die Sie bei der Planung Ihres Designs berücksichtigen sollten.
- Interaktionsmethoden und -modalitäten: Nutzer können mit der Eingabemethode ihrer Wahl (z. B. Maus, Tastatur, Touchbedienung) effizient mit dem System interagieren.
- Navigation und Wegbeschreibung: Nutzer können sich im System zurechtfinden, Inhalte finden und jederzeit feststellen, wo sie sich befinden.
- Struktur und Semantik: Nutzer können die Struktur der Inhalte auf jeder Seite nachvollziehen und verstehen, wie sie das System bedienen.
- Fehlervermeidung und Status: Interaktive Steuerelemente verfügen über persistente, aussagekräftige Anleitungen, um Fehler zu vermeiden. Außerdem stellen sie Nutzern klare Fehlerstatus bereit, die auf die Probleme hinweisen und ihnen zeigen, wie sie behoben werden, wenn Fehler zurückgegeben werden.
- Kontrast und Lesbarkeit: Nutzer können Text und andere wichtige Informationen leicht unterscheiden und lesen.
- Sprache und Lesbarkeit: Nutzer können die Inhalte leicht lesen und verstehen.
- Vorhersagbarkeit und Einheitlichkeit: Nutzer können den Zweck jedes Elements vorhersagen. Es ist klar, wie jedes Element sich auf das System als Ganzes bezieht.
- Zeit und Aufbewahrung: Nutzer haben genügend Zeit, ihre Aufgaben zu erledigen, und verlieren keine Informationen, wenn die Zeit (d. h. eine Sitzung) abläuft.
- Bewegung und Blinken: Nutzer können Elemente auf der Seite stoppen, die sich bewegen, blinken oder animiert sind. Nutzer dürfen durch diese Elemente nicht abgelenkt oder anderweitig geschädigt werden.
- Visuelle und akustische Alternativen: Nutzer können auf textbasierte Alternativen für alle visuellen oder akustischen Inhalte zugreifen, die Informationen vermitteln.
Sobald Sie ein grundlegendes Verständnis dieser Heuristiken für Barrierefreiheit haben, können Sie sie anhand des Arbeitsblatts zu Heuristiken für Barrierefreiheit und der bereitgestellten Anleitung auf eine Persona oder ein Design anwenden. Diese Übung ist aufschlussreicher, wenn Sie mehrere Perspektiven einbeziehen.
Ein Beispiel für eine heuristische Bewertung der Barrierefreiheit für den Navigations- und Wegbeschreibungs-Checkpunkt könnte so aussehen:
| Kontrollpunkte für Navigation und Wegweiser | Hervorragend (+2 Pkte) | Karten/Tickets (+1 Punkt) | Nicht bestanden (-1 pt) | – (0 Punkte) |
|---|---|---|---|---|
| Ist bei allen aktiven Elementen, die den Fokus erhalten, eine deutliche, sichtbare Anzeige zu sehen? | ||||
| Enthält die Seite einen aussagekräftigen Titeltext, in dem zuerst seitenspezifische Informationen stehen? | ||||
| Sind das Seitentitelelement und H1 gleich oder ähnlich? | ||||
| Gibt es aussagekräftige Überschriften für jeden Hauptabschnitt? | ||||
| Wird der Zweck der Links nur aus dem Linktext oder aus dem unmittelbaren Kontext definiert? | ||||
| Ist ganz oben auf der Seite ein Link zum Überspringen verfügbar, der bei Fokus sichtbar wird? | ||||
| Erleichtert die Organisation der Navigationselemente die Orientierung? |
Nachdem sich alle Teammitglieder die Seite oder Komponente angesehen und ihre heuristische Prüfung der Barrierefreiheit durchgeführt haben, werden die Gesamtwerte für jeden Prüfpunkt addiert. An dieser Stelle können Sie entscheiden, wie Sie gefundene Probleme beheben oder alle Auslassungen korrigieren, die für die Unterstützung der digitalen Barrierefreiheit von entscheidender Bedeutung sind.
Anmerkungen zur Barrierefreiheit
Bevor Sie Ihr Design an das Entwicklungsteam übergeben, sollten Sie erwägen, Anmerkungen zur Barrierefreiheit hinzuzufügen.
Anmerkungen werden in der Regel verwendet, um Designentscheidungen zu erläutern und verschiedene Aspekte des Designs zu beschreiben. Anmerkungen zur Barrierefreiheit konzentrieren sich auf Bereiche, in denen Entwickler mithilfe des Designteams oder eines Spezialisten für Barrierefreiheit programmatische Entscheidungen treffen können, die für mehr Barrierefreiheit sorgen.
Anmerkungen zur Barrierefreiheit können in jeder Phase des Designprozesses angewendet werden, von Wireframes bis hin zu High-Fidelity-Modellen. Sie können User Flows, bedingte Zustände und Funktionen umfassen. Sie verwenden häufig Symbole und Labels, um den Prozess zu optimieren und das Design im Mittelpunkt zu halten.
Die folgenden Designbeispiele stammen aus dem Kit für Anmerkungen zur Barrierefreiheit von Indeed.com für Figma.
Abhängig von Ihrem Designprogramm sollten Sie aus mehreren Starterkits für Anmerkungen zur Barrierefreiheit wählen. Alternativ können Sie auch eigene Sets erstellen. In beiden Fällen sollten Sie entscheiden, welche Informationen an das Team weitergegeben werden müssen und welches Format am besten geeignet ist.
Beispiele für Bereiche, in denen Anmerkungen zur Barrierefreiheit hilfreich sind:
- Farbe: Geben Sie die Kontrastverhältnisse aller verschiedenen Farbkombinationen in der Palette an.
- Schaltflächen und Links: Hier werden die Status „Standard“, „Bewegung des Mauszeigers“, „aktiv“, „im Fokus“ und „deaktiviert“ angegeben.
- Überspring-Links: Heben Sie die versteckten und sichtbaren Designelemente hervor und zeigen Sie, worauf sie auf der Seite verlinken.
- Bilder und Symbole: Fügen Sie Empfehlungen für alternativen Text für wichtige Bilder und Symbole hinzu.
- Audio und Video: Hier können Sie Bereiche und Links für Untertitel, Transkripte und Audiobeschreibungen hervorheben.
- Überschriften: Fügen Sie programmatische Ebenen hinzu und schließen Sie alles ein, was wie eine Überschrift aussieht.
- Orientierungspunkte: Heben Sie die verschiedenen Abschnitte des Designs mit HTML oder ARIA hervor.
- Interaktive Komponenten: Anklickbare Elemente, Hover-Effekte, Fokusbereich.
- Tastatur: Geben Sie an, wo der Fokus beginnen soll (Alpha-Stopp) und welche Tabulatorreihenfolge verwendet werden soll.
- Formulare: Fügen Sie Feldlabels, Hilfstext, Fehlermeldungen und Erfolgsmeldungen hinzu.
- Barrierefreie Namen: Geben an, wie Hilfstechnologien das Element erkennen sollen.