$30 off During Our Annual Pro Sale. View Details »

Mobile Usability

Nikkel Blaase
May 31, 2011
100

Mobile Usability

Nikkel Blaase

May 31, 2011
Tweet

Transcript

  1. INHALT • Mobiler Kontext • Testing • Web-Usability – 10

    Guidelines • App-Usability – 10 Guidelines • Quellenangabe Und Abbildungsverzeichnis
  2. 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
  3. 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
  4. RAHMENBEDINGUNGEN • Angebot an Apps und Verbreitung von mobilen Touchscreen-Geräten

    nimmt stetig zu • Es sollte auch eine bestmögliche Usability geachtet werden
  5. »In user testing, websites use on mobile devices got very

    low scores, especially when users accessed Full Sites that weren‘t designed for mobile.«
  6. »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.«
  7. 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
  8. 2 Einhalten von Webstandards • Im hoch fragmentierten Markt der

    Geräte und Browser sind Standards die beste Garantie für Interoperabilität
  9. 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
  10. 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
  11. Optimieren der Navigation • Einfache Navigation und Eingabe sind bei

    der Nutzung von kleinen Bildschirmen und Tastaturen sowie geringer Bandbreite ein wichtiger Faktor 5
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. »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]
  18. 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
  19. 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
  20. 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.
  21. 2 Den geringen Platz für das Wesentliche nutzen Bad Practice

    Das iPhone App von Klicktel verschwendet in der Tre#erdarstellung wertvollen Platz
  22. 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
  23. Bad Practice Der Gratis-Anrufen Button lässt sich nicht problemlos mit

    dem Finger antippen. Gute Sichtbarkeit bedeutet nicht gleich gute Bedienbarkeit 3
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. Den Nutzer unterstützen Good Practice App von Qype schlägt dem

    Nutzer bereits während der Eingabe passende Tre#er vor. 7
  33. 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
  34. 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)
  35. 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.
  36. 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.
  37. 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
  38. Gerätespezifische Funktionalitäten sinnvoll nutzen Good Practice 8 Der Nutzer kann

    schon vorab ausprobieren, wie die Amaturen eingebaut im eigenen Bad aussehen.
  39. 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
  40. 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
  41. 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
  42. » 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.«
  43. 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
  44. 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
  45. ZUKUNFT • Ted-Talk: „The shape-shifting future of the mobile phone“

    von Fabian Hemmert • http://www.mobile-usability.info/ • Tesla Touch – Ober#ächen-Haptik