UI, UX, Usability und Accessibility

UI, UX, Usability und Accessibility

0:00 Vier Wörter, die in Projektbesprechungen fast beliebig durcheinandergehen — und genau deshalb fangen wir mit ihnen an. Wer Barrierefreiheit für einen Prüfschritt am Ende hält, wird sie erleben wie eine Steuererklärung: lästig, teuer, immer zu spät. Wer sie als Qualitätsmerkmal begreift, so wie Sicherheit oder Performance, arbeitet in den nächsten drei Tagen mit ganz anderer Haltung.

0:22 Dieses erste Modul sortiert deshalb die Begriffe, bevor wir irgendetwas bauen. Es klingt nach Theorie, spart Ihnen aber später jede zweite Diskussion darüber, wer eigentlich zuständig ist. Und es führt unser durchgehendes Beispiel ein, das uns bis zum letzten Modul begleiten wird.

UI, UX, Usability und Accessibility

0:39 Der erste Tag legt das Fundament. Wir klären die Begriffe, schauen auf den Menschen vor dem Bildschirm und darauf, wie man Nutzungskontexte überhaupt herausfindet. Sie sehen in diesem Modul sechs Kapitel: erst die Abgrenzung der vier Begriffe, dann die Erfahrung als Ganzes, dann die drei Größen der Usability, dann Barrierefreiheit als Ergebnis, Haltung und Ziel.

1:00 Am Ende steht eine Übung, in der Sie das Gelernte an einem echten Ablauf ausprobieren. Nehmen Sie sich vor allem eines mit: Wir sortieren hier keine Vokabeln, wir sortieren Verantwortlichkeiten.

Vier Begriffe, vier Aufgabenbereiche

1:11 Fangen wir bei der Verwirrung an. In vielen Teams meinen vier Wörter dasselbe, und deshalb landet jeder Befund bei allen und bei niemandem. Dieses Kapitel zieht die Trennlinien — nicht, um Definitionen zu sammeln, sondern um Arbeit verteilen zu können. Stellen Sie sich ein Restaurant vor. Das UI ist der gedeckte Tisch: Teller, Besteck, Karte. Die UX ist der ganze Abend, von der Reservierung bis zur Rechnung.

1:36 Die Usability fragt, ob Sie satt geworden sind und wie mühsam das war. Und die Accessibility fragt, ob das auch gilt, wenn Sie im Rollstuhl kommen oder die Karte nicht lesen können. Vier Blickwinkel auf dasselbe Erlebnis, und jeder stellt eine andere Frage. Das Entscheidende daran: In den meisten Teams beantworten diese vier Fragen auch vier verschiedene Personen. Wer die Fragen vermischt, vermischt die Zuständigkeiten gleich mit.

2:03 Lesen Sie die Tabelle nicht als Vokabelliste, sondern als Diagnosewerkzeug. Die mittlere Spalte ist der Schlüssel: Jeder Begriff steht für genau eine Frage. Und die rechte Spalte sagt Ihnen, woran Sie merken würden, dass etwas im Argen liegt — beim UI im Entwurf, bei der UX in den Supportanfragen, bei der Usability in Erfolgsquoten und Abbrüchen, bei der Barrierefreiheit in Tastatur und Screenreader.

2:27 Wenn Ihnen morgen jemand einen Fehler meldet, gehen Sie diese drei Spalten durch. Meist ist nach zwanzig Sekunden klar, welche Frage berührt ist — und damit, wer arbeiten muss. Das ist der praktische Gewinn, und er ist größer als er klingt. Ein Befund, der sich zuordnen lässt, wandert nicht mehr im Kreis durchs Team. Die Maßnahme wird konkret — neuer Text, neuer Ablauf oder neue Semantik sind drei völlig verschiedene Arbeiten. Der Aufwand wird schätzbar, weil klar ist, wer ihn leistet.

2:56 Und der Fortschritt wird messbar, weil jede der vier Fragen eigene Kennzahlen mitbringt. Meine Einschätzung: Diese Trennung ist die billigste Prozessverbesserung, die Sie in einem Frontend-Team einführen können. Sie kostet eine Stunde Erklärung und spart über ein Projekt hinweg Wochen an Zuständigkeitsdebatten. Drei Fehler sehe ich immer wieder. Der erste: Barrierefreiheit unter Usability einsortieren und damit dem Design zuschlagen — dann fehlt sie im Code, wo sie eigentlich entsteht.

