UX & UI Design

C / FÜR FORTGESCHRITTENE

Kernfrage

Wie redet man mit Profis?

In Research, Produkt und Entwicklung fallen Begriffe, die über die Bausteine hinausgehen: Methoden, Gesetze der Wahrnehmung, Muster und Systeme. Dieses Modul ist freiwillig und richtet sich an alle, die tiefer einsteigen.

Lernziel: Du kennst die wichtigsten Methoden, Gesetze und Muster der UX-Praxis, erkennst sie in echten Produkten und begründest damit Entscheidungen.

Wer die Fachsprache kennt, wird gehört.

3.1 / Forschung & Messung

Woher weiss ich, ob es funktioniert?

Gute Gestaltung beruht nicht auf Geschmack, sondern auf Beobachtung. Diese Methoden zeigen, was Menschen tatsächlich tun und wo sie scheitern.

Qualitativ heisst: verstehen, warum. Quantitativ heisst: messen, wie viele. Erst beides zusammen ergibt ein vollständiges Bild.

Erst beobachten, dann entscheiden.

Ausprobieren

Probier jede Methode im Kleinen aus: sortieren, suchen, testen, messen.

Aufgabe: Öffne den Warenkorb.

Beobachte: Wo klickst du zuerst?

Usability-Test

Nutzertest · Think Aloud

Menschen lösen echte Aufgaben mit dem Produkt, man schaut zu und hört zu, was sie denken.

Verhalten & EinsatzFünf Testpersonen finden die meisten groben Probleme. Nicht helfen, nicht erklären, nur beobachten und notieren, wo es hakt.

Nicht verwechseln: Umfrage: fragt Meinungen ab, zeigt aber nicht, was Menschen tatsächlich tun.

Formular0/3 gefunden

Entität-ID

Senden

Heuristische Evaluation

Expert Review · Nielsens Heuristiken

Fachleute prüfen ein Interface anhand bewährter Regeln, etwa Sichtbarkeit des Status oder Sprache der Nutzenden.

Verhalten & EinsatzSchnell und günstig, findet viele Probleme vor dem ersten Test. Ersetzt den Test mit echten Menschen aber nicht.

Variante AWeiter–0 Besuche

Variante BKurs starten–0 Besuche

A/B-Test

Split-Test

Zwei Varianten laufen gleichzeitig, der Zufall verteilt die Besuchenden. Gemessen wird, welche besser funktioniert.

Verhalten & EinsatzBraucht genug Besuche, sonst entscheidet der Zufall. Prüft eine Änderung nach der anderen.

Nicht verwechseln: Usability-Test: erklärt das Warum, ein A/B-Test zeigt nur das Was.

Card Sorting

Kartensortierung

Menschen ordnen Begriffe in Gruppen, die für sie zusammengehören. So entsteht eine Navigation aus ihrer Sicht.

Verhalten & EinsatzOffen: Gruppen selbst benennen. Geschlossen: in vorgegebene Gruppen sortieren.

Nicht verwechseln: Tree Testing: prüft eine fertige Struktur, Card Sorting hilft, sie zu finden.

Wo änderst du die Sprache?

Start

Tree Testing

Baumtest · Reverse Card Sort

Menschen suchen etwas in einer reinen Textversion der Navigation, ganz ohne Gestaltung.

Verhalten & EinsatzZeigt, ob Begriffe und Ebenen verständlich sind, bevor ein einziger Screen gestaltet ist.

Produkt1000

Warenkorb420

Konto anlegen180

Kauf120

Conversion: 12 %

Conversion Funnel

Trichter · Conversion Rate

Die Stufen eines Ablaufs, vom ersten Besuch bis zum Ziel, mit der Zahl der Menschen auf jeder Stufe.

Verhalten & EinsatzWo die Kurve am stärksten abfällt, lohnt sich die Arbeit. Die Conversion Rate ist der Anteil, der das Ziel erreicht.

Ich fand es einfach.

Ich brauchte Hilfe.

Ich würde es oft nutzen.

Score etwa 50 von 100

System Usability Scale

SUS-Fragebogen

Zehn kurze Aussagen, bewertet von 1 bis 5, ergeben einen Wert von 0 bis 100.

