Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Usability

C9105ed9263a733c6076f837abd645ed?s=47 Nikkel Blaase
May 31, 2011
67

Mobile Usability

C9105ed9263a733c6076f837abd645ed?s=128

Nikkel Blaase

May 31, 2011
Tweet

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

  10. None
  11. IM NUTZUNGSKONTEXT

  12. None
  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