1. No category

How to connect
web, tab & app
Wie Sie mit geräteübergreifenden
Seamless Service Experiences
Erfolg haben
Ein Whitepaper der Aperto AG, April 2014
Text: Stefan Freimark, Nikolaus Stemmer, Klaus Rüggenmann, Jan Gessenhardt
Design: Denny Rosenthal
1
Zusammenfassung
& Inhalte
Mit einer zunehmenden Anzahl unterschiedlichster Endgeräte wird
die nahtlose und somit nutzerfreundliche Umsetzung von Inhalten
und Services zum zentralen Bestandteil einer zeitgemäßen digitalen
Kommunikationsstrategie. Für Unternehmen und Organisationen
stellt sich allem voran die Frage: Wie verschaffen wir unseren Nutzern
das bestmögliche Nutzungs- und Service-Erlebnis in der wachsenden
Gerätelandschaft?
In diesem Whitepaper stellt Aperto drei Umsetzungsansätze für digitalen Content vor: responsive Webdesign, adaptive Templates und
native Apps. Neben den Vor- und Nachteilen der Umsetzungsvarianten
für Webprojekte unterschiedlicher Art und Dimension wollen wir zeigen,
dass die Kunst in der Kombination der Technologien besteht – weil erst
im sinnvollen Zusammenspiel von digitalem Content über die Geräte
hinweg eine optimale Seamless Service Experience entsteht, die der
Nutzer nachhaltig mit den genutzten Angeboten verbindet.
Wer im Zeitalter der Konnektivität die Kanalvielfalt beherrscht und
seine Inhalte optimal präsentiert und zugänglich macht, profitiert
von einem zunehmend wichtiger werdenden Wettbewerbsvorteil.
1
Zusammenfassung & Inhalte
2
2
Über dieses Whitepaper
3
3
Nutzer, Anbieter, Technologie – drei Sichtweisen auf ein Thema 4
4
Drei Umsetzungsansätze für zeitgemäße Seamless Service Experiences
1. Responsive Webdesign 7
Case: Deutsche See – Das Feinschmeckerportal rund um Fisch und Meeresfrüchte
2. Adaptive Templates
Case: WWF – Ein zentrales Portal für die Projektarbeit der weltgrößten
Umweltschutzorganisation
7
9
10
11
3. Native Apps
12
Case: Volkswagen Rally The World – Eine integrierte Motorsport-Kampagne
mit digitalem Schwerpunkt
5
Erfolgsfaktor Backend 15
6
Fazit & Ausblick 17
Über die Aperto AG 18
13
2
2
Über dieses
Whitepaper
Keiner von uns geht mehr ins Internet. Wir sind längst drin. Es umgibt
uns nahtlos. Als Anwender im Zeitalter der Konnektivität haben wir
uns daran gewöhnt, wie an die Vielzahl der webfähigen Geräte, die wir
benutzen, um uns zu informieren, zu kommunizieren und Transaktionen auszuführen – an (fast) jedem Ort, zu jeder Zeit, auf jedem
Gerät. Was immer wir tun und mit welchem Gerät, das Erlebnis muss
maximal hilfreich, flüssig und angenehm sein.
» Responsive Webdesign
ist nicht die Lösung,
sondern eine Lösung.
Darum geht es in
diesem Whitepaper. «
Neue webfähige Devices mit innovativen Bedienkonzepten und Spezifikationen bedeuten neue Herausforderungen für Unternehmen und
Organisationen im Web. Responsive Webdesign ist seit zwei, drei
Jahren in aller Munde und begegnet uns bei Aperto mittlerweile fast
täglich als Kundenanforderung. Aber responsive Webdesign ist nicht
die Lösung, sondern eine Lösung. Darum geht es in diesem Whitepaper.
Aperto beschäftigt sich seit mehreren Jahren intensiv mit CrossDevice-Ansätzen. Hier stellen wir drei zentrale technische Ansätze vor:
responsive Webdesign, adaptive Templates und native Apps. Aber
eine rein technische Betrachtung greift zu kurz. Ein positives Markenerlebnis hängt auch von strategischen und konzeptionellen Überlegungen ab: Welche Inhalte und Funktionen müssen für jeden einzelnen
Kanal geboten werden? Wie können sie bestmöglich aufeinander
abgestimmt werden? Wie lässt sich all das optimal, effizient und
synergetisch in die bestehende Systemlandschaft integrieren:
Redaktionssysteme, eCRM, Produktdatenbanken?
Wie ermöglichen Sie Ihren Kunden die nahtlose Nutzung Ihrer Webangebote? Dieses Whitepaper bietet Lösungen und Hintergründe an,
die Sie dabei unterstützen, mit der Device-Explosion umzugehen und
Ihre Investitionsentscheidungen auf eine fundierte Basis zu stellen.
Effiziente Cross-Device-Ansätze sind inzwischen weit mehr als nur
ein »Hygienefaktor« im digitalen Ökosystem, sondern Teil einer
professionellen Kommunikationsstrategie im Web.
3
3
Nutzer, Anbieter, Technologie –
drei Sichtweisen auf ein Thema
Sichtweise Anbieter: »King Content macht viel Arbeit!«
»Cross Device« bedeutet für viele Anbieter digitaler Inhalte auf den
ersten Blick erst einmal mehr Aufwand und mehr Kosten. Die Gründe
scheinen auf der Hand zu liegen: Auf je mehr Kanälen ich als Unternehmen oder Organisation Inhalte und Services zur Verfügung stelle,
desto mehr personellen, technischen und letztlich finanziellen Aufwand habe ich. Dahinter stehen Aufwände der Datenaufbereitung
und -haltung, aber auch der Pflege und Bereitstellung in unterschiedlichen Systemen und Datenbanken, die unterschiedliche Kanäle mit
Content versorgen, z.B. Website, App, Produktdatenbanken etc.
Aber »Content für viele Kanäle« muss nicht zwingend teuer sein.
Eine ganzheitliche Lösung ist kostengünstiger als voneinander losgelöste Einzelprojekte oder Insellösungen. Das Idealszenario heißt
»Single Source Publishing« und bedeutet, dass viele unterschiedliche Ausgabegeräte aus einer Datenquelle versorgt werden, wobei
sich der Content an die Geräte und die Besonderheiten ihrer Darstellung anpasst. Denn Unternehmen und Organisationen sollten
bei ihren Investitionen in Apps, Websites und digitale Services nicht
jeweils einen Kanal bedenken, sondern ins Zusammenspiel der Kanäle
investieren. Die Kontinuität der Nutzererlebnisse über Geräte, Standorte und Zeitpunkte hinweg wird immer wichtiger, je mehr physische
und digitale Welt zusammenwachsen. Insofern erleichtert eine nahtlose Nutzererfahrung Ihrem Publikum nicht nur, Ihre Angebote komfortabler und einfacher zu nutzen – sie führt auch zu einer besseren
Kundenbindung, mehr Leads und letztlich zu mehr Umsatz.
» Die Kontinuität der
Nutzererlebnisse über
Geräte, Standorte und
Zeitpunkte hinweg wird
immer wichtiger, je mehr
physische und digitale
Welt zusammenwachsen «
Sichtweise Nutzer: »Kontext ist Königin!«
Viele von uns verwenden mehr als ein Gerät. Im Büro oder zu Hause
den klassischen Desktop-PC oder das Notebook, unterwegs ein
Smartphone und häufig auch ein Tablet. Das hat Konsequenzen für
die Nutzung einer Website, eines digitalen Produkts oder Services.
Typischerweise besteht unsere Nutzung nicht mehr aus einer einzigen Handlung, die an einem Gerät abgeschlossen wird. Vielmehr
bewegen wir uns von Gerät zu Gerät auf dem Weg, eine mehr oder
weniger komplexe Handlung als Folge vieler kleinerer Schritte abzuschließen: suchen und recherchieren, Dateien oder Informationen
austauschen und verwalten, einen Shopping- oder Bezahlvorgang
abschließen, eine Reise suchen und buchen und vieles andere mehr.
Entscheidend für die Erledigung der Aufgabe ist der Nutzungskontext: Wie viel Zeit haben wir, an welchem Ort sind wir, welche Geräte
stehen uns dabei zur Verfügung? Als Nutzer entwickeln wir beim
Cross-Device-Gebrauch automatisch Erwartungen hinsichtlich der
Kohärenz der Inhalte, ihrer Gestaltung sowie der von Interaktionselementen und -mustern über die Geräte hinweg.
4
Genauso erwarten wir, Geräte nahtlos wechseln zu können, weil wir
den Teil einer Aufgabe besser auf dem anderen Gerät erledigen können (Komplementarität). Selbstverständlich sollen auch die Inhalte
auf allen Geräten gleich aktuell sein, wie zum Beispiel Änderungen
in persönlichen Profilen, die überall verfügbar sein müssen
(Synchronizität).
Nur drei Interaktionsmuster, die zeigen, dass wir uns im Ökosystem
einer Marke, eines Services, einer Website, von digitalem Kontaktpunkt zu Kontaktpunkt bewegen. Diese kontinuierliche Kette an
Nutzererlebnissen nennen wir »seamless«, also »nahtlos«, weil sie
bestenfalls ohne Hindernisse verläuft und ein reibungsloser Wechsel
zwischen den unterschiedlichen Geräten gegeben ist. Eine »Seamless
Service Experience« heißt für den Nutzer also, die größtmögliche
räumliche und zeitliche Freiheit beim Erleben und Nutzen von digitalen
Inhalten und Services zu besitzen – an (fast) jedem Ort, zu jeder
Zeit, mit jedem Gerät.
» Eine Seamless Service
Experience heißt für den
Nutzer größtmögliche
räumliche und zeitliche
Freiheit beim Erleben
und Nutzen von digitalen
Inhalten und Services. «
Ein Beispiel: Unkompliziert in den Urlaub.
Peter, ein 27-jähriger Bankangestellter, plant eine Urlaubsreise
mit seiner Freundin. In der Mittagspause besucht er die Website
eines Reiseanbieters mit seinem Büro-PC und stöbert in aktuellen
Angeboten. Mit den Filtern auf der Reisebüro-Website findet Peter
schnell einige Angebote. Die Unterkünfte, in denen bereits seine
Facebook-Kontakte zu Gast waren, stehen am Anfang der Liste.
Er nutzt die Favoritenfunktion, um interessante Angebote für
später zu speichern.
Peters Heimweg mit der U-Bahn dauert eine halbe Stunde. Er
nutzt die Zeit, um sich mit der App des Anbieters über die Reiseziele zu informieren und einige der gemerkten Hotels näher anzusehen. Ein paar der Hotels löscht er aus seiner Favoritenliste.
Die verbleibenden schickt er über eine Funktion der App an seine
Freundin – die Vorfreude steigt.
Nach dem Abendessen mit seiner Freundin Sonja sehen sich die
beiden auf dem Tablet die Hotels der engeren Wahl an. Der Trip
Planner der Website hat Peters Favoriten zu mehreren Routen
zusammengestellt. Auf ihrem Tablet öffnen Peter und Sonja eine
der vorgeschlagenen Routen. Sie betrachten die Bildergalerien
von Unterkünften und Zusatzangeboten wie Trekkingtouren und
Führungen. Sie fügen einen Tauchkurs und Elefantenreiten zur
Route hinzu. Eine Woche später steht ihr Reisezeitraum fest,
und Peter bucht die Reise auf seinem Laptop.
5
Sichtweise Technologie:
»Schier unendliche Gerätelandschaften «
Websites waren noch bis vor wenigen Jahren vergleichsweise einfach
aufgebaut. Optimiert für 1024 Pixel breite Bildschirme, wurden sie
ausnahmslos auf PCs angezeigt. Ganz anders heute: Mobiltelefone
sind Computer, mit denen ihre Besitzer unter anderem telefonieren
können. In den sieben Jahren seit der Vorstellung des iPhones haben
Smartphones mit Touch-Displays ihre Vorgänger – die Feature Phones
oder auch Dumb Phones – überholt.
Bereits im Dezember 2012 war in der EU jedes zweite Mobiltelefon
ein Smartphone.1 Und in wenigen Jahren werden alle Mobiltelefone
Smartphones sein.2 Die Nutzung von Digitalangeboten ändert sich
nicht nur durch Smartphones, sondern auch durch die zunehmende
Verbreitung von Tablets: Gartner gab im Mai 2013 bekannt, dass der
PC-Absatz in Deutschland elf Quartale in Folge rückgängig war.3 Im
August 2013 wurden in Deutschland erstmals mehr Tablets als
Notebooks verkauft.4
Auch nimmt die Gerätevielfalt immer mehr zu. Aktuell verfügbare
Geräte haben Displaygrößen zwischen 3,5 und 6,4 Zoll. Für nahezu
jede Nachkommastelle gibt es mittlerweile ein Gerät. Die Grenze
zwischen Smartphone und Tablet ist dabei längst verschwommen.
Einige der Displays sind hochauflösend und es gibt unterschiedliche
Display-Formate. Sowohl bei der Hardware (Geschwindigkeit von
Prozessor und Grafikchip, Größe des Arbeitsspeichers) als auch bei
den Betriebssystemen (neue Möglichkeiten in jüngeren Versionen)
gibt es keinen gemeinsamen Nenner – ganz zu schweigen von PCBetriebssystemen, die auf Notebooks mit Displays zwischen 11 und
17 Zoll laufen, sowie den klassischen Desktop-PCs ...
Kurzum: Neue Produkte mit kaum vorhersehbaren Spezifikationen
kommen in schneller Folge auf den Markt und ergeben eine schier
unendliche Gerätelandschaft.
1
www.heise.de/newsticker/meldung/Marktforscher-Jedes-zweite-Handy-in-der-EU-ein-Smartphone-1833455.html
2
www.asymco.com/2013/01/03/the-last-featurephone
3
www.heise.de/newsticker/meldung/PC-Verkaeufe-auch-in-Westeuropa-weiter-auf-Talfahrt-1864173.html
4
www.heise.de/newsticker/meldung/Consumermarkt-Erstmals-mehr-Tablets-als-Notebooks-verkauft-1938179.html
6
4
Drei Umsetzungsansätze für zeitgemäße
Seamless Service Experiences
Pur oder kombiniert?
Zu Beginn eines Umsetzungsprojekts stehen zunächst konzeptionelle Fragen, die die künftige User Experience betreffen. Welches
konkrete Problem der Nutzer wird durch das Angebot gelöst? Und
welche Inhalte und Funktionen sind geeignet, um dazu beizutragen?
Um Web-Inhalte auf unterschiedlichsten Geräten bei Smartphones,
Tablets und Desktop-Computer darzustellen, bieten sich technisch
gesehen drei Möglichkeiten: responsive Webdesign, adaptive
Templates und native Apps.
Oftmals ist die Antwort darauf nicht ein Entweder-Oder, sondern
die sinnvolle Kombination der Ansätze für das bestmögliche geräteübergreifende Erlebnis. Elementar fürs Projekt ist es, die Entscheidung für einen Einzel-Ansatz oder die Kombination von Ansätzen
zu Beginn eines Projekts zu treffen. Denn aus dieser Entscheidung
ergeben sich zentrale Weichenstellungen für Konzeption, Design
und Frontend. Für einen effizienten Projektablauf sollten dann die
jeweiligen Rahmenbedingungen als Leitplanken dienen. So bedeutet
responsive Webdesign zum Beispiel, dass komplexe Layouts und
Inhaltsstrukturen vereinfacht werden müssen; umgekehrt ist es für
eine vergleichsweise einfache Website nicht notwendig, adaptive
Templates zu verwenden.
» Elementar fürs Projekt
ist es, die Entscheidung
für einen Einzel-Ansatz
oder die Kombination
von Ansätzen zu Beginn
eines Projekts zu treffen.
Denn aus dieser Entscheidung ergeben sich
zentrale Weichenstellungen für Konzeption,
Design und Frontend. «
1. Responsive Webdesign
Bei responsive Webdesign ist das Layout der Website flexibel oder
gerne auch »liquid« genannt. Es passt sich automatisch an Fensterund Bildschirmgrößen an. Das ist eine gute Grundlage für zeitgemäße Websites, jedoch nicht in allen Fällen geeignet.
Vor- und Nachteile
Der größte Vorteil dieses Ansatzes ist, dass die Website »von Haus
aus« auf unterschiedlichen Displays funktioniert. Es wird kein separates URL-Konzept benötigt; Nutzer sehen die für ihr Gerät optimale
Darstellung, auch wenn sie auf dem Smartphone eine Adresse aufrufen, die ein Bekannter ihnen von einem PC aus geschickt hat oder
umgekehrt. Zudem sind die Wartungskosten für Website-Betreiber
geringer als bei adaptiven Websites, da die zu pflegende Codebasis
deutlich kleiner ist.
Diesen Vorteilen stehen zwei gewichtige Nachteile gegenüber: Jedes
Gerät muss immer den vollständigen Code herunterladen und verarbeiten. Das kostet Datenvolumen und Ladezeit, außerdem ist auf
vielen Smartphones und Tablets die Performance nicht optimal.
7
Das liegt daran, dass die Geräte die Darstellung der Seite aufwändig
berechnen müssen. Gerade ältere oder günstigere Geräte haben
dafür zu wenig Arbeitsspeicher und Rechenleistung, außerdem
wirkt sich das negativ auf die Akkulaufzeit aus. Nutzer sehen im
schlimmsten Fall einige Sekunden lang eine weiße Seite, bevor die
Inhalte plötzlich sichtbar werden, oder manchmal auch nur der
Anfang einer Seite, so dass erst nach weiterer Wartezeit nach unten
gescrollt werden kann. Abgesehen davon unterliegen responsive
Websites auch einigen konzeptionellen und inhaltlichen Einschränkungen: Elemente und Inhalte können auf unterschiedlichen Geräten
zwar ein- oder ausgeblendet werden, allerdings muss die Reihenfolge immer identisch sein.
Einsatzzwecke
Besonders gut geeignet ist der responsive Ansatz daher für einfach
strukturierte Websites mit einer flachen Inhaltsstruktur und einem
einfachen Seitenaufbau. Responsive Webdesign ist gleichwohl auch
für sehr umfangreiche Websites geeignet. Die angebotenen Inhalte
und Funktionen müssen nur von Beginn an bewusst einheitlich und
reduziert gestaltet werden. Eine Chance, sich in der Konzeptionsphase auf die wirklich wichtigen Inhalte zu fokussieren!
Responsive Webdesign ist auch für die Kombination mit dem adaptiven Ansatz geeignet. Beispielsweise könnten nur die Desktop-Darstellungen responsive sein, also für Displays ab 1024 Pixeln Breite
und Widescreen-Displays (1200, 1600 oder mehr Pixel Breite). Für
Tablets und Smartphones gäbe es eigene, adaptive Templates. Eine
Alternative wäre, auch die Tablets in die responsive Darstellung mit
aufzunehmen, und nur für Smartphones separate Templates zu
verwenden.
Definitiv ungeeignet für responsive Webdesign sind komplexe
Websites, also wenn sehr viele komplexe Inhalte in tiefen Inhaltsstrukturen vorhanden sind, oder die Seiten selbst aus sehr vielen
Elementen aufgebaut sind. Wenn dies nur auf einen Teilbereich
zutrifft, beispielsweise einen umfangreichen Konfigurationsprozess,
könnte es für diesen Prozess eigene Templates geben, während die
restliche Website responsive umgesetzt ist.
Responsive Webdesign ist nicht per se
günstiger als adaptive Templates. Bei
Mythos Nr. 1
sehr komplexen Anforderungen an das
»Responsive Webresponsive Verhalten auf den unterdesign ist immer die schiedlichen Geräten wird responsive
günstigste Lösung!« schnell teurer als adaptive Templates.
Besonders unangenehm wird es, wenn
mitten im Projekt auf eine adaptive Lösung gewechselt werden muss.
Besser schon von Beginn an klären, ob adaptive Teile notwendig sind
und wie sie in den responsiven Ansatz integriert werden können.
Responsive auf einen Blick
Vorteile:
+ Flexible Darstellung
auf unterschiedlichsten
Displays möglich
+ Kein separates URLKonzept notwendig
+ Geringere Wartungskosten
im Vergleich zum adaptiven
Ansatz (nur ein Satz
Templates)
Nachteile:
-- Devices müssen unnötigen Code
herunterladen und verarbeiten
(Ladezeiten, Datenvolumen,
Performance)
--
Weniger flexibel im Vergleich zum
adaptiven Ansatz (Anordnung
der Inhalte muss auf allen
Devices identisch sein, keine
Änderung der Reihenfolge)
Gut geeignet …
… für einfach strukturierte Inhalte
(flache Inhaltsstruktur,
einfacher Seitenaufbau)
… zur Kombination mit dem
adaptiven Ansatz
Nicht geeignet …
… für Websites mit komplexen
Inhalten und Funktionen,
verschachtelten Tabellenstrukturen, über iFrames
eingebundene externe Inhalte
oder für Prozesse mit vielen
Interaktionselementen
… um eine bestehende Website
nachträglich für unterschiedliche
Displaygrößen zu wappnen
… wenn auf verschiedenen
Geräteklassen unterschiedliche
Inhaltsstrukturen oder Funktionen angeboten werden sollen
» Adaptive Templates
8
Aperto Case: Responsive
Deutsche See – Das Feinschmeckerportal
rund um Fisch und Meeresfrüchte
Deutsche See mit Hauptsitz in Bremerhaven ist in Deutschland Marktführer in Sachen Fisch
und Meeresfrüchte. Während die bisherige Website vor allem auf das B2B-Segment abzielte,
richtet sich das neue Portal in erster Linie an Endkunden. Aus der Unternehmenswebsite ist
ein Web-Magazin geworden: Neben Produktinformationen und Corporate Storytelling bietet
die Website ausführliches Basis- und Hintergrundwissen sowie Inspiration für das Kochen mit
hochwertigem Fisch. Mit ästhetisch anspruchsvoll gestalteten und smart verknüpften Produktempfehlungen, Rezeptideen, Inhalten aus dem Fischlexikon und Video-Tutorials hebt sich die
Seite deutlich von den üblichen Food-Webseiten ab.
Aus technischer Sicht wurde die neue deutschesee.de komplett responsive umgesetzt. Damit
die Website auch mit Smartphones schnell geladen wird, werden die Bilder in der richtigen
Größe ausgeliefert und nicht nur kleiner skaliert. Auch auf großen Widescreen-Displays
werden die Produkte großformatig in Szene gesetzt.
Interaktive Demo: Erleben Sie diesen Case auf www.aperto.de/seamless
9
2. Adaptive Templates
Adaptive auf einen Blick
Beim adaptiven Ansatz gibt es von jeder Seite mehrere Templates
für die jeweiligen Endgeräte, zum Beispiel für Smartphones einerseits und größere Displays andererseits. Für komplexere Websites
ist das oft die bessere Lösung als responsive Webdesign, beide
Ansätze sind aber auch gut miteinander kombinierbar.
Vor- und Nachteile
Die große Stärke von adaptiven Templates ist, dass die verschiedenen Geräteklassen optimal bedient werden können. Anders als bei
responsive Webdesign wird an Smartphones, Tablets und Desktops
nur der Code ausgeliefert, der zur Darstellung auf dem jeweiligen
Gerät notwendig ist. Das bedeutet: schnelle Lade- und Reaktionszeiten, vor allem auf Smartphones. Zudem ermöglichen an die Geräte
angepasste Templates eine hohe Flexibilität: Die Reihenfolge von Elementen kann auf Smartphones eine vollkommen andere sein als auf
Tablets oder Desktop-Computern. Vielleicht sind bestimmte Elemente nicht einmal notwendig. Gerade bei umfangreichen Websites mit
tiefen Inhaltsstrukturen kann es zum Beispiel sinnvoll sein, für kleine
Displays eine angepasste Navigation anzubieten. Insbesondere sind
adaptive Templates notwendig, wenn auf der Smartphone Version andere oder zusätzliche Features angeboten werden sollen, weil mobile
Nutzungskontexte wie Location Based Services oder Aktivitäten am
Point of Sale/Interest (z.B. Barcode-Scannen) diese erfordern.
Einsatzzwecke
Adaptive Templates sind sehr gut geeignet, um bestehende Websites nachträglich für Smartphones und Tablets fit zu machen: Der
bestehende Code der Desktop-Website kann unverändert bleiben
und die Templates für kleinere Geräte kommen hinzu. Bei einer
überschaubaren Online-Präsenz ist es jedoch nicht notwendig, in
mehrere Template-Sets zu investieren; hier genügt eine »Full Responsive«-Website. Häufig empfiehlt sich jedoch eine Kombination
von adaptiven Templates für Smartphones mit responsive Webdesign fürTablets und Desktop. Wenn Ihre Website bestimmte Gerätefunktionen einsetzt, wie beispielsweise die Kamera oder ortsbezogene Dienste, sind adaptive Templates ebenfalls der richtige Weg.
Mythos Nr. 2
» Google verlangt
responsive Webdesign. «
Vorteile:
+ Optimale Performance auf
Tablet, Desktop und insbesondere Smartphones
+ Hohe Flexibilität in der Gestaltung, bessere Unterstützung von
gerätespezifischen Features
Nachteile:
-- Höherer Initial- und Pflegeaufwand, da mehrere TemplateSets erstellt werden
Gut geeignet …
… für komplexe Websites
mit vielen Inhalten
… für komplexe Interaktionen, z.B.
umfangreiche Filtermöglichkeiten
für komplexe Layouts
… für hohe Ansprüche an Ladezeit
und Performance (Joy of Use)
… um eine bestehende DesktopWebsite nachträglich auch für
Smartphones und Tablets fit
zu machen
Nicht geeignet …
… bei kleineren Websites
Im Juni 2012 sprach Google Empfehlungen aus, wie Websites
für Smartphones optimiert werden können. Eine der drei
Empfehlungen ist responsive Webdesign, die beiden anderen
sind gerätespezifisches HTML (»Dynamic serving«, in dieser
Studie als adaptive Templates bezeichnet) und separate
Smartphone-Websites unter einer eigenen Domain. Alle drei
Ansätze betrachtet Google als gleichwertig. 5 6
5
googlewebmastercentral.blogspot.ch/2012/06/recommendations-for-building-smartphone.html
6
https://developers.google.com/webmasters/smartphone-sites
10
Aperto Case: Adaptive
WWF – Ein zentrales Portal für die Projektarbeit
der weltgrößten Umweltschutzorganisation
Als eine der größten Naturschutzorganisationen der Welt ist der WWF in mehr als 100 Ländern
aktiv und betreut über 1.300 Projekte zum Schutz der biologischen Vielfalt. Die Herausforderung
für Aperto war es, den seit Jahren bestehenden Internetauftritt des WWF in ein zeitgemäßes
Internet-Portal zu verwandeln, das neben der umfassenden Gesamtdarstellung der Organisation
auch Kampagnen und Themenseiten integriert.
Um das Online-Fundraising zu verbessern, setzte das Team aus User Experience-Spezialisten,
Web-Designern und Kommunikationsberatern drei Schwerpunkte: Eine gezielte Dramaturgie
der Website vom ersten Kontakt bis hin zur geleisteten Spende, einen besonders nutzerfreundlichen Spendenprozess, und Bedien- und Navigationselemente, die neben ihrer
Funktionalität insbesondere auf ein ästhetisches Erlebnis und auf Freude an der Bedienung
hin gestaltet wurden.
Die neue Website nutzt auf Desktops und Tablets die gleichen Templates. Auf Smartphones ist
ebenfalls die volle Funktions- und Angebotsbreite verfügbar – die Navigation wurde jedoch an
die besonderen Bedürfnisse der kleineren Displays angepasst. Die Smartphone-Website wurde
mit etwas zeitlichem Versatz in einem weiteren Projekt entwickelt.
Interaktive Demo: Erleben Sie diesen Case auf www.aperto.de/seamless
11
3. Native Apps
Apps laufen als eigenständige Programme auf Smartphones und
Tablets und sind für ein bestimmtes Betriebssystem optimiert
(iOS, Android, Windows Phone). Apps sind vor allem dann sinnvoll,
wenn sie Ihre Kunden bei der Erledigung von Aufgaben unterstützen.
Richtig eingesetzt, haben Apps ein sehr hohes Kundenbindungspotential.
Vor- und Nachteile
Für das hohe Kundenbindungspotential von Apps gibt es
drei Ansatzpunkte:
•
Abbildung der Kernangebote mit höchster Performance:
hoher Joy of Use auf dem persönlichsten aller Devices.
Das Smartphone ist immer dabei, genau wie der
Schlüsselbund und das Portemonnaie.
•
Branded Services: Unternehmen bieten nützliche
Zusatzdienste rund um ihre Produkte per App an.
•
Ökosystem-Baustein: Durch eine enge Verzahnung
von Presales, Sales und Aftersales sowohl online als
auch in der wirklichen Welt schaffen Sie eine attraktive
Plattform für Nutzer – Apps sind ein wichtiger Baustein
in einer solchen Plattformstrategie.
Ein Vorteil von nativen Apps ist, dass sie die Funktionalitäten des
Betriebssystems nutzen können. Wenn es beispielsweise darum
geht, Daten mit anderen Apps auszutauschen, auf eingebaute
Hardware wie Bewegungssensoren zuzugreifen, Daten im Hintergrund zu aktualisieren oder sich mit Benachrichtigungsfunktionen
in das Betriebssystem zu integrieren (z.B. Passbook in iOS).
Außerdem werden native Apps dank der Hardware-Unterstützung
schneller ausgeführt und fühlen sich dadurch in der Bedienung
flüssiger an. Richtig umgesetzt bieten native Apps daher oft eine
bessere User Experience als Smartphone-Websites oder HTML5Anwendungen. Apps sind aber kein Ersatz für mobil angebotene
Websites, sie ergänzen diese meist.
Apps haben allerdings einen Nachteil: Sie sind vergleichsweise teuer.
Dies hat mehrere Gründe. Wie sie es von einer professionellen Website gewohnt sind, erwarten App-Nutzer eine laufende Pflege und die
Umsetzung von Feature-Wünschen. Zudem entwickeln sich Hardware, Software und die jährlich neuen Betriebssystem-Versionen so
rasant weiter, dass jeweils neue App-Releases notwendig werden.
Kurzum, eine App zu erstellen und zu pflegen erfordert ein langfristiges
Engagement, um die Nutzererwartungen zu erfüllen.
Native auf einen Blick
Vorteile:
+ Sehr hohes Kundenbindungspotential
+ Oft bessere User Experience im
Vergleich zu mobilen Websites
Nachteile:
-- Laufende Pflege und
Weiterentwicklung notwendig
--
Relativ hohe initiale Kosten für
die optimale Unterstützung
mehrerer Betriebssysteme
Gut geeignet …
… wenn es konkrete Anwendungsfälle für Nutzer gibt
… für ortsbezogene und soziale
Dienste
… im Vertrieb (POS, Außendienst)
… für komplexe Interaktionen
… für E-Learning-Anwendungen
… für Spiele
… für die Offline-Nutzung
Nicht geeignet …
… wenn die laufende Pflege
und Weiterentwicklung nicht
sichergestellt werden kann
… wenn die App über die inhaltlichen Angebote einer Website
hinaus keinen konkreten
Nutzen hat
… wenn die App nur aus
Werbebotschaften besteht
12
Einsatzzwecke
Ein fast schon klassisches Beispiel für Apps ist das Zusammenbringen von Angebot und Nachfrage – sei es, dass die App selbst
das Geschäftsmodell ist (z.B. MyTaxi), oder als ergänzendes Angebot neben der Website (z.B. Airbnb) eingesetzt wird. Daneben sind
viele weitere Einsatzzwecke denkbar: Für ortsbezogene und soziale
Dienste (»SoLoMo«), am POS zur Beratungsunterstützung für Beschäftigte im Vertrieb, für komplexe Interaktionen wie beispielsweise
digitalisierte Geschäftsprozesse im Außendienst. Apps machen auch
immer dann Sinn, wenn es um personalisierte Dienste geht, bei denen
sich der Nutzer nicht jedes Mal erneut einloggen will, und zum Beispiel
für E-Learning-Anwendungen, Spiele und die Offline-Nutzung.
» Für eine optimale
Seamless Experience
ist die Synchronisation
zwischen mehreren
Geräten wichtig, so dass
Nutzer immer auf den
gleichen Informationsstand zugreifen können. «
Für eine optimale Seamless Experience ist die Synchronisation zwischen mehreren Geräten wichtig, so dass Nutzer am Desktop-PC
im Büro, mit dem Notebook beim Kunden, mit der Tablet-App und
der Smartphone-App immer auf den gleichen Informationsstand
zugreifen können.
Mythos Nr. 3
» Heutzutage braucht
jedes Unternehmen
eine App. «
Apps sind nur sinnvoll, wenn sie konkrete Anwendungsfälle unterstützen.
Vor dem Projekt sollten Sie sich immer folgende Frage beantworten:
Welches konkrete Problem meiner Kunden löst diese App? Abhängig
von den Unternehmenszielen und den Bedürfnissen der Nutzer kann
für eine bestimmte Aufgabe eine Website sinnvoll sein, eine App, eine
Kampagne in sozialen Medien oder auch Eventmarketing und klassische
Werbung.
13
Aperto Case: Native
Volkswagen Rally The World – eine integrierte
Motorsport-Kampagne mit digitalem Schwerpunkt
Im Januar 2013 stieg Volkswagen in die FIA World Rallye Championship ein und
konnte bereits in der ersten Saison die Weltmeisterschaft für sich entscheiden.
Die Kampagne auf rallytheworld.com begleitete die 13 Rennen in 13 Ländern mit
Hintergrundberichten und band die Fans auf Facebook, Twitter, Instagram und
Foursquare ein.
Mit einer langfristig geplanten involvierenden Content-Strategie von Events,
Online-Specials und Rich Media Magazininhalten, Fan-Aktivierung und Mobile
Gaming hat Rally The World im September 2013 295.000 Fans auf Facebook
und 7100 Follower auf Twitter. » Rally The World. The Game « wurde 1,4 Mio. Mal
heruntergeladen.
Auf Desktops und Tablets wird die Website mit responsive Webdesign je nach
Bildschirmgröße passend angezeigt. Für Smartphones gibt es separate Templates,
um optimale Performance zu gewährleisten. Die Spiele-Apps für iOS und Android
nutzen native Funktionen der beiden Betriebssysteme – beispielsweise werden
die Neigungssensoren von Smartphone bzw. Tablets ausgelesen.
Interaktive Demo: Erleben Sie diesen Case auf www.aperto.de/seamless
14
5
Erfolgsfaktor
Backend
Für Ihr Unternehmen sind schnelle und kostengünstige Abläufe von
entscheidender Bedeutung. Denn: Die Konkurrenz schläft nicht und
vorhandene Ressourcen müssen wirtschaftlich eingesetzt werden.
Wir haben gezeigt, wie Sie mit Ihren Inhalten und Services effizient
verschiedene Kanäle bespielen. Bleiben zwei entscheidende Fragen:
Wie lassen sich Seamless Service Experiences – ob responsiv, adaptiv
oder nativ – in Ihre vorhandene Systemlandschaft effizient integrieren?
Und: Wie bleibt die Komplexität überschaubar?
Drei zentrale technische Faktoren für ein optimales Zusammenspiel
von Interface und Backend wollen wir am Ende des Whitepapers
noch vorstellen:
1. Alle Kanäle werden aus einem CMS bedient
Responsive Webdesign wird oft mit einem einfachen Redaktionsworkflow in Verbindung gebracht: Aus einer Quelle werden Smartphone,
Tablet und Desktop mit Inhalten versorgt. Das gilt jedoch auch für
adaptive Templates: Die HTML-Dateien für die verschiedenen Geräte
greifen auf das gleiche CMS zu. In beiden Fällen müssen Redakteure
nur einmal Inhalte pflegen.
» Wie lassen sich
Seamless Service
Experiences – ob
responsiv, adaptiv
oder nativ – in Ihre
vorhandene Systemlandschaft effizient
integrieren? Und:
Wie bleibt die
Komplexität
überschaubar? «
2. Daten aus weiteren Systemen ermöglichen
zusätzliche Features
Redaktionelle Inhalte werden in Content-Management-Systemen
gepflegt. Bei heutzutage typischerweise dynamischen Websites
spielt darüber hinaus die Datenversorgung eine große Rolle: Produktinformationen sollen online angezeigt werden und müssen dafür in
einer einheitlichen, strukturierten Form vorliegen. Kunden sollen sich
bei der Website einloggen können, um sich ihre letzten Bestellungen
anzeigen zu lassen oder um Services wie eine Online-Terminvereinbarung wahrzunehmen zu können. Damit die Website auch solche Informationen anzeigen kann, bzw. um Servicefunktionen überhaupt erst
zu ermöglichen, muss sie an Kundendatensysteme, Warenwirtschaft,
Produkt- oder sogar Produktionsdatenbanken angebunden werden.
Zudem ist die Bilddatenversorgung wichtig, damit an Smartphones
nicht riesige Bilddateien ausgeliefert werden. Für responsive Webdesign gibt es im Frontend das Adaptive-Image-Verfahren,7 so dass
mit dem gleichen HTML-Code sowohl sehr kleine Bilder für Smartphones ausgeliefert werden können, als auch mittelgroße Bilder für
Tablets und große Bilder für Desktops. Bei adaptiven Templates
sind die jeweils benötigten Bildgrößen direkt im Code hinterlegt.
7
www.adaptive-images.com
15
Beide Verfahren sorgen dafür, dass Smartphone-Nutzer nicht minutenlang auf die Übertragung von Bildern warten müssen, wenn sie gerade
nur eine geringe Bandbreite zur Verfügung haben – sei es, dass sie sich
in Gebäuden, der U-Bahn oder im Zug befinden, oder dass das Highspeed-Datenvolumen für diesen Monat bereits aufgebraucht ist.
3. Apps erhalten spezielle Inhalte über eine API
Apps zeigen sehr spezifische Inhalte an: Standorte, Öffnungszeiten,
Produktinformationen oder einen Bestellstatus. Redaktionell gepflegte
Inhalte spielen dagegen oft eine untergeordnete Rolle. Für Apps ist es
daher nicht notwendig, die Inhalte einer ganzen Seite aus dem CMS
abzurufen, wenn nur bestimmte Informationen angezeigt werden
sollen. Eine Alternative ist, selbst eine Programmierschnittstelle (API)
zu entwickeln, so dass die App mit exakt den benötigten Inhalten versorgt wird. Die API holt die Inhalte direkt aus den jeweiligen Systemen
und gibt sie an die App weiter.
16
6
Fazit &
Ausblick
Unternehmen und Nutzer haben auf den ersten Blick scheinbar
gegensätzliche Interessen. Nutzer möchten hohe Funktionalität
und gute Inhalte, und das auf all ihren Geräten. Für Unternehmen ist
wichtig, sowohl Kosten als auch Komplexität von Projekten im Griff
zu haben. Die Beispiele in diesem Whitepaper zeigen, dass mit einer
smarten Kombination verschiedener technischer Lösungen beide
Seiten miteinander vereint werden können – betriebswirtschaftliche
Aspekte und optimale User Experience.
Derzeit stehen Tablets und Smartphones noch besonders im Fokus,
aber andere Formate wie Apps auf Smart TVs und in Set-Top-Boxen,
Info- und Entertainment-Systeme in Autos oder Smartwatches
wollen bereits in naher Zukunft berücksichtigt werden. Nicht zu
vergessen die Geräte, die selbst über gar kein Display verfügen:
Sensoren, die Daten über ihre Träger im Rahmen des »quantified
self« sammeln, Haushaltsgeräte, die über Apps gesteuert werden
oder Dienste, die auf Ereignisse reagieren und weitere Aktionen
anstoßen können.
Unabhängig von den künftigen Entwicklungen sind bei den heutigen
Devices technische Aspekte natürlich wichtig, aber letztlich kommen
Besucher wegen der Inhalte auf eine Website. An dieser Stelle geht
eine Cross-Device-Strategie Hand in Hand mit einer geräteübergreifenden Content-Strategie.
» Formate wie Apps
auf Smart TVs und
in Set-Top-Boxen,
Info- und Entertainment-Systeme
in Autos oder
Smartwatches
wollen bereits
in naher Zukunft
berücksichtigt
werden. «
Eins ist klar: Die Zukunft gehört den Unternehmen, die ihren Kunden
bestmögliche Services und Content-Erlebnisse bieten – egal über
welches Gerät oder welchen Kanal.
17
Über die
Aperto AG
Aperto ist eine unabhängige, inhabergeführte Agentur mit mehr als
300 Mitarbeitern an den Standorten Berlin, Basel, Dubai und Peking.
Unter einem Dach vereint Aperto alle Kommunikationsdisziplinen,
um der Nachfrage nach integrierten Lösungen gerecht zu werden. Im
Mittelpunkt der Arbeit steht die Verbindung von digitaler Kompetenz
mit kreativer Exzellenz für Kunden aus den Bereichen Wirtschaft,
Politik, Medien und Soziales. Die Agenturgruppe besteht aus den
Spezialisten Aperto Berlin, Plantage Berlin, Greenkern, Aperto Move,
Aperto Online Marketing und Aperto Plenum.
Wir beraten und unterstützen Sie gerne bei der Realisierung Ihres
Vorhabens. Schreiben Sie uns oder rufen Sie uns an. Wir freuen uns!
Aperto AG
Anja Kabakeris
Chausseestraße 5
D-10115 Berlin
+49 30 283921 - 505
[email protected]
www.aperto.de
www.aperto.de/seamless
18