Verhalten & EinsatzWerte um 68 gelten als Durchschnitt. Gut, um Versionen zu vergleichen, nicht um Probleme zu finden.

3.2 / Gesetze & Effekte

Warum reagieren Menschen so?

Einige Regeln der Wahrnehmung und des Verhaltens sind gut erforscht. Wer sie kennt, kann vorhersagen, was leicht fällt und was nicht.

Die Gesetze sind keine Formeln für Schönheit, sondern Faustregeln für Aufmerksamkeit, Gedächtnis und Bewegung.

Gestalte für das Gehirn, das du hast, nicht für das ideale.

Ausprobieren

Miss dich selbst: Schalte zwischen den Varianten um und vergleiche die Zeiten.

Start, dann Ziel

Fitts' Law

Fitts'sches Gesetz

Je grösser und näher ein Ziel ist, desto schneller und sicherer trifft man es.

Verhalten & EinsatzWichtige Buttons gross und in Reichweite. Bildschirmränder und Ecken sind besonders leicht zu treffen.

Finde «Pizza»

Hick's Law

Hick-Hyman-Gesetz

Je mehr Optionen zur Wahl stehen, desto länger dauert die Entscheidung.

Verhalten & EinsatzWenige Optionen zeigen, den Rest gruppieren oder auf später verschieben. Gilt nicht für vertraute, gut sortierte Listen.

Korb (2)

Wie überall: Man findet sofort.

Jakob's Law

Jakobs Gesetz

Menschen verbringen die meiste Zeit auf anderen Websites und erwarten, dass deine genauso funktioniert.

Verhalten & EinsatzBekannte Muster nutzen: Logo oben links, Warenkorb oben rechts. Originell sein bei Inhalt und Ausdruck, nicht bei der Bedienung.

IBANCH93 0076 2011 6238 5295 7Gruppen von vier lassen sich merken und prüfen.

Chunking

Miller's Law · Gruppieren

Das Arbeitsgedächtnis hält nur wenige Einheiten gleichzeitig. In Gruppen gegliedert passt mehr hinein.

Verhalten & EinsatzLange Zahlen in Blöcke teilen, Formulare in Abschnitte, Inhalte in überschaubare Häppchen.

Nicht verwechseln: Die berühmte «sieben plus minus zwei» ist keine Regel für die Anzahl Menüpunkte.

Basis9.–

Team29.–Beliebt

Firma79.–

Von-Restorff-Effekt

Isolationseffekt

Was sich von seiner Umgebung abhebt, wird eher bemerkt und erinnert.

Verhalten & EinsatzGezielt für das eine Wichtige einsetzen. Hebt man alles hervor, hebt sich nichts mehr ab.

Erinnert wird: Höhepunkt und Ende ≈ 5.5 von 10

Peak-End-Regel

Höhepunkt-Ende-Regel

Erlebnisse werden vor allem nach ihrem intensivsten Moment und nach ihrem Ende beurteilt, nicht nach dem Durchschnitt.

Verhalten & EinsatzDas Ende eines Ablaufs bewusst gestalten: eine klare Bestätigung, ein freundlicher Abschluss.

Klick und spür den Unterschied.

Doherty-Schwelle

Doherty Threshold · 400 ms

Antwortet ein System in weniger als etwa 400 Millisekunden, bleiben Menschen im Fluss.

Verhalten & EinsatzWo es länger dauert: sofort Feedback zeigen, Fortschritt anzeigen oder optimistisch reagieren.

Name

E-Mail

Senden

Ästhetik-Usability-Effekt

Aesthetic-Usability Effect

Was gut gestaltet ist, wird als einfacher bedienbar wahrgenommen, auch wenn es das nicht ist.

Verhalten & EinsatzHilft über kleine Hürden hinweg, kann in Tests aber echte Probleme verdecken. Darum beobachten, nicht nur fragen.

3.3 / Fortgeschrittene Muster

Wie fühlt es sich leicht an?

Muster sind bewährte Lösungen für wiederkehrende Aufgaben. Diese gehen über einzelne Bausteine hinaus und prägen, wie sich ein Produkt anfühlt.

