Vortrag am CREALOGIX CustomerDay, 19.5.2011 Was ist der beste Weg in die mobile Welt? Native Apps oder mobile Webseiten? Die Frage ist vor dem Hintergrund der zunehmenden Fragmentierung von App Stores und der rasanten Weiterentwicklung der Mobile Browser aktuell denn je. Da es keinen Königsweg gibt, kommt es auf die Ihre konkreten Anforderungen an... und auf Ihr Budget. Wir zeigen aktuelle Trends auf und geben Ihnen Tipps für die mobile Strategie Ihres Unternehmens.

1. Apps sind tot.
Lange leben Apps!
Daniel Estermann
Product Manager
Mobile Computing

2. Was das iPhone verändert hat
§ Ökosystem für alle Beteiligten
§ Bedienung mit natürlichen Gesten statt Stift
§ Einfache Bedienung (z.B. Apps herunterladen)
§ "Schöne" Benutzeroberflächen
§ Durchgängige User Experience...
...auch für Apps!
Was war eigentlich vor 2007?
© CREALOGIX Dienstag, Juli 26, 2011 2

3. Before "The phone that changed everything"
§ Wo war der Stift schon wieder?
§ Browser: Fehlanzeige
80% der Benutzer wissen nichts von den Internetfunktionen
Mobile Web ist langsam, kompliziert und hässlich
§ Installation von Software nur via PC
§ Bedienung umständlich und inkonsistent
© CREALOGIX Dienstag, Juli 26, 2011 3

4. Der Unterschied:
UX

5. Erfolgsr
ezept
Mobile
Apps
§ Richt
ige Zuta
§ Einfa ten
chheit
§ Liebe
zum De
tail
© CREALOGIX Dienstag, Juli 26, 2011 5

6. § Zutaten
§ Einfach
heit
§ Liebe z
Die richtigen Inhalte
W AS? Detail
um
Vom mobilen Benutzer,
nicht von bestehenden Inhalten ausgehen
Anzahl und Umfang
der Funktionen
reduzieren
r
W enige
hr!
i st me
6
© CREALOGIX Dienstag, Juli 26, 2011

7. § Zutaten
§ Einfach
heit
§ Liebe z
Menu & Navigation
WO?
um
Detail
Selbsterklärende Navigation
Priorisierung und
Platzierung der Inhalte
Bildsprache
Konsistenz
© CREALOGIX Dienstag, Juli 26, 2011 7

8. § Zutaten
§ Einfach
heit
§ Liebe z
? Bedienung
WIE
um
Detail
Bedienung und
Übergänge festlegen
Corporate Design
Offline-Verhalten
Touch-Feedback
© CREALOGIX Dienstag, Juli 26, 2011 8

9. Touch-Feedback
§ Kein haptisches Feedback
§ Kein "Mouse-Over" zum Entdecken
§ Feedback innerhalb 0.1s
§ Visuell / Vibration / Geräusch 9

10. § Ende des Scroll-Bereichs
- Android: Orange Färbung am Rand
++ iOS: Sprungfeder-Effekt
§ Link / Button
+ Frontartikel: Grauer Hintergrund
-- Links "Weitere Artikel"
© CREALOGIX Dienstag, Juli 26, 2011 10

11. Fragmentierung Mobiler Plattformen
Fast jede Plattform hat…
§ eigenen Marktplatz (App Store)
§ eigenes Betriebssystem / UI
§ spezielle Entwicklungswerzeuge
§ eine andere Programmiersprache
Müssen wir auf jeder Plattform
das Rad neu erfinden?
© CREALOGIX Dienstag, Juli 26, 2011 11

12. Cross-Plattform Entwicklung
beautiful & snappy UI
Native
App
cost/market provider dependancy
Cross substandard UX
Platform
Layer limited feature set
cost/no installation/no income sharing & restrictions
Web
App
simpler UI/no offline usage
Hybrid platform-specific UX with shared content
App
cost
© CREALOGIX Donnerstag, 19. Mai 2011 12

