Inklusives Design: 8 Grundprinzipien, an die Sie sich halten sollten

Viele Menschen neigen dazu zu glauben, dass barrierefreies Design und inklusives Design dasselbe bedeuten. Doch das ist nicht der Fall.

Damit jeder seinen Teil dazu beitragen kann, inklusivere Gemeinschaften zu schaffen, ist es wichtig, die wesentlichen Unterschiede zwischen diesen beiden Begriffen zu verstehen.

In diesem Blog erklären wir Ihnen genauer, was inklusives Design bedeutet, führen Sie durch die zentralen Gestaltungsprinzipien und zeigen anhand von Beispielen, was Sie tun sollten – und was nicht.

Was ist ein inklusives Webdesign?

Inklusives Webdesign ist ein Prinzip der Benutzererfahrung (UX). Es fordert Designer dazu auf, bei der Gestaltung digitaler Produkte und Plattformen verschiedene Umgebungen und Lebensumstände von Nutzergruppen zu berücksichtigen.

Inklusives Design bezieht sich auf dauerhafte, temporäre und situationsbedingte Faktoren, die jemanden daran hindern könnten, auf ein Produkt oder eine Dienstleistung zuzugreifen oder damit zu interagieren.

Ein inklusives Design jeglicher Art zu schaffen bedeutet, dass Designer auf Annahmen über Geschlecht, Alter oder ethnische Zugehörigkeit verzichten müssen. Produkte auf der Basis solcher Annahmen zu entwickeln, kann nicht nur verletzend sein, sondern auch zu einer schlechten Nutzererfahrung führen.

Warum inklusives Design wichtig ist

Zwischen 2017 und 2020 haben über 8.000 Amerikaner Klagen nach dem Disabilities Act Title III eingereicht. Im Jahr 2021 stieg diese Zahl um weitere 14,3 %.

Das zeigt: Online-Nutzer sind nicht mehr bereit, mangelnde Barrierefreiheit hinzunehmen – sie kennen ihre Rechte inzwischen viel besser.

Eine weitere Studie von WebAIM (1) ergab, dass über 42 % der Online-Nutzer das Gefühl hatten, dass sich in Bezug auf Barrierefreiheit und Benutzerfreundlichkeit wenig geändert habe. 18,5 % gaben sogar an, dass sich die Situation verschlechtert habe. Das verdeutlicht, wie viel Unternehmen und Website-Betreiber noch tun können, um wirklich allen Nutzern gerecht zu werden – auch älteren Menschen.

Inklusives Design sollte für alle Unternehmen eine zentrale Rolle spielen – hier ist warum:

• Marken, die inklusives Design priorisieren, können kostspielige Klagen und Imageschäden vermeiden.
• Wer auf inklusives Design setzt, erschließt automatisch eine größere Zielgruppe, was sich positiv auf den Umsatz auswirken kann.
• Inklusives Design zwingt Designer dazu, zurück zu den Grundlagen zu gehen, um bessere Produkte zu schaffen.
• Wenn sich Nutzer gehört und berücksichtigt fühlen, stärkt das das Vertrauen in die Marke – und kann zu Weiterempfehlungen führen.
• Websites mit einem inklusiven und ansprechenden Erlebnis schneiden in Suchergebnissen oft besser ab.

Inklusives Design vs. Barrierefreies Design

Werfen wir einen Blick auf die Unterschiede zwischen inklusivem und barrierefreiem Design.

Während sich barrierefreies Design ausschließlich auf die Bedürfnisse von Menschen mit Behinderungen konzentriert, richtet sich inklusives Design an alle.

Barrierefreies Design bezieht sich in erster Linie auf dauerhafte Beeinträchtigungen, wie z. B. Hör-, Bewegungs-, Seh- oder kognitive Einschränkungen. Inklusives Design hingegen berücksichtigt dauerhafte, temporäre und situationsbedingte Beeinträchtigungen.

Beispiele:

• Dauerhafte Beeinträchtigung: Eine Person, die blind geboren wurde und auf einen Screenreader angewiesen ist.
• Temporäre Beeinträchtigung: Eine Person, die kürzlich an den Augen operiert wurde und ein Augenpflaster trägt – das beeinträchtigt vorübergehend die Sehkraft.
• Situative Beeinträchtigung: Eine Mutter, die zu Hause arbeitet und oft abgelenkt ist.

Dann ist da noch das Endprodukt. Barrierefreies Design zielt auf die Benutzerfreundlichkeit für Menschen mit Behinderungen ab, während inklusives Design eine Methodik ist. Es zwingt Designer dazu, darüber nachzudenken, wie sich ihre Entwürfe auf alle Nutzer auswirken – das bedeutet, die gesamte Nutzerreise steht im Mittelpunkt.

Und schließlich gibt es auch den rechtlichen Aspekt: Barrierefreies Design unterliegt Gesetzen und Standards wie WCAG und ADA, während diese Regelungen nicht zwingend für inklusives Design gelten.

8 zentrale Prinzipien des inklusiven Webdesigns

Hier sind die wichtigsten Standards, die Sie bei inklusiven Designprojekten beachten sollten:

1. Flexibilität bieten

Ihre Website muss für alle Nutzer geeignet sein. Das bedeutet jedoch nicht, dass Sie für jede Zielgruppe eine eigene Version erstellen müssen. Stattdessen sollten Sie zusätzliche Funktionen einbauen.

Beispiele:

• Eine vereinfachte Version Ihrer Website für Mobilgeräte
• Untertitel für Videos – für gehörlose Nutzer oder für Menschen, die unterwegs keinen Ton einschalten können

2. Die Umgebung des Nutzers berücksichtigen

