Post on 14-Jun-2015
User Experience Gute Produkte entstehen nicht durch Zufall
CAS Mobile Business
Daniel Muther
12.09.2014
Ablauf des heutigen Nachmittags
1
2
3
Warum User Experience wichtig ist Grundlagen User Centered Design, Methodisches Vorgehen Design für Mobile
1 1
Warum User Experience wichtig ist
Gute Produkte entstehen nicht durch Zufall
Wie es heute abläuft
Qu
ell
en
: s
co
ttad
am
s@
ao
l.c
om
Was heisst „Easy to use“ oder „gute Usability“?
Frage in die Runde:
Welche App ist besser bezüglich Usability?
Teletext App Blick Fussball
Qu
ell
en
: A
pp
le i
Tu
nes
Sto
re
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
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.
Terminologie: Usability ist ein wichtiges Qualitätskriterium
Akzeptanz
Nützlichkeit
Kosten
Performance
Verfügbarkeit
etc.
Nutzen
Usability
Effektivität
Effizienz
Fehlertoleranz
Erlernbarkeit
Motivation
Qu
ell
en
: N
iels
en
so
wie
Qu
es
en
bery
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?
Qu
ell
en
: N
iels
en
so
wie
Qu
es
en
bery
1 2
Grundlagen User Centered Design,
Methodisches Vorgehen
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
User Centered Design Kreislauf Schritt für Schritt
User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Interviews mit potentiellen Benutzern
Beobachten der Benutzer in ihrer natürlichen Umgebung
You can learn a lot from just sitting and watching. (From Kitchen Stories, 2003)
User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Personas
Visualisieren der Benutzer mit Personas
18
Alle haben eine andere Vorstellung von den Benutzern...
Die Benutzer brauchen X...
Ohne Personas sind die Diskussionen einiges mühsamer…
User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Taskanalysen
Brainstorming und
Ideation
Personas
Taskanalysen z.b mit einer Customer Journey Map
Brainstorming und Ideengenerierung
User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Papierprototypen
Taskanalysen
Brainstorming und
Ideation
Klickbarer Prototyp
Personas
Papierprototypen erstellen
Erstes Testing, vielleicht mit Kollegen
Klickbarer Prototyp erstellen
Axure Pop App
User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Papierprototypen
Taskanalysen
Usability-Testing
Brainstorming und
Ideation
Klickbarer Prototyp
Personas
Expert-Reviews
Expert Reviews
Usability Testing
User Centered Design Kreislauf Schritt für Schritt
Interviews und Beobachtungen
Papierprototypen
Taskanalysen
Usability-Testing
Brainstorming und
Ideation
Klickbarer Prototyp
Personas
Expert-Reviews
1 3
Design für Mobile Usability
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?
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!
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?
Vermutlich reicht es nicht, einfach das Hamburger-Icon auf
die Apple Watch zu übertragen
Wir sollten zukunftsorientiert denken!
Kontext Desktop Web
Was macht Desktop Web aus?
Qu
ell
en
: J
oac
him
ott
.de
un
d A
pp
le i
nc
.
Grosser Bildschirm
Stromanschluss
Permanentes Netzwerk
Tastatur
Maus
Stuhl
Tisch
Kontext Mobile
Was macht ein Mobile Device aus?
Qu
ell
en
: L
uk
ew
.co
m u
nd
Go
og
le.c
om
Kleiner Bildschirm
Batterie
Inkonsistentes Netzwerk
Finger
Sensoren
Kontext Mobile
Was macht ein Mobile Device aus?
Qu
ell
en
: S
teve
Rh
od
es
Ein Auge
Ein Daumen
Partielle Aufmerksamkeit erfordert gezieltes Design
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.
Qu
ell
en
: h
ttp
://g
oo
.gl/a
XY
dIj
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
A: Reduce to the max
Für mobile Interaktionen nur das wirklich notwendige verwenden
Qu
ell
en
: h
ttp
://b
uilt.
bym
ob
y.c
om
/mo
bile
_c
hec
ko
ut
un
d B
rin
g.c
h
Nur die Mussfelder
Keine Sekundär Aktionen
wie «Abbrechen»
Informationen kurz und
klar
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
B: Touch first
Die Eingabe von Daten muss mit den Fingern einfach möglich sein
Qu
ell
en
: :
htt
p:/
/bit
.ly/y
J3
N2d
B: Touch first
Die Eingabe von Daten muss mit den Fingern einfach möglich sein
Qu
ell
en
: Ta
pw
ort
hy:
De
sig
nin
g G
rea
t IP
ho
ne A
pp
s B
y J
osh
Cla
rk u
nd
htt
p:/
/m.k
ay.
co
m/e
n/k
ays
tore
80-90% der Leute sind
Rechtshänder
Eingaben ermöglichen
ohne häufig das Tastatur
Layout zu wechseln oder
die Tastatur zu verlassen
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
C: Content before Chrome
Der beschränkte Platz gilt es möglichst gut zu nutzen
Qu
ell
en
m.y
ou
tub
e.c
om
, E
sp
n.c
om
un
d I
ns
tag
ram
Minimale Navigation
Maximaler Content
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
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
Ausgangslage
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
Schritt 1:
Feld «Vorname» und
«Nachname» zusammenführen
Design Principle: Touch first
Ziel: auf der Tastatur bleiben
Design Principle:
Reduce to the max
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
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
email@example.com
Von 7 Eingabefelder auf 5
email@example.com
Reduktion der Anzahl
Eingabefelder
Ziel: Auf der Tatstatur
bleiben
Schritt 5:
Eingabefeld für Kreditkarten
Nummer optimieren
Von 7 Eingabefelder auf 3
email@example.com
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
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
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
Qu
ell
en
: a
pp
lein
sid
er.
co
m u
nd
qu
es
tvis
ual.
co
m
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
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
• Standorterkennung
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
• Multi-Touch-Sensoren
D: Use Device Capabilities
Mobile Geräte haben eine Reihe an wertvollen Funktionen, welche sich für die Dateneingabe nutzen lassen
Qu
ell
en
: h
ttp
://s
tati
c.l
uke
w.c
om
/To
uch
Ge
stu
reTe
mp
late
.pd
f
• 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
Qu
ell
en
: b
u.m
p
• 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
Qu
ell
en
: o
cc
ipit
al.
co
m/3
60
un
d h
ttp
://y
ou
tu.b
e/v
37
17
E_
AQ
fI
• 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
• 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
• 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
• 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
• 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
• 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.
• 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
• 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
• 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
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
1 4
Diskussion Best practices und Mobile
Expriences
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
Thank you!
Think mobile and…
... be prepared for the next big thing