Embed Size (px)
DESCRIPTION
Mobile Facts 2013: Definitions, facts, trends and best practices for mobile apps and websites.
§ 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!
