Tweet
Tweet

Slide 1

Slide 1 text

Nikkel Blaase MOBILE Usability

Slide 2

Slide 2 text

»Mobile Usability is Hard« [Jakob Nielsen]

Slide 3

Slide 3 text

INHALT • Mobiler Kontext • Testing • Web-Usability – 10 Guidelines • App-Usability – 10 Guidelines • Quellenangabe Und Abbildungsverzeichnis

Slide 4

Slide 4 text

MOBILER Kontext

Slide 5

Slide 5 text

RAHMENBEDINGUNGEN 1. Geringe Bildschirmgröße • Wenig Raum für die Darstellung von Inhalten und Interaktionselementen 2. Ein völlig anderer Nutzungskontext • Lichtverhältnisse, Störquellen, Umfeld • Es wird gezielter und ortsbezogener nach Informationen gesucht

Slide 6

Slide 6 text

RAHMENBEDINGUNGEN • Studie 2009 von Pinch Media • Nur 3% der Personen, die eine App aus dem App Store heruntergeladen haben, verwenden diese nach 30 Tagen immer noch • Hauptgründe hierfür ist eine schlechte App-Usability und der damit einhergehende, fehlende Bezug zum mobilen Nutzungskontext

Slide 7

Slide 7 text

RAHMENBEDINGUNGEN • Angebot an Apps und Verbreitung von mobilen Touchscreen-Geräten nimmt stetig zu • Es sollte auch eine bestmögliche Usability geachtet werden

Slide 8

Slide 8 text

TESTING

Slide 9

Slide 9 text

LABOR

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

IM NUTZUNGSKONTEXT

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

TESTING • Veränderungen der Haptik • Behinderungen der Testpersonen • Bewegung • Blickwinkel

Slide 14

Slide 14 text

WEB-USABILITY 10 Guidelines

Slide 15

Slide 15 text

»It‘s not enough that your site will display on a phone« [Jakob Nielsen]

Slide 16

Slide 16 text

»In user testing, websites use on mobile devices got very low scores, especially when users accessed Full Sites that weren‘t designed for mobile.«

Slide 17

Slide 17 text

»Mobile Web Best Practice 1.0 ist ein Webstandard vom W3C, der Menschen dabei unterstützt, Inhalte so zu gestalten und auszuliefern, dass sie auch auf mobilen Geräten gut funktionieren.«

Slide 18

Slide 18 text

1 Gestalten für das eine Web • Für unterschiedliche Geräte gestaltete Inhalte sparen Kosten, erhöhen die Flexibilität und erreichen mehr Menschen

Slide 19

Slide 19 text

2 Einhalten von Webstandards • Im hoch fragmentierten Markt der Geräte und Browser sind Standards die beste Garantie für Interoperabilität

Slide 20

Slide 20 text

Vermeiden von Problemen • Durchdachtes Design kann Probleme mit der Nutzung vermeiden, die durch kleine Bildschirme und Tastaturen oder andere Eigenheiten von mobilen Geräten verursacht werden • Keine Frames, Pop-Ups, Image Maps, Tabellenlayouts oder gra!sche Abstandshalter 3

Slide 21

Slide 21 text

Beachten der Gerätelimits • Beachten sie bei der Auswahl einer Webtechnologie, dass mobile Geräte sich stark in ihren Funktionen unterscheiden • Unterstütztung von Cookies, Skripte, Css, Fonts und Farben? 4

Slide 22

Slide 22 text

Optimieren der Navigation • Einfache Navigation und Eingabe sind bei der Nutzung von kleinen Bildschirmen und Tastaturen sowie geringer Bandbreite ein wichtiger Faktor 5

Slide 23

Slide 23 text

Prüfen von Grafik und Farben • Bilder, Farben und Stil beleben den Inhalt, erfordern aber Sorgfalt wegen ungleichmäßiger Unterstützung für manche Formate auf Bildschirmen mit wenig Kontrast • Keine großen und hochau"ösenden Bilder • Beachtung von Farbkontrast und Lesbarkeit 6