3:25 Der zweite ist der beliebteste und der schädlichste: UX als vornehmes Wort für Optik benutzen. Damit verschwindet der ganze Weg außerhalb des Bildschirms aus dem Blick. Der dritte ist subtiler: Zuständigkeit an eine Rolle hängen statt an eine Frage. Sobald die eine Person im Urlaub ist, fällt das Thema aus. Hängen Sie die Verantwortung an die Frage — die bleibt auch dann bestehen, wenn das Team wechselt.

User Experience als End-to-End-Erlebnis

3:50 Damit zum zweiten Begriff, und zum weitesten von allen. Die Erfahrung beginnt nicht dort, wo unser Code beginnt. Wir schauen uns an, wo sie tatsächlich anfängt, wo sie endet — und warum die teuersten Fehler genau dazwischen liegen. Ab jetzt haben wir ein durchgehendes Beispiel: Fahrtwind, ein Buchungsportal für Regionalbusreisen. Es begleitet uns durch alle Module.

4:12 Und an Fahrtwind sieht man das Prinzip sofort. Die Erfahrung beginnt nicht auf der Startseite, sondern schon in der Suchmaschine, mit dem Versprechen im Suchergebnis. Sie führt über die Bestätigungsmail und endet vielleicht erst Wochen später bei einer Erstattung nach einer abgesagten Fahrt. Jede dieser Stationen gehört zur Nutzungserfahrung.

4:31 Und wie bei einer Kette gilt: Nicht das schönste Glied bestimmt den Wert, sondern das schwächste. Wer nur einzelne Bildschirme entwirft, verantwortet die Erfahrung nicht — er verantwortet Ausschnitte. Was diese Tabelle zeigt, ist ein Muster: An jeder Station wird etwas entschieden, und an jeder Station kann dieselbe Reise enden. Interessant ist die dritte Spalte.

4:53 Fast alle typischen Brüche liegen nicht innerhalb einer Station, sondern an den Übergängen — zwischen Suchergebnis und Seite, zwischen Buchung und Mail, zwischen Selbstbedienung und Telefon. Das ist kein Zufall. Innerhalb einer Station ist ein Team zuständig, an den Übergängen zwei oder gar keins. Wenn Sie Ihre eigene Anwendung so aufschreiben, brauchen Sie keine Nutzerforschung, um die drei kritischsten Stellen zu finden. Sie stehen dann in der rechten Spalte.

5:20 Vier Gründe, und der letzte ist der unbequemste. Der schwächste Schritt bestimmt den Eindruck — deshalb bringt es wenig, den ohnehin guten Bildschirm noch schöner zu machen. Die teuersten Brüche sitzen an Systemgrenzen, wo Zuständigkeit endet. Support-Tickets und Kündigungsgründe sind übrigens hochwertige UX-Daten, sie liegen nur in einer anderen Abteilung und in einem anderen Werkzeug.

5:43 Und der letzte Punkt: Wer nur Screens entwirft, kann den Weg gar nicht verantworten. Das ist keine Kritik am Design, sondern eine Aussage über Zuschnitt. Verantwortung für Erfahrung braucht Zugriff auf den ganzen Weg, inklusive Mails, Belegen und Telefon. Der erste Stolperstein ist der Klassiker: Die betrachtete Reise beginnt beim Login, alles davor gilt als Sache des Marketings. Damit ist die Hälfte der Abbrüche aus dem Blick.

6:09 Der zweite: E-Mails, Belege und Rückfragen werden als Nebenprodukt behandelt — dabei ist die Bestätigungsmail für viele Menschen das eigentliche Ticket. Und der dritte wird fast überall übersehen: Der Ausstieg wird nicht gestaltet. Erstattung, Stornierung, Abbruch. Das sind unangenehme Momente, und genau deshalb prägen sie die Erinnerung besonders stark.

6:30 Ein sauber gestalteter Ausstieg kostet wenig und rettet erstaunlich viele Kundenbeziehungen.

Usability: Effektivität, Effizienz und Zufriedenheit

6:36 Jetzt wird es messbar. Usability ist der Begriff, zu dem es die klarsten Zahlen gibt — und leider auch die meisten Fehlmessungen. Wir schauen uns die drei Größen einzeln an und danach, warum jede von ihnen allein in die Irre führt. Denken Sie an eine Autofahrt. Effektivität heißt: Sie sind angekommen. Effizienz sagt, ob Sie zwanzig Minuten oder zwei Stunden gebraucht haben.