Viele wirken unsichtbar: Man bemerkt sie erst, wenn sie fehlen.

Gute Muster merkt man nicht, man vermisst sie.

Ausprobieren

Lösche, tippe, suche und klapp auf. Achte darauf, wie oft du warten oder bestätigen musst.

Export

PDFPNG

Progressive Disclosure

Schrittweises Aufdecken

Erst das Wichtigste zeigen, Fortgeschrittenes erst auf Wunsch.

Verhalten & EinsatzHält Einsteigende fern von Optionen, die sie nicht brauchen, und lässt Profis trotzdem alles erreichen.

Nicht verwechseln: Accordion: ein Bauteil. Progressive Disclosure ist das Prinzip dahinter.

Sofort sichtbar, Server bestätigt im Hintergrund.

Optimistic UI

Optimistische Oberfläche

Das Interface zeigt das Ergebnis sofort, als wäre der Server schon einverstanden.

Verhalten & EinsatzFühlt sich schnell an. Schlägt die Anfrage fehl, wird der Zustand still zurückgesetzt und eine Meldung erscheint.

Entwurf A

Entwurf B

Entwurf C

Rückgängig statt Nachfragen

Undo over Confirm

Statt vor jeder Aktion zu fragen, wird sie ausgeführt und lässt sich kurz rückgängig machen.

Verhalten & EinsatzWeniger Unterbrechung, weniger Klicks. Nachfragen nur bei wirklich Unumkehrbarem.

E-Mail

Geprüft wird, wenn du das Feld verlässt.

Inline-Validierung

Live-Prüfung im Formular

Eingaben werden direkt am Feld geprüft, nicht erst nach dem Absenden.

Verhalten & EinsatzPrüfen, wenn das Feld verlassen wird, nicht bei jedem Buchstaben. Fehler freundlich und konkret benennen.

Neues Projekt

Datei exportieren

Dunkelmodus

Einstellungen

Hilfe

Command Palette

Befehlspalette · ⌘K

Ein Suchfeld für alle Befehle einer Anwendung, meist mit einer Tastenkombination geöffnet.

Verhalten & EinsatzFür Profis der schnellste Weg. Ergänzt die sichtbare Navigation, ersetzt sie aber nie.

NeuDateienTeilen

Coach Marks

Onboarding-Tour · Tooltipp-Tour

Kurze Hinweise, die beim ersten Besuch auf wichtige Stellen zeigen.

Verhalten & EinsatzHöchstens drei Schritte, jederzeit überspringbar und später wieder aufrufbar. Gute Gestaltung braucht wenig Tour.

Gesucht: Was kostet es für 10 Leute?Preise für Teams →Funktionen im Vergleich →Kontakt zum Verkauf →

Information Scent

Informationsfährte

Wie gut Beschriftungen verraten, was dahinter wartet. Menschen folgen der stärksten Fährte.

Verhalten & EinsatzLinks und Buttons sagen konkret, wohin sie führen. «Mehr erfahren» hat fast keinen Geruch.

3.4 / Systeme & Zugänglichkeit

Wie bleibt es einheitlich und für alle nutzbar?

Grosse Produkte brauchen ein System: gemeinsame Werte, Bausteine und Regeln. Zugänglichkeit gehört von Anfang an dazu, nicht erst am Schluss.

Was für Menschen mit Einschränkungen gemacht ist, hilft allen: Kontrast bei Sonne, Tastatur bei Eile, ruhige Bewegung bei Müdigkeit.

Ein System spart Entscheidungen, Zugänglichkeit spart Ausreden.

Ausprobieren

Ändere Werte und Breiten, tabbe durch den Dialog und lies mit, was ein Screenreader vorliest.

color.primary =

ButtonLinkBadge

Design Token

Gestaltungsvariable

Benannte Werte für Farbe, Schrift, Abstand oder Radius, die überall gleich verwendet werden.

Verhalten & EinsatzÄndert man den Token, ändert sich jede Stelle, die ihn nutzt. Gestaltung und Code sprechen dieselbe Sprache.

SuchenLabel

Atomic Design

Atome · Moleküle · Organismen

Ein Modell, Interfaces aus kleinsten Teilen aufzubauen: Atome werden zu Molekülen, Moleküle zu Organismen.

