5. Was heisst „Easy to use“ oder „gute Usability“?
Frage in die Runde:
Welche App ist besser bezüglich Usability?
Teletext App
Blick Fussball
Quellen: Apple iTunes Store
6. Die Antwort ist abhängig von verschiedenen Faktoren
Die Frage kann so nicht beantwortet werden
Harry Meier, Fussball-Fan:
„Im Stadion möchte ich schnell auf einen Blick die Resultate aller Spiele sehen, ohne gross abgelenkt zu werden “
Pat Schneider, Student:
„Wenn unterwegs bin, informiere ich mich gerne über das Gesamt-Geschehen im Schweizer Fussball “
Benutzern – Wer sind die Benutzer des Systems?
Den Aufgaben – Welche Aufgaben sollen damit erfüllt werden?
Dem Umfeld – In welcher Umgebung wird das System benutzt?
Aufgabe:
Resultatsübersicht der laufenden Fussballspiele anzeigen
7. Das Gesamtbild über den Benutzer hilft uns gute Systeme zu bauen
nach Shackel, 1991
Benutzer
Aufgabe
System
Umfeld
„Ziele sind die Gründe warum wir Aufgaben ausführen“ Cooper, 1999
Ziele der Benutzer
Deshalb müssen wir wissen für wen, für was und worauf wir etwas entwickeln, bevor wir entwickeln.
8. Terminologie: Usability ist ein wichtiges Qualitätskriterium
Akzeptanz
Nützlichkeit
Kosten
Performance
Verfügbarkeit
etc.
Nutzen
Usability
Effektivität
Effizienz
Fehlertoleranz
Erlernbarkeit
Motivation
Quellen: Nielsen sowie Quesenbery
9. Nicht alle Teilaspekte sind immer gleich zu gewichten
Effektivität
Effizienz
Motivation
Fehler Toleranz
Erlernbar-
keit
Gewichtung der Aspekte
Informations-Sucher (Nutzung x mal pro Tag)
Online-Shopper (Nutzung 1x pro Quartal)
Wer ist also unsere Hauptbenutzergruppe? Für wen wird das System optimiert?
Quellen: Nielsen sowie Quesenbery
10. 1
2
Grundlagen User Centered Design,
Methodisches Vorgehen
11. ISO 9241-210: Prozess zur Gestaltung gebrauchstauglicher Systeme
Und wie erreicht man das?
UCD planen
Analysieren
Nutzungsanforderungen spezifizieren
Design
Testen und überarbeiten
System erfüllt Anforderungen
Iteration, soweit Evaluierungsergebnisse Bedarf hierfür aufzeigen
Eine Definition:
Generelle Philosophie oder «Mindset» bei der Entwicklung technischer Systeme, bei welcher die Benutzer im Zentrum stehen – nicht die Technik
Gegenteil wäre: Technologie-zentriertes Vorgehen
22. User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Papierprototypen
Taskanalysen
Brainstorming und Ideation
Klickbarer Prototyp
Personas
26. User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Papierprototypen
Taskanalysen
Usability-Testing
Brainstorming und Ideation
Klickbarer Prototyp
Personas
Expert-Reviews
29. User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Papierprototypen
Taskanalysen
Usability-Testing
Brainstorming und Ideation
Klickbarer Prototyp
Personas
Expert-Reviews
32. Zuerst einige Fakten…
Timeline der Verbreitung von Massenmedien
1500
1890
1900
1910
1950
1990
2000
20??
Print
Ton- aufnahmen
Kino
Radio
Fernsehen
Internet
Mobile Geräte
Zukunft?
33. Was haben wir aus dieser Entwicklung gelernt?
Jedes Medium ist anders!
Radio ist nicht TV!
Print ist nicht Desktop Web!
Desktop Web ist nicht Mobile!
34. Was haben wir aus dieser Entwicklung gelernt?
Wir sollten zukunftsorientiert denken!
Gestern
Heute
Morgen
Was kennen wir vom Desktop Web?
Wie adaptieren und optimieren wir das auf das Mobile Web?
Wie stellen wir sicher für die Zukunft gerüstet zu sein?
35. Vermutlich reicht es nicht, einfach das Hamburger-Icon auf die Apple Watch zu übertragen
Wir sollten zukunftsorientiert denken!
36. Kontext Desktop Web
Was macht Desktop Web aus?
Quellen: Joachimott.de und Apple inc.
Grosser Bildschirm
Stromanschluss
Permanentes Netzwerk
Tastatur
Maus
Stuhl
Tisch
37. Kontext Mobile
Was macht ein Mobile Device aus?
Quellen: Lukew.com und Google.com
Kleiner Bildschirm
Batterie
Inkonsistentes Netzwerk
Finger
Sensoren
38. Kontext Mobile
Was macht ein Mobile Device aus?
Quellen: Steve Rhodes
Ein Auge
Ein Daumen
Partielle Aufmerksamkeit erfordert gezieltes Design
39. Dateneingaben auf Mobile ist mühsam… aber der grösste Hebel für die Mobile Usability
Es gibt viele Möglichkeiten Daten in einem Mobile Device einzugeben.
Quellen: http://goo.gl/aXYdIj
40. A
D
...
„Reduce to
the max“
B
C
•Bei Formularen nur die Mussfelder
•Informationen kurz und klar
•Keine Sekundär- Aktionen
Mobile Usability: die wichtigsten Faktoren
Die vier wichtigsten Design-Principles für Mobile Usability
41. A: Reduce to the max
Für mobile Interaktionen nur das wirklich notwendige verwenden
Quellen: http://built.bymoby.com/mobile_checkout und Bring.ch
Nur die Mussfelder
Keine Sekundär Aktionen wie «Abbrechen»
Informationen kurz und klar
42. Selbstbestimmung
und Kontrolle über
die Daten sind für die
Benutzer die
wichtigsten Faktoren
für die Nutzung des
Services.
A
...
„Reduce to
the max“
„Touch first “
B
•Bei Formularen nur die Mussfelder
•Informationen kurz und klar
•Keine Sekundär- Aktionen
•Touch- optimierte Controls einsetzen
•User auf der Tastatur behalten
•Smarte Defaults, Maskierungen
Mobile Usability: die wichtigsten Faktoren
Die vier wichtigsten Design-Principles für Mobile Usability
43. B: Touch first
Die Eingabe von Daten muss mit den Fingern einfach möglich sein
Quellen: : http://bit.ly/yJ3N2d
44. B: Touch first
Die Eingabe von Daten muss mit den Fingern einfach möglich sein
Quellen: Tapworthy: Designing Great IPhone Apps By Josh Clark und http://m.kay.com/en/kaystore
80-90% der Leute sind Rechtshänder
Eingaben ermöglichen ohne häufig das Tastatur Layout zu wechseln oder die Tastatur zu verlassen
45. Selbstbestimmung
und Kontrolle über
die Daten sind für die
Benutzer die
wichtigsten Faktoren
für die Nutzung des
Services.
A
...
„Reduce to
the max“
„Touch first “
„Content before Chrome“
B
C
•Bei Formularen nur die Mussfelder
•Informationen kurz und klar
•Keine Sekundär- Aktionen
•Touch- optimierte Controls einsetzen
•User auf der Tastatur behalten
•Smarte Defaults, Maskierungen
•Titelleiste, Statusleiste, Scrollleiste und Navigations- elemente auf das Minimum reduzieren
Mobile Usability: die wichtigsten Faktoren
Die vier wichtigsten Design-Principles für Mobile Usability
46. C: Content before Chrome
Der beschränkte Platz gilt es möglichst gut zu nutzen
Quellenm.youtube.com, Espn.com und Instagram
Minimale Navigation
Maximaler Content
47. Lasst uns das versuchen: optimieren wir einen mobilen Checkout von Boingo Wireless Hotspot Provider
Benutzerziel und Kontext
Geek
So schnell wie
möglich online sein
iPhone 5s
Mitten auf der Strasse
48. Lasst uns das versuchen: optimieren wir einen mobilen Checkout von Boingo Wireless Hotspot Provider
Gewichtung der Usability Aspekte
Effektivität
Effizienz
Motivation
Fehler Toleranz
Erlernbar-
keit
50. Titel: User Ziel
Kurze, prägnante Information
Minimale Anzahl benötigter Informationen
E-Mailadresse Eingabefeld
Inline Hilfetext
Primäre Aktion
Optimierte AGB’s
keine Checkbox
Sekundäre Aktion
Unnötige, störende Elemente
51. Schritt 1:
Feld «Vorname» und «Nachname» zusammenführen
Design Principle: Touch first Ziel: auf der Tastatur bleiben
Design Principle:
Reduce to the max
52. Design Principle:
Reduce to the max
Schritt 2:
Felder Monat und Jahr zusammenführen
Design Principle: Touch first
Ziel: Mobile optimierte Controls verwenden
Type = month
53. Ziel: auf der Tastatur bleiben
Mobile-optimierte Eingabe
email@example.com
Schritt 1:
Feld «Vorname» und «Nachname» zusammenführen
Schritt 2:
Felder Monat und Jahr zusammenführen
Schritt 3:
Eingabe maskieren
Design Principle: Touch first
E-Mail Eingabefeld maskieren; erwartetes Format
Schritt 4:
Sekundär Aktion entfernen
Design Principle:
Reduce to the max, Conversion Optimierung
59. Selbstbestimmung
und Kontrolle über
die Daten sind für die
Benutzer die
wichtigsten Faktoren
für die Nutzung des
Services.
A
D
...
„Reduce to
the max“
„Touch first “
„Content before Chrome“
„Use Device Capabilities
B
C
•Bei Formularen nur die Mussfelder
•Informationen kurz und klar
•Keine Sekundär- Aktionen
•Touch- optimierte Controls einsetzen
•User auf der Tastatur behalten
•Smarte Defaults, Maskierungen
•Titelleiste, Statusleiste, Scrollleiste und Navigations- elemente auf das Minimum reduzieren
•Nutzung der Funktionen welche das Gerät bietet: Standort- bestimmung, Kamera, Gyroskop, etc.
Mobile Usability: die wichtigsten Faktoren
Die vier wichtigsten Design-Principles für Mobile Usability
60. Selbstbestimmung und Kontrolle über die Daten sind für die Benutzer die wichtigsten Faktoren für die Nutzung des Services.
A
D
...
„Reduce to
the max“
„Touch first “
„Content before Chrome“
„Use Device Capabilities
B
C
•Bei Formularen nur die Mussfelder
•Informationen kurz und klar
•Keine Sekundär- Aktionen
•Touch- optimierte Controls einsetzen
•User auf der Tastatur behalten
•Smarte Defaults, Maskierungen
•Titelleiste, Statusleiste, Scrollleiste und Navigations- elemente auf das Minimum reduzieren
•Nutzung der Funktionen welche das Gerät bietet: Standort- bestimmung, Kamera, Gyroskop, etc.
Mobile Usability: die wichtigsten Faktoren
61. D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
Quellen: appleinsider.com und questvisual.com
Gruppenarbeit:
Was ist das erstaunlichste, coolste, beste was euer Smartphone kann? Feature, App, Website, etc…
•3-4er Gruppen
•10 min Diskussion
•Pro Gruppe 4 Killerfunktionen vorstellen
•Video: Questvisual
62. Funktionen von mobilen Geräten
• Standorterkennung
• Multi-Touch-Sensoren
• Positionierung des Gerät und Bewegung: Beschleunigungsmesser
• Gyroskop: 360 Grad Bewegung
• Ausrichtung: Richtung von einem digitalen Kompass
• Video-& Bild: Aufnahme / Eingang von einer Kamera (Native App)
• Dual-Kameras: Vorder-und Rückseite
• Audio: Eingang von einem Mikrofon, Lautsprecher-Ausgang
• Ambient Light: hell / dunkel Umgebungswahrnehmung
• Nähe: Gerät Nähe zu physischen Objekten
• NFC: Near Field Communications durch RFID-Lesegeräte
• Geräteanschlüsse : über Bluetooth mehreren Geräte koppeln
•Barometer : messen des Luftdrucks
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
63. • Standorterkennung
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
64. • Multi-Touch-Sensoren
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
Quellen: http://static.lukew.com/TouchGestureTemplate.pdf
65. • Positionierung des Gerät und Bewegung: Beschleunigungsmesser
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
Bump:
•2 Geräte miteinander synchronisieren
•Beschleunigungsmesser Daten
•Position des Gerätes
•IP Adress-Austausch
•Möglichkeit Daten auszutauschen
Quellen: bu.mp
66. • Gyroskop: 360 Grad Bewegung
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
Quellen: occipital.com/360 und http://youtu.be/v3717E_AQfI
67. • Ausrichtung: Richtung von einem digitalen Kompass
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
68. • Video-& Bild: Aufnahme / Eingang von einer Kamera (Native App)
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
69. • Dual-Kameras: Vorder-und Rückseite
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
#selfie
70. • Audio: Eingang von einem Mikrofon, Lautsprecher-Ausgang
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
71. • Ambient Light: hell / dunkel Umgebungswahrnehmung
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
72. • Nähe: Gerät Nähe zu physischen Objekten
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
Ein/Aus Sensor:
•Bemerkt wenn z.b das Telefon ans Ohr gehalten wird und schaltet den Bildschirm an oder aus.
73. • NFC: Near Field Communications durch RFID-Lesegeräte
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
74. • Geräteanschlüsse : über Bluetooth mehrere Geräte verbinden
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
75. • Barometer : messen des Luftdrucks
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
76. Zusammenfassung
Design für Mobile Usability unterscheidet sich vom Design für Web Usability
Kontext und Fokus: Kenne deine User, deren Bedürfnisse und Ziele
Prototyping: Fail early, fail often, fail cheap, iterate
Web ist nicht Mobile!
Dateneingaben auf mobilen Geräten sind mühsam, optimiere so weit wie möglich
Nutze die Features der Smartphones sinnvoll
Messe vor Verbesserung und danach und sprecht darüber
78. Gruppenarbeit Mobile Experiences
Herausforderungen und Erfolgsfaktoren
Mögliche Themen
•Responsive Design oder Native App?
•Wearables, the next big Thing?
•Mobile first?
•Sind Tablets mobile Geräte?
• …
Bearbeitung
•Thema auswählen, Gruppen à 3-4 Personen bilden
•Diskussion über Herausforderungen und Erfolgsfaktoren
•Erkenntnisse auf einen Flipchart festhalten
•Präsentation im Plenum, inkl. Fragen und Diskussion
79. Thank you! Think mobile and…
... be prepared for the next big thing
