UXUXUser ExperienceUser Experience

UXUXUser ExperienceUser Experience

?

Definition „Usability“

✦ Schwierigkeitsgrad von

Erlernbarkeit und Handhabung

✦ Auch: Benutzerfreundlichkeit

Definition „Usability“

Vom Nutzer erlebte Nutzungsqualität bei der Interaktion

mit einem System. Eine besonders einfache, zum

Nutzer und seinen Aufgaben passende Bedienung wird

dabei als benutzerfreundlich angesehen. Enthält

Methoden zur Messbarkeit wie: Gebrauchstauglichkeit,

Barrierefreiheit, Typografie, Ergonomie, etc.

Erst seit 2010 gibt es international einheitliche Normen

und Regeln zur Messbarkeit.

Definition „User Experience“

✦ Persönlicher subjektiver

„gefühlter“ Eindruck eines

Anwenders von einem Produkt.

Zusammenspiel aus Erwartung, Eindruck,

Erfahrung und Bewertung (inkl. Nützlichkeit und

Spaßfaktor) eines Produkts, Systems oder

Dienstes (oder deren Gesamtheit), auch im

Kontext, nach subjektiven Maßstäben und

Einschätzungen des Anwenders, fließend und

veränderlich.

Definition „User Experience“

✦ Schnittstelle der Mensch-

Maschine-Interaktion

✦ Auch: Benutzerschnittstelle

(Oberfläche und Bedienkonzept)

Definition „User Interface“

Auf die menschlichen Fähigkeiten und Bedürfnisse

angepasste Schnittstelle, mit der ein Mensch mit

einer Maschine interagiert.

Enthält die grafische Benutzeroberfläche zur Ein-

und Ausgabe, auf Bildschirmen auch Stift- und

Fingerbedienung (Gestensteuerung), Tastatur,

haptisches Feedback, etc.

Definition „User Interface“

User Experience

✦ Usability und User Interface und deren

Konsistenz

✦ Funktionalitäten und Mehrwert

✦ Erwartungshaltung

✦ Kommunikationskomponenten

✦ Spaßfaktor / Gamification

✦ Kontext

UX: Konsistenz

✦ Inkonsistenz bei Bedienkonzept und

Design der mobilen Betriebssysteme

Blackberry, Symbian und Android

✦ z.B. bei Android Nutzung von „Zurück“-

und „Menü“-Taste und mangelhafte

Definition des Styleguides

UX: Don‘ts

✦ Abfragen selbstverständlicher

Informationen (Kein Prefill genutzt)

✦ Abweichungen vom Styleguide

✦ Übernahme von Konzepten aus

anderen Systemen

✦ Lange Start und Reaktionszeiten

UX: Do‘s

✦ Klar Strukturiert

✦ Intuitiv bedienbar (keine Anleitung nötig)

✦ Kurze Klickwege

✦ Klare Use Cases und Mehrwert gegenüber

mobiler Webseite

✦ Sinnvolle Standardeinstellungen

✦ Ggf. Landscape Modus unterstützen

UX: Beispiele

Positiv (Vollbild Spiel iOS) Positiv (Vollbild Spiel WP7)

UX: Beispiele

Negativ (iOS Settings) Positiv (iOS Settings)

UX: Beispiele

Negativ (iOS App) Positiv (iOS App)

UX: Beispiele

Negativ (Android App) Positiv (Android App)

UX: Beispiele

Negativ (WP7 App) Positiv (WP7 App)

UX: Beispiele

Positiv (iOS App) Positiv (WP7 App)

UX: Kontext

UX hängt auch vom Kontext der App ab.

Eine Banking App sollte sicherlich nicht

verspielt und kunterbunt daherkommen,

sondern einen zur Bank und zum Thema

Sicherheit passenden seriösen Look

haben.

UX: Kontext

✦ App Store: Beschreibung und Bilder

✦ Informationspolitik des Herstellers

✦ Updatehäufigkeit des Herstellers

✦ Erweiterung durch Social Plugins

✦ Nutzung des App Ökosystems

Goldener Schnitt

Beim goldenen Schnitt

entsteht ein bestimmtes

Verhältnis zweier Zahlen,

oder zweier Größen. Dieses

Verhältnis ist die goldene

Zahl ⱷ (Phi) und diese liegt

bei ≈ 1,618.

Rule of Thirds

Jeder, der schon einmal

fotografiert hat, weiß, dass

man die gewünschten

Objekte in Dritteln platziert.

Legt man solch ein Muster

von Linien über das Display

von WP7 kann man sehen,

dass die Elemente optimal

platziert sind.

Goldener Schnitt

Legen wir nun die Spirale vom

Goldenen Schnitt über das

Display, kann man ebenfalls

sehen, dass die Leerräume

optimal gewählt sind. Die Live

Tiles werden dadurch

besonders hervorgehoben und

die Gesamtkomposition wirkt

ausbalanciert.

Design Guides

✦ iOS:

http://bit.ly/iOSDesignGuides

✦ Android:

http://bit.ly/AndroidDesignGuides

✦ Windows Phone:

http://bit.ly/WP7DesignGuides

Vielen DankAndré Haase Franz Haslbeck