Verhalten & EinsatzHilft, ein Designsystem zu ordnen und Wiederholung zu vermeiden. Die Begriffe sind Denkhilfe, keine Pflicht.

Lies mich auf Weiss.

Kontrast 3.0 : 1

Zu schwach

Kontrastverhältnis

WCAG-Kontrast · AA und AAA

Das Helligkeitsverhältnis zwischen Text und Hintergrund, von 1:1 bis 21:1.

Verhalten & EinsatzFliesstext braucht mindestens 4,5:1 (AA), grosse Schrift 3:1. Hellgrau auf Weiss fällt oft durch.

NameSpeichernAbbrechen

Fokus: Name

Fokusfalle

Focus Trap · Fokusführung

Solange ein Dialog offen ist, bleibt der Tastaturfokus darin und springt nicht auf die Seite dahinter.

Verhalten & EinsatzBeim Öffnen springt der Fokus in den Dialog, beim Schliessen zurück zum auslösenden Button. Escape schliesst.

Screenreader liest: «Warenkorb, 3 Artikel, Taste»

Zugänglicher Name

ARIA-Label · Accessible Name

Der Name, den Screenreader für ein Element vorlesen. Icons allein haben keinen.

Verhalten & EinsatzJeder Icon-Button braucht ein Label, das sagt, was er tut. Zustand und Anzahl gehören dazu.

Reduzierte Bewegung

Reduced Motion

Eine Systemeinstellung für Menschen, denen Bewegung auf dem Bildschirm schwindlig macht.

Verhalten & EinsatzGrosse Bewegungen durch sanftes Ein- und Ausblenden ersetzen, wenn die Einstellung aktiv ist.

200 px · Handy: 1 Spalte

Breakpoint

Umbruchpunkt · Responsive Design

Die Bildschirmbreite, ab der sich ein Layout umstellt, etwa von einer auf zwei Spalten.

Verhalten & EinsatzBreakpoints dort setzen, wo der Inhalt bricht, nicht bei bestimmten Geräten.

Nachschlagen

Alle Begriffe der Vertiefung von A bis Z

Hier stehen alle fortgeschrittenen Begriffe in einer Liste. Such nach dem deutschen oder dem englischen Namen. Am Ende wartet das Abschlussquiz.

Im Zweifel nachschlagen statt umschreiben.

Ausprobieren

Tipp einen Begriff ein, zum Beispiel Fitts, Token oder Funnel.

Begriff suchen29 von 29 Begriffen

Variante AWeiter–0 Besuche

Variante BKurs starten–0 Besuche

Forschung & Messung

A/B-Test

Split-Test

Zwei Varianten laufen gleichzeitig, der Zufall verteilt die Besuchenden. Gemessen wird, welche besser funktioniert.

Verhalten & EinsatzBraucht genug Besuche, sonst entscheidet der Zufall. Prüft eine Änderung nach der anderen.

Nicht verwechseln: Usability-Test: erklärt das Warum, ein A/B-Test zeigt nur das Was.

Name

E-Mail

Senden

Gesetze & Effekte

Ästhetik-Usability-Effekt

Aesthetic-Usability Effect

Was gut gestaltet ist, wird als einfacher bedienbar wahrgenommen, auch wenn es das nicht ist.

Verhalten & EinsatzHilft über kleine Hürden hinweg, kann in Tests aber echte Probleme verdecken. Darum beobachten, nicht nur fragen.

SuchenLabel

Systeme & Zugänglichkeit

Atomic Design

Atome · Moleküle · Organismen

Ein Modell, Interfaces aus kleinsten Teilen aufzubauen: Atome werden zu Molekülen, Moleküle zu Organismen.

Verhalten & EinsatzHilft, ein Designsystem zu ordnen und Wiederholung zu vermeiden. Die Begriffe sind Denkhilfe, keine Pflicht.

200 px · Handy: 1 Spalte

Systeme & Zugänglichkeit

Breakpoint

Umbruchpunkt · Responsive Design

Die Bildschirmbreite, ab der sich ein Layout umstellt, etwa von einer auf zwei Spalten.