Slide 24

Slide 24 text

Minimieren der Größe 7 • Kleinere Sites machen Nutzer glücklicher, weil sie weniger Zeit und Geld kosten • Kompakt halten mit nur einer Scroll- Richtung

Slide 25

Slide 25 text

Sparen am Datentransfer 8 • Bestimmte Funktionen von Webprotokollen können die Benutzbarkeit verbessern, indem sie die Auswirkungen von Flaschenhälsen und Verzögerungen minimieren • Kein Auto-Refresh oder automatisierte Weiterleitungen • Zahl der extern verlinkten Ressourcen klein halten

Slide 26

Slide 26 text

9 • Tastaturen und andere Eingabemethoden auf mobilen Geräten können umständlich zu bedienen sein. E!ektives Design minimiert ihren Gebrauch • Anzahl Tastendrücke gering halten • Vorgabenwerte anbieten • Standard Eingabemethoden und Sprache benutzen Helfen bei Nutzereingaben

Slide 27

Slide 27 text

1 • Mobile Webnutzer wollen kompakte Informationen, wenn die Zeit knapp und die Ablenkungsmöglichkeiten vielfältig sind • Kurze, aussagekräftige Seitentitel • Klare, einfache Sprache • Beschränkung der Inhalte auf die Nutzeranfrage Planen für mobile Nutzer 0

Slide 28

Slide 28 text

»Als die Tester auf mobile-Geräte-optimierte Seiten nutzten, stieg die durchschnittliche Erfolgsrate auf 64%. Deswegen ist es wichtig neben der eigentlichen Seite noch eine mobile Seite anzubieten. Links von der mobilen zur Vollen Seite und umgekehrt sollten auf jeden Fall angeboten werden, da einige Features meist nur auf der Vollen Seite angeboten werden« [Jakob Nielsen]

Slide 29

Slide 29 text

BEISPIEL LEO-APP Übersetzung Ausdruck „Suit up“ mittels App, mobiler Website und Full Site suchen

Slide 30

Slide 30 text

BEISPIEL LEO-APP App

Slide 31

Slide 31 text

BEISPIEL LEO-APP Mobile Website (Full Site von einem mobilen Gerät nicht aufrufbar)

Slide 32

Slide 32 text

BEISPIEL LEO-APP

Slide 33

Slide 33 text

BEISPIEL LEO-APP

Slide 34

Slide 34 text

APP-USABILITY 10 Guidelines

Slide 35

Slide 35 text

1 Auf bereits Bekanntes und Erlerntes setzen • Bedienprinzipien und -elemente von Standard-Apps oder Betriebssystem • Bereits Erlerntes auf die App anwendbar • Nutzer "ndet sich schneller zurecht • Apps haben keine Bedienungsanleitung • Müssen also selbsterklärend sein

Slide 36

Slide 36 text

1 Auf bereits Bekanntes und Erlerntes setzen Good Practice Bei der Notizen-App gelangt der Nutzer – erwartungskonform – links oben einen Schritt zurück, via Plus-Button können neue Dinge bzw. Notizen hinzugefügt werden

Slide 37

Slide 37 text

2 Den geringen Platz für das Wesentliche nutzen • Nicht alle Features der Website in die App quetschen, sondern lediglich essentielle Funktionen und Inhalte + ggf. Dinge die nur die App bietet • Funktionen und Inhalte die im mobilen Nutzungskontext noch zwingend notwendig sind weglassen • Der Platz sollte bestmöglich genutzt werden.

Slide 38

Slide 38 text

2 Den geringen Platz für das Wesentliche nutzen Bad Practice Das iPhone App von Klicktel verschwendet in der Tre#erdarstellung wertvollen Platz

Slide 39

Slide 39 text