6:59 Und Zufriedenheit beschreibt, wie die Fahrt sich angefühlt hat — Stau, Baustellen, kaputtes Navigationsgerät. Alle drei sind wahr, und keine ersetzt die andere. Ein Formular kann vollkommen effektiv sein und trotzdem zermürbend: Alle kommen ans Ziel, aber jeder braucht drei Anläufe. Deshalb ist die eine große Usability-Zahl, die manche Werkzeuge versprechen, mit Vorsicht zu genießen. Sie mittelt drei verschiedene Aussagen zu einer, die keine davon mehr trägt.

7:29 Die spannende Spalte ist hier die rechte. Jede der drei Größen hat eine typische Art, falsch gemessen zu werden, und alle drei Fehler haben denselben Ursprung: Bequemlichkeit. Teilerfolge als Erfolg zu zählen ist bequemer als eine klare Abbruchdefinition. Das eigene Team als Maßstab zu nehmen ist bequemer, als echte Nutzer einzuladen — nur kennt das Team die Anwendung eben schon.

7:51 Und nach der Meinung zu fragen ist bequemer, als Verhalten zu beobachten, liefert aber vor allem Höflichkeit. Merken Sie sich als Faustregel: Wenn eine Messung auffällig einfach war, messen Sie vermutlich gerade etwas anderes als das, was Sie wissen wollten. Hier steckt die eigentliche Einsicht des Kapitels. Eine hohe Erfolgsquote bei sehr langer Bearbeitungszeit ist kein guter Befund, sondern ein Alarmsignal — die Leute kämpfen sich durch.

8:17 Zufriedenheit steigt zuverlässig mit hübscher Optik, ganz unabhängig davon, ob jemand ans Ziel kommt. Und Effizienzgewinne gehen häufig zulasten der Fehlertoleranz: Wer Schritte einspart, spart oft die Sicherheitsnetze ein. Erst im Zusammenspiel zeigen die drei Größen, wo eine Änderung wirklich gewirkt hat. Das ist ein bisschen wie beim Blutbild — ein einzelner Wert sagt selten etwas, das Muster schon.

8:41 Drei Fallen, die Ihnen die Daten verderben, bevor Sie sie auswerten. Erstens: nach Meinung fragen, wo man Verhalten hätte beobachten können. Menschen erzählen zuverlässig, was sie zu tun glauben, nicht, was sie tun. Zweitens: Zeit messen, ohne den Startpunkt vorher festgelegt zu haben — dann diskutieren Sie hinterher über Sekunden statt über Befunde.

9:03 Und drittens der stille Klassiker: Teilerfolge großzügig als Erfolg werten. Das schönt die Quote und macht sie gleichzeitig wertlos. Definieren Sie vorher, was ein Erfolg ist. Nachher findet sich immer eine Begründung.

Accessibility, Inclusive Design und Design for All

9:18 Nun zum Kernthema dieses Seminars. Drei Begriffe, die oft synonym verwendet werden und drei völlig verschiedene Dinge beschreiben: ein Ergebnis, eine Haltung und ein Ziel. Sie ersetzen einander nicht — sie brauchen einander. Der Unterschied lässt sich an einem Gebäude erklären. Accessibility ist das prüfbare Ergebnis: Kommt jemand im Rollstuhl bis in den dritten Stock, ja oder nein.

9:42 Das lässt sich messen. Inclusive Design ist die Haltung davor — hat beim Entwurf überhaupt jemand daran gedacht, oder wurde die Rampe nachträglich an die Fassade geschraubt. Und Design for All ist das Ziel: möglichst ein Weg für alle statt Haupteingang plus Hintertür. Übertragen auf Fahrtwind heißt das: Accessibility ist die Frage, ob eine Person mit Screenreader die Fahrt buchen kann. Alles andere entscheidet, wie teuer die Antwort wird.

10:08 Die rechte Spalte erzählt die eigentliche Geschichte, denn jeder der drei Begriffe scheitert auf seine eigene Weise. Barrierefreiheit scheitert am Zeitpunkt — erst am Ende geprüft, ist die Korrektur teuer und wird verschoben. Inclusive Design scheitert an der Besetzung: Niemand aus der betroffenen Gruppe war im Raum, also blieb es bei guten Absichten.

10:28 Und Design for All scheitert am Sonderweg, den man mit besten Absichten gebaut hat und der dann schlechter gepflegt wird als der Hauptweg. Wenn Sie sich eine Zeile merken wollen, dann diese letzte. Sonderwege veralten, Hauptwege werden gepflegt. Diese beiden Zeilen sind das ganze Seminar in Kurzform. Beide erzeugen visuell denselben Knopf. Beide bestehen jede Sichtprüfung, jeden Design-Review, jeden Screenshot-Vergleich.

