HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die...

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

Transcript of HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die...

Page 1: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

HCI 15Einführung in die Mobile Usability

… am Beispiel der Android UX

Page 2: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Quelle: www.redant.com – Whitepaper "Going Mobile"

MitdemiPhonebeganneinemobileRevolution

Page 3: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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!

Page 4: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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!

Page 5: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android Creative Vision – Design Guidelines

http://developer.android.com/design/get-started/principles.html

Page 6: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 7: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 8: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Google Material Design

Page 9: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 10: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 11: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Responsive Design

Page 12: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

(Android-) Interaktionsdesign

• Grundlayout für Screens

• Menü-Alternativen

• Android-Gesten

• Touch First – Eingaben

• Android-UI-Patterns

• Screen Use – Navigation, Übergänge, Orientierung

Page 13: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android UI

Page 14: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android Common App UI:- Keine Menüs!

• 1. Main Action

Bar

2. View Control

3. Content Area

4. Split Action Bar

Page 15: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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.

Page 16: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android UI: Menu-Alternative View Control

Page 17: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android UI: Menu-Alternative Kategorien

Thumb Fixed

Page 18: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android UI: Menu-Alternative Shortcut/Details

Page 19: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Menüalternative Side Drawer

Page 20: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Menu-Alternative: Action Bar Overflow

Page 21: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Kontextsensitiv: z.B. Longpress und Kontext-Overflow

Cloud Computing

Page 22: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Kontextsensitiv: z.B. Pop Ups

Page 23: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Mobile UI-Patterns

www.mobile-patterns.com/galleries

Page 24: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 25: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android UI: Basi Touch Gestures 2013

Mehr ist möglich: http://www.lukew.com/touch/

Page 26: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Android Touch Mechanics 2015

Das hat sich viel weiter entwickelt...

Page 27: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 28: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Touch First - Spinner

Page 29: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Touch First: Pickers

Page 30: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Touch First: Sliders

Page 31: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 32: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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,...

Page 33: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 34: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Weitere übliche Informations-Architekturen

HierarchieFilterliste

Thumbnails

Schachtelung Registerkarten Dashboard

http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/

Page 35: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Übergänge

http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/

Page 36: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Multi-Pane Layout

• Infos sind logisch in Zeilen und Spalten angeordnet.

• Handy navigiert darüber wie ein Sichtfenster.

• Wischgesten als natürliche Navigation.

Page 37: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Multi Pane Layout:Überblick und Responsives Design:

Smartphone

Tablet

Page 38: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Multi-Pane-LayoutSwipe in Detail

Page 39: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Multi-Pane-Layout Yahoo-Wetter-App

Page 40: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Multi-Pane-Layout Postkarten-App

Empfänger

oder als handschrift-licherText

Ihr Grußtext

Ihr Text

Absender

Versandoptionen

Freimachung

Bildfreigabe

Warenkorb

Summe

zur Kasse

Page 41: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 42: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

10 Tipps für die App-Gestaltungwww.redant.com/articles/ten-tips-for-mobile-ux

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

Page 43: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

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

Page 44: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten

Mobil bleibt spannend -

Viel Spaß beim Umsetzen J