UX & UI Design

C / ADVANCED

Key question

How do you talk to professionals?

In research, product, and development, terms crop up that go beyond basic building blocks: methods, laws of perception, patterns, and systems. This module is optional and aimed at anyone looking to delve deeper.

Learning objective: You know the key methods, laws and patterns of UX practice, recognise them in real products, and use them to justify decisions.

Those who speak the jargon get heard.

3.1 / Research & Measurement

How do I know if it works?

Good design is not based on taste, but on observation. These methods reveal what people actually do and where they struggle.

Qualitative means understanding why. Quantitative means measuring how many. Only together do they paint a complete picture.

Observe first, then decide.

Try it out

Try out each method on a small scale: sort, search, test, measure.

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 / Laws & Effects

Why do people react this way?

Certain rules of perception and behaviour are well researched. Anyone who knows them can predict what comes easily and what does not.

The laws are not formulas for beauty, but rules of thumb for attention, memory, and movement.

Design for the brain you have, not the ideal one.

Try it out

Test yourself: Switch between the variants and compare your times.

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 / Advanced Patterns

How does it feel easy?

Patterns are proven solutions for recurring tasks. These go beyond individual building blocks and shape how a product feels.

Many seem invisible: you only notice them when they are gone.

You don't notice good patterns, you miss them.

Try it out

Delete, type, search and expand. Notice how often you have to wait or confirm.

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 / Systems & Accessibility

How does it remain consistent and usable for everyone?

Great products need a system: shared values, building blocks and rules. Accessibility is an integral part right from the start, not an afterthought.

What is designed for people with disabilities benefits everyone: high contrast in bright sunlight, keyboard navigation when in a hurry, reduced motion when tired.

A system saves decisions; accessibility saves excuses.

Try it out

Change values and widths, tab through the dialogue, and read along with what a screen reader announces.

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.

Look up

All specialisation terms from A to Z

Here is a list of all advanced terms. Search by the German or English name. The final quiz awaits you at the end.

If in doubt, look it up rather than rephrase.

Try it out

Type in a term, for example Fitts, Token or 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.

Exercise

Justify a product

Task: Take a website or app you know well, and justify three design decisions using terms from this module.

STEP 1

Choose a flow, for example registration or checkout, and take screenshots.

STEP 2

Find two laws or effects at work there, such as Fitts's Law or the Von Restorff effect.

STEP 3

Check contrast, labels, and focus: where might the user journey be difficult with a screen reader or keyboard only?

STEP 4

Suggest a small test to verify your assumption: usability test, A/B test, or tree testing.

Evaluation: Explain your reasoning to someone without specialist knowledge. If they understand the decision, you've mastered the vocabulary.

C / ADVANCED

Key question

3.1 / Research & Measurement

Try it out

Usability-Test

Heuristische Evaluation

A/B-Test

Card Sorting

Tree Testing

Conversion Funnel

System Usability Scale

3.2 / Laws & Effects

Try it out

Fitts' Law

Hick's Law

Jakob's Law

Chunking

Von-Restorff-Effekt

Peak-End-Regel

Doherty-Schwelle

Ästhetik-Usability-Effekt

3.3 / Advanced Patterns

Try it out

Progressive Disclosure

Optimistic UI

Rückgängig statt Nachfragen

Inline-Validierung

Command Palette

Coach Marks

Information Scent

3.4 / Systems & Accessibility

Try it out

Design Token

Atomic Design

Kontrastverhältnis

Fokusfalle

Zugänglicher Name

Reduzierte Bewegung

Breakpoint

Look up

Try it out

A/B-Test

Ästhetik-Usability-Effekt

Atomic Design

Breakpoint

Card Sorting

Chunking

Coach Marks

Command Palette

Conversion Funnel

Design Token

Doherty-Schwelle

Fitts' Law

Fokusfalle

Heuristische Evaluation

Hick's Law

Information Scent

Inline-Validierung

Jakob's Law

Kontrastverhältnis

Optimistic UI

Peak-End-Regel

Progressive Disclosure

Reduzierte Bewegung

Rückgängig statt Nachfragen

System Usability Scale

Tree Testing

Usability-Test

Von-Restorff-Effekt

Zugänglicher Name

Exercise

Literature