SlideShare ist ein Scribd-Unternehmen logo
1 von 41
Downloaden Sie, um offline zu lesen
@Ad_Og	
  
M
Adrian	
  Oggenfuss	
  
BILE	
  
adrian@moca.ch	
  
DIE	
  WICHTIGSTEN	
  FAKTEN	
  2013	
  
(DEUTSCH)	
  
§  App	
  
§  Mobile	
  Webseite	
  
§  Search	
  
§  Email	
  
§  SMS	
  
§  Telefon	
  
WIE	
  KANN	
  DER	
  KUNDE	
  ERREICHT	
  WERDEN?	
  
APP	
  UND	
  MOBILE	
  WEB:	
  DEFINITIONEN	
  
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.	
  
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.	
  
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.	
  
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	
  
	
  
	
  
	
  
	
  
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.	
  	
  
HYBRID	
  APPS:	
  BEISPIELE	
  
APP	
  ODER	
  MOBILE	
  WEB?	
  	
  
ES	
  KOMMT	
  DRAUF	
  AN	
  
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.	
  	
  
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.	
  
FAKTOR:	
  PROGRAMMIERUNG	
  
Sind	
  unternehmensintern	
  Entwickler	
  vorhanden?	
  Welche	
  Programmiersprachen	
  
beherrschen	
  diese?	
  Es	
  ist	
  schwieriger	
  erfahrene	
  (gute)	
  Programmierer	
  für	
  die	
  
naKven	
  Programmiersprachen	
  zu	
  finden.	
  	
  
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.	
  	
  
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).	
  
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)	
  
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.	
  	
  
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)	
  
APP	
  ODER	
  MOBILE	
  WEB?	
  	
  
MEINUNGEN	
  UND	
  TRENDS	
  
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.»	
  
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»	
  
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.»	
  
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.	
  
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.	
  	
  
APP	
  UND	
  MOBILE	
  WEB?	
  	
  
UMSETZUNG	
  
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.	
  
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	
  
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	
  
MOBILE	
  FIRST:	
  AIRBNB	
  
MOBILE	
  FIRST?	
  EBAY	
  
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	
  
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	
  
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	
  
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	
  
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	
  
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.	
  
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	
  
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	
  
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	
  
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	
  
@Ad_Og	
  
THANKS!	
  
ENGLISH	
  VERSION	
  COMING	
  SOON!	
  

Weitere ähnliche Inhalte

Was ist angesagt?

Start small, think big - Responsive Web Design
Start small, think big - Responsive Web DesignStart small, think big - Responsive Web Design
Start small, think big - Responsive Web Designintuio GmbH
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsRalf Lütke
 
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen MarkenkommunikationOliver Zils
 
Referat: Architektur und Entwicklung mobiler Anwendungen
Referat: Architektur und Entwicklung mobiler AnwendungenReferat: Architektur und Entwicklung mobiler Anwendungen
Referat: Architektur und Entwicklung mobiler AnwendungenDigicomp Academy AG
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Bokowsky + Laymann GmbH
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Bokowsky + Laymann GmbH
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenCrowdArchitects GmbH
 
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...Mandy Goram
 
2012 02 06 mobile employer branding sebastian manhart handout
2012 02 06 mobile employer branding sebastian manhart handout2012 02 06 mobile employer branding sebastian manhart handout
2012 02 06 mobile employer branding sebastian manhart handoutSebastian Manhart
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenMarkus Eiglsperger
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011Alexander Beck
 
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...OPITZ CONSULTING Deutschland
 
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)André Krämer
 
20121023 ro i-apps-mediaman
20121023 ro i-apps-mediaman20121023 ro i-apps-mediaman
20121023 ro i-apps-mediamanmediaman
 
Mobile - Bin ich schon zu spät?
Mobile - Bin ich schon zu spät?Mobile - Bin ich schon zu spät?
Mobile - Bin ich schon zu spät?Michael H. Singer
 

Was ist angesagt? (20)

Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
Mobile Applikationen: Idee, Konzeption, Architektur - Erfolgreicher Start für...
 
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)Responsive Web Design am Beispiel von Virato (Social News Aggregator)
Responsive Web Design am Beispiel von Virato (Social News Aggregator)
 
