Download - Mobile Facts 2013: Apps & Websites

Transcript
Page 1: Mobile Facts 2013: Apps & Websites

@Ad_Og  

M

Adrian  Oggenfuss  

BILE  

[email protected]  

DIE  WICHTIGSTEN  FAKTEN  2013  (DEUTSCH)  

Page 2: Mobile Facts 2013: Apps & Websites

§  App  § Mobile  Webseite  §  Search  §  Email  §  SMS  §  Telefon  

WIE  KANN  DER  KUNDE  ERREICHT  WERDEN?  

Page 3: Mobile Facts 2013: Apps & Websites

APP  UND  MOBILE  WEB:  DEFINITIONEN  

Page 4: Mobile Facts 2013: Apps & Websites

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.  

Page 5: Mobile Facts 2013: Apps & Websites

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.  

Page 6: Mobile Facts 2013: Apps & Websites

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.  

Page 7: Mobile Facts 2013: Apps & Websites

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          

Page 8: Mobile Facts 2013: Apps & Websites

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.    

Page 9: Mobile Facts 2013: Apps & Websites

HYBRID  APPS:  BEISPIELE  

Page 10: Mobile Facts 2013: Apps & Websites

APP  ODER  MOBILE  WEB?    ES  KOMMT  DRAUF  AN  

Page 11: Mobile Facts 2013: Apps & Websites

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.    

Page 12: Mobile Facts 2013: Apps & Websites

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.  

Page 13: Mobile Facts 2013: Apps & Websites

FAKTOR:  PROGRAMMIERUNG  

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

Page 14: Mobile Facts 2013: Apps & Websites

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.    

Page 15: Mobile Facts 2013: Apps & Websites

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).  

Page 16: Mobile Facts 2013: Apps & Websites

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)  

Page 17: Mobile Facts 2013: Apps & Websites

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.    

Page 18: Mobile Facts 2013: Apps & Websites

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)  

Page 19: Mobile Facts 2013: Apps & Websites

APP  ODER  MOBILE  WEB?    MEINUNGEN  UND  TRENDS  

Page 20: Mobile Facts 2013: Apps & Websites

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.»  

Page 21: Mobile Facts 2013: Apps & Websites

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»  

Page 22: Mobile Facts 2013: Apps & Websites

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.»  

Page 23: Mobile Facts 2013: Apps & Websites

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.  

Page 24: Mobile Facts 2013: Apps & Websites

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.    

Page 25: Mobile Facts 2013: Apps & Websites

APP  UND  MOBILE  WEB?    UMSETZUNG  

Page 26: Mobile Facts 2013: Apps & Websites

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.  

Page 27: Mobile Facts 2013: Apps & Websites

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  

Page 28: Mobile Facts 2013: Apps & Websites

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  

Page 29: Mobile Facts 2013: Apps & Websites

MOBILE  FIRST:  AIRBNB  

Page 30: Mobile Facts 2013: Apps & Websites

MOBILE  FIRST?  EBAY  

Page 31: Mobile Facts 2013: Apps & Websites

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  

Page 32: Mobile Facts 2013: Apps & Websites

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  

Page 33: Mobile Facts 2013: Apps & Websites

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  

Page 34: Mobile Facts 2013: Apps & Websites

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  

Page 35: Mobile Facts 2013: Apps & Websites

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  

Page 36: Mobile Facts 2013: Apps & Websites

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.  

Page 37: Mobile Facts 2013: Apps & Websites

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  

Page 38: Mobile Facts 2013: Apps & Websites

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  

Page 39: Mobile Facts 2013: Apps & Websites

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  

Page 40: Mobile Facts 2013: Apps & Websites

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  

Page 41: Mobile Facts 2013: Apps & Websites

@Ad_Og  

THANKS!  

ENGLISH  VERSION  COMING  SOON!