Vortrag von Gregor Urech und Sibylle Peuker bei der ONE Konferenz in Zürich am 10. Mai 2012

1. 10. Mai 2012
Was User lieben, was sie hassen
11. überarbeitete Ausgabe
1
Was User lieben, was sie
hassen Vol. 11
Twitter: #onedesign 10.05.2012

2. 1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
2
Was User lieben, was sie
hassen Vol. 11
10.05.2012

3. Pro Tag werden 1.700.000 Smartphones verkauft
Weltweit im Q4 2011:
3
Was User lieben, was sie
hassen Vol. 11
10.05.2012

4. http://www.youtube.com/watch?v=WmhvdtX72eQ

5. Bild: http://globalmoxie.com/blog/mobile-web-vs-native.shtml

6. Was User hassen:
Webseiten, die auf dem Smartphone nicht benutzbar sind
Jeder, der eine Website hat, braucht eine
mobil-optimierte Version !

7. Wir brauchen eine App! - Brauchen wir eine
App?
> Eine gute App kann eine Sache besonders gut
nicht versuchen, Inhalt der gesamten Website in eine App zu
packen
> Eimalige/sporadische Nutzung vs. regelmässige Nutzung
Website für Gelegenheitsnutzer
App für Dinge, die man regelmässig braucht
> Belohne treue (registrierte/zahlende) User
Nicht jedes Mal einloggen, z.B. bei SBB App
Features, die mit mobiler Website nicht (oder nur schwer)
machbar sind, z.B. Barcode Scan bei coop@home
7
Was User lieben, was sie
hassen Vol. 11
10.05.2012

8. Millionen Apps für die Tonne?
> 68% benutzen 5 oder weniger Apps mindestens 1x pro Woche
(Quelle: Pew Research Center 2011)
> 26% nur einmal
> 26% mehr als 10 mal
> 48% 2-10 mal benutzt
Foto: http://www.forschungs-blog.de/category/allgemeines/

9. Was hindert die User hauptsächlich an der Nutzung?
1. Fehlende Gelegenheit / Nützlichkeit & Mangelndes Interesse *
2. Umständliche Bedienung *
3. Fehler
4. Mangelhafte Datenqualität
* Ergebnis aus einer hauseigenen Studie mit 974 Usern:
http://news.zeix.com/2010/02/02/zeix-mobile-studie-ergebnisse-zur-nutzung-mobiler-dienste-in-der-schweiz/
Foto: http://www.time.com/time/magazine/article/0,9171,1625167,00.html

10. Was braucht es für eine gute App?
Der richtige Use Case
Funktions-
Usability Datenqualität
tüchtigkeit
10
Was User lieben, was sie
hassen Vol. 11
10.05.2012

11. Augmented Reality: z.B. mit HRS App

12. Wie ein Usability-Fehler zu wütenden
Usern und einem schlechten Rating
führen kann
Die 3 am höchsten bewerteten Reviews:
"Slap." (The first sentence? "These guys have the
nerve to charge additional fees to current online
subscriber.")
"Useless app, have to pay twice for same
content."
"Charging for content — twice!?!"

13. Usability vs. Wow: ABC News iPad App

14. Usability vs. Wow: ABC News iPad App

15. Mobile Check In mit der Air Berlin App

16. Mobile Check In mit der Air Berlin App

17. Mobile Check In mit der Air Berlin App

18. Mobile Check In mit der Air Berlin App

19. User hassen: Irrelevante Suchergebnisse
Beispiel: Der nächste Bancomat ist in Sichtweite…

20. Rechtschreibvorschläge vom iOS

21. Mangelnde Einsatzmöglichkeit
Swiss Snow Report: Zoofinder:
«Sehr gut gemachte App, Wann könnte man das brauchen?
leider fahre ich sehr selten Ski.»

22. Mangelnde Einsatzmöglichkeit
Pfister Atelier App:
Exterm aufwändig für sehr wenige Produkte

23. Vom User ausgehen, nicht von der Technologie
Beispiel: QR Codes
Bild: http://commons.wikimedia.org/
wiki/User:Dontworry
Quelle: http://www.blogbusters.ch/sidekicks/qr- Foto: http://www.steinbildhauerei-vincent.de/
Bild: http://www.aldi-nord.de/print/kw202012/ codes-als-filmplakat/

24. Quelle: http://www.qrcodepress.com/qr-billboards-boosting-business/85258/

25. Quelle: http://labs.swisscom.ch/de/content/overview-submitted-apps

30. Wichtig: tiefes Verständnis der Zielgruppe
Toca House: Zielgruppe 2-6 Jährige

31. Flipboard: Mein persönliches Magazin

32. Flipboard: Twitter folgen früher und heute

33. Square: Bezahlen made easy
https://squareup.com/square http://vimeo.com/squareinc/register

34. Quelle: http://www.rovio.com/en/news/blog
Bild: http://itunes.apple.com/us/app/angry-birds-space/id499511971

35. Spiele mit Suchtfaktor: Tiny Tower

36. Tiny Tower

37. Tiny Tower

38. ASVZ App: Sportkurse an der ETH

39. Lärm App: Deutscher Berufsverband der
Hals-Nasen-Ohren-Ärzte

40. Zusammenfassung Apps
Grundlagen für eine App, die gerne benutzt
wird
> Der richtige Use Case
User kennenlernen und einbeziehen
Prozesse bis zu Ende durchdenken
Technologie benutzen, um Use Case zu unterstützen
> Perfekte Usability
Nicht nur Buttons und Farben
Benutzbarkeit im Kontext des Use Cases
> Funktionstüchtigkeit
User hat keine Geduld und keine Nachsicht
> Datenqualität
Falsche oder fehlende oder irrelevante Informationen 40
Was User lieben, was sie
bringen keinen Mehrwert hassen Vol. 11
10.05.2012

41. 1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
41
Was User lieben, was sie
hassen Vol. 11
10.05.2012

42. 1. Die unterschiedlichen Geräte
42
Was User lieben, was sie
hassen Vol. 11
10.05.2012

43. 1. Die unterschiedlichen Geräte
Die User und ihre Geräte
43
Was User lieben, was sie
hassen Vol. 11
10.05.2012

44. 1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Zu Hause Im Büro
44
Was User lieben, was sie
hassen Vol. 11
10.05.2012

45. 1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Immer dabei
45
Was User lieben, was sie
hassen Vol. 11
10.05.2012

46. 1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Als Alternative
zum Compi
46
Was User lieben, was sie
hassen Vol. 11
10.05.2012

47. 1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Kann (demnächst) auch noch
Internet
47
Was User lieben, was sie
hassen Vol. 11
10.05.2012

48. 1. Die unterschiedlichen Geräte
Der Nutzungs-Kontext und die Nutzungsart
> User nutzen die Geräte überall
> Es ist gibt bei keinem Gerät einen fixen Nutzungskontext
> Bei allen Geräten sind die User
Gestresst oder relaxed
Taskorientiert oder gelangweilt
Konzentriert aktiv oder konsumierend
48
Was User lieben, was sie
hassen Vol. 11
10.05.2012

49. 1. Die unterschiedlichen Geräte
Device-Shifting (1)
Am Freitag Freitags am Abend Am Samtag Mittag
Morgen im Zug vor dem TV zu Hause
Am Samstag
Morgen im Bett
Freitags
tagsüber im Büro 49
Was User lieben, was sie
hassen Vol. 11
 Nutzen auf den unterschiedlichen Geräten gleich Services/Websites 10.05.2012

50. http://www.youtube.com/watch?v=7NssFM_jkuE

51. 1. Die unterschiedlichen Geräte
Was die User hassen
> Websites, die auf allen Devices gleich aussehen
> Und deshalb auf einigen Devices fast nicht benutzbar sind
51
Was User lieben, was sie
hassen Vol. 11
10.05.2012

53. 1. Die unterschiedlichen Geräte
Was die User lieben
> Websites, die sich an die Eigenheiten der Devices anpassen
> Und deshalb auf allen Devices optimal konsumiert werden
können
53
Was User lieben, was sie
hassen Vol. 11
10.05.2012

61. 1. Die unterschiedlichen Geräte
Zusammenfassung
> Unterschiedliche Geräte haben
Unterschiedliche Ausgabemöglichkeiten (Screengrösse)
Unterschiedliche Eingabemöglichkeiten (inkl. Sensoren,
Kamera etc.)
> Es braucht deshalb eine Geräte-spezifische Optimierung
von
Informationsarchitektur
Interaktionsmöglichkeiten
Funktionalitäten
Inhalten (wie dargestellt und welche Inhalte) 61
Darstellung Was User lieben, was sie
hassen Vol. 11
10.05.2012

62. 2. Einheitliche Daten
> Die User Nutzen den gleichen Service/die selbe Website
über unterschiedliche Devices
> Und merken sich nicht, wann sie auf welchem Device was
gemacht haben
Nur, dass sie bei einem Service/auf einer Website etwas
gemacht haben
62
Was User lieben, was sie
hassen Vol. 11
10.05.2012

63. 2. Die gleichen Daten
Device-Shifting (3)
Am Freitag Freitags am Abend Am Samtag Mittag
Morgen im Zug vor dem TV zu Hause
Am Samstag
Morgen im Bett
Freitags
tagsüber im Büro 63
Was User lieben, was sie
hassen Vol. 11
 User merken sich nicht, auf welchem Device sie was gemacht haben. 10.05.2012

64. 2. Einheitliche Daten
Was User hassen
> Vorgeschichte:
Um die mobile App nutzen zu können, muss man sich auf der
Website registrieren und mobile Tickets freischalten
64
Was User lieben, was sie
hassen Vol. 11
10.05.2012

72. =

76. 2. Einheitliche Daten
Zusammenfassung
> Die Daten müssen zwischen allen Geräten synchron sein
Weil die User nicht wissen, was sie wann und wo gemacht
haben
> Wie erreicht man das?
Daten sind zentral (in der Cloud) abgelegt und werden immer
von dort geladen
Lokale Daten werden synchronisiert
User muss auf jedem Gerät identifiziert sein
 Cookies kommen an ihre Grenzen
 User muss sich bei jedem Gerät einloggen
76
 Dienste wie Facebook Connect, Twitter API oder Google Friend
Was User lieben, was sie
Connect hassen Vol. 11
10.05.2012

77. 3. Der gleiche Status
> Die User nutzen nicht nur die gleichen Services/Websites
über unterschiedliche Devices,
> Und erwarten, dass die Daten zwischen den Devices
immer synchron sind.
> Sondern starten sogar Use Cases auf einem Device und
führen sie auf einem anderen fort.
77
Was User lieben, was sie
hassen Vol. 11
10.05.2012

78. 3. Der gleiche Status
Device-Shifting (4)
Use Case 1
Am Freitag Freitags am Abend Am Samtag Mittag
Morgen im Zug vor dem TV zu Hause
Use Case 2 Am Samstag
Morgen im Bett
Freitags
tagsüber im Büro 78
Was User lieben, was sie
 User beginnen Use Cases auf einem Gerät und setzen sie auf einem hassen Vol. 11
10.05.2012
anderen fort.

79. 3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag
Morgen im Zug
79
Was User lieben, was sie
hassen Vol. 11
10.05.2012

81. 3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag
Morgen im Zug
Kindl
Während dem
81
Mittagessen im Park Was User lieben, was sie
hassen Vol. 11
10.05.2012

83. 3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag Am Abend zu Hause Use Case Buch lesen
Morgen im Zug
Kindl
Während dem
83
Mittagessen im Park Was User lieben, was sie
hassen Vol. 11
10.05.2012

85. 3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag Am Abend zu Hause Use Case Buch lesen
Morgen im Zug
Kindl
Während dem Am Freitag Abend
85
Mittagessen im Park im Bett Was User lieben, was sie
hassen Vol. 11
10.05.2012

88. 3. Der gleiche Status
Was User lieben
> Beispiel SBB - Eine gute übergreifende User Experience
wäre:
Am Compi im
Büro 88
Was User lieben, was sie
hassen Vol. 11
10.05.2012

89. Zürich
Wallisellen

92. Am Compi im
Büro
92
Was User lieben, was sie
hassen Vol. 11
10.05.2012

93. Unterwegs mit
dem iPhone
93
Was User lieben, was sie
hassen Vol. 11
10.05.2012

95. 3. Der gleiche Status
Zusammenfassung
> Herausragen tut, wer den Status übergibt
> Der User beginnt einen Prozess auf einem Device und
setzt ihn nahtlos auf dem nächsten fort
95
Was User lieben, was sie
hassen Vol. 11
10.05.2012

96. Die Cloud aus User-Sicht
Zusammenfassung
Drei Level
1. Optimierte Darstellung für unterschiedliche Devices
2. Gleiche Daten
3. Optimale Use Case-Unterstützung
 Liebe erntet man nur, wenn alle drei beachtet werden
96
Was User lieben, was sie
hassen Vol. 11
10.05.2012

97. 1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
97
Was User lieben, was sie
hassen Vol. 11
10.05.2012

98. Interaktion mit dem
Touchscreen
Alles ganz intuitiv?
98
Was User lieben, was sie
hassen Vol. 11
10.05.2012
Quelle: http://www.thehindu.com/multimedia/archive/00504/17mp_baby_ipad2_jpg_504164a.jpg

99. Intuitive Gesten durch physische Metaphern
Beispiele: Uhr lesen, Air Hockey

100. Einfache Gesten
100
Was User lieben, was sie
hassen Vol. 11
10.05.2012
Quelle: Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1071

101. Komlizierte Gesten
101
Was User lieben, was sie
hassen Vol. 11
10.05.2012
Quelle: Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1071

102. Paper iPad App
So toll!
…
Wo sind meine Stifte?
Wie komme ich zurück?
Undo ohne gebrochenen Finger?

103. Probleme mit Gesten
> Gesten sind unsichtbar und deshalb für den Benutzer schwer zu
erahnen
Mitteilungszentrale beim iPhone
Löschen von eMails auf dem iPhone
AR View bei Around me
Double Tap für Zoom In – Zoom Out bei Safari
> Manchmal zu schwierig
2 Finger gleichzeitig gegen Uhrzeiger drehen (Undo bei Paper App)
> Manchmal unerwünscht
Schütteln bei SBB App zeigt aktuelles Ticket
-> nicht erwünscht, wenn man zum Bahnhof rennt und schauen will, 103
auf welchem Gleis der Zug abfährt Was User lieben, was sie
hassen Vol. 11
10.05.2012

104. Deshalb nur Gesten verwenden
> die allgemein bekannt sind
z.B. auswählen durch Antippen, Scrollen, Vergrössern,
Verkleinern
> oder physische Metaphern sind
z.B. Bewegen durch ziehen
> oder als Shortcut für geübte User
z.B. etwas durch Schütteln auslösen, dass man auch anders
erreichen kann
104
Was User lieben, was sie
hassen Vol. 11
10.05.2012

105. 1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
105
Was User lieben, was sie
hassen Vol. 11
10.05.2012

106. 1. Typografie im Web
> Der gekonnte Einsatz von Typografie verbessert nicht nur
das Look & Feel einer Website
Corporate Identity
> Mit Typografie kann die Informationsarchitektur gestützt
werden
106
Was User lieben, was sie
hassen Vol. 11
10.05.2012

107. 1. Typografie im Web
Technischer Hintergrund (1)
Früher
> Durfte man nur Schriften verwenden, die auf dem
Computer des Benutzers installiert waren
> Andere Schriften mussten als Grafik eingebettet werden
Nicht Accessible
Nicht gut für Suchmaschinen (SEO)
Machen Seiten langsam
…
> Somit waren Webdesigner verdammt, Arial, Verdana usw.
zu nutzen
107
Was User lieben, was sie
hassen Vol. 11
10.05.2012

108. 1. Typografie im Web
Technischer Hintergrund (2)
Mit CSS3
> Dank @font-face Property besteht die Möglichkeit,
Schriften von einem Server zu laden
> Heute ist die gesamte Bandbreite an Fonts auch im Web
eingesetzt werden
108
Was User lieben, was sie
hassen Vol. 11
10.05.2012

109. http://daneden.me/type/

110. http://daneden.me/type/

111. http://daneden.me/type/

115. 1. Typografie im Web
Zusammenfassung
> Gekonnt eingesetzte Typografie
Führt den Nutzer beim Betrachten einer Seite
Verbessert die Lesbarkeit
Macht die Seiten einfacher scannbar
Priorisiert Inhalte
Zeigt Zusammengehörigkeit
& verbessert das Look & Feel
115
Was User lieben, was sie
hassen Vol. 11
10.05.2012

116. 2. Ein- / Ausblenden von Elementen
> Durch Ein-/Ausblenden von Inhalten kann man
Komplexität reduzieren
Den Überblick Vereinfachen durch Reduktion
Besser führen durch Details «on demand»
116
Was User lieben, was sie
hassen Vol. 11
10.05.2012

117. 2. Ein- / Ausblenden von Elementen
Technischer Hintergrund
> Ein-/Ausblenden wird meist mit Java Script gemacht
> Es wird ein Style-Attribut des Objektes geändert
Z.B. «display: block» zu «display: none»
> Die Seite wird nicht neu geladen
117
Was User lieben, was sie
hassen Vol. 11
10.05.2012

118. 2. Ein- / Ausblenden von Elementen
Was User hassen: Wenn der Backbutton nicht geht
> Java Script ist omnipräsent für die Steuerung der
Darstellung von Inhalten auf Websites
> Dadurch funktioniert der Backbutton oft nicht
erwartungskonform
118
Was User lieben, was sie
hassen Vol. 11
10.05.2012

119. 2. Ein- / Ausblenden von Elementen
Es entstehen aber noch weitere Probleme (1)
> Hintergrund
Es hat nicht mehr jede Seite (bzw. jeder Status einer Seite)
eine eigene URL
119
Was User lieben, was sie
hassen Vol. 11
10.05.2012

122. 2. Ein- / Ausblenden von Elementen
Es entstehen aber noch weitere Probleme (2)
> Identische URL 122
Was User lieben, was sie
hassen Vol. 11
10.05.2012

123. 2. Ein- / Ausblenden von Elementen
Es entstehen aber noch weitere Probleme (3)
> Folgeprobleme ausser nicht funktionierendem Back-Button:
…
Browser- Social- Link mailen Social Media
Bookmark Bookmark
123
Was User lieben, was sie
hassen Vol. 11
10.05.2012

128. 2. Reduktion durch Ein- / Ausblenden von Elementen
Zusammenfassung
> Eine Webseite kann unterschiedliche Status haben, z.B.
weil Elemente ein-/ausgeblendet werden
weil Elemente sich bewegen (Animationen)
weil Elemente sich gegenseitig ersetzen
> Der Wechsel zwischen den Status wird of im Client (z.B. mit
Java Script) gemacht
> Dadurch haben die einzelnen Status oft keine eigene URL
> Und können deshalb auch nicht adressiert und reproduziert
werden
Bei Klick auf Back-Button, Aus Link in E-Mail, als Bookmark, auf
Twitter, in Facebook etc.
> Es kommt auf die richtige Umsetzung an! 128
Was User lieben, was sie
hassen Vol. 11
10.05.2012

129. Endlich schön?
Fazit
> Es ist definitiv schöner möglich als früher
> Aber:
Auch mit den neuen technischen Möglichkeiten, muss man
aufpassen, dass nicht die Fehler wiederholt werden, die
schon mit Flash gemacht wurden
> Nämlich:
Vergessen, dass es bei Design primär um Funktionalität und
Inhalt geht und die Ästhetik diese immer unterstützen muss
Browser-Funktionalität kaputt machen
129
Was User lieben, was sie
hassen Vol. 11
10.05.2012

130. «Design should always obey content. Design
is there to make content easier to spot,
read and digest.»
130
http://yavkata.co.uk/weblog/xhtml_css/the-pitfalls-of-css3/
Was User lieben, was sie
hassen Vol. 11
10.05.2012

131. Wir bauen, was Sie gerne benutzen.
Sibylle Peuker
> sibylle.peuker@zeix.com
> @sibylle_p
Gregor Urech
> gregor.urech@zeix.com
> @gurech
Zeix AG
> www.zeix.com
> @zeix 131
Was User lieben, was sie
hassen Vol. 11
10.05.2012