Start small, think big - Responsive Web Design
Start small, think big - Responsive Web DesignStart small, think big - Responsive Web Design
Start small, think big - Responsive Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
 
Referat: Architektur und Entwicklung mobiler Anwendungen
Referat: Architektur und Entwicklung mobiler AnwendungenReferat: Architektur und Entwicklung mobiler Anwendungen
Referat: Architektur und Entwicklung mobiler Anwendungen
 
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
Mobile Produktentwicklung – wie geht das? Konzeption, Design, Entwicklung, Ve...
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
 
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
 
Die Android Plattform
Die Android PlattformDie Android Plattform
Die Android Plattform
 
2012 02 06 mobile employer branding sebastian manhart handout
2012 02 06 mobile employer branding sebastian manhart handout2012 02 06 mobile employer branding sebastian manhart handout
2012 02 06 mobile employer branding sebastian manhart handout
 
Cross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile AnwendungenCross Plattform Entwicklung für Mobile Anwendungen
Cross Plattform Entwicklung für Mobile Anwendungen
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
Spring - Frühling fürs iPhone - Spring-basierte Backends für iOS-Applikatione...
 
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
 
20121023 ro i-apps-mediaman
20121023 ro i-apps-mediaman20121023 ro i-apps-mediaman
20121023 ro i-apps-mediaman
 
Mobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
Mobile Applikationen - Juni 2013 - Cross-Plattform-EntwicklungMobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
Mobile Applikationen - Juni 2013 - Cross-Plattform-Entwicklung
 
Mobile - Bin ich schon zu spät?
Mobile - Bin ich schon zu spät?Mobile - Bin ich schon zu spät?
Mobile - Bin ich schon zu spät?
 

Andere mochten auch

Aves bird nest new
Aves bird nest newAves bird nest new
Aves bird nest newJinfeng45
 
Hepatitis viral 3
Hepatitis viral 3 Hepatitis viral 3
Hepatitis viral 3 MAVILA
 
Seminario 3 Parque Escultórico Antonio Campillo de Murcia
Seminario 3 Parque Escultórico Antonio Campillo de MurciaSeminario 3 Parque Escultórico Antonio Campillo de Murcia
Seminario 3 Parque Escultórico Antonio Campillo de MurciaPaco Biwan Bokeroni
 
NSi Autostore e Alfresco
NSi Autostore e Alfresco NSi Autostore e Alfresco
NSi Autostore e Alfresco NSI LA
 
Estudio Zoom a la Tecnología (versión pública)
Estudio Zoom a la Tecnología (versión pública)Estudio Zoom a la Tecnología (versión pública)
Estudio Zoom a la Tecnología (versión pública)Visión Humana
 
Harnessing The Crowd: Building Brand Reputation Today and Beyond
Harnessing The Crowd: Building Brand Reputation Today and BeyondHarnessing The Crowd: Building Brand Reputation Today and Beyond
Harnessing The Crowd: Building Brand Reputation Today and BeyondAaron Perlut
 
FBLOG.VN VIRAL THE WORLD
FBLOG.VN VIRAL THE WORLDFBLOG.VN VIRAL THE WORLD
FBLOG.VN VIRAL THE WORLDwe20
 
Soul Rebellion 2010 Sponsor Request Deck
Soul Rebellion 2010 Sponsor Request DeckSoul Rebellion 2010 Sponsor Request Deck
Soul Rebellion 2010 Sponsor Request Deckjigznyc
 
Consumo de medios digitales en mexico millward brown 2009
Consumo de medios digitales en mexico millward brown 2009Consumo de medios digitales en mexico millward brown 2009
Consumo de medios digitales en mexico millward brown 2009Evelyn Femat
 
Capítulo 9
Capítulo 9Capítulo 9
Capítulo 9darkpipa
 
NIE E Champions Updates on B (15 aug 2011)
NIE E Champions Updates on B (15 aug 2011)NIE E Champions Updates on B (15 aug 2011)
NIE E Champions Updates on B (15 aug 2011)centreforelearning
 
Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105
Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105
Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105Peter Kühnberger
 
