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!


Top Related