HCI 15 Einführung in die Mobile Usability. am Beispiel der Android UX

Transkript

1 HCI 15 Einführung in die Mobile Usability am Beispiel der Android UX

2 Mit dem iphone begann eine mobile Revolution Quelle: Whitepaper "Going Mobile"

3 Mobil was ist anders? Gerät mit Identität (und Status) Multi-Media-Computer in der Hosentasche bezahlbar und verfügbar für jeden Apps - unbegrenzte Möglichkeiten für jeden erschließbar Alltagsgegenstand jeder hat Anforderungen Konkurrenz um UX: Das Gerät ist so gut wie seine Apps!

4 FOKUS AUF USER EXPERIENCE Das kleine Gerät soll nicht als unterlegen empfunden werden sondern als cleverer, flexibler, angepasster, universeller und vor allem persönlicher!

5 Android Creative Vision Design Guidelines

6 Android Design Guidelines: Simplify my Life v Keep it brief v Pictures are faster than words v Decide for me but let me have the final say v Only show what I need when I need it v I should always know where I am v Never loose my stuff v If it looks the same, it should act the same v Only interrupt me when it is important

7 Android Design Guidelines: Make me Amazing v Give me tricks that work everywhere v It's not my fault v Sprinkle encouragement v Do the heavy lifting for me v Make important things fast

8 Google Material Design

9 Mobil was ist anders? Kleines Display Interaktion muss neu entwickelt werden Verschiedene Display-Größen, von Phone bis Tablet Responsive Design Netzverbindung intermittierend Seamlessness Telefon hat Vorrang Unterbrechungen Texteingaben sind kompliziert Viele Sensoren für zusätzliche Informationen (z.b. GPS) Kamera, Lautsprecher und Mikrophon immer verfügbar Verschiedene Benutzergewohnheiten : Haltung: Cradled, Single-Handed, Double-Handed

10 INTERAKTIONSDESIGN FÜR KLEINE GERÄTE Kleine Geräte Optimale Nutzung des kleinen Screens Nahtlose Einpassung in das IT-Erlebnis Sensoren einbeziehen Vorteile gegenüber den großen Geräten entwickeln à Weniger ist mehr Konnektivität im Zentrum Unkomplizierte Verbindungen: WLAN, NFC, Bluetooth Seamlessness Überbrückung von Verbindungswechseln und -störungen

11 Responsive Design

12 (Android-) Interaktionsdesign Grundlayout für Screens Menü-Alternativen Android-Gesten Touch First Eingaben Android-UI-Patterns Screen Use Navigation, Übergänge, Orientierung

13 Android UI

14 Android Common App UI: - Keine Menüs! 1. Main Action Bar 2. View Control 3. Content Area 4. Split Action Bar

15 MENÜ-ALTERNATIVEN Kein Gesamtmenü Keine Sitemap Reduktion durch Kontextualisierung Aktionsmöglichkeiten nur dort, wo sie gebraucht werden Tab-Konzept für Contentbereich (View Control) Anzeigen in Kurzform, expandierbar Long Press und Burger-Menüs für kontextbezogene Aktionen Zusätzliche Action Bar oder Side Drawer für ständig verfügbare Aktionen.

16 Android UI: Menu-Alternative View Control

17 Android UI: Menu-Alternative Kategorien Thumb Fixed

18 Android UI: Menu-Alternative Shortcut/Details

19 Menüalternative Side Drawer

20 Menu-Alternative: Action Bar Overflow

21 Kontextsensitiv: z.b. Longpress und Kontext-Overflow Cloud Computing

22 Kontextsensitiv: z.b. Pop Ups

23 Mobile UI-Patterns com/galleries

24 GESTEN- UND SENSORSTEUERUNG Multi-Touch-Gesten Vorzug für "natürliche" Gesten (unpräzise Positionierung) Nutzung weiterer Sensoren Schütteln Neigen Umdrehen/Anlegen Klopfen Nutzung impliziter Informationen Helligkeit GPS Umgebungsgeräusche

25 Android UI: Basi Touch Gestures 2013 Mehr ist möglich:

26 Android Touch Mechanics 2015 Das hat sich viel weiter entwickelt...

27 TOUCH FIRST UNKOMPLIZIERTE EINGABEN Vermeidung der virtuellen Tastatur Auswahllisten: Skala (Zahlen), Spinner, Slider Picker (Aufzählungstypen, Listen,...) Autovervollständigung (Text) Kontextlisten, z.b. Kürzlich, Häufig,... Tastaturalternativen Spracheingabe Wischeingaben, z.b. Swype Bilder oder Videos als Daten Sensornutzung GPS, Kamera (Texterkennung, QR-Codes) NFC

28 Touch First - Spinner

29 Touch First: Pickers

30 Touch First: Sliders

31 Nutzung von Kontextinformationen Kontextinformationen nutzen, um Eingaben zu sparen Aktuelles Datum Aktueller Ort Kontakte, Termine, Reiseroute, Ankunftzeit, Flugnummer,... Das bedeutet Zugriff auf Apps und Sensoren verzichtbare Optimierungen! Ausschluss ermöglichen! Oder Freigabemöglichkeit einblenden

32 NAVIGATION Navigation muss topologisch verständlich sein kleiner Anzeigebereich (Ausschnitt, Schlüsselloch) verstehbare Anordnung: welchen Ausschnitt sehe ich? "Wo" liegen die anderen Sichten, wie komme ich dahin? Navigationskonzept: Topologie Navigationshandlungen (Klicken, Wischen,...) Übergänge (harter Wechsel, zentrale Überlagerung, seitliches Hineinschieben,...

33 Ursprüngliches Android-Navigationskonzept: Master-Detail-Relation

34 Weitere übliche Informations-Architekturen Hierarchie Filterliste Thumbnails Schachtelung Registerkarten Dashboard

35 Übergänge

36 Multi-Pane Layout Infos sind logisch in Zeilen und Spalten angeordnet. Handy navigiert darüber wie ein Sichtfenster. Wischgesten als natürliche Navigation.

37 Multi Pane Layout: Überblick und Responsives Design: Tablet Smartphone

38 Multi-Pane-Layout Swipe in Detail

39 Multi-Pane-Layout Yahoo-Wetter-App

40 Multi-Pane-Layout Postkarten-App Ihr Grußtext Empfänger Ihr Text oder als handschriftlichertext Absender Warenkorb Versandoptionen Freimachung Bildfreigabe Summe zur Kasse

41 ZUSAMMENFASSUNG Fokus auf User Experience Interaktionsdesign für kleine, verbundene Geräte Keine Menüs nur kontextbezogene Aktionen Gesten- und Sensorsteuerung Touch First unkomplizierte Eingaben Topologisches Navigationskonzept

42 10 Tipps für die App-Gestaltung 1. Fang ganz von vorn an 2. Erkenne deine Benutzer 3. Beachte die 80/20-Regel 4. Gestalte aufgabenbezogen 5. Mach es einfach 6. Respektiere die Plattform 7. Nutze implizite Information 8. Entwirf unterbrechungs-stabil 9. Plane kontinuierliche Verbesserungen 10. Nutze Best Practices und deine eigene Erfahrung

43 Fazit Mobile Interaktion hat und entwickelt eigene Interaktionsformen: Verzicht auf Menüs Gestensteuerung Nutzung von Sensoren Touch Input Sliding und Ebenenschichtung Topologisches Navigationskonzept Kriterien sind Übersicht, Handhabbarkeit und SPASS J Bild: pixabay

44 Mobil bleibt spannend - Viel Spaß beim Umsetzen J