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.

1. Mobile UX
Interaktions- und Designmuster
auf Android und iOS
Philipp Kumar

2. Über mich
Philipp Kumar
 Competence Center Mobile Lösungen
 Schwerpunkte
– Mobile Unternehmenslösungen
– Mobiltechnologien
228.05.2013Copyright © 2013 – akquinet AG

3. akquinet AG
328.05.2013Copyright © 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 (Business
Rules Management)
SAP Consulting
CRM, SCM, SRM
Logistik, Finance
SAP Development
SAP Technologie
SAP Basis
Open Text

4. 428.05.2013Copyright © 2013 – akquinet AG
Mobile User Experience

5. Mobile UX: Besonderheiten

6. Mobile UX: Besonderheiten

7. Mobile UX: Besonderheiten
© giantant.com

8. Mobile UX: Besonderheiten

9. 928.05.2013Copyright © 2013 – akquinet AG
iOS und Android

10. Bedienelemente

11. Bedienelemente

12. „Vertikale“ Navigation
Hardware-ButtonUI-Widget

13. Android: Back-Navigation

14. Android: Back-Navigation

15. Android: Up-Navigation

16. „Horizontale“ Navigation
(1) Action Bar TabsTab Bar

17. „Horizontale“ Navigation
(2) SwipeTab Bar

18. Kontextuelle Aktion
Long Press
-> Contextual Action Bar
Detail Disclosure Button

19. Spezialfall: Objekt löschen
Long Press
-> Contextual Action Bar
Swipe to Delete

20. Aktion auf mehreren Objekten
Long Press
-> Contextual Action Bar
Edit Mode

21. Undo
Undo BarShake Device

22. Refresh
Action Bar ButtonPull to Refresh

23. 2328.05.2013Copyright © 2013 – akquinet AG
Fazit

24. 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
2428.05.2013Copyright © 2013 – akquinet AG

25. Side Navigation
ohana-calendar.com

26. Side Navigation
ohana-calendar.com

27. Side Navigation

28. 2828.05.2013Copyright © 2013 – akquinet AG
Vielen Dank!