Verhalten & EinsatzBreakpoints dort setzen, wo der Inhalt bricht, nicht bei bestimmten Geräten.

Forschung & Messung

Card Sorting

Kartensortierung

Menschen ordnen Begriffe in Gruppen, die für sie zusammengehören. So entsteht eine Navigation aus ihrer Sicht.

Verhalten & EinsatzOffen: Gruppen selbst benennen. Geschlossen: in vorgegebene Gruppen sortieren.

Nicht verwechseln: Tree Testing: prüft eine fertige Struktur, Card Sorting hilft, sie zu finden.

IBANCH93 0076 2011 6238 5295 7Gruppen von vier lassen sich merken und prüfen.

Gesetze & Effekte

Chunking

Miller's Law · Gruppieren

Das Arbeitsgedächtnis hält nur wenige Einheiten gleichzeitig. In Gruppen gegliedert passt mehr hinein.

Verhalten & EinsatzLange Zahlen in Blöcke teilen, Formulare in Abschnitte, Inhalte in überschaubare Häppchen.

Nicht verwechseln: Die berühmte «sieben plus minus zwei» ist keine Regel für die Anzahl Menüpunkte.

NeuDateienTeilen

Fortgeschrittene Muster

Coach Marks

Onboarding-Tour · Tooltipp-Tour

Kurze Hinweise, die beim ersten Besuch auf wichtige Stellen zeigen.

Verhalten & EinsatzHöchstens drei Schritte, jederzeit überspringbar und später wieder aufrufbar. Gute Gestaltung braucht wenig Tour.

Neues Projekt

Datei exportieren

Dunkelmodus

Einstellungen

Hilfe

Fortgeschrittene Muster

Command Palette

Befehlspalette · ⌘K

Ein Suchfeld für alle Befehle einer Anwendung, meist mit einer Tastenkombination geöffnet.

Verhalten & EinsatzFür Profis der schnellste Weg. Ergänzt die sichtbare Navigation, ersetzt sie aber nie.

Produkt1000

Warenkorb420

Konto anlegen180

Kauf120

Conversion: 12 %

Forschung & Messung

Conversion Funnel

Trichter · Conversion Rate

Die Stufen eines Ablaufs, vom ersten Besuch bis zum Ziel, mit der Zahl der Menschen auf jeder Stufe.

Verhalten & EinsatzWo die Kurve am stärksten abfällt, lohnt sich die Arbeit. Die Conversion Rate ist der Anteil, der das Ziel erreicht.

color.primary =

ButtonLinkBadge

Systeme & Zugänglichkeit

Design Token

Gestaltungsvariable

Benannte Werte für Farbe, Schrift, Abstand oder Radius, die überall gleich verwendet werden.

Verhalten & EinsatzÄndert man den Token, ändert sich jede Stelle, die ihn nutzt. Gestaltung und Code sprechen dieselbe Sprache.

Klick und spür den Unterschied.

Gesetze & Effekte

Doherty-Schwelle

Doherty Threshold · 400 ms

Antwortet ein System in weniger als etwa 400 Millisekunden, bleiben Menschen im Fluss.

Verhalten & EinsatzWo es länger dauert: sofort Feedback zeigen, Fortschritt anzeigen oder optimistisch reagieren.

Start, dann Ziel

Gesetze & Effekte

Fitts' Law

Fitts'sches Gesetz

Je grösser und näher ein Ziel ist, desto schneller und sicherer trifft man es.

Verhalten & EinsatzWichtige Buttons gross und in Reichweite. Bildschirmränder und Ecken sind besonders leicht zu treffen.

NameSpeichernAbbrechen

Fokus: Name

Systeme & Zugänglichkeit

Fokusfalle

Focus Trap · Fokusführung

Solange ein Dialog offen ist, bleibt der Tastaturfokus darin und springt nicht auf die Seite dahinter.

Verhalten & EinsatzBeim Öffnen springt der Fokus in den Dialog, beim Schliessen zurück zum auslösenden Button. Escape schliesst.

Formular0/3 gefunden

Entität-ID

Senden

Forschung & Messung

Heuristische Evaluation

Expert Review · Nielsens Heuristiken