Gute Sichtbarkeit bedeutet nicht gleich gute Bedienbarkeit • Websiteelemente wie Buttons oder Links sind vorrangig für die Bedienung mit der Maus gestaltet. • Bei Touchscreen-Geräten wird mit den Fingern bedient 3

Slide 40

Slide 40 text

Bad Practice Der Gratis-Anrufen Button lässt sich nicht problemlos mit dem Finger antippen. Gute Sichtbarkeit bedeutet nicht gleich gute Bedienbarkeit 3

Slide 41

Slide 41 text

Call-To-Action Elemente beim Wort nehmen • Navigationselement muss als solches klar und deutlich erkennbar sein. • Eine Button sollte z. B. auf einem mobilen Gerät noch deutlicher als solcher gestaltet sein, ein Eingabefeld noch klarer erkennbar sein usw. 4

Slide 42

Slide 42 text

Bad Practice Der Anrufer Button bei der App apotheken.de ist viel zu undeutlich als solcher gestaltet (Farbe, Größe, Position) und darüber hinaus noch schwer mit dem Finger zu tre#en. Call-To-Action Elemente beim Wort nehmen 4

Slide 43

Slide 43 text

Good Practice Anrufer-Button ist klar als solcher erkennbar Call-To-Action Elemente beim Wort nehmen 4

Slide 44

Slide 44 text

