mobile ux: interaktions- und designmuster auf android und ios (linuxtag 2013, berlin)

28
Mobile UX Interaktions- und Designmuster auf Android und iOS Philipp Kumar

Upload: philippkumar

Post on 13-May-2015

208 views

Category:

Technology


1 download

DESCRIPTION

Eine sehr gute User Experience gehört heute zu den Grundvoraussetzungen erfolgreicher Apps. Deshalb ist es elementar, besondere Anforderungen an mobile Benutzungsschnittstellen zu kennen und zu berücksichtigen. Dazu gehören insbesondere diejenigen Design- und Interaktionsmuster, die von der Zielplattform abhängen. Entsprechend umfangreich und bisweilen unübersichtlich fallen die UX-Styleguides aus, die Apple und Google mittlerweile für ihre Plattformen iOS und Android bereitstellen. Dieser Vortrag erläutert zunächst die Besonderheiten mobiler User Experience gegenüber Desktopanwendungen. Danach werden die wichtigsten plattformspezifischen UX-Pattern der Plattformen Android und iOS, die zusammen über 85% des Smartphone-/Tabletmarkts abdecken, erläutert und gegenübergestellt.

TRANSCRIPT

Page 1: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Mobile UXInteraktions- und Designmuster auf Android und iOS

Philipp Kumar

Page 2: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

212.04.2023Copyright © 2013 – akquinet AG

Über mich

Philipp KumarCompetence Center Mobile LösungenSchwerpunkte

– Mobile Unternehmenslösungen– Mobiltechnologien

Page 3: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

312.04.2023

akquinet AG

Copyright © 2013 – akquinet AG

Business Consulting

JAVA

Business Solutions ‒ JBoss‒ Websphere‒ OSGi

Mobile Solutions‒ Android‒ iPhone

Innovative Solutions

User Experience‒ Analyse‒ Konzeption

Open Source

Microsoft / .NET

Dynamics NAV

Dynamics AX

Dynamics CRM

Sharepoint / .NET

Branchenlösungen‒ care concept‒ easy san‒ opus curare

Telematik

Internationale Projekte

Outsourcing

IT-Consulting & Projekte

Outsourcing & Services

RZ-Betrieb

Business Process Outsourcing

SAP

SAP-Security & Compliance

BRM/BRO (BusinessRules Management)

SAP Consulting CRM, SCM, SRM Logistik, Finance

SAP Development

SAP TechnologieSAP Basis

Open Text

Page 4: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

412.04.2023Copyright © 2013 – akquinet AG

Mobile User Experience

Page 5: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Mobile UX: Besonderheiten

Page 6: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Mobile UX: Besonderheiten

Page 7: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Mobile UX: Besonderheiten

© giantant.com

Page 8: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Mobile UX: Besonderheiten

Page 9: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

912.04.2023Copyright © 2013 – akquinet AG

iOS und Android

Page 10: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Bedienelemente

Page 11: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Bedienelemente

Page 12: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

„Vertikale“ Navigation

Hardware-ButtonUI-Widget

Page 13: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Android: Back-Navigation

Page 14: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Android: Back-Navigation

Page 15: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Android: Up-Navigation

Page 16: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

„Horizontale“ Navigation

(1) Action Bar TabsTab Bar

Page 17: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

„Horizontale“ Navigation

(2) SwipeTab Bar

Page 18: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Kontextuelle Aktion

Long Press-> Contextual Action BarDetail Disclosure Button

Page 19: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Spezialfall: Objekt löschen

Long Press-> Contextual Action BarSwipe to Delete

Page 20: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Aktion auf mehreren Objekten

Long Press-> Contextual Action BarEdit Mode

Page 21: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Undo

Undo BarShake Device

Page 22: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Refresh

Action Bar ButtonPull to Refresh

Page 23: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

2312.04.2023Copyright © 2013 – akquinet AG

Fazit

Page 24: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

2412.04.2023Copyright © 2013 – akquinet AG

Fazit

Interaktions- und Designmuster unterscheiden sich

Nichtberücksichtigung führt zu Usability-Problemen

Muster sind „im Fluss“– Populäre Apps etablieren Muster,

z.B. Twitter, Facebook

Page 25: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Side Navigation

ohana-calendar.com

Page 26: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Side Navigation

ohana-calendar.com

Page 27: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

Side Navigation

Page 28: Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013, Berlin)

2812.04.2023Copyright © 2013 – akquinet AG

Vielen Dank!