was user lieben, was sie hassen - gregor urech, sibylle peuker, zeix ag
DESCRIPTION
Vortrag Von Gregor Urech und SIbylle Peuker, Zeix AG, bei der ONE Konferenz 2012 in ZürichTRANSCRIPT
1
Was User lieben, was sie hassen Vol. 11 10.05.2012
Was User lieben, was sie hassen
11. überarbeitete Ausgabe
10. Mai 2012
Twitter: #onedesign
2
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
3
Was User lieben, was sie hassen Vol. 11 10.05.2012
Pro Tag werden 1.700.000 Smartphones verkauft
Weltweit im Q4 2011:
http://www.youtube.com/watch?v=WmhvdtX72eQ
Bild: http://globalmoxie.com/blog/mobile-web-vs-native.shtml
Was User hassen: Webseiten, die auf dem Smartphone nicht benutzbar sind
Jeder, der eine Website hat, braucht eine mobil-optimierte Version !
7
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
Foto: http://www.forschungs-blog.de/category/allgemeines/
> 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
Millionen Apps für die Tonne?
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 User lieben, was sie hassen Vol. 11 10.05.2012
Was braucht es für eine gute App?
Der richtige Use Case
Usability Funktions-tüchtigkeit
Datenqualität
Augmented Reality: z.B. mit HRS App
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!?!"
Usability vs. Wow: ABC News iPad App
Usability vs. Wow: ABC News iPad App
Mobile Check In mit der Air Berlin App
Mobile Check In mit der Air Berlin App
Mobile Check In mit der Air Berlin App
Mobile Check In mit der Air Berlin App
User hassen: Irrelevante Suchergebnisse
Beispiel: Der nächste Bancomat ist in Sichtweite…
Rechtschreibvorschläge vom iOS
Mangelnde Einsatzmöglichkeit
Swiss Snow Report: «Sehr gut gemachte App, leider fahre ich sehr selten Ski.»
Zoofinder: Wann könnte man das brauchen?
Mangelnde Einsatzmöglichkeit
Pfister Atelier App: Exterm aufwändig für sehr wenige Produkte
Vom User ausgehen, nicht von der Technologie
Beispiel: QR Codes
Quelle: http://www.blogbusters.ch/sidekicks/qr-codes-als-filmplakat/ Bild: http://www.aldi-nord.de/print/kw202012/
Bild: http://commons.wikimedia.org/ wiki/User:Dontworry
Foto: http://www.steinbildhauerei-vincent.de/
Quelle: http://www.qrcodepress.com/qr-billboards-boosting-business/85258/
Quelle: http://labs.sw
isscom.ch/de/content/overview
-submitted-apps
Wichtig: tiefes Verständnis der Zielgruppe
Toca House: Zielgruppe 2-6 Jährige
Flipboard: Mein persönliches Magazin
Flipboard: Twitter folgen früher und heute
https://squareup.com/square http://vimeo.com/squareinc/register
Square: Bezahlen made easy
Bild: http://itunes.apple.com/us/app/angry-birds-space/id499511971
Quelle: http://www.rovio.com/en/news/blog
Spiele mit Suchtfaktor: Tiny Tower
Tiny Tower
Tiny Tower
ASVZ App: Sportkurse an der ETH
Lärm App: Deutscher Berufsverband der Hals-Nasen-Ohren-Ärzte
40
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
bringen keinen Mehrwert
41
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
42
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Die unterschiedlichen Geräte
43
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Die unterschiedlichen Geräte
Die User und ihre Geräte
44
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Zu Hause Im Büro
45
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Immer dabei
46
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Als Alternative zum Compi
47
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Die unterschiedlichen Geräte
Die User und ihre Geräte
Kann (demnächst) auch noch Internet
48
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
49
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Die unterschiedlichen Geräte
Device-Shifting (1)
Freitags tagsüber im Büro
Freitags am Abend vor dem TV
Am Freitag Morgen im Zug
Am Samstag Morgen im Bett
Am Samtag Mittag zu Hause
Nutzen auf den unterschiedlichen Geräten gleich Services/Websites
http://www.youtube.com/watch?v=7NssFM_jkuE
51
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
53
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
61
Was User lieben, was sie hassen Vol. 11 10.05.2012
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)
Darstellung
62
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
63
Was User lieben, was sie hassen Vol. 11 10.05.2012
2. Die gleichen Daten
Device-Shifting (3)
Freitags tagsüber im Büro
Freitags am Abend vor dem TV
Am Freitag Morgen im Zug
Am Samstag Morgen im Bett
Am Samtag Mittag zu Hause
User merken sich nicht, auf welchem Device sie was gemacht haben.
64
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
=
76
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
Dienste wie Facebook Connect, Twitter API oder Google Friend
Connect
77
Was User lieben, was sie hassen Vol. 11 10.05.2012
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.
78
Was User lieben, was sie hassen Vol. 11 10.05.2012
3. Der gleiche Status
Device-Shifting (4)
Freitags am Abend vor dem TV
Am Freitag Morgen im Zug
Am Samstag Morgen im Bett
Am Samtag Mittag zu Hause
Use Case 1
Use Case 2
User beginnen Use Cases auf einem Gerät und setzen sie auf einem anderen fort.
Freitags tagsüber im Büro
79
Was User lieben, was sie hassen Vol. 11 10.05.2012
3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag Morgen im Zug
81
Was User lieben, was sie hassen Vol. 11 10.05.2012
3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag Morgen im Zug
Während dem Mittagessen im Park
Kindl
83
Was User lieben, was sie hassen Vol. 11 10.05.2012
3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag Morgen im Zug
Am Abend zu Hause Use Case Buch lesen
Während dem Mittagessen im Park
Kindl
85
Was User lieben, was sie hassen Vol. 11 10.05.2012
3. Der gleiche Status
Was User lieben
> Die Kindl-Experience
Am Freitag Morgen im Zug
Am Freitag Abend im Bett
Am Abend zu Hause Use Case Buch lesen
Während dem Mittagessen im Park
Kindl
88
Was User lieben, was sie hassen Vol. 11 10.05.2012
Am Compi im Büro
3. Der gleiche Status
Was User lieben
> Beispiel SBB - Eine gute übergreifende User Experience wäre:
Zürich
Wallisellen
92
Was User lieben, was sie hassen Vol. 11 10.05.2012
Am Compi im Büro
93
Was User lieben, was sie hassen Vol. 11 10.05.2012
Unterwegs mit dem iPhone
95
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
96
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
97
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
98
Was User lieben, was sie hassen Vol. 11 10.05.2012
Interaktion mit dem Touchscreen Alles ganz intuitiv?
Quelle: http://www.thehindu.com/multimedia/archive/00504/17mp_baby_ipad2_jpg_504164a.jpg
Intuitive Gesten durch physische Metaphern
Beispiele: Uhr lesen, Air Hockey
100
Was User lieben, was sie hassen Vol. 11 10.05.2012
Einfache Gesten
Quelle: Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1071
101
Was User lieben, was sie hassen Vol. 11 10.05.2012
Komlizierte Gesten
Quelle: Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1071
Paper iPad App
So toll! … Wo sind meine Stifte? Wie komme ich zurück? Undo ohne gebrochenen Finger?
103
Was User lieben, was sie hassen Vol. 11 10.05.2012
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,
auf welchem Gleis der Zug abfährt
104
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
105
Was User lieben, was sie hassen Vol. 11 10.05.2012
1. Wie werden Apps erfolgreich
2. Die Cloud aus der User-Sicht
3. Intuitiv bedienen mit Gestures
4. Endlich schön
106
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
107
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
108
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
http://daneden.me/type/
http://daneden.me/type/
http://daneden.me/type/
115
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
116
Was User lieben, was sie hassen Vol. 11 10.05.2012
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»
117
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
118
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
119
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
122
Was User lieben, was sie hassen Vol. 11 10.05.2012
2. Ein- / Ausblenden von Elementen
Es entstehen aber noch weitere Probleme (2)
> Identische URL
123
Was User lieben, was sie hassen Vol. 11 10.05.2012
2. Ein- / Ausblenden von Elementen
Es entstehen aber noch weitere Probleme (3)
> Folgeprobleme ausser nicht funktionierendem Back-Button:
…
Browser-Bookmark
Social-Bookmark
Link mailen
Social Media
128
Was User lieben, was sie hassen Vol. 11 10.05.2012
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!
129
Was User lieben, was sie hassen Vol. 11 10.05.2012
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
130
Was User lieben, was sie hassen Vol. 11 10.05.2012
«Design should always obey content. Design is there to make content easier to spot, read and digest.»
http://yavkata.co.uk/weblog/xhtml_css/the-pitfalls-of-css3/
131
Was User lieben, was sie hassen Vol. 11 10.05.2012
Wir bauen, was Sie gerne benutzen.
Sibylle Peuker > [email protected]
> @sibylle_p
Gregor Urech > [email protected]
> @gurech
Zeix AG > www.zeix.com
> @zeix