Auf hohe Kontrastverhältnisse achten • Mobile Geräte werden oftmals an Orten genutzt mit schlechten Lichtverhältnissen genutzt • Deswegen sollte unbedingt auf ein hohes Kontrastverhältnis (Schrift, Bedienelemente, Gra"ken, etc. ) geachtet werden. 5

Slide 45

Slide 45 text

Bad Practice App Mobile Butler ist unter Einwirkung von Sonnenlicht nicht problemlos zu betrachten (dunkle Schrift auf dunklem Hintergrund). Auf hohe Kontrastverhältnisse achten 5

Slide 46

Slide 46 text

Dem Nutzer klares Feedback geben • Interaktionen zwischen App und Nutzer sollte jederzeit Direkte Rückmeldung über die Aktion geben: Feedback (z. B. : Vibration) • Auch Ladevorgänge sollten immer angezeigt werden. • Gerade bei Touchscreen fehlt Haptik, da die tasten nicht physische Eingabelemente sind (z. B. Handytasten) 6

Slide 47

Slide 47 text

Dem Nutzer klares Feedback geben Good Practice App von Shopgate. Sobald der Nutzer einen Artikel in den Warenkorb legt, erhält er ein visuelles Feedback (Buttonzustand / - farbe und Animation: Artikelabbildung "iegt in den Warenkorb, Anzeige Artikelanzahl direkt am Warenkorb Icon) 6

Slide 48

Slide 48 text

Dem Nutzer klares Feedback geben Good Practice Bei der App Wikihood erhält der Nutzer jederzeit Rückmeldung, sobald die App Daten nachlädt. 6

Slide 49

Slide 49 text

Den Nutzer unterstützen 7 • Wenn App von unterwegs aufgerufen wird, hat der Nutzer meist nicht besonder viel Zeit oder er be"ndet sich in einem hektischen Umfeld • Daher ist es wichtig, dass die App dem Nutzer entgegenkommt und ihn unterstützt

Slide 50

Slide 50 text

Den Nutzer unterstützen Good Practice App von Qype schlägt dem Nutzer bereits während der Eingabe passende Tre#er vor. 7

Slide 51

Slide 51 text

Den Nutzer unterstützen Good Practice App von Shopgate bietet dem Nutzer eine Express- Registrierung an, inklusive der Information, dass diese nur 30 Sekunden dauert. 7

Slide 52

Slide 52 text

Gerätespezifische Funktionalitäten sinnvoll nutzen 8 • Aktuelle Geräte bieten zahlreiche Extras, die von Apps sinnvoll genutzt werden sollten: • Automatische Lagebestimmung (hochkant oder quer) • Multitouch-Gesten (Douple-Tap --> Doppelklick, Pinching --> Vergrößern oder Verkleinernen mit Zwei-Fingern)

Slide 53

Slide 53 text

Gerätespezifische Funktionalitäten sinnvoll nutzen 8 • Aktuelle Geräte bieten zahlreiche Extras, die von Apps sinnvoll genutzt werden sollten: • Kamerafunktion • Online-Anbindung • Standort des Nutzers • etc.

Slide 54

Slide 54 text

Gerätespezifische Funktionalitäten sinnvoll nutzen 8 • Durch sinnvolle Nutzung und Kombination der gerätespezi"schen Funktionalitäten kann sich App von gewöhnlichen Webangeboten abheben und bietet einen echten Mehrwert / Vorteil.

Slide 55

Slide 55 text

Gerätespezifische Funktionalitäten sinnvoll nutzen Good Practice Die Maps-App ermittelt automatisch den aktuellen Standort des Nutzers und setzt diesen als Startpunkt ein. 8

Slide 56

Slide 56 text

Gerätespezifische Funktionalitäten sinnvoll nutzen Good Practice 8 Der Nutzer kann schon vorab ausprobieren, wie die Amaturen eingebaut im eigenen Bad aussehen.

Slide 57

Slide 57 text

Gerätespezifische Funktionalitäten sinnvoll nutzen Good Practice Die Maps-App ermittelt automatisch den aktuellen Standort des Nutzers und setzt diesen als Startpunkt ein. 8

Slide 58

Slide 58 text

9 • App frühzeitig und idealerweise während des gesamten Entwicklungsprozesses mit Nutzern testen • Je nach App und Zielgruppe bieten sich hierfür Usability-Tests im Labor an. Die App frühzeitig mit Nutzern testen

Slide 59

Slide 59 text

1 • Alternativ zu Nutzertests im Labor sollten insbesondere durch den mobilen Kontext Nutzer in ihrem natürlichen Umfeld, also vor Ort, beobachtet werden • So lässt sich feststellen ob die App auch im realen mobilen Kontext problemlos nutzbar ist Nutzer in ihrem natürlichen Umfeld beobachten 0

Slide 60

Slide 60 text

» Fazit: Gestaltung von nutzerfreundlichen Apps ist keine leichte Aufgabe. Vor allem müssen die Bedürfnisse und Anforderungen der Nutzer im mobilen Kontext identi!ziert werden und bei der App-Gestaltung berücksichtigt werden.«

Slide 61

Slide 61 text

QUELLENANGABE Und Abbildungsverzeichnis

Slide 62

Slide 62 text

QUELLENANGABE • Keck, Moritz (2010): App-Usability: Herausforderungen und Guidelines. In: Forschungsbeiträge der eResult GmbH, http://www.eresult.de/studien_artikel/ forschungsbeitraege/app-usability.html • Jakob Nielsen (2009): Mobile Usability, http://useit.com/alertbox/mobile- usability.html • W3C, 2011, http://w3c.de/Flyer/ mwbp_"ipcards_de.html

Slide 63

Slide 63 text

QUELLENANGABE • Dennis Krannich, 2008, ripcord – Prototyping und Usability-Testing im nativen Benutzungskontext

Slide 64

Slide 64 text

ABBILDUNGSVERZEICHNIS • Abbildungen App: http://www.eresult.de/ studien_artikel/forschungsbeitraege/app- usability.html • Ease Of Web, http://www.easeofweb.com/ img/mobile_usability_test_setting_2.jpg • HIT Technical Report 2004-1 • Eigene Screenshots

Slide 65

Slide 65 text

ZUKUNFT • Ted-Talk: „The shape-shifting future of the mobile phone“ von Fabian Hemmert • http://www.mobile-usability.info/ • Tesla Touch – Ober#ächen-Haptik

Slide 66

Slide 66 text

Ende