UX Gesetze

Gestaltung von benutzerfreundlichen Websites

Quelle: Laws of UX von Jon Yablonski

Fitts’ Law
einfach Bedienbarkeit

klickbare Elemente (z.B. Button):

• sollten groß genug sein
• sollten ausreichend Abstand zwischen einander haben
• sollten leicht zu erreichen sein

Fitts’ Law
Buttons - Beispiel

Die beiden Call-to-Action-Buttons liegen nahe beineiander und sind ausreichend groß gestaltet. Somit sind sie nicht nur auffällig, sondern vor allem auch gut anklickbar, selbst bei mobiler Benutzung.

Fitts’ Law
Touch Zones

Touch Zonen für leichte Erreichbarkeit auf Mobile Devices

Fitts’ Law
Buttons - Beispiel

Hick’s Law
nur das Wichtigste

• Auswahlmöglichkeiten minimieren
• komplexe Aufgaben in kleinere Schritte aufteilen
• kognitive Belastung des Nutzers minimieren

Hick’s Law
Negativ - Beispiel

Hick’s Law
Beispiel

Hick’s Law
Beispiel

Law of Common Region
Grenzen definieren Gemeinsamkeiten

eine gemeinsame Region:

• schafft klare Struktur
• hilft die Beziehung zwischen Elementen effektiv zu erfassen
• kann durch Rahmen erzeugt werden
• kann durch Hintergrundfarbe erzeugt werden

Law of Common Region
Beispiel Befootec

Law of Common Region
Beispiel Amazon

Jakob’s Law
Erwartungen Erfüllen

• Nutzer übertragen Erwartungen auf anderes, das ähnlich erscheint
• die Nutzung bestehender mentaler Modelle schafft bessere Benutzerfreundlichkeit
• Benutzer erwarten bekannte und bewährte Funktionen

Jakob’s Law
Beispiel Amazon Menu

Law of Prägnanz
Je einfacher desto einleuchtender

• das Auge sucht Einfachheit und Ordnung in komplexen Formen
• das Auge vereinfach komplexe Formen
• Menschen nehmen Elemente und Formen auf ihre einfachste (prägnanteste) Weise wahr

Law of Prägnanz
Beispiel Logos

Einfach Grundformen für klaren prägnanten Charakter

Law of Prägnanz
Beispiel Simple Strukturen

Einfach prägnante Strukturen erleichtern die Entscheidungsfindung

Law of Proximity
Nahes gehört zusammen

• Nähe hilft eine Beziehung zu Objekten herzustellen
• Nähe hilfe Informationen schneller zu verstehen und zu organisieren
• Elemente in unmittelbarer Nähe weisen ähnliche Eigenschaften und Funktionen auf

Law of Proximity
Beispiel GoogleSuche

Weissraum schafft Nähe

Law of Similarity
Orientierung durch Ähnlichkeiten

• Optisch ähnliche Elemente werden als verwandt wahrgenommen
• Farbe, Form, Größe und Ausrichtung können eine Gruppenzugehörigkeit signalisieren
• Links sollten optisch von normalen Textelmenten unterschieden werden

Law of Similarity
Beispiel