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 Android Creative Vision Design Guidelines

5 Android Design Guidelines: Enchant me

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

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

8 CI für Geräte: 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) Lautsprecher und Mikrophon immer verfügbar Verschiedene Benutzergewohnheiten : Haltung: Cradled, Single-Handed, Double-Handed

10 Responsive Design

11 Android-Interaktionsgrundlagen Grundlayout für Screens Android-Gesten Alternativen zum Menü Datenpräsentation Navigation die Funktion des Back- und Home-Buttons

12 Android UI

13 Android Common App UI: - Keine Menüs! A typical Android app consists of action bars and the app content area. 1. Main Action Bar The command and control center for your app. The main action bar includes elements for navigating your app's hierarchy and views, and also surfaces the most important actions. More on the Action Bar 2. View Control Allows users to switch between the different views that your app provides. Views typically consist of different arrangements of your data or different functional aspects of your app. 3. Content Area The space where the content of your app is displayed. 4. Split Action Bar Split action bars provide a way to distribute actions across additional bars located below the main action bar or at the bottom of the screen. In this example, a split action bar moves important actions that won't fit in the main bar to the bottom.

14 Android UI: Bars statt Menüs 1. Status Bar 2. Navigation Bar 3. System Bar

15 Android UI: Menu-Alternative Action Bar

16 Android UI: Menu-Alternative Kategorien Thumb Fixed

17 Android UI: Menu-Alternative Shortcut

18 Android UI: Menu-Alternativen Swipe in Detail

19 Menu-Alternative: Action Bar Overflow

20 Menü-Alternative: Drawer

21 Android UI: Basis-Touch-Gesten Mehr ist möglich:

22 Longpress

23 Screen Use Android UI: Master-Detail-Relation

24 Multi Pane Layouts Tablet Smartphone

25 Touch First - Eingaben Spinner

26 Pop Ups

27 Sliders

28 Pickers

29 Mobile Stukturmuster: 1. Informations-Architekturen Hierarchie Filterliste Thumbnails Schachtelung Registerkarten Dashboard

30 Mobile Strukturmuster: 2. Übergänge

31 Mobile UI-Patterns Beispiel Suchen, Sortieren, Filtern Zu viele Beispiele für einen Foliensatz...

32 Beispiel Yahoo-Wetter-App

33 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

34 Fazit Mobile Interaktion hat und entwickelt eigene Interaktionsformen: Verzicht auf Menüs Gestensteuerung Sliding und Ebenenschichtung Scheinmechanik (Fast Swipe) Kriterien sind Übersicht, Handhabbarkeit und Spaß

35 Das war's für dieses Semester Viel Spaß beim Umsetzen