Auch das Umfeld des Nutzers beeinflusst die Benutzererfahrung. Daher sollten situationsbedingte Herausforderungen mitgedacht werden.

Beispiel: Wird Ihre App auch dann nutzbar sein, wenn jemand nur eine Hand frei hat? Solche Szenarien in der Designphase zu berücksichtigen, ist ein gutes Beispiel für inklusives Design.

3. Konsistenz beibehalten

Kreativität ist wichtig, aber ein konsistentes Design erhöht die Benutzerfreundlichkeit. Wenn Elemente unterschiedlich aussehen oder sich unterschiedlich verhalten, kann das zu Frustration führen.

Elemente wie Buttons und Navigation sollten einheitlich gestaltet sein – das verbessert die Nutzererfahrung und Conversion-Rate.

4. Nutzern Kontrolle geben

Je mehr Kontrolle Nutzer über die Gestaltung und Bedienung Ihrer Website haben, desto inklusiver wird sie.

Installieren Sie z. B. Bedienfelder, mit denen Nutzer Kontraste, Zoomfunktionen und Schriftgrößen anpassen können.

Auch das Design von Animationen und Mustern sollte überdacht werden. Funktionen wie „Infinite Scroll“ (unendliches Scrollen) können etwa Menschen mit Tastatursteuerung oder Screenreadern benachteiligen.

5. Fehler reduzieren

Inklusives Design hilft, menschliche Fehler zu minimieren. Ihre Benutzeroberfläche sollte Fehler möglichst verhindern – und wenn sie auftreten, ohne Schamgefühl für die Betroffenen lösbar sein.

Beispiele:

• Sind Ihre Buttons groß genug, um auch in Eile leicht anklickbar zu sein?
• Wird ein Nutzer darauf hingewiesen, wenn ein Pflichtfeld in einem Formular fehlt?

6. Fokus auf Content-Layout legen

Eine inklusive Website macht es Besuchern leicht, relevante Informationen schnell zu finden.

Überprüfen Sie Ihr aktuelles Layout:

• Ist der Text scanbar?
• Gibt es genug Zwischenüberschriften in der richtigen Reihenfolge?
• Verwenden Sie Aufzählungen und Akkordeons, um Inhalte besser zu strukturieren?

7. Mehrwert für Besucher schaffen

Welche Funktionen können Sie ergänzen, um die Nutzererfahrung zu verbessern?

Denken Sie dabei an die typischen Features moderner Geräte – z. B. Geolokalisierung, Mikrofone oder Vibrationsfeedback.

Voice Search (Sprachsuche) ist ein gutes Beispiel: Sie unterstützt sowohl Nutzer mit Screenreadern als auch Sprachassistenten wie Alexa, Bixby oder Siri.

8. Mehrere Auswahlmöglichkeiten bieten

Wahlmöglichkeiten und Benutzerfreundlichkeit gehen beim inklusiven Design Hand in Hand.

Geben Sie den Nutzern mehr als nur eine Option, ohne sie zu überfordern.

Beispiel: Bieten Sie sowohl Buttons als auch Wischfunktionen zur Auswahl auf Ihrer Website oder App – so können Nutzer nach ihrer bevorzugten Methode handeln.

Schlechte Beispiele für inklusives Design

Nachdem Sie nun einige der grundlegenden Prinzipien des inklusiven Designs kennen, werfen wir einen Blick auf Websites, die Sie nicht als Vorbild nehmen sollten.

The Daily Mail

Obwohl dies eine angesehene und beliebte Nachrichtenquelle im Vereinigten Königreich ist, wirkt das Design der Seite überladen, und die Benutzeroberfläche ist veraltet.

Yale School of Art

Die Designer dieser Website waren in Bezug auf Layout und Schriftwahl sicher mutig – jedoch ging dies auf Kosten der Lesbarkeit und hat zu Inkonsistenzen im Markenauftritt geführt.

Bulgari

Auch wenn die Website optisch hochwertig wirkt, ist das Menü überladen, verfügt über Hover-Funktionen und nimmt den gesamten Bildschirm ein – was die Bedienung unnötig erschwert.

Gute Beispiele für inklusives Design

Hier sind einige Websites, die inklusives Design richtig umgesetzt haben:

Zendesk

Die Zendesk-Website ist nicht nur optisch ansprechend, sondern auch sehr benutzerfreundlich. Das Layout ist schlicht, Navigation und alle Handlungsaufrufe (CTAs) sind klar ersichtlich. Alle Bilder sind mit Alt-Text versehen und es wird mit Farbkodierung gearbeitet, die Bedeutung und Emotion vermittelt.

Headspace

Neben den Barrierefreiheitsfunktionen ist die Website von Headspace auf jedem Gerät zugänglich, hat eine klare Navigation, einfache CTAs und bietet eine kostenlose Testversion an. Damit richtet sich das Angebot auch an Nutzer mit begrenztem Budget, die dennoch auf ihre psychische Gesundheit achten möchten.

Railboard

Railboard gehört zu den benutzerfreundlichsten Apps für alle, die gerne mit dem Zug reisen. Sie berücksichtigt nicht nur die Bedürfnisse von Menschen mit Behinderungen, sondern eignet sich auch hervorragend für Personen, die nur eine Hand frei haben. Die großen Schaltflächen und die klare, einfache Benutzeroberfläche sind ideal für unterwegs.

Fazit

Inklusives Design ist unerlässlich, wenn Sie nicht nur Menschen mit Behinderungen, sondern auch Nutzer mit situativen oder temporären Einschränkungen ansprechen möchten.

Indem Sie diese Prinzipien anwenden, schaffen Sie ein Produkt oder eine Website, die Menschen gern nutzen und mit hoher Wahrscheinlichkeit weiterempfehlen werden.