10:53 Der Unterschied liegt darin, was das Element von sich aus mitbringt. Ein natives Schaltflächen-Element bringt Rolle, Name und Tastaturbedienung eingebaut mit — es ist fokussierbar, es reagiert auf Leertaste und Enter, und assistive Technologie erkennt es als Bedienelement. Das gestylte Container-Element bringt davon nichts mit. Für Auge und Kamera existiert es, für Tastatur und Screenreader nicht.

11:17 Merken Sie sich diesen Kontrast: Barrierefreiheit ist meistens keine Zusatzarbeit, sondern die Entscheidung für das richtige Element. Hier räumen wir mit dem häufigsten Einwand auf. Einschränkungen sind nicht nur dauerhaft. Sie sind auch vorübergehend — gebrochener Arm — oder situativ: grelles Sonnenlicht auf dem Display, ein Kleinkind auf dem Arm, laute Umgebung ohne Kopfhörer.

11:40 Die Anforderung an die Oberfläche ist in allen drei Fällen dieselbe. Dazu kommt die Demografie: Die Bevölkerung altert, und Alter bündelt mehrere leichte Einschränkungen gleichzeitig. Fast alles, was Sie für Barrierefreiheit tun, verbessert die Bedienbarkeit für alle spürbar. Und seit dem Barrierefreiheitsstärkungsgesetz ist es für viele Anbieter zusätzlich schlicht Pflicht. Über den Rechtsrahmen sprechen wir ausführlich in Modul sieben.

12:06 Der teuerste Fehler zuerst: eine eigene barrierefreie Fassung bauen. Das klingt fürsorglich, erzeugt aber zwei Produkte, von denen eines schlechter gepflegt wird — und Sie können raten, welches. Der zweite: Barrierefreiheit an ein Werkzeug delegieren, das automatisch Fehler zählt. Solche Werkzeuge finden je nach Untersuchung nur einen Bruchteil der tatsächlichen Probleme; darauf kommen wir in Modul fünfzehn zurück.

12:31 Und der dritte ist ein Sprachproblem mit Folgen: Aus dem Wort inklusiv eine Absichtserklärung machen, die niemand prüft. Haltung ohne prüfbares Ergebnis ist im Zweifel nur ein Satz auf einer Folie.

Attraktivität, Zielkonflikte und Produktqualität

12:43 Bleibt der vierte Aspekt, und der emotionalste: Schönheit. Sie ist kein Feind guter Gestaltung, aber ein schlechter Ratgeber im Streitfall. Dieses Kapitel zeigt, wie man aus einem Geschmacksstreit eine entscheidbare Frage macht. Schöne Oberflächen erzeugen Vertrauen, und Vertrauen verwechseln wir alle gern mit Qualität. Das ist menschlich — bei Autos, bei Restaurants und eben auch bei Software.

13:07 Gute Entwürfe entstehen aber nicht aus Geschmack, sondern aus dem Ausgleich dreier Kräfte: Was will das Geschäft, was braucht die Nutzerin, was lässt die Technik zu. Diese drei ziehen selten in dieselbe Richtung. Ein großer Teil der UX-Arbeit besteht deshalb gar nicht im Entwerfen, sondern darin, diese Spannungen überhaupt sichtbar zu machen.

13:27 Ein unausgesprochener Zielkonflikt wird nämlich trotzdem entschieden — nur eben nebenbei und von niemandem verantwortet. Vier nüchterne Beobachtungen. Ein aufgeräumter Dialog, der einen Fehler nicht erklärt, führt trotzdem zum Abbruch — Ästhetik ersetzt keine Information. Schönheit hebt zuverlässig die Zufriedenheit, aber nicht die Erfolgsquote; das ist in Studien gut belegt und im Alltag leicht zu übersehen.

13:51 Wer nur nach Optik entscheidet, hat im Streitfall kein Kriterium außer Hierarchie, und dann gewinnt der höchste Rang statt des besten Arguments. Und schließlich: Attraktivität kann man zeigen, Verständlichkeit muss man prüfen. Das ist der Grund, warum schöne Entwürfe Meetings gewinnen und verständliche Entwürfe Nutzer. Diese fünf Schritte sind ein kleines Ritual gegen endlose Debatten.

14:14 Zuerst benennen Sie die drei Kräfte, dann schreiben Sie in je einem Satz auf, was jede Seite konkret verlangt — das allein entschärft schon die Hälfte der Streitfälle, weil Forderungen oft weniger unvereinbar sind als gedacht. Dann markieren Sie die Annahme dahinter und machen daraus eine prüfbare Frage. Der fünfte Schritt ist der, der am häufigsten wegfällt und am meisten wert ist: die Begründung neben die Entscheidung schreiben.

14:37 Ohne sie führen Sie dieselbe Diskussion in drei Monaten noch einmal, mit anderen Beteiligten und ohne das Wissen von heute. Der erste Stolperstein ist elegant und deshalb gefährlich: Man löst den Konflikt im Layout auf. Beide Seiten bekommen ein bisschen Platz, niemand hat verloren — und die Entscheidung ist unsichtbar geworden.

14:57 Der zweite ist der schädlichste für dieses Seminar: Barrierefreiheit als Gegenspieler des Designs führen. Sie ist ein Qualitätsmerkmal, kein Kontrahent; wer sie als Gegner rahmt, verliert sie im ersten Kompromiss. Und der dritte: sich auf Geschmack einigen, wo eine prüfbare Frage möglich gewesen wäre. Prüfbare Fragen sind unbequem, weil sie eine Antwort erzwingen.

15:19 Genau deshalb sind sie wertvoll.

Übung — die vier Begriffe an einem Ablauf trennen

15:21 Genug sortiert — jetzt wenden Sie es an. In der Übung schauen Sie sich eine echte Buchung an und ordnen zu, was Ihnen auffällt. Die spannenden Momente sind dabei nicht die klaren Fälle, sondern die strittigen. Ihre Aufgabe ist bewusst einfach gehalten und trotzdem anspruchsvoll: Sie spielen eine Buchung durch, sammeln zehn Beobachtungen und ordnen jede einem der vier Begriffe zu.

15:44 Geübt wird dabei das Einordnen — aus einer Beobachtung eine Zuständigkeit ableiten, ohne vorschnell in Lösungen zu denken. Erfolgreich sind Sie, wenn am Ende jeder der zehn Befunde einem Begriff, einer benannten Rolle und einer begründeten Priorität zugeordnet ist. Wer schnell fertig wird, sucht bewusst einen Befund, der in zwei Schubladen passt, und begründet die Entscheidung.

16:05 Diese Grenzfälle sind die eigentlich lehrreichen — verraten Sie sich die Antwort noch nicht. Der Ablauf hat eine Logik, die man leicht überspringt. Sie gehen zuerst einmal komplett durch, ohne zu notieren — sonst sehen Sie ab der ersten Notiz nur noch Details. Dann sammeln Sie zehn Beobachtungen, und zwar wertfrei und ohne Lösungsvorschlag.

16:25 Das ist die wichtigste Regel des ganzen Ablaufs: Wer in Schritt zwei schon eine Lösung notiert, verschließt die Beobachtung, weil er sie in der Sprache der Lösung aufschreibt. Erst danach kommt die Zuordnung, dann die Rolle, dann die Diskussion der strittigen Fälle. Erst zuordnen, dann lösen — in dieser Reihenfolge, auch wenn es in den Fingern juckt.

16:45 An diesen Beispielen sehen Sie das Format und gleichzeitig, wie unterschiedlich ähnliche Befunde ausfallen können. Der unsichtbare Preis ist eine Frage des Ablaufs, also UX, und landet bei Produkt und Konzept. Der nicht erkennbare Fokus im Datumsfeld ist Barrierefreiheit, wird aber im Design System gelöst und nicht an dieser einen Seite.

17:06 Die Sitzplatzwahl, die nur per Ziehen funktioniert, ist ebenfalls Barrierefreiheit, aber eine Sache des Frontends. Beachten Sie: Zweimal derselbe Begriff, zweimal eine andere Zuständigkeit. Genau deshalb gehört neben den Begriff immer auch die Rolle. Vier Dinge nehmen Sie mit. Erstens: Vier Begriffe, vier Fragen — und aus der Frage folgt, wer arbeitet.

17:28 Zweitens: Die Erfahrung ist der ganze Weg, von der Suchmaschine bis zur Erstattung, nicht der einzelne Bildschirm. Drittens: Usability braucht alle drei Größen, sonst führt Sie eine schöne Zahl in die falsche Richtung. Und viertens, das Wichtigste für die kommenden Tage: Barrierefreiheit ist Produktqualität. Sie entsteht beim Bauen, nicht bei der Abnahme.

17:49 Im nächsten Modul geht es darum, wie man überhaupt herausfindet, für wen und wofür man baut — mit nutzerzentrierter Gestaltung nach einem etablierten Prozessmodell.