Mobile Usability Erkenntnisse aus 10 Jahren User Experience Testing

Transkript

1 Mobile Usability Erkenntnisse aus 10 Jahren User Experience Testing Tim Bosenick, GfK SirValUse Consulting GmbH NIK, Nürnberg, 13. Juli

2 Inhalt 1 UI Design auf mobilen Endgeräten 3» Struktur & Layout 6» Content 11» Icons, Buttons und Links 18» Texteingaben 30» Feedback 35 2 Ausblick 40 3 Quellenverzeichnis 42 2

3 User Interface Design auf mobilen Endgeräten 3

4 User Interface Design auf mobilen Endgeräten (1/2)» Mobile Endgeräte, wie Mobiltelefone und Smartphones, verfügen in der Regel über» Kleine Displays,» Beschränkte Eingabemöglichkeiten,» Limitierte und zumeist teure Bandbreiten zur Datenübertragung» Und eine verhältnismäßig geringe Rechenleistung. 1» Die damit verbundenen Besonderheiten beim User Interface Design erfordern die Berücksichtigung von gewissen Gestaltungsrichtlinien, um eine benutzerfreundliche Oberfläche zu schaffen.» Die nachfolgenden Informationen spiegeln die im Rahmen von User Experience Tests bei GfK SirValUse (im Folgenden: UET) erworbenen Kenntnisse und Erfahrungen zur Usability auf mobilen Endgeräten wider.» Ausgehend von Ergebnissen der UETs und von aktuellen Erkenntnissen aus Literatur und Web, werden typische Probleme des User Interface Designs mobiler Endgeräte aufgezeigt, und anhand von positiven und negativen Beispielen veranschaulicht dargestellt. 1 Quelle: 4

5 User Interface Design auf mobilen Endgeräten (2/2)» Bei der Nutzung von mobilen Endgeräten gelten generell andere Voraussetzungen, als bei der Nutzung eines PCs.» Der Nutzungskontext ist ein völlig anderer. Der Nutzer ist oftmals unterwegs und bewegt sich in einem meist hektischen Umfeld, wie z.b. am Flughafen oder beim Einkaufen. Hinzu kommen andere Störfaktoren wie schlechte Lichtverhältnisse oder eine unzureichende Netzabdeckung.» Die geringere Displaygröße erfordert zudem, dass Informationen und Inhalte auf einer kleinen Fläche dargestellt bzw. eingegeben werden müssen.» Die große Herausforderung beim User Interface Design mobiler Produkte ist also, trotz dieser besonderen Voraussetzungen eine hohe Usability zu gewährleistet, so dass der Nutzer möglichst schnell und effizient sein Ziel erreichen kann.» Dies kann nur erreicht werden, wenn Prioritäten gesetzt und nur die wesentlichen Inhalte und Funktionen in einer dem mobilen Nutzungskontext angemessenen Art und Weise angeboten werden.» Mobile WAP-Portale (z.b. wap.e-plus.de; mobil.sparkasse.de)» Apps für Smartphone-Betriebssysteme (z.b. 'ipostbank App' für das iphone) 5

6 Struktur & Layout 6

7 Struktur & Layout» Unabhängig davon, ob es sich um eine mobile Anwendung oder eine Site handelt, ist die Verwendung von einfachen Strukturen ein wichtiges Kriterium für mobile Usability.» Besonders bei der Adaption einer Desktop Anwendung oder Website auf den mobilen Kontext ist eine Reduzierung hinsichtlich Struktur und Layout zwingend erforderlich, um eine benutzerfreundliche Oberfläche anzubieten. "[ ] the mobile web needs to be a lot simpler than its desktop counterpart and a lot more goal or task-based to get the job done." 1» Um dies zu erreichen sind folgende Dinge zu beachten:» Wenige Kategorien bilden,» Auf tiefe Verschachtelungen verzichten,» Nicht wie im Web ein mehrspaltiges Layout wählen, sondern eines mit nur einer Spalte verwenden,» Wenn möglich, immer eine Möglichkeit anbieten, um einen Schritt zurück zu navigieren. "Limit scrolling to one direction, unless secondary scrolling cannot be avoided." 2 1 Quelle: Designing Usable Pocket Rockets: A Three Step Guide to Usability on the Mobile Web 2 Quelle: W3C - Mobile Web Initiative 7

8 Content 8

