Mobile Usability

Transcript

1. Nikkel Blaase MOBILE Usability
2. »Mobile Usability is Hard« [Jakob Nielsen]
3. INHALT • Mobiler Kontext • Testing • Web-Usability – 10 Guidelines • App-Usability – 10 Guidelines • Quellenangabe Und Abbildungsverzeichnis
4. MOBILER Kontext
5. 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
6. 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
7. RAHMENBEDINGUNGEN • Angebot an Apps und Verbreitung von mobilen Touchscreen-Geräten nimmt stetig zu • Es sollte auch eine bestmögliche Usability geachtet werden
8. TESTING
9. LABOR
11. IM NUTZUNGSKONTEXT
13. TESTING • Veränderungen der Haptik • Behinderungen der Testpersonen • Bewegung • Blickwinkel
14. WEB-USABILITY 10 Guidelines
15. »It‘s not enough that your site will display on a phone« [Jakob Nielsen]
16. »In user testing, websites use on mobile devices got very low scores, especially when users accessed Full Sites that weren‘t designed for mobile.«
17. »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.«
18. 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
19. 2 Einhalten von Webstandards • Im hoch fragmentierten Markt der Geräte und Browser sind Standards die beste Garantie für Interoperabilität
20. 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
21. 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
22. Optimieren der Navigation • Einfache Navigation und Eingabe sind bei der Nutzung von kleinen Bildschirmen und Tastaturen sowie geringer Bandbreite ein wichtiger Faktor 5
23. 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
24. 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
25. 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
26. 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
27. 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
28. »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]
29. BEISPIEL LEO-APP Übersetzung Ausdruck „Suit up“ mittels App, mobiler Website und Full Site suchen
30. BEISPIEL LEO-APP App
31. BEISPIEL LEO-APP Mobile Website (Full Site von einem mobilen Gerät nicht aufrufbar)
32. BEISPIEL LEO-APP
33. BEISPIEL LEO-APP
34. APP-USABILITY 10 Guidelines
35. 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
36. 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
37. 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.
38. 2 Den geringen Platz für das Wesentliche nutzen Bad Practice Das iPhone App von Klicktel verschwendet in der Tre#erdarstellung wertvollen Platz
39. 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
40. Bad Practice Der Gratis-Anrufen Button lässt sich nicht problemlos mit dem Finger antippen. Gute Sichtbarkeit bedeutet nicht gleich gute Bedienbarkeit 3
41. 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
42. 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
43. Good Practice Anrufer-Button ist klar als solcher erkennbar Call-To-Action Elemente beim Wort nehmen 4
44. 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
45. 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
46. 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
47. 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
48. 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
49. 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
50. Den Nutzer unterstützen Good Practice App von Qype schlägt dem Nutzer bereits während der Eingabe passende Tre#er vor. 7
51. 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
52. 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)
53. 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.
54. 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.
55. 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
56. Gerätespezifische Funktionalitäten sinnvoll nutzen Good Practice 8 Der Nutzer kann schon vorab ausprobieren, wie die Amaturen eingebaut im eigenen Bad aussehen.
57. 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
58. 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
59. 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
60. » 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.«
61. QUELLENANGABE Und Abbildungsverzeichnis
62. 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
63. QUELLENANGABE • Dennis Krannich, 2008, ripcord – Prototyping und Usability-Testing im nativen Benutzungskontext
64. 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
65. ZUKUNFT • Ted-Talk: „The shape-shifting future of the mobile phone“ von Fabian Hemmert • http://www.mobile-usability.info/ • Tesla Touch – Ober#ächen-Haptik
66. Ende