ux user experience

Download UX User Experience

Post on 19-Jan-2015

862 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. UX User Experience

2. ? 3. Definition Usability

  • Schwierigkeitsgrad von Erlernbarkeit und Handhabung
  • Auch: Benutzerfreundlichkeit

4. Definition Usability

  • Vom Nutzer erlebte Nutzungsqualitt bei der Interaktion mit einem System. Eine besonders einfache, zum Nutzer und seinen Aufgaben passende Bedienung wird dabei als benutzerfreundlich angesehen. Enthlt Methoden zur Messbarkeit wie: Gebrauchstauglichkeit, Barrierefreiheit, Typografie, Ergonomie, etc.
  • Erst seit 2010 gibt es international einheitliche Normen und Regeln zur Messbarkeit.

5. Definition User Experience

  • Persnlicher subjektiver gefhlter Eindruck eines Anwenders von einem Produkt.

6.

  • Zusammenspiel aus Erwartung, Eindruck, Erfahrung und Bewertung (inkl. Ntzlichkeit und Spafaktor) eines Produkts, Systems oder Dienstes (oder deren Gesamtheit), auch im Kontext, nach subjektiven Mastben und Einschtzungen des Anwenders, flieend und vernderlich.

Definition User Experience 7.

  • Schnittstelle der Mensch-Maschine-Interaktion
  • Auch: Benutzerschnittstelle (Oberflche und Bedienkonzept)

Definition User Interface 8.

  • Auf die menschlichen Fhigkeiten und Bedrfnisse angepasste Schnittstelle, mit der ein Mensch mit einer Maschine interagiert.
  • Enthlt die grafische Benutzeroberflche zur Ein- und Ausgabe, auf Bildschirmen auch Stift- und Fingerbedienung (Gestensteuerung), Tastatur, haptisches Feedback, etc.

Definition User Interface 9. User Experience

  • Usability und User Interface und deren Konsistenz
  • Funktionalitten und Mehrwert
  • Erwartungshaltung
  • Kommunikationskomponenten
  • Spafaktor / Gamification
  • Kontext

10. UX: Konsistenz

  • Inkonsistenz bei Bedienkonzept und Design der mobilen Betriebssysteme Blackberry, Symbian und Android
  • z.B. bei Android Nutzung von Zurck- und Men-Taste und mangelhafte Definition des Styleguides

11. UX: Donts

  • Abfragen selbstverstndlicher Informationen (Kein Prefill genutzt)
  • Abweichungen vom Styleguide
  • bernahme von Konzepten aus anderen Systemen
  • Lange Start und Reaktionszeiten

12. UX: Dos

  • Klar Strukturiert
  • Intuitiv bedienbar (keine Anleitung ntig)
  • Kurze Klickwege
  • Klare Use Cases und Mehrwert gegenber mobiler Webseite
  • Sinnvolle Standardeinstellungen
  • Ggf. Landscape Modus untersttzen

13. UX: Beispiele

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

14. UX: Beispiele

  • Negativ (iOS Settings)
  • Positiv (iOS Settings)

15. UX: Beispiele

  • Negativ (iOS App)
  • Positiv (iOS App)

16. UX: Beispiele

  • Negativ (Android App)
  • Positiv (Android App)

17. UX: Beispiele

  • Negativ (WP7 App)
  • Positiv (WP7 App)

18. UX: Beispiele

  • Positiv (iOS App)
  • Positiv (WP7 App)

19. UX: Kontext

  • UX hngt 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 serisen Look haben.

20. UX: Kontext

  • App Store: Beschreibung und Bilder
  • Informationspolitik des Herstellers
  • Updatehufigkeit des Herstellers
  • Erweiterung durch Social Plugins
  • Nutzung des App kosystems

21. Goldener Schnitt

  • Beim goldenen Schnitt entsteht ein bestimmtes Verhltnis zweier Zahlen, oder zweier Gren. Dieses Verhltnis ist die goldene Zahl(Phi) und diese liegt bei 1,618.

22. Rule of Thirds

  • Jeder, der schon einmal fotografiert hat, wei, dass man die gewnschten 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.

23. Goldener Schnitt

  • Legen wir nun die Spirale vom Goldenen Schnitt ber das Display, kann man ebenfalls sehen, dass die Leerrume optimal gewhlt sind. Die Live Tiles werden dadurch besonders hervorgehoben und die Gesamtkomposition wirkt ausbalanciert.

24. Design Guides

  • iOS:
  • http://bit.ly/iOSDesignGuides
  • Android:
  • http://bit.ly/AndroidDesignGuides
  • Windows Phone:
  • http://bit.ly/WP7DesignGuides

25. Vielen Dank

  • Andr Haase
  • Franz Haslbeck