hci 15 einführung in die mobile usability - schmiedecke · 2018-01-02 · einführung in die...
TRANSCRIPT
HCI 15Einführung in die Mobile Usability
… am Beispiel der Android UX
Quelle: www.redant.com – Whitepaper "Going Mobile"
MitdemiPhonebeganneinemobileRevolution
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!
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!
Android Creative Vision – Design Guidelines
http://developer.android.com/design/get-started/principles.html
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
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
Google Material Design
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
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
Responsive Design
(Android-) Interaktionsdesign
• Grundlayout für Screens
• Menü-Alternativen
• Android-Gesten
• Touch First – Eingaben
• Android-UI-Patterns
• Screen Use – Navigation, Übergänge, Orientierung
Android UI
Android Common App UI:- Keine Menüs!
• 1. Main Action
Bar
2. View Control
3. Content Area
4. Split Action Bar
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.
Android UI: Menu-Alternative View Control
Android UI: Menu-Alternative Kategorien
Thumb Fixed
Android UI: Menu-Alternative Shortcut/Details
Menüalternative Side Drawer
Menu-Alternative: Action Bar Overflow
Kontextsensitiv: z.B. Longpress und Kontext-Overflow
Cloud Computing
Kontextsensitiv: z.B. Pop Ups
Mobile UI-Patterns
www.mobile-patterns.com/galleries
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
Android UI: Basi Touch Gestures 2013
Mehr ist möglich: http://www.lukew.com/touch/
Android Touch Mechanics 2015
Das hat sich viel weiter entwickelt...
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
Touch First - Spinner
Touch First: Pickers
Touch First: Sliders
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
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,...
Ursprüngliches Android-Navigationskonzept:Master-Detail-Relation
Weitere übliche Informations-Architekturen
HierarchieFilterliste
Thumbnails
Schachtelung Registerkarten Dashboard
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
Übergänge
http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
Multi-Pane Layout
• Infos sind logisch in Zeilen und Spalten angeordnet.
• Handy navigiert darüber wie ein Sichtfenster.
• Wischgesten als natürliche Navigation.
Multi Pane Layout:Überblick und Responsives Design:
Smartphone
Tablet
Multi-Pane-LayoutSwipe in Detail
Multi-Pane-Layout Yahoo-Wetter-App
Multi-Pane-Layout Postkarten-App
Empfänger
oder als handschrift-licherText
Ihr Grußtext
Ihr Text
Absender
Versandoptionen
Freimachung
Bildfreigabe
Warenkorb
Summe
zur Kasse
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
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
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
Mobil bleibt spannend -
Viel Spaß beim Umsetzen J