Mobile Usability Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 1
Eric Fehse Lead Consultant Usability Engineering Studium der (kognitiven) Psychologie mit Nebenfach Informatik Denken, Lernen, Problemlösen, Mensch-Maschine-Interaktion 2001-2010 Siemens AG, Industrieautomatisierung Interaktionsdesign Webentwicklung Seit 2010 Zühlke Engineering, Eschborn und Hamburg User Centered Design Software (Desktop, Web, Mobil) Geräte (Medizintechnik) Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 2
Usability Engineering & User Centered Design Überblick über die Methodik Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 3
Definition: Usability / Gebrauchstauglichkeit [DIN EN ISO 9241-11, 1998] Gebrauchstauglichkeit (Usability) das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen. Benutzer Produkt Kontext Ziele effektiv effizient zufriedenstellend Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 4
Der User Centered Design Prozess (nach ISO 9241-210) Plane den User Centered Design Prozess Verstehe den Nutzungskontext Iteriere, wo nötig Evaluiere Spezifziere die Nutzeranforderungen Design-Lösung befriedigt Anforderungen Erstelle Design- Lösungen Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 5
Nutzungskontext verstehen Teilnehmende Beobachtung / Interview Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 6
Nutzungskontext verstehen Teilnehmende Beobachtung / Interview Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 7
Nutzeranforderungen Workshop Personas / Rollen Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 8
Nutzeranforderung Use Cases Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 9
Nutzeranforderungen Szenarien Konkreter Handlungsablauf einer konkreten Person Schritt für Schritt Soll-Ablauf mit der geplanten Applikation Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 10
Nutzeranforderungen Beispielszenario Zählermontage Monteur ruft auf seinem mobilen Gerät die heute anstehenden Aufträge ab lädt das benötigte Material ins Auto fährt zur Liegenschaft Torgasse 6-8 Beginnt mit Torgasse 6, Erdgeschoss Klingelt an 1. Wohnung links, erfasst Name des Anwohners im Gerät, stellt sich vor Geht in der Wohnung in 1. Zimmer links Vermisst Heizkörper, erfasst Werte im Tablet Identifiziert Heizkörper mittels des Tablets Ermittelt Montagepunkt mit dem Tablet, montiert Zähler Weiter mit nächstem Zimmer Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 11
Interaktions-Design Wireframes / Screenflow Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 12
User Interface Design Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 13
Evaluierung Usability Tests Iteration 1: Papierprototypen Iteration 2: Früher interaktiver Prototyp Iteration 3: Fortgeschrittener interaktiver Prototyp Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 14
Mobile Usability Herausforderungen und Lösungsansätze Mobiler Anwendungsfall Kleiner Formfaktor Touch Gesten Vielfalt an Geräten/Plattformen Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 15
Der mobile Anwendungsfall Was macht der Nutzer am Smartphone oder Tablet? Welches Ziel will er erreichen? In welcher Situation ist er? Mobilität und kleines Gerät Zwang zur Fokussierung Unterstütze eine Aufgabe, aber die richtig Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 16
Mobile Usability am Beispiel Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 17
Schnelle mobile Fahrplanauskunft Mobiler Anwendungsfall Ausgangspukt typischer Nutzer Wenige Startpunkte / Ziele Häufig genutzt Jetzt losfahren! Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 18
Ahoi! Fahrplan Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 19
Ahoi! Fahrplan Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 20
Ahoi! Fahrplan Designprinzipien Fokus auf eine Aufgabe Intro erklärt das Konzept Gute Defaults als Starthilfe Mit zwei Taps zum Ergebnis Große Touch-Ziele Räumliches Gedächtnis Entdeckbarkeit der Gesten? Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 21
Bring! Mobile Einkaufsliste Mobiler Anwendungsfall Produkte hinzufügen Teilen der Liste mit dem Partner Beim Einkauf: Produkte leicht finden und entfernen Smartphone nicht ständig in der Hand Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 22
Bring! Einkaufsliste Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 23
Bring! Einkaufsliste Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 24
Bring! Einkaufsliste Designprinzipien Fokus auf eine Aufgabe Große Tap-Ziele Wiedererkennung durch Skizzen der Produkte Ein Tap zum Hinzufügen und Entfernen App kann beim Einkauf geöffnet bleiben Synchronisation Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 25
Endkunden-App für Einzelhandelskette Typisches Kundenprojekt Anforderungen des Kunden an die App: Kommunikation des Markenimage Produktkatalog Sonderangebote App als digitale Kundenkarte Verwalten von Coupons Einlösen von Coupons Einkaufsliste Mobiler Anwendungsfall? Kleiner Formfaktor? Fokus? Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 26
Design for touch Mindestgröße von Touch-Zielen beachten Apple: 44x44pt Reduziert verfügbaren Platz auf dem Bildschirm Wenn für die Plattform ein bestimmtes Control existiert, sollte es immer verwendet werden Prinzip der Erwartungskonformität Nutzer wollen nicht lernen müssen, wie die Datumsauswahl in Ihrer App funktioniert Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 27
Gestensteuerung Entdeckbarkeit, physikalisches Mapping und Konvention Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 28
Gestensteuerung Entdeckbarkeit, physikalisches Mapping und Konvention Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 29
Mobile Usability Engineering Cross Platform Strategie Interaktionskonzept: Plattformübergreifend Look & Feel: Plattformspezifisch Ziele Navigation GUI Design Begriffe Abläufe Layout Nutzungsszenarien Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 30
Cross Platform Mobile User Interface Design Schrittweise Konkretisierung Abstrakt Plattformunabhängig Navigation Map Struktur Navigation Wireframes Layout Abläufe Konkret Plattformspezifisch GUI Design Interaktion Look & Feel Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 31
Usability Testing Mobile Usability Lab Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 32
Usability Walkthrough Schnell, günstig, effektiv Wireframes ausdrucken Müssen komplette Bediensequenz abbilden Ganze Screens oder Teile davon Anwender bedient den Papierprototypen Aufgabe basiert auf Szenario Umblättern per Hand ggf. protokollieren mit Video Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 33
Mobile Usability Mobile Usablity Dr. Eric Fehse 25. September 2014 Folie 34