Mobile Facts 2013: Definitions, facts, trends and best practices for mobile apps and websites.

1. @Ad_Og
M
Adrian
Oggenfuss
BILE
adrian@moca.ch
DIE
WICHTIGSTEN
FAKTEN
2013
(DEUTSCH)

2. § App
§ Mobile
Webseite
§ Search
§ Email
§ SMS
§ Telefon
WIE
KANN
DER
KUNDE
ERREICHT
WERDEN?

3. APP
UND
MOBILE
WEB:
DEFINITIONEN

4. DEFINITION:
NATIVE
APP
Eine
App
(ApplicaKon
=
Anwendung)
ist
eine,
speziell
für
den
jeweiligen
Mobilgeräte-­‐Typ
entwickelte
Anwendung,
die
vor
der
Verwendung
auf
den
Gerätespeicher
geladen
und
dort
installiert
werden
muss.
Sie
funkKoniert
nur
auf
dem
Betriebssystem,
für
das
sie
programmiert
wurde.

5. DEFINITION:
MOBILE
WEB
Mobile
Webseiten
geben
den
Inhalt
einer
Webseite
in
einem
grafisch
reduzierten
Erscheinungsbild
wieder.
Sie
werden
wie
eine
gewöhnliche
Webseite
über
den
Browser
aus
dem
Internet
geladen.
Sie
kann
durch
einen
Browser
auf
allen
Geräten
aufgerufen
werden.

