mck 9a: neue interaktionsformen bei mobilen interfaces ... · android common app ui • a typical...

22
MCK 9a: Neue Interaktionsformen bei mobilen Interfaces / Android 4

Upload: others

Post on 20-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

MCK 9a:

Neue Interaktionsformen bei mobilen Interfaces

/ Android 4

Page 2: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

HCI - Mobiles UI

• http://developer.apple.com/library/ios/#documentation/UserExperience/Conce

ptual/MobileHIG/Introduction/Introduction.html

Page 3: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android Design – Responsive Design

Page 4: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android Design Guidelines: Enchant me

Delight me in surprising ways

Real objects are more fun than buttons and menus

Let me make it mine

Get to know me

Page 5: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android UI

Page 6: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Keine Menüs:

Android Common App UI

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

Page 7: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android UI: Bars statt Menüs

• 1. Status Bar

• 2. Navigation Bar

• 3. System Bar

Page 8: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android UI: Menu-Alternative Action Bar

Page 9: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android UI: Menu-Alternative Kategorien

Thumb Fixed

Page 10: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android UI: Menu-Alternative Shortcut

Page 11: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android UI: Menu-Alternativen Swipe in Detail

Page 12: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Menu-Alternative: Action Bar Overflow

Page 13: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Menü-Alternative:

Sliding Menu

Page 14: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Android UI: Gesten

Page 15: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Longpress 2.0

Page 16: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Screen Use

Android UI: Master-Detail-Relation

Page 17: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Multi Pane Layouts

Smartphone

Tablet

Page 18: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Touch First - Eingaben

Spinner

Page 19: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Pop Ups

Page 20: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Sliders

Page 21: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Pickers

Page 22: MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical Android app consists of action bars and the app content area. • 1. Main Action

Fazit

• Mobile Interaktion hat und entwickelt eigene Interaktionsformen:

• Verzicht auf Menüs

• Gestensteuerung

• Sliding und Ebenenschichtung

• Scheinmechanik (Fast Swipe)

• Kriterien sind Handhabbarkeit und Spaß