Memorias de la Rosa
Memorias de la RosaMemorias de la Rosa
Memorias de la RosaDouce Nieto
 
INTRODUCCION A LOS SISTEMAS OPERATIVOS
INTRODUCCION A LOS SISTEMAS OPERATIVOSINTRODUCCION A LOS SISTEMAS OPERATIVOS
INTRODUCCION A LOS SISTEMAS OPERATIVOSAnel Sosa
 
La pesca milagrosa ev
La pesca milagrosa evLa pesca milagrosa ev
La pesca milagrosa evhjonilton
 

Andere mochten auch (20)

Aves bird nest new
Aves bird nest newAves bird nest new
Aves bird nest new
 
Hepatitis viral 3
Hepatitis viral 3 Hepatitis viral 3
Hepatitis viral 3
 
Mee X International
Mee X InternationalMee X International
Mee X International
 
Seminario 3 Parque Escultórico Antonio Campillo de Murcia
Seminario 3 Parque Escultórico Antonio Campillo de MurciaSeminario 3 Parque Escultórico Antonio Campillo de Murcia
Seminario 3 Parque Escultórico Antonio Campillo de Murcia
 
NSi Autostore e Alfresco
NSi Autostore e Alfresco NSi Autostore e Alfresco
NSi Autostore e Alfresco
 
Estudio Zoom a la Tecnología (versión pública)
Estudio Zoom a la Tecnología (versión pública)Estudio Zoom a la Tecnología (versión pública)
Estudio Zoom a la Tecnología (versión pública)
 
Harnessing The Crowd: Building Brand Reputation Today and Beyond
Harnessing The Crowd: Building Brand Reputation Today and BeyondHarnessing The Crowd: Building Brand Reputation Today and Beyond
Harnessing The Crowd: Building Brand Reputation Today and Beyond
 
FBLOG.VN VIRAL THE WORLD
FBLOG.VN VIRAL THE WORLDFBLOG.VN VIRAL THE WORLD
FBLOG.VN VIRAL THE WORLD
 
Soul Rebellion 2010 Sponsor Request Deck
Soul Rebellion 2010 Sponsor Request DeckSoul Rebellion 2010 Sponsor Request Deck
Soul Rebellion 2010 Sponsor Request Deck
 
Consumo de medios digitales en mexico millward brown 2009
Consumo de medios digitales en mexico millward brown 2009Consumo de medios digitales en mexico millward brown 2009
Consumo de medios digitales en mexico millward brown 2009
 
Capítulo 9
Capítulo 9Capítulo 9
Capítulo 9
 
NIE E Champions Updates on B (15 aug 2011)
NIE E Champions Updates on B (15 aug 2011)NIE E Champions Updates on B (15 aug 2011)
NIE E Champions Updates on B (15 aug 2011)
 
Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105
Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105
Jahresrückblick in Bildern - Lokale Agenda Josefstadt 2105
 
Agosto2007
Agosto2007Agosto2007
Agosto2007
 
Aldo y abi
Aldo y abiAldo y abi
Aldo y abi
 
Memorias de la Rosa
Memorias de la RosaMemorias de la Rosa
Memorias de la Rosa
 
Word of-mouth-marketing-techniques-womm4195
Word of-mouth-marketing-techniques-womm4195Word of-mouth-marketing-techniques-womm4195
Word of-mouth-marketing-techniques-womm4195
 
INTRODUCCION A LOS SISTEMAS OPERATIVOS
INTRODUCCION A LOS SISTEMAS OPERATIVOSINTRODUCCION A LOS SISTEMAS OPERATIVOS
INTRODUCCION A LOS SISTEMAS OPERATIVOS
 
La pesca milagrosa ev
La pesca milagrosa evLa pesca milagrosa ev
La pesca milagrosa ev
 
Sistemas para la construccion de Master Builders Solutions de BASF
Sistemas para la construccion de Master Builders Solutions de BASFSistemas para la construccion de Master Builders Solutions de BASF
Sistemas para la construccion de Master Builders Solutions de BASF
 

Ähnlich wie Mobile Facts 2013: Apps & Websites

