Mobile Facts 2013: Apps & Websites
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Facts 2013: Apps & Websites

  • 1,092 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,092
On Slideshare
1,091
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
3

Embeds 1

http://jfeeds.carsmantra.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. @Ad_Og  MAdrian  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!