9 Content (1/2)» Auch in Bezug auf die angebotenen Inhalte einer mobilen Anwendung oder Site ist es wichtig, sich auf das Wesentliche zu beschränken, um die bestmögliche Usability anzubieten.» Um eine Reduzierung des inhaltlichen Angebotes zu erzielen, sollte zunächst die Frage nach den Kernfunktionen und -inhalten der mobilen Anwendung/Site beantwortet werden: "You need unique content and design. Forget the bulk of your dotcom thinking and approach the mobile web as the unique medium that it is." 2» Welche Use Cases sind im mobilen Kontext relevant?» Welche Inhalte und Funktionen werden hierfür benötigt? "Ensure that content is suitable for use in a mobile context." 1 1 Quelle: W3C - Mobile Web Initiative 2 Quelle: Designing Usable Pocket Rockets: A Three Step Guide to Usability on the Mobile Web 9

10 Content (2/2)» Wurden die Kernfunktionen/-inhalte festgelegt, so sollten diese entsprechend der besonderen Gegebenheiten mobiler Endgeräte angeboten werden.» Hierbei ist vor allem zu berücksichtigen, dass meist gezielt nach einer Information oder Funktion gesucht wird und nicht, wie beispielsweise beim Surfen am PC, lange im Web gestöbert wird.» Demzufolge sollten Inhalte und Funktionen schnell und unkompliziert auffindbar sein.» Konkret bedeutet dies:» Kurze Texte verwenden. Lange Fließtexte, die zu Lasten der Übersichtlichkeit gehen, vermeiden.» Wenig Links auf einer Seite aufführen, um einen schnellen Einstieg zu ermöglichen, "Always keep the user and the mobile use context in mind." 1» Keine Detailinformationen aufführen, diese zugunsten der Übersichtlichkeit ggf. über einen weiterführenden Button/Link anbieten. 1 Quelle: UI Rulebook Sony Ericsson 10

11 Icons, Buttons und Links 11

12 Icons, Buttons und Links Icons» Ergebnisse der UETs haben gezeigt, dass bei der Darstellung von Elementen wie Buttons, Icons und Links auf kleinen Displays gewisse Aspekte zu berücksichtigen sind, damit es zu keinerlei Schwierigkeiten hinsichtlich der Nutzung kommt.» Bei der Verwendung von Icons ist darauf zu achten, dass diese möglichst selbsterklärend sind. "The best icons have simple geometry and limit the amount of fine detail." 1» Es sollte auf den ersten Blick ersichtlich sein, welche Funktion sich hinter einem Icon verbirgt. Wenig aussagekräftige Icons werden oftmals falsch interpretiert oder schlimmstenfalls gar nicht als Navigationselement erkannt. "[ ] Icons should be clear, understandable, and leverage real-world metaphors that are familiar to users." 1» Ist ein Icon nicht selbsterklärend, so ist der Nutzer ggf. gezwungen einzelne Optionen erst zu öffnen, um dann zu entscheiden ob es die von ihm gesuchte Funktion ist. Dies wird schnell als umständlich empfunden und kann beim Nutzer Missmut auslösen. 1 Quelle: UI Design and Interaction Guide 12

13 Icons, Buttons und Links Buttons & Links» Bei der Verwendung von Buttons oder Links ist vor allem das richtige Wording wichtig. "Clearly identify the target of each link." 1» Für die Benennung eines Buttons oder eines Links ist eine möglichst aussagekräftige und präzise Bezeichnung zu wählen, um das Ziel klar herauszustellen. "Ensure that [ ] options are clear and immediately meaningful" 2» Um Missverständnisse zu verhindern, sind Abkürzungen möglichst zu vermeiden.» Kurze und prägnante Bezeichnungen sind hier die beste Wahl. 1 Quelle: W3C - Mobile Web Initiative 2 Quelle: Smartphonemag 13

14 Icons, Buttons und Links Beschriftete Icons» Eine Kombination aus Icon und Beschriftung hat sich als beste Lösung bewährt.» Wird nur ein Link oder nur ein Icon verwendet, so werden diese leicht übersehen, nicht als Navigationselement wahrgenommen oder die Bedeutung ist nicht immer verständlich. "Non text alternatives: Provide a text equivalent for every non-text element." 1» Das gleichzeitige Aufführen eines aussagekräftigen Icons und einer präzisen Bezeichnung wird hingegen erfahrungsgemäß gut verstanden. 1 Quelle: W3C - Mobile Web Initiative 14

15 Icons, Buttons und Links Platzierung» Bei Icons, Buttons und Links ist die richtige Platzierung von hoher Bedeutung.» Wichtige Funktionen, die durch einen Button, ein Icon oder einen Link angeboten werden, sollten möglichst im sichtbaren Bereich liegen bzw. im Menü möglichst weit oben angeboten werden, so dass sichergestellt werden kann, dass diese vom Nutzer auch wahrgenommen und gefunden werden.» Ebenfalls von großer Bedeutung ist der Abstand klickbarer Elemente zueinander.» Gerade bei mobilen Geräten mit Touchscreen ist es oftmals schwierig, einen Link oder Button auf dem kleinen Display mit dem Finger zu treffen.» Daher ist auf genügend Abstand zwischen den einzelnen Elementen zu achten. " Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices." 1 1 Quelle: W3C - Mobile Web Initiative 15

