User xperience entsteht nicht durch Zufall

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


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)



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…



Taskanalysen

Brainstorming und

Ideation

Personas

Taskanalysen z.b mit einer Customer Journey Map

Brainstorming und Ideengenerierung



Papierprototypen

Taskanalysen

Brainstorming und

Ideation

Klickbarer Prototyp

Personas

Papierprototypen erstellen

Erstes Testing, vielleicht mit Kollegen

Klickbarer Prototyp erstellen

Axure Pop App



Papierprototypen

Taskanalysen

Usability-Testing

Brainstorming und

Ideation

Klickbarer Prototyp

Personas

Expert-Reviews

Expert Reviews

Usability Testing



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



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


Benutzer die



Services.

A

... „Reduce to


„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



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


Ziel: Mobile optimierte

Controls verwenden

Type = month

Ziel: auf der Tastatur

bleiben

Mobile-optimierte

Eingabe

[email protected]

Schritt 1:

Feld «Vorname» und

«Nachname» zusammenführen

Schritt 2:

Felder Monat und Jahr

zusammenführen

Schritt 3:

Eingabe maskieren


E-Mail Eingabefeld maskieren;

erwartetes Format

Schritt 4:

Sekundär Aktion entfernen

Design Principle:

Reduce to the max,

Conversion Optimierung

[email protected]

Von 7 Eingabefelder auf 5

[email protected]

Reduktion der Anzahl

Eingabefelder

Ziel: Auf der Tatstatur

bleiben

Schritt 5:

Eingabefeld für Kreditkarten

Nummer optimieren

Qu

ell

en

: h

ttp

://y

ou

tu.b

e/X

Ua5

pfH

dV

wQ

http://youtu.be/XUa5pfHdVwQ

Von 7 Eingabefelder auf 3

[email protected]

Selbstbestimmung

und Kontrolle über


Benutzer die



Services.

A D

... „Reduce to


„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.



Selbstbestimmung

und Kontrolle über


Benutzer die



Services.

A D

... „Reduce to


„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.


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

http://www.youtube.com/watch?feature=player_embedded&v=h2OfQdYrHRs

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



• Standorterkennung



• Multi-Touch-Sensoren



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



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



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

http://youtu.be/v3717E_AQfI

• Ausrichtung: Richtung von einem digitalen Kompass



• Video-& Bild: Aufnahme / Eingang von einer Kamera (Native App)



• Dual-Kameras: Vorder-und Rückseite



#selfie

• Audio: Eingang von einem Mikrofon, Lautsprecher-Ausgang



• Ambient Light: hell / dunkel Umgebungswahrnehmung



• Nähe: Gerät Nähe zu physischen Objekten



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



• Geräteanschlüsse : über Bluetooth mehrere Geräte verbinden



• Barometer : messen des Luftdrucks



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