Fachleute prüfen ein Interface anhand bewährter Regeln, etwa Sichtbarkeit des Status oder Sprache der Nutzenden.

Verhalten & EinsatzSchnell und günstig, findet viele Probleme vor dem ersten Test. Ersetzt den Test mit echten Menschen aber nicht.

Finde «Pizza»

Gesetze & Effekte

Hick's Law

Hick-Hyman-Gesetz

Je mehr Optionen zur Wahl stehen, desto länger dauert die Entscheidung.

Verhalten & EinsatzWenige Optionen zeigen, den Rest gruppieren oder auf später verschieben. Gilt nicht für vertraute, gut sortierte Listen.

Gesucht: Was kostet es für 10 Leute?Preise für Teams →Funktionen im Vergleich →Kontakt zum Verkauf →

Fortgeschrittene Muster

Information Scent

Informationsfährte

Wie gut Beschriftungen verraten, was dahinter wartet. Menschen folgen der stärksten Fährte.

Verhalten & EinsatzLinks und Buttons sagen konkret, wohin sie führen. «Mehr erfahren» hat fast keinen Geruch.

E-Mail

Geprüft wird, wenn du das Feld verlässt.

Fortgeschrittene Muster

Inline-Validierung

Live-Prüfung im Formular

Eingaben werden direkt am Feld geprüft, nicht erst nach dem Absenden.

Verhalten & EinsatzPrüfen, wenn das Feld verlassen wird, nicht bei jedem Buchstaben. Fehler freundlich und konkret benennen.

Korb (2)

Wie überall: Man findet sofort.

Gesetze & Effekte

Jakob's Law

Jakobs Gesetz

Menschen verbringen die meiste Zeit auf anderen Websites und erwarten, dass deine genauso funktioniert.

Verhalten & EinsatzBekannte Muster nutzen: Logo oben links, Warenkorb oben rechts. Originell sein bei Inhalt und Ausdruck, nicht bei der Bedienung.

Lies mich auf Weiss.

Kontrast 3.0 : 1

Zu schwach

Systeme & Zugänglichkeit

Kontrastverhältnis

WCAG-Kontrast · AA und AAA

Das Helligkeitsverhältnis zwischen Text und Hintergrund, von 1:1 bis 21:1.

Verhalten & EinsatzFliesstext braucht mindestens 4,5:1 (AA), grosse Schrift 3:1. Hellgrau auf Weiss fällt oft durch.

Sofort sichtbar, Server bestätigt im Hintergrund.

Fortgeschrittene Muster

Optimistic UI

Optimistische Oberfläche

Das Interface zeigt das Ergebnis sofort, als wäre der Server schon einverstanden.

Verhalten & EinsatzFühlt sich schnell an. Schlägt die Anfrage fehl, wird der Zustand still zurückgesetzt und eine Meldung erscheint.

Erinnert wird: Höhepunkt und Ende ≈ 5.5 von 10

Gesetze & Effekte

Peak-End-Regel

Höhepunkt-Ende-Regel

Erlebnisse werden vor allem nach ihrem intensivsten Moment und nach ihrem Ende beurteilt, nicht nach dem Durchschnitt.

Verhalten & EinsatzDas Ende eines Ablaufs bewusst gestalten: eine klare Bestätigung, ein freundlicher Abschluss.

Export

PDFPNG

Fortgeschrittene Muster

Progressive Disclosure

Schrittweises Aufdecken

Erst das Wichtigste zeigen, Fortgeschrittenes erst auf Wunsch.

Verhalten & EinsatzHält Einsteigende fern von Optionen, die sie nicht brauchen, und lässt Profis trotzdem alles erreichen.

Nicht verwechseln: Accordion: ein Bauteil. Progressive Disclosure ist das Prinzip dahinter.

Systeme & Zugänglichkeit

Reduzierte Bewegung

Reduced Motion

Eine Systemeinstellung für Menschen, denen Bewegung auf dem Bildschirm schwindlig macht.

Verhalten & EinsatzGrosse Bewegungen durch sanftes Ein- und Ausblenden ersetzen, wenn die Einstellung aktiv ist.

Entwurf A

Entwurf B

Entwurf C

Fortgeschrittene Muster

Rückgängig statt Nachfragen