16 Texteingaben 16

17 Texteingaben» Texteingaben zählen zu den häufigsten Interaktionen bei der Nutzung von mobilen Endgeräten. *» So ist beispielsweise das Verfassen von Nachrichten, das Erstellen eines Termins, die Abfrage eines Passwortes und die Nutzung einer Suchfunktion mit einer Texteingabe verbunden.» Da diese Interaktion sehr häufig genutzt wird, sollte sie dem Nutzer so weit wie möglich erleichtert werden. Hinzu kommt, dass mobile Endgeräte meist unterwegs genutzt werden, was eine einfache und schnelle Texteingabe erfordert.» Eine Hilfe bei der Eingabe von Texten stellen folgende Möglichkeiten dar:» Autovervollständigung bzw. Vorschläge zur Vervollständigung bei Texteingaben,» Autokorrektur bei fehlerhaften Eingaben,» Suchfunktionen, die auch Abkürzungen der Suchbegriffe akzeptieren,» Wo möglich, Text vorgeben bzw. Optionen zur Auswahl stellen,» Häufiges Bestätigen von Texteingaben vermeiden. "Make text input easy, efficient and error-free." 1 1 Quelle: UI Rulebook Sony Ericsson 17

18 Feedback 18

19 Feedback (1/2)» Feedback dient dazu, eine vom Nutzer durchgeführte Aktion zu bestätigen.» Der Nutzer sollte zu jeder Zeit wissen, ob eine Aktion erfolgreich durchgeführt wurde, fehlgeschlagen ist oder noch andauert.» Fehlendes Feedback kann dem Nutzer schnell das Gefühl des Kontrollverlustes geben.» Eine klar verständliche und schnelle Rückmeldung darüber, was gerade passiert, ist daher wichtig, um Verunsicherung des Nutzers zu vermeiden.» Eine Aktion, die ein Feedback erfordert kann z. B. sein:» Speichern einer Eingabe oder Einstellung,» Versenden einer SMS, etc.» Ladevorgänge, die länger als eine Sekunde 2 dauern. "People expect immediate feedback when they operate a control." 1 1 Quelle: ios Developer Library 2 Quelle: UI Rulebook Sony Ericsson 19

20 Feedback (2/2)» Feedback kann auf unterschiedliche Weise gegeben werden:» Als Hinweis in Form eines Textes,» Durch eine grafische Darstellung (z. B. Prozessanzeige bei einem Ladevorgang),» Durch Audio-Feedback (Sound),» Durch visuelles Feedback (z. B. Hervorhebung eines Items beim "Durchblättern" einer Liste),» Durch haptisches Feedback (Vibration). " Make sure that messages [ ] are accurate and descriptive." 1» Dabei kann auch eine Kombination der verschiedenen Rückmeldungen sinnvoll sein:» Vor allem Audio-Feedback sollte nie als alleiniges Feedback angeboten werden.» Muss ein mobiles Endgerät aufgrund der äußeren Umstände stumm geschaltet werden, ist zusätzliches (z.b. haptisches) Feedback nützlich. 1 Quelle: Smartphonemag 20

21 Ausblick 21

22 Ausblick» Für weitere Informationen zum Thema sind besonders folgende Websites zu empfehlen:» W3C Mobile Web Initiative» Bietet aktuelle Informationen rund um das Thema 'Mobile Web', wie z.b. neueste Entwicklungen, Best Practices, weiterführende Links und Buchempfehlungen. UI Guidelines for mobile and tablet web app design.» Diese Seite bietet eine Sammlung an Links zu den Themen 'User Interface' und 'User Experience', die zu Informationen, Guidelines und Tipps von Herstellern wie Motorola, Nokia, Sony Ericsson etc. führen. 22

23 Quellenverzeichnis 23

24 Quellenverzeichnis» W3C - Mobile Web Initiative UI Guidelines for mobile and tablet web app design UI Rulebook Sony Ericsson UI Design and Interaction Guide ios Developer Library ciples.html 24

25 Quellenverzeichnis» Kommunikationsforschung FH Düsseldorf Designing Usable Pocket Rockets: A Three Step Guide to Usability on the Mobile Web Smartphonemag Usabilityblog E-Nor 25

26 Kontakt Tim Bosenick Managing Director T: F: E: bosenick@sirvaluse.de GfK SirValUse Consulting GmbH user experience research Burchardstraße Hamburg 26

27