MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical...
Transcript of MCK 9a: Neue Interaktionsformen bei mobilen Interfaces ... · Android Common App UI • A typical...
![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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/1.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/3.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/7.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/8.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/11.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/12.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/14.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/16.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/18.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/19.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/20.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/21.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022050210/5f5d0933e5f797301842084b/html5/thumbnails/22.jpg)
Fazit
• Mobile Interaktion hat und entwickelt eigene Interaktionsformen:
• Verzicht auf Menüs
• Gestensteuerung
• Sliding und Ebenenschichtung
• Scheinmechanik (Fast Swipe)
• Kriterien sind Handhabbarkeit und Spaß