Multi-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer ApplicationMulti-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer ApplicationFLYACTS GmbH
 
2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel Netzwoche2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel NetzwocheJohannes Waibel
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellenMichael Kühnel
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Jens Küsters
 
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Christian Sauter
 
Smart AdServer - The fundamentals of mobile display advertising
Smart AdServer - The fundamentals of mobile display advertisingSmart AdServer - The fundamentals of mobile display advertising
Smart AdServer - The fundamentals of mobile display advertisingMobile Monday Frankfurt
 
Case Study Lost & Find
Case Study Lost & FindCase Study Lost & Find
Case Study Lost & FindFLYACTS GmbH
 
worldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIESworldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIESworldiety GmbH
 
Updraft App Delivery für Betatesting und Enterprise Apps
Updraft App Delivery für Betatesting und Enterprise AppsUpdraft App Delivery für Betatesting und Enterprise Apps
Updraft App Delivery für Betatesting und Enterprise AppsApps with love
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)die.agilen GmbH
 
App oder Mobile Website Slides zum Webinar
App oder Mobile Website Slides zum WebinarApp oder Mobile Website Slides zum Webinar
App oder Mobile Website Slides zum WebinarEduvision Ausbildungen
 
vi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. Appvi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. Appvi knallgrau
 
Wimob Presentation _Deutsch
Wimob Presentation _DeutschWimob Presentation _Deutsch
Wimob Presentation _DeutschWimob
 

Ähnlich wie Mobile Facts 2013: Apps & Websites (20)

Phonegap App Entwicklung
Phonegap App EntwicklungPhonegap App Entwicklung
Phonegap App Entwicklung
 
Phonegap Agentur
Phonegap AgenturPhonegap Agentur
Phonegap Agentur
 
Multi-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer ApplicationMulti-Channel-App - Erfolgsfaktoren einer Application
Multi-Channel-App - Erfolgsfaktoren einer Application
 
2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel Netzwoche2011 - Mobile Strategie / Fachartikel Netzwoche
2011 - Mobile Strategie / Fachartikel Netzwoche
 
iOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstelleniOS Apps mit Webtechnologien erstellen
iOS Apps mit Webtechnologien erstellen
 
Was ist Omnis?
Was ist Omnis?Was ist Omnis?
Was ist Omnis?
 
App Entwicklung Kosten
App Entwicklung KostenApp Entwicklung Kosten
App Entwicklung Kosten
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
Mobile Websites
Mobile WebsitesMobile Websites
Mobile Websites
 
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
Case Study: Cross-Platform Strategie in einem Großprojekt der App-Entwicklung...
 
Smart AdServer - The fundamentals of mobile display advertising
Smart AdServer - The fundamentals of mobile display advertisingSmart AdServer - The fundamentals of mobile display advertising
Smart AdServer - The fundamentals of mobile display advertising
 
White-Label-Apps für Werbe- und Mediaagenturen
White-Label-Apps für Werbe- und MediaagenturenWhite-Label-Apps für Werbe- und Mediaagenturen
White-Label-Apps für Werbe- und Mediaagenturen
 
Case Study Lost & Find
Case Study Lost & FindCase Study Lost & Find
Case Study Lost & Find
 
Probestunde_App_oder_mobile_Website
Probestunde_App_oder_mobile_WebsiteProbestunde_App_oder_mobile_Website
Probestunde_App_oder_mobile_Website
 
worldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIESworldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIES
 
Updraft App Delivery für Betatesting und Enterprise Apps
Updraft App Delivery für Betatesting und Enterprise AppsUpdraft App Delivery für Betatesting und Enterprise Apps
Updraft App Delivery für Betatesting und Enterprise Apps
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
App oder Mobile Website Slides zum Webinar
App oder Mobile Website Slides zum WebinarApp oder Mobile Website Slides zum Webinar
App oder Mobile Website Slides zum Webinar
 
vi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. Appvi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. App
 
Wimob Presentation _Deutsch
Wimob Presentation _DeutschWimob Presentation _Deutsch
Wimob Presentation _Deutsch
 

Mobile Facts 2013: Apps & 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.    
  • 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.»  
  • 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  
  • 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!