6. DEFINITION:
WEB
APP
Eine
Web-­‐App
ist
eine
KombinaKon
von
App
und
mobiler
Webseite.
Sie
ist,
wie
eine
mobile
Webseite,
über
HTML,
CSS
und
Java-­‐Script
programmiert
und
lässt
sich
somit
auch
über
einen
Browser
öffnen.
Dadurch
ist
sie
auf
jedem
Gerät
abru`ar
und
muss
nicht
vorher
installiert
werden.
Ihr
Erscheinungsbild
und
die
FunkKonen
sind
allerdings,
soweit
es
die
Programmierung
zulässt,
denen
einer
App
angepasst.

7. WAS
IST
EIGENTLICH
HTML5?
HTML5
ist
die
fünae
Revision
von
HTML,
CSS3
und
Java
Script.
Zusammen
können
mit
diesen
Technologien
komplexe
ApplikaKonen
entwickelt
werden,
was
zuvor
nur
für
Desktop-­‐Plaeormen
(oder
naKve)
möglich
war.
Beispiele:
hfp://fff.cmiscm.com/#!/main
hfp://beta.theexpressiveweb.com/
hfp://harmoniousapp.com/app/#sketchpad

8. DEFINITION:
HYBRID
APP
Eine
hybride
App
ist
eine
Mischung
aus
Web-­‐
und
naKver
App.
Sie
basiert
auf
plaeormübergreifendem
HTML5
und
ist
in
einen
naKven
Container
eingebefet.
Hybrid
Apps
werden
deshalb
auch
als
„Container
Apps“
bezeichnet.

9. HYBRID
APPS:
BEISPIELE

10. APP
ODER
MOBILE
WEB?
ES
KOMMT
DRAUF
AN

11. FAKTOR:
BUDGET
Die
Programmierung
einer
naPven
App
ist
aufwändiger
und
damit
teurer
als
die
Entwicklung
einer
mobilen
Webseite.
Grund:
Eine
naKve
App
muss
für
jede
Plaeorm
separat
programmiert
werden
(ObjecKve
C
für
iOS,
Java
für
Android).
Eine
mobile
Webseite
wird
hingegen
ein
Mal
programmiert
und
läua
auf
allen
Plaeormen.

12. FAKTOR:
FUNKTIONEN
Welchen
FunkKonsumfang
muss
die
App
bieten?
Komplexere
Anwendungen,
bzw.
solche
die
auf
Fähigkeiten
des
Smartphones
wie
Kamera,
Fotoalbum,
Accelerometer,
Kalender
oder
Push-­‐Nachrichten
zugreifen,
benöPgen
meist
eine
Umsetzung
als
naPve
(hybride)
App.
Insbesondere
Games
fallen
oa
in
diese
Kategorie.

13. FAKTOR:
PROGRAMMIERUNG
Sind
unternehmensintern
Entwickler
vorhanden?
Welche
Programmiersprachen
beherrschen
diese?
Es
ist
schwieriger
erfahrene
(gute)
Programmierer
für
die
naKven
Programmiersprachen
zu
finden.

14. FAKTOR:
BEDIENBARKEIT
Wie
wichKg
ist
die
Benutzer-­‐InterakPon?
Sollen
aufwändige
Grafiken
und
AnimaKonen
(Slider
etc)
zum
Einsatz
kommen.
Generell
gilt:
Mit
einer
naKven
App
ist
die
Bedienbarkeit
(aktuell)
flüssiger,
schneller
und
visuell
ansprechender.
Dies
einerseits
aus
dem
Grund,
dass
der
lokale
Speicher
des
Geräts
verwendet
wird
und
andererseits
da
spezifisch
für
die
Eigenheiten
des
OS
programmiert
werden
kann.

15. FAKTOR:
ONLINE-­‐VERBINDUNG
Mobile
Webseiten
benöKgen
eine
Internetverbindung,
um
benutzt
werden
zu
können.
NaPve
Apps
funkPonieren
auch
offline,
da
die
Anwendung
auf
dem
Gerät
lokal
gespeichert
wurde.
(html5
bietet
offline
Anwendbarkeit,
diese
FunkKon
wird
aber
noch
nicht
von
allen
Browsern
unterstützt).

16. FAKTOR:
INSTALLATION
Eine
mobile
Webseite
bietet
den
Vorteil,
dass
sie
ohne
Download
und
InstallaPon
von
jedem
internepähigen
Gerät
abgerufen
werden
kann.
Zudem
kann
die
Seite
über
mobile
Search
gefunden
werden
und
dient
als
ZieldesKnaKon
für
Mobile
AdverKsing.
Apps
müssen
über
eine
separate,
digitale
Vertriebspla^orm
(Google
Play,
App-­‐Store,
WP
Store,
BlackBerry
World...)
heruntergeladen
und
installiert
werden.
Mai
2013:
hfp://www.social-­‐secrets.com/2013/05/google-­‐play-­‐greia-­‐apple-­‐app-­‐store-­‐an/
Kumulierte
Anzahl
der
weltweit
heruntergeladenen
Apps
(in
Mrd)

17. FAKTOR:
PRÄSENZ/BRANDING
Eine
App
gilt
zu
einem
gewissen
Grad
immer
noch
als
„Status-­‐Symbol“.
Zudem
ist
man
mit
einem
Icon
auf
dem
Home-­‐Screen
des
Geräts
vertreten,
was
einen
schnellen
Zugriff
ermöglicht.
Eine
mobile
Webseite
bietet
den
Vorteil,
dass
sie
über
Search
gefunden
wird
und
das
Ranking
(Google
Page
Rank)
der
Desktop-­‐Webseite
ausgenutzt
wird.

18. EXKURS:
TOUCH
ICONS
Was
ist
ein
Touch
Icon?
Ein
Touch
Icon
ist
ein
«Bookmark»
in
Form
eines
Symbols
auf
dem
Handy-­‐Display.
Wird
dieses
Symbol
angeKppt,
öffnet
sich
automaKsch
die
Mobile
Website
im
Handybrowser.
Es
ist
in
seiner
Erscheinung
idenKsch
wie
das
Icon
einer
App.
Bookmark
Bubble:
Eine
«Bookmark
Bubble»
fordert
Onlinegäste
beim
Besuch
der
Mobile
Website
dazu
auf,
das
Touch
Icon
auf
dem
Display
des
Smartphones
abzuspeichern.
(Best
PracKce:
Nur
bei
Returning
Visitors
anzeigen)

19. APP
ODER
MOBILE
WEB?
MEINUNGEN
UND
TRENDS

20. April
2013:
hfp://venturebeat.com/2013/04/17/linkedin-­‐mobile-­‐web-­‐breakup/
MEINUNG:
LINKEDIN
Kiran
Prasad
Senior
director
mobile
engineering,
LinkedIn
«It’s
not
that
HTML5
isn’t
ready;
it’s
that
the
ecosystem
doesn’t
support
it.
…
There
are
tools,
but
they’re
at
the
beginning.
People
are
just
figuring
out
the
basics.»

21. MEINUNG:
FACEBOOK
hfp://techcrunch.com/2012/09/11/mark-­‐zuckerberg-­‐our-­‐biggest-­‐mistake-­‐with-­‐mobile-­‐was-­‐be}ng-­‐too-­‐much-­‐on-­‐html5/
«Our
biggest
mistake
was
befng
too
much
on
HTML5»

22. hfp://mobithinking.com/naKve-­‐or-­‐web-­‐app?goback=.gde_4331698_member_99237509
Lie
Luo
Head
of
telecom,
technology
and
media
pracKce
at
Global
Intelligence
Alliance
(GIA)
TREND:
MULTI
SCREEN
MulK
Screen
verlangt
nach
einem
durchgängigen
Nutzererlebnis.
Die
Apps
sollten
über
verschiedene
Geräte
hinweg
Schnihstellen
bieten
und
dieselben
Inhalte
und
Bedienbarkeit
bieten.
Um
dies
zu
erreichen
sind
Web
Apps
deutlich
besser
geeignet.
«It
is
important
to
recognize
that
we
are
increasingly
moving
toward
a
‘mulK-­‐screen’
world,
where
brands
will
want
to
engage
their
users
across
a
variety
of
media
touch
points.
I
believe
Web
apps
will
take
on
a
larger
mind
share
among
both
publishers
and
consumers,
as
hardware
complexity
grows.»

23. TREND:
MOBILE
EMAIL
Ein
weiterer
wichKger
Grund
ist,
dass
Mobile
E-­‐Mail
mit
hohen
Zuwachsraten
von
Jahr
zu
Jahr
mehr
boomt.
Somit
wird
das
Gros
an
E-­‐Mail
MarkeKng
zunehmend
via
Mobile
Device
gelesen
und
die
Response
bedingt
eine
mobile-­‐
opPmierte
Landingpage.

24. KONKLUSION
§ HYBRID
APPS
WERDEN
ATTRAKTIVER
UND
DESHALB
VERMEHRT
ZU
SEHEN
SEIN
§ DIE
ENTWICKLUNG
VON
MOBILE
WEB
(APPS)
HÄNGT
VON
DER
ENTWICKLUNG
UND
ADAPTION
VON
HTML5
AB
§ JEDES
UNTERNEHMEN
MUSS
ZEIT
DAFÜR
INVESTIEREN
HERAUSZUFINDEN,
WAS
FÜR
IHRE
DIENSTLEISTUNG
UND
KUNDEN
AM
MEISTEN
SINN
MACHT.

25. APP
UND
MOBILE
WEB?
UMSETZUNG

26. Eine
Mobile
Website
wird
parallel
zur
konvenPonellen
Website
betrieben.
Greia
ein
Smartphone
auf
die
konvenKonelle
Website
zu,
wird
automaKsch
die
für
Smartphones
opKmierte
Mobileversion
angeboten.
Ein
Wechsel
aus
der
handyopKmierten
Mobilesite
auf
die
Standard-­‐Website
und
von
dieser
zurück
auf
die
Mobilesite
ist
jederzeit
gewährleistet.
MOBILE-­‐SITE:
STANDALONE
Die
Mobile
Website
ist
normalerweise
die
kleine
Schwester
der
staKonären
Website.
Sie
enthält
ausgewählte,
für
Mobile
Use
Cases
relevante
Inhalte
und
ist
für
die
NavigaKon
via
Touchscreen
opKmiert.
Sie
enthält
weniger
Grafiken
um
die
Ladezeit
zu
verkürzen
und
arbeitet
im
Design
stärker
mit
Kontrasten.

27. MOBILE
SITE:
RESPONSIVE
Eine
der
Hauptherausforderungen
für
die
Designer
einer
mobilen
Website
ist,
dass
sie
nicht
wissen
mit
was
für
einem
Gerät
die
Seite
aufgerufen
wird.
Die
Bildschirmgrössen
von
mobilen
Geräten
unterscheiden
sich
aber
stark.
Lösung:
Eine
«responsive
Website»
passt
ihr
Design
und
ihren
Inhalt
der
Bildschirmgrösse
an.
Beispiel:
hfp://hardboiledwebdesign.com

28. Mobile
first
im
Kontext
von
Webdesign
bedeutet,
dass
das
mobile
Gerät,
und
nicht
der
Desktop,
den
Ausgangspunkt
für
das
Design
darstellt.
Grund:
Bei
Mobilgeräten
gibt
es
mehr
Einschränkungen
(Platz,
FunkKonalität,
NavigaKon).
Es
ist
einfacher
diese
für
den
Desktop-­‐Einsatz
auszubauen
als
umgekehrt.
Zudem:
Mobile
First
ist
eine
automaKsches
Fokussierungs-­‐Tool.
Das
Resultat
ist
oa
ein
schlankeres,
simpleres
und
für
den
Anwender
verständlicheres
Design.
ANSATZ:
MOBILE
FIRST

29. MOBILE
FIRST:
AIRBNB

30. MOBILE
FIRST?
EBAY

31. Die
Besucher
einer
mobilen
Webseite
haben
andere
Bedürfnisse
und
Absichten
als
diejenigen
einer
Desktop
Seite.
• Sie
sind
fokussierter.
• Sie
sind
aufgabenorienKert
(task
oriented).
• Sie
haben
weniger
Zeit.
• Sie
betreiben
MulKtasking.
• Sie
sind
leichter
abgelenkt.
• Sie
suchen
lokale
InformaKonen.
Konklusion:
Context
mahers!
UNTERSCHIEDE:
USERVERHALTEN

32. Mobile
Geräte
bieten
die
Chance
individueller
auf
den
Anwender
einzugehen,
indem
sie
die
SituaKon
/
das
Umfeld,
in
welchem
er
sich
befindet,
berücksichKgen.
Möglichkeiten
Die
mobile
Webseite
zeigt
anderen
Content
an,
abhängig
von:
• Häufigkeit:
War
der
User
schon
einmal
auf
der
Webseite?
• Ort:
Wo
befindet
er
sich
(Geographisch)?
• Tageszeit:
Morgen
/
Mifag
/
Abend?
Beispiele
• Auf
der
mobilen
Webseite
eines
Restaurants
ist
die
Telefonnummer
und
Wegbeschreibung
prominent
posiKoniert.
• Bei
einer
Fluggesellschaj
erwarte
ich
als
erstes
die
Suche
nach
einem
Flug
und
allenfalls
Last
Minute
Deals.
UNTERSCHIEDE:
KONTEXT

33. Die
Eigenheiten
von
mobilen
Webseiten
und
Apps
verlangen
nach
einem,
den
Gegebenheiten
angepassten
Design.
Die
relevanten
Unterschiede
zum
Desktop
sind
insbesondere:
• Kleinere
Screens
und
dadurch
weniger
Platz.
• Bedienung
durch
Touch
anstaf
mit
der
Maus.
• Keine
externe
Tastatur
verfügbar,
dadurch
schwierigere
Eingabe
von
Text.
• Langsamere
Internetverbindung.
• Wechselnde
Lichtverhältnisse.
• Weniger
übersichtliche
NavigaKon.
Diese
Gegebenheiten
haben
zu
verschiedenen
Design-­‐Best-­‐PracPces
oder
Trends
geführt...
UNTERSCHIEDE:
DESIGN

34. Um
die
Anzahl
Klicks
zu
minimieren
und
den
Besucher
von
Anfang
an
zu
fesseln
wird
Kern-­‐Inhalt
zuerst
dargestellt.
TREND:
CONTENT
FIRST
«In
the
new
app,
we
present
relevant
content
up-­‐front
and
instantly
noKfy
users
of
new
invitaKons
and
messages.
In
other
words,
we
remove
the
fricKon
of
a
dashboard
and
provide
immediate
value
on
app
launch»
hfp://www.lukew.com/presos/preso.asp?29

35. Bufons
und
Eingabefelder
sollten
gross
genug
sein,
so
dass
sie
ohne
Fehlklicks
getroffen
werden
(Fat
Finger).
Eine
gängige
Empfehlung
lautet
den
klickbaren
Bereich
mindestens
44x44
Pixel
gross
zu
designen.
BEST
PRACTICE:
TOUCH
AREAS

36. BEST
PRACTICE:
NAVIGATION
Best
pracPces:
• Anzahl
Menupunkte
möglichst
Kef
halten.
• Anzahl
notwendiger
Taps
reduzieren.
• Immer
einen
einfach
zu
findenden
“Back”
Bufon
integrieren.
• SKcky
NavigaKon
• VerKkale
NavigaKon
(anstaf
horizontal)
• Nested
(collapsable)
Menu
hfp://www.webdesignerdepot.com/2012/11/best-­‐pracKces-­‐for-­‐navigaKon-­‐on-­‐the-­‐mobile-­‐web/
Eine
gute
NavigaPon
führt
den
Anwender
möglichst
schnell
und
einfach
zu
dem
was
er
sucht.

37. Für
ein
Eingabefeld
kann
definiert
werden,
welche
Tastatur
erscheinen
soll.
Die
Eingabe
von
Geburtsdatum
ist
über
das
Zahlenfeld
oa
schneller
als
über
ein
Scroll-­‐
Rad.
TIPP:
TASTATUR

38. Trend
zu
weniger
Skeuomorphismen.
Das
heisst
keine
künstliche
Nachahmung
von
physischen
Objekten
bzw.
Oberflächen
(NoKzblock).
Grund:
Durch
den
Einsatz
wird
kein
(erkennbarer)
Mehrwert
geschaffen.
Das
Design
soll
zum
digitalen
Umfeld
stehen.
Dieser
Trend
wird
auch
„Metro-­‐Design“
genannt.
TREND:
FLAT
DESIGN

39. Um
die
Ladezeit
zu
minimieren
wird
immer
häufiger
Typografie,
anstah
Grafiken,
als
Designelement
eingesetzt.
Der
Einsatz
von
unterschiedlichen
Farben
dient
dabei
nicht
nur
dem
Branding,
sondern
auch
der
Übersichtlichkeit.
TREND:
TYPOGRAPHIE

40. Dadurch,
dass
mobile
Geräte
auch
oa
im
Freien
gebraucht
werden
sind
sie
bei
wechselnden
Lichtverhältnissen
im
Einsatz.
Während
der
Desktop-­‐Computer
im
Büro
meist
gute
Kontraste
bietet
können
diese
bei
mobilen
Geräten,
z.B.
durch
Sonneneinstrahlung,
zum
Teil
sehr
ungünsKg
ausfallen
und
damit
die
Leserlichkeit
behindern.
TIPP:
LICHTVERHÄLTNISSE

41. @Ad_Og
THANKS!
ENGLISH
VERSION
COMING
SOON!