Undo over Confirm

Statt vor jeder Aktion zu fragen, wird sie ausgeführt und lässt sich kurz rückgängig machen.

Verhalten & EinsatzWeniger Unterbrechung, weniger Klicks. Nachfragen nur bei wirklich Unumkehrbarem.

Ich fand es einfach.

Ich brauchte Hilfe.

Ich würde es oft nutzen.

Score etwa 50 von 100

Forschung & Messung

System Usability Scale

SUS-Fragebogen

Zehn kurze Aussagen, bewertet von 1 bis 5, ergeben einen Wert von 0 bis 100.

Verhalten & EinsatzWerte um 68 gelten als Durchschnitt. Gut, um Versionen zu vergleichen, nicht um Probleme zu finden.

Wo änderst du die Sprache?

Start

Forschung & Messung

Tree Testing

Baumtest · Reverse Card Sort

Menschen suchen etwas in einer reinen Textversion der Navigation, ganz ohne Gestaltung.

Verhalten & EinsatzZeigt, ob Begriffe und Ebenen verständlich sind, bevor ein einziger Screen gestaltet ist.

Aufgabe: Öffne den Warenkorb.

Beobachte: Wo klickst du zuerst?

Forschung & Messung

Usability-Test

Nutzertest · Think Aloud

Menschen lösen echte Aufgaben mit dem Produkt, man schaut zu und hört zu, was sie denken.

Verhalten & EinsatzFünf Testpersonen finden die meisten groben Probleme. Nicht helfen, nicht erklären, nur beobachten und notieren, wo es hakt.

Nicht verwechseln: Umfrage: fragt Meinungen ab, zeigt aber nicht, was Menschen tatsächlich tun.

Basis9.–

Team29.–Beliebt

Firma79.–

Gesetze & Effekte

Von-Restorff-Effekt

Isolationseffekt

Was sich von seiner Umgebung abhebt, wird eher bemerkt und erinnert.

Verhalten & EinsatzGezielt für das eine Wichtige einsetzen. Hebt man alles hervor, hebt sich nichts mehr ab.

Screenreader liest: «Warenkorb, 3 Artikel, Taste»

Systeme & Zugänglichkeit

Zugänglicher Name

ARIA-Label · Accessible Name

Der Name, den Screenreader für ein Element vorlesen. Icons allein haben keinen.

Verhalten & EinsatzJeder Icon-Button braucht ein Label, das sagt, was er tut. Zustand und Anzahl gehören dazu.

Übung

Ein Produkt begründen

Aufgabe: Nimm eine Website oder App, die du gut kennst, und begründe drei Gestaltungsentscheidungen mit Begriffen aus diesem Modul.

SCHRITT 1

Wähle einen Ablauf, zum Beispiel Registrierung oder Checkout, und mach Screenshots.

SCHRITT 2

Finde zwei Gesetze oder Effekte, die dort wirken, etwa Fitts’ Law oder den Von-Restorff-Effekt.

SCHRITT 3

Prüfe Kontrast, Labels und Fokus: Wo wäre der Ablauf mit Screenreader oder nur mit Tastatur schwierig?

SCHRITT 4

Schlag einen kleinen Test vor, der deine Vermutung prüft: Usability-Test, A/B-Test oder Tree Testing.

Auswertung: Erklär deine Begründung jemandem ohne Fachwissen. Versteht die Person die Entscheidung, sitzt das Vokabular.

Literatur

Zum Weiterlesen

Krug, Steve: Don’t Make Me Think, Revisited. New Riders, 2014.

Goodman, Elizabeth; Kuniavsky, Mike; Moed, Andrea: Observing the User Experience. 2. Auflage. Morgan Kaufmann, 2012.

Frost, Brad: Atomic Design. 2016.

Yablonski, Jon: Laws of UX. O’Reilly, 2020.

Nielsen, Jakob: 10 Usability Heuristics for User Interface Design. Nielsen Norman Group.

W3C: Web Content Accessibility Guidelines (WCAG) 2.2. 2023.

Verwandt: Designpsychologie, Denken & Usability →

← B / Flows

01 / Grundlagen →

Impressum

Datenschutz

Nutzungsbedingungen