13. Hybrid Apps = Native Code + HTML
§ HTML
+ CSS
+ Javascript
§ Dynamisch
+ nachladbarer Code
§ Plattform-
übergreifende
Wiederverwendung

14. HTML5: Ready for prime time?
§ W3C Standard erst 2014 fertig?
§ Browser-Unterstützung noch sehr uneinheitlich
§ "There is not 1 mobile Webkit browser"
§ Auf Screenshots sieht es schnell aus wie eine native App
§ Performance und User Experience
(noch) nicht ganz auf gleicher Höhe wie native Apps
© CREALOGIX Dienstag, Juli 26, 2011 14

15. ...falls Sie auf folgendes
l: verzichten können:
Faustrege
e
Sie ein .
E rstellen b App.. § Spezial-Funktionen wie
e
Mo bile W Adressbuch, Kamera etc.
§ Push-Nachrichten
§ Offline-Betrieb
§ Hintergrund-
Operationen
§ App Store Präsenz
er
Kleinst er
sam § Überzeugende
gemein er
Nenn User Experience
© CREALOGIX Dienstag, Juli 26, 2011 15

16. Unsere aktuelle* Empfehlung
✔
Native Anspruchsvolle
App
Single-Plattform Apps
Cross
Keine Option für
Platform
Layer
seriöse Anwendungen
✔
Web
App Keep it simple
✔
Hybrid
App
Anspruchsvolle
Multi-Plattform Apps *gültig bis 2012
© CREALOGIX 16

17. Corporate Identity?
UBS Keyclub UBS Locator
© CREALOGIX Dienstag, Juli 26, 2011 17

18. App Icons ― beispielhafte Umsetzung CI/CD
Locator KeyClub FX Trader
© CREALOGIX Dienstag, Juli 26, 2011 18

19. Corporate User Experience
Einheitliche Experience über alle Kanäle:
Begriffe – Bildsprache – Struktur – Logischer Aufbau – Design
© CREALOGIX Dienstag, Juli 26, 2011 19

20. Tipps für ihre (mobile) Strategie
§ Was braucht der Kunde wo, wie, wann?
§ Mobilen Mehrwert anbieten
§ Mobile First ?
Multi-Channel => API First!
§ Kanalübergreifende Szenarien!
© CREALOGIX Dienstag, Juli 26, 2011 20

21. Mobile Corporate Website
§ Pflichtprogramm
Website muss zumindest funktionieren
Am besten ganz auf Flash verzichten
§ Quick Wins
Seitengrösse & Anz. Requests minimieren
Erkennung von Adressen und
Telefonnummern erleichtern
,
tm essen n!
Zuers ptimiere
§ Nice to have dann
o
Fluides Layout => Anzeige je nach Gerät
Umleitung auf optimierte Mobilseite
© CREALOGIX Dienstag, Juli 26, 2011 21

22. Ausblick
Forrester Research
"40% of all Internet traffic will be by Mobile in 2012"
§ Mobile lässt sich als Kanal nicht länger ignorieren
§ Web-basierte Lösungen gewinnen an Bedeutung
§ Die Ansprüche der Benutzer wachsen:
Eine 'billige' Lösung wird nicht goutiert
§ Schnelle Technologie-Entwicklung bedingt
regelmässige Überprüfung der Mobile-Strategie
© CREALOGIX Dienstag, Juli 26, 2011 22

23. Und welche Ideen haben Sie?
Daniel.Estermann
@crealogix.com

25. Mobile Dienstleistungen
Professionelle Beratung und Umsetzung aus einer Hand.
Mobile Enterprise Publishing &
Konzept User Experience Visual Design
Development Integration Distribution
§ Wir begleiten Sie. Von der Idee bis zum App Store.
§ Profis aus unterschiedlichen Teams arbeiten Hand in Hand.