Was User lieben, was sie hassen

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


1. Wie werden Apps erfolgreich

2. Die Cloud aus der User-Sicht

3. Intuitiv bedienen mit Gestures

4. Endlich schön

3


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


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




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?

http://www.zoo.ch/xml_1/internet/de/application/d2/d131/f221.cfm

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


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





4. Endlich schön

42


1. Die unterschiedlichen Geräte

43



Die User und ihre Geräte

44




Zu Hause Im Büro

45




Immer dabei

46




Als Alternative zum Compi

47




Kann (demnächst) auch noch Internet

48



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



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

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

51



Was die User hassen

> Websites, die auf allen Devices gleich aussehen

> Und deshalb auf einigen Devices fast nicht benutzbar sind

53



Was die User lieben

> Websites, die sich an die Eigenheiten der Devices anpassen

> Und deshalb auf allen Devices optimal konsumiert werden können

61



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


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


2. Die gleichen Daten

Device-Shifting (3)






User merken sich nicht, auf welchem Device sie was gemacht haben.

64



Was User hassen

> Vorgeschichte: Um die mobile App nutzen zu können, muss man sich auf der

Website registrieren und mobile Tickets freischalten

=

76



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


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



Device-Shifting (4)





Use Case 1

Use Case 2

User beginnen Use Cases auf einem Gerät und setzen sie auf einem anderen fort.


79



Was User lieben

> Die Kindl-Experience


81



Was User lieben



Während dem Mittagessen im Park

Kindl

83



Was User lieben



Am Abend zu Hause Use Case Buch lesen


Kindl

85



Was User lieben



Am Freitag Abend im Bett

Am Abend zu Hause Use Case Buch lesen


Kindl

88


Am Compi im Büro


Was User lieben

> Beispiel SBB - Eine gute übergreifende User Experience wäre:

Zürich

Wallisellen

92


Am Compi im Büro

93


Unterwegs mit dem iPhone

95



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


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





4. Endlich schön

98


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


Einfache Gesten

Quelle: Luke Wroblewski, http://www.lukew.com/ff/entry.asp?1071

101


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


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


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





4. Endlich schön

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

107



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



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/






115



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


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



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



Es entstehen aber noch weitere Probleme (1)

> Hintergrund Es hat nicht mehr jede Seite (bzw. jeder Status einer Seite)

eine eigene URL

122




> Identische URL

123




> Folgeprobleme ausser nicht funktionierendem Back-Button:

…

Browser-Bookmark

Social-Bookmark

Link mailen

Social Media

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!

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

130


«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


Wir bauen, was Sie gerne benutzen.

Sibylle Peuker > [email protected]

> @sibylle_p

Gregor Urech > [email protected]

> @gurech

Zeix AG > www.zeix.com

> @zeix

mailto:[email protected]

mailto:[email protected]

http://www.zeix.com/

Technology

Was User lieben, was sie hassen