Denken Sie an Ihre Lieblingswebsite oder -app – was macht sie am liebsten? Denken Sie nun an eine Website oder App, was Ihnen nicht gefällt. Die Interaktion der Nutzenden mit Ihrem Design und ihre User Experience auf Ihrer Website und in Ihrer App kann variieren.
Diese Erfahrung kann sich ändern, je nach Tageszeit, verwendetem Gerät, ob sie in der letzten Nacht genug geschlafen haben, ob sie sich krank fühlen, ob sie assistive Technologien verwenden und vieles mehr. Weltweit sind fast 8 Milliarden Menschen die Möglichkeiten, Ihre Designs zu nutzen und zu erleben.
Inklusives Design
Wie können wir alle potenziellen Anforderungen der Nutzenden gleichzeitig erfüllen? Inklusives Design. Inklusives Design stellt den Menschen in den Mittelpunkt und verbindet Inklusivität, Nutzerfreundlichkeit und Barrierefreiheit.
Im Gegensatz zum universellen Design, das sich auf ein einzelnes Design konzentriert, das so viele Menschen wie möglich verwenden können, konzentrieren sich inklusive Designprinzipien darauf, das Design für eine bestimmte Person oder einen bestimmten Anwendungsfall zu entwerfen und dieses Design dann auf andere auszudehnen.
Es gibt sieben Prinzipien für inklusives Design, bei denen der Schwerpunkt auf Barrierefreiheit liegt:
- Bieten Sie eine vergleichbare Erfahrung: Achten Sie darauf, dass Ihre Oberfläche allen die gleiche Erfahrung bietet, damit alle Aufgaben auf eine Weise erledigen können, die ihren Anforderungen entspricht, ohne die Qualität der Inhalte zu beeinträchtigen.
- Berücksichtigen Sie die Situation: Sorgen Sie dafür, dass die Benutzeroberfläche den Nutzern unabhängig von ihrer Situation eine wertvolle Erfahrung bietet.
- Achten Sie auf Einheitlichkeit: Halten Sie sich vertraute Konventionen an und wenden Sie sie logisch an.
- Kontrolle überlassen: Sie sorgen dafür, dass Nutzer auf die von ihnen bevorzugte Weise auf Inhalte zugreifen und damit interagieren können.
- Angebotsfreiheit: Bieten Sie den Nutzern verschiedene Möglichkeiten zur Erledigung von Aufgaben an, insbesondere bei komplexen oder nicht standardmäßigen Aufgaben.
- Inhalte priorisieren: Hilf Nutzern, sich auf zentrale Aufgaben, Funktionen und Informationen zu konzentrieren, indem du diese Elemente in der bevorzugten Reihenfolge innerhalb der Inhalte und des Layouts anordnest.
- Mehrwert bieten: Überlegen Sie, welchen Zweck und welche Bedeutung Funktionen haben und wie Sie damit die Nutzerfreundlichkeit für verschiedene Nutzer verbessern.
Personengruppen:
Bei der Entwicklung eines neuen Designs oder Features verlassen sich viele Teams auf User Personas, die sie durch den Prozess leiten. Personas sind fiktive Charaktere, die Ihre digitalen Produkte verwenden. Sie basieren oft auf quantitativen und qualitativen Nutzungsstudien.
Personas bieten außerdem eine schnelle und kostengünstige Möglichkeit, diese Funktionen während des gesamten Design- und Entwicklungsprozesses zu testen und zu priorisieren. Sie helfen dabei, Entscheidungen im Zusammenhang mit Websitekomponenten zu fokussieren, indem sie eine Ebene mit realen Überlegungen in das Gespräch einbeziehen, um eine Strategie abzustimmen und Ziele zu erstellen, die auf bestimmte Nutzergruppen ausgerichtet sind.
Beeinträchtigungen berücksichtigen
„Menschen sind alle unterschiedlich. Ich kann nur aus meiner Erfahrung sprechen. Wenn man eine gehörlose Person trifft, dann kennt man eine gehörlose Person – nicht wir alle.“
Meryl Evans vom ID24-Vortrag Deaf Tech: Travel Through Time from Past to Future.
Personas können als inklusives Designtool verwendet werden, wenn Sie Menschen mit Beeinträchtigungen in Ihre Personas einbinden. Dafür gibt es viele verschiedene Möglichkeiten. Sie können spezielle Personas erstellen, Beeinträchtigungen zu vorhandenen Nutzeridentitäten hinzufügen oder sogar ein Persona-Spektrum erstellen, um die dynamische Realität von situativen, temporären und dauerhaften Beeinträchtigungen widerzuspiegeln.
Unabhängig davon, wie Sie Menschen mit Beeinträchtigungen in Ihre Personas aufnehmen, sollten diese nicht auf realen Menschen oder Stereotypen basieren. Und Personas sind kein Ersatz für Nutzungstests.
- Name: Jane Bennet
- Alter: 57 Jahre
- Standort: Essex, Vereinigtes Königreich
- Beruf: UX-Engineer
- Beeinträchtigung: Handzittern aufgrund von junger Parkinson-Krankheit (YOPD)
- Ziele: Nutzung von Spracheingabe, um das Hinzufügen von Codevorschlägen zu vereinfachen; Fahrradausrüstung mit minimalem Tastenanschlag online finden
- Frustrationen: Websites, die nicht nur über die Tastatur unterstützt werden; Design-Apps mit kleinen Bereichen für die Interaktion durch Berührung.
Als UX-Entwicklerin entwirft und erstellt Jane Seiten, die entscheidend dafür sind, dass die Website ihres Unternehmens relevant bleibt. Sie unterstützt viele Teammitglieder im Laufe des Tages. Sie ist die Königin der Brandbekämpfung und jeder in der Abteilung ist Ansprechpartner, wenn etwas plötzlich ausfällt.
Da sie ihre Feinmotorik durch Zittern verliert, wird es ihr immer schwieriger, eine Maus zu benutzen. Beim Surfen im Web verlässt sie sich immer mehr auf die Tastatur. Jane widmet sich seit jeher ihrer körperlichen Fitness. Sie liebt Straßenrennen und BMX. Das machte es umso schwerer, als bei ihr letztes Jahr die Diagnose Young Onset Parkinson diagnostiziert wurde.
Simulatoren für Behinderungen
Seien Sie äußerst vorsichtig, wenn Sie Behindertensimulatoren verwenden, um Ihre Personas zu emulieren oder zu ergänzen.
Behindertensimulatoren sind ein zweischneidiges Schwert, da sie Sympathie oder Empathie aufbauen können – sie können von der Person, dem Kontext, in dem der Simulator verwendet wird, und vielen anderen unkontrollierbaren Faktoren abhängen. Viele Befürworter der Barrierefreiheit gegen den Einsatz von Simulatoren für Beeinträchtigungen und empfehlen, sich Filme, Demos, Tutorials und andere Inhalte zu suchen, die von Menschen mit Beeinträchtigungen erstellt wurden, und sich aus erster Hand über ihre Erfahrungen zu informieren.
„Ich denke, wir müssen ganz ehrlich sein, dass sich jede Simulationsaktivität nicht auf einige der wichtigsten Erkenntnisse auswirkt, die sehende Menschen in ihrem Herzen und in ihrem Kopf erkennen sollen. Blindheit ist nicht das Merkmal, das uns definiert, dass Missverständnisse und geringe Erwartungen in Bezug auf Blindheit unser größtes Hindernis sind.
Diese Missverständnisse schaffen künstliche Hürden, die uns daran hindern, uns vollständig zu beteiligen, und diese falschen Einschränkungen führen dazu, dass uns etwas zurückhält.“
Mark Riccobono, Präsident der National Federation of the Blind
Barrierefreiheit Heuristiken
Erwägen Sie, Ihrem Workflow eine heuristics hinzuzufügen, wenn Sie Ihre Personas und Designs erstellen. Heuristiken sind einfache Regeln für das Interaktionsdesign. Sie wurden 1990 von Jakob Nielsen und Rolf Molich eingeführt. Diese zehn Prinzipien wurden auf der Grundlage jahrelanger Erfahrung im Bereich Usability Engineering entwickelt und werden seitdem in Programmen für Design und Mensch-Computer-Interaktion verwendet.
2019 hat das Designteam von Deque eine neue Reihe von Heuristiken mit dem Schwerpunkt auf der digitalen Barrierefreiheit entwickelt und veröffentlicht. Laut ihrer Studie können bis zu 67% aller Fehler in Bezug auf die Barrierefreiheit einer Website oder App vermieden werden, wenn die Barrierefreiheit Teil des Designprozesses ist. Das ist ein großer Einfluss, der bereits erzielt werden kann, bevor auch nur eine einzige Codezeile geschrieben wird.
Ähnlich wie bei den ursprünglichen Heuristiken gibt es bei der Planung Ihres Designs zehn Heuristiken zur Barrierefreiheit.
- Interaktionsmethoden und -modalitäten: Nutzer können über die von ihnen gewählte Eingabemethode (z. B. Maus, Tastatur oder Berührung) effizient mit dem System interagieren.
- Navigation und Wegweiser: Nutzer können jederzeit im System einfach navigieren, Inhalte finden und ihren Standort bestimmen.
- Struktur und Semantik: Nutzer können die Struktur der Inhalte auf jeder Seite nachvollziehen und verstehen, wie das System funktioniert.
- Fehlervermeidung und Status: Interaktive Steuerelemente enthalten dauerhafte, aussagekräftige Anweisungen, um Fehler zu vermeiden und Nutzern einen klaren Fehlerstatus zur Verfügung zu stellen, aus dem hervorgeht, wo das Problem liegt und wie es behoben werden kann, wenn Fehler zurückgegeben werden.
- Kontrast und Lesbarkeit: Nutzer können Text und andere relevante Informationen leicht unterscheiden und lesen.
- Sprache und Lesbarkeit: Nutzer können die Inhalte leicht lesen und verstehen.
- Vorhersagbarkeit und Konsistenz: Nutzer können den Zweck jedes Elements vorhersagen. Es ist klar, in welcher Beziehung jedes Element zum System als Ganzes steht.
- Zeitlicher Ablauf: Nutzer haben genügend Zeit, um ihre Aufgaben zu erledigen, und verlieren keine Informationen, wenn ihre Zeit (z.B. 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 beschä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 Barrierefreiheitheuristiken haben, können Sie sie mithilfe des Arbeitsblatts zur Heuristik der Barrierefreiheit auf eine Persona oder ein Design anwenden. Folgen Sie dazu der Anleitung. Diese Übung ist aufschlussreicher, wenn Sie mehrere Perspektiven einbeziehen.
Ein Beispiel für eine heuristische Überprüfung der Barrierefreiheit für den Checkpoint für Navigation und Wegfindung könnte so aussehen:
Nachdem sich alle Teammitglieder die Seite oder Komponente angesehen und eine heuristische Überprüfung der Barrierefreiheit durchgeführt haben, wird die Gesamtsumme für jeden Prüfpunkt aufgezählt. An dieser Stelle können Sie entscheiden, wie Sie gefundene Probleme oder Auslassungen beheben, die für die Unterstützung der digitalen Barrierefreiheit von entscheidender Bedeutung sind.
Anmerkungen zur Barrierefreiheit
Bevor Sie Ihr Design an das Entwicklungsteam übergeben, empfiehlt es sich, Anmerkungen zur Barrierefreiheit hinzuzufügen. Anmerkungen dienen im Allgemeinen dazu, kreative Entscheidungen zu erläutern und verschiedene Aspekte des Designs zu beschreiben. Anmerkungen zur Barrierefreiheit konzentrieren sich auf Bereiche, in denen Entwickler mithilfe des Designteams oder einer auf die Barrierefreiheit spezialisierten spezialisierten Person leichter barrierefreie programmatische Entscheidungen treffen können.
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 Funktionalität umfassen. Sie verwenden oft Symbole und Beschriftungen, um den Prozess zu rationalisieren und das Design im Fokus zu behalten.
Die folgenden Designillustrationsbeispiele stammen aus dem Accessibility Annotations-Kit von Indeed.com für Figma.
Je nach Designprogramm sollten Sie mehrere Starter Kits für Annotationen für Barrierefreiheit haben. Wenn Sie möchten, können Sie auch Ihr eigenes Set erstellen. In beiden Fällen sollten Sie entscheiden, welche Informationen an das Übergabeteam gesendet werden müssen und welches Format am besten funktioniert.
Bei Anmerkungen zur Barrierefreiheit solltest du unter anderem die folgenden Punkte berücksichtigen:
- Farbe: Kontrastverhältnisse aller verschiedenen Farbkombinationen in der Palette einbeziehen.
- Schaltflächen und Links: zum Festlegen des Standardstatus, des Hover-Zustands, des Status „Aktiv“, „Fokus“ und „Deaktiviert“.
- Links überspringen: Heben Sie die verborgenen/sichtbaren Designaspekte und die Stellen auf der Seite hervor, auf die diese verweisen.
- Bilder und Symbole: Fügen Sie alternative Textempfehlungen für wichtige Bilder/Symbole hinzu.
- Audio und Video: Du kannst Bereiche/Links für Untertitel, Transkripte und Audiobeschreibungen markieren.
- Ü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 und Fokusbereich
- Tastatur: Geben Sie an, wo der Fokus beginnen soll (Alpha-Stopp), und legen Sie die folgende TAB-Reihenfolge fest.
- Google Formulare: Sie können Feldbeschriftungen, Hilfstext, Fehlermeldungen und Erfolgsmeldungen hinzufügen.
- Barrierefreie Namen: Geben Sie an, wie Hilfstechnologien das Element erkennen sollen.