Upload
tranhuong
View
228
Download
1
Embed Size (px)
Citation preview
Als Agentur für digitale Kommunikation
und Interaktion betreuen wir seit 1992
führende Marken in ihren digitalen Kanälen
und internationalen Märkten.
Ray Sono belegt laut aktuellem
BVDW Ranking der größten Internet-
Agenturen Deutschlands Platz 15.
Mitarbeiter: 140
Standort: München
www.raysono.com
Ray Sono AG
2
3
Ray Sono ... aus fünf Gründen
Analytics als Fundament
für die digitale Kreation
Ray Sono – die User
Experience-Spezialisten
Projektgeschäft und laufende
Betreuung aus einer Hand
Der Ray Sono Customer
Journey-Ansatz
Full-Service-Agentur
mit optimaler Größe
4
Travel Referenzen User Experience
Lufthansa
UX-Beratung und Konzept; Usability-
Testing, Conversion Optimierung
(Buchungsstrecke).
Deutsche Bahn
UX-Beratung; Usability- und A/B-
Testing, Conversion Optimierung
(Fokus: Buchungsstrecke).
TUI
UX-Beratung; Analytics, Conversion
Optimierung.
4
Motel One
UX-Beratung, Konzept und Design,
Umsetzung, Conversion Optimierung,
mobile Website, iPhone App.
DER.com
Relaunch der.com: UX-Beratung,
Konzept & Design; technische
Umsetzung, Conversion Optimierung.
Südtirol
UX-Beratung, Konzept & Design,
technische Umsetzung, Conversion
Optimierung.
6
Referenzen Responsive Design
Lufthansa Miles & More
Relaunch Newsletter im Responsive
Design. Internationales Newsletter
Management (5 Mio./Monat).
Austrian Airlines
Relaunch Newsletter im Responsive
Design. Internationales Newsletter
Management.
Deutsche Bahn
Konzeption und Umsetzung
Kampagnen-Landingpages im
Responsive Design (Multi-Device).
Comprano
Umsetzung Ratgeber-Plattform (Multi-
Device), Rapid Prototyping, Responsive
Design.
DATEV
Umsetzung Kampagnen-Landingpages
im Responsive Design (Multi-Device).
Süddeutsche Zeitung
Konzept, Design und Umsetzung des
Online Service Centers im Responsive
Design (Multi-Device).
6
8
„Global mobile
data traffic
grew 81% in 2013“ Cisco® Visual Networking Index (VNI) http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html
9
Das Internet
verändert sich. Mehr Geräte mit immer mehr verschiedenen Betriebssystemen, Bedienformen und
Bildschirmgrößen greifen auf Webinhalte zu – von überall.
11
Der Kontext
ist flexibel. Durch die Vielzahl der internetfähigen Geräte und möglichen Nutzungssituationen des
Internets kann man nicht mehr von einem sicher vorhersagbaren Nutzungskontext
ausgehen.
Mobile Geräte werden oftmals vom heimischen Wohnzimmer aus im WLAN zum
Shopping benutzt, Laptopnutzer sitzen im Zug oder gehen über ihre 3G-Karte ins
Internet.
12
Kontext früher
Fähiger Browser
Großer Monitor
Schnelle
Verbindung
Fokussiert
Stationär
Bequem
Effiziente
Bedienung
Schnelle
Rechenleistung
14
Vorhersagbarkeit
war gestern Optimale Screengröße, minimale Ladezeit, zuhause oder unterwegs, Maus- oder
Touchbedienung, Spielen oder Shoppen?
Sicher erkennbar ist nur die Bildschirmgröße und –ausrichtung. Bei Betriebssystem und
Browser gibt es bereits Unschärfen durch ungenaue Standards. Ob der Nutzer über
WLAN oder 3G/2G surft, ist nicht herauszufinden.
Durch die Vielzahl an Zugriffsmöglichkeiten und Nutzungsabsichten auf das Internet
gibt es keine wirklich festen Anhaltspunkte mehr. Daher wird Flexibilität immer
wichtiger.
15
1. Die Bedürfnisse des Kunden
zu jedem Zeitpunkt verstehen
z.B. mit Customer Journey Management
2. Für jedes Device die passenden
Lösungen anbieten
z.B. Responsive Design / device-spezifische Angebote
3. Den Wechsel zwischen
den Geräten erleichtern
z.B. einheitliches Look & Feel, übergreifendes
Login + Merkzettel, Cloud Services
Herausforderungen
17
Was ist Responsive
Design? EIN Content für ALLE Devices. Aber: die Inhalte passen sich flexibel an das Gerät an:
• visuelle Darstellungsform (flexible Anordnung von Elementen und Inhalten)
• bedürfniskonforme Auslieferung bzw. Nichtauslieferung von Inhalten
18
Breakpoint Graph
(320) 512 768 1024 (1280)
Smartphone Mini-Tablet Tablet Desktop
Beispiel mit 3 Breakpoints
19
Pixel-Angaben und Display-Größen
Die Angabe der physikalisch vorhandenen Pixel sagt nichts über die reale Größe des
Device-Display aus.
1080 pxl breit
(HTC One)
1024 pxl breit
(ältere Desktops)
Obwohl beide Devices praktisch die selbe Breite haben, muss auf das Smartphone
eine andere Seite wie auf den Desktop ausgespielt werden.
20
Die Referenz: The Boston Globe
PC Smartphone Tablet
http://bostonglobe.com/
21
Travel: primär Destinationen und Hotels
Destinationen:
Visit Finland: http://www.visitfinland.com/de/
Visit Stockholm: http://beta.visitstockholm.com/
Visit London: http://www.visitlondon.com/
Travel Oregon: http://traveloregon.com/
I Travel New York: http://www.itravelyork.info/
North Dakota: http://www.ndtourism.com/
Pennsylvania: http://www.visitpa.com/
Washington DC: http://washington.org/
Michigan: http://www.michigan.org/
Sonoma County: http://www.sonomacounty.com/
Barbados: http://www.barbados.org/
Stadt Erlangen: http://www.erlangen.de/
Airlines:
Thomas Cook http://www.flythomascook.com/
KLM http://www.klm.com/home/nl/en
Hotels:
Wythe Hotel: http://wythehotel.com/
Atlantic Hotel: http://www.theatlantichotel.com/
Z Ocean Hotel: http://zoceanhotelsouthbeach.com/
Macdonald Hotels: http://www.macdonaldhotels.co.uk/
Si Como No Resort: http://www.sicomono.com/
Westville Hotel Ensikillen: http://westvillehotel.co.uk/
Weitere:
Africa Exclusive: http://www.safari.co.uk/
Roadtrippers: https://roadtrippers.com
Gatwick Airport: http://www.gatwickairport.com/
Scandorama: http://www.scandorama.se/
Ölvemarks Holiday: http://www.olvemarks.se/
Holiday Taxis: http://www.holidaytaxis.com/
Travel Age West: http://www.travelagewest.com/Hotels
22
Responsive:
ja oder nein? Von den Top 50 Airlines weltweit sind aktuell nur zwei responsive.
Von den Top 100 börsennotierten Firmen in UK (FTSE100) haben aktuell nur zwei
eine responsive Website. Über die Hälfte haben noch nicht mal eine mobile Website.
www.thedrum.com/news/2014/02/27/only-two-ftse100-use-responsive-web-design-will-over-half-not-having-mobile-site
www.tnooz.com/article/airlines-mobile/
23
Erforschen Sie das
Nutzer-Verhalten Erforschen Sie in welchen Situationen die Nutzer Ihr Web-Angebot verwenden, welche
speziellen Bedürfnisse sie dabei haben und welche Geräte sie verwenden.
Dazu sind Customer Journey Analysen sehr hilfreich, aber auch Tagebuch-Studien
oder Nutzer-Interviews können wichtige Erkenntnisse beisteuern.
24
Entwicken Sie für
den Kontext … … nicht für Geräte. Die Bedürfnisse eines Nutzers im Zug unterwegs unterscheiden
sich von den Bedürfnissen eines Nutzers im Büro oder zuhause auf dem Sofa.
Es ist nicht genau vorhersagbar wo ein Nutzer welches Gerät verwendet!
25
Kriterien
zur Entscheidung Anpassungs-Möglichkeiten und –
Erfordernisse (spezielle Use Cases)
Flexibilität in Konzept & Screendesign
Art der Inhalte (Video, Flash, …)
Komplett-Relaunch vs. Weiterentwicklung
Notwendigkeit responsiver Werbemittel
Anforderungen in der technischen
Umsetzung (z.B. CMS, IBE)
Website Performance (Ladezeit)
Browser-Unterstützung (z.B. IE 6-8)
Intensität der Contentpflege
Gesamte Mobil-Strategie (inkl. Apps)
26
Responsive macht
häufig Sinn In vielen Fällen verwenden die Nutzer verschiedene Geräte für dieselben Aufgaben
– ein Indikator dass ein Responsive Design Sinn macht.
Wenn sich ein spezieller Anwendungsfall (Use Case) für ein Device isolieren lässt
(z.B. Kurznachrichten auf dem Smartphone), ist eine separate Lösung sinnvoll.
Newsletter: unbedingt responsive!
27
Gute Zwischen-
Lösungen Zum Beispiel:
• Responsive Website (für Desktop + Tablet) + separate mobile Website
• Touch-optimierte Desktop-Website + separate mobile Website
• Eigene Smartphone-App (oder Tablet) für sehr spezielle Use Cases
29
1. Flexibles Design,
flexible Prozesse Dynamisierung der Inhalte bedeutet auch Dynamisierung der Entwicklungsprozesse.
30
Launch
Launch
Verändertes Prozessvorgehen beim Responsive Webdesign
Analyse Konzept Design Entwick-
lung Test
Lineares Wasserfall-Vorgehen
Analyse Konzept
Design
Entwick.
Test
…
Agiler, iterativer Prozess mit enger Kooperation aller Fachbereiche
… …
31 31
Abstimmung. Der Arbeitsprozess sollte von Anfang an interdisziplinär geführt werden.
Konzept, Design und Programmierung müssen von Anfang an einen Tisch und alle
Steps gemeinsam besprechen und erarbeiten.
33
Mobile UND
Desktop first! Ein „Verkleinern“ einer existierenden Desktop Site auf ein Responsive Design, um
diese auch auf Smartphones gut abrufen zu können, führt oft zu weniger optimalen
Ergebnissen. Aus Content-Sicht ist „Mobile first“ daher die bessere Herangehensweise.
Bezüglich der Darstellung der Features und der optischen Gestaltung hat sich unserer
Erfahrung nach gezeigt, dass ein paralleles Betrachten aller Größen das optimale
Vorgehen ist.
34
3. Fokus auf
Content-Reduktion Die Ursache, dass viele Websites auf kleinen Screens nicht gut funktionieren, ist oft,
dass sie es auf großen Screens auch nicht tun.
Im Rahmen eines Responsive Designs empfehlen wir daher, bestehenden Web-
Content auf mögliche Reduktionspotentiale hin zu überprüfen.
Insbesondere Contents, die keinem Use Case zuzuordnen sind, sollten kritisch
überprüft werden.
35
Die Ursache, dass viele Websites auf kleinen Screens nicht gut funktionieren, ist oft,
dass sie es auf großen Screens auch nicht tun.
Im Rahmen eines Responsive Designs gilt es daher, bestehenden Content auf
mögliche Reduktionspotentiale hin zu überprüfen.
Insbesondere Contents, die keinem Use Case zuzuordnen sind, sollten kritisch
überprüft werden.
Bedürfniskonforme Auslieferung bzw. Nichtauslieferung von Inhalten.
Content Choreography
36
4. Testen und
Optimieren Wie in eigentlich allen Projekten ist es auch in Responsive Design Projekten essentiell
wichtig, vor und nach dem Launch zu testen und zu optimieren – sowohl qualitativ (z.B.
mit Use Labs) als auch quantitativ (A/B Testing).
Responsive A/B-Test-Varianten bedeuten mehr Aufwand gegenüber „einfachen“ Test-
Varianten!
© Copyright
Dieses Dokument der Ray Sono AG ist ausschließlich für den Adressaten bzw.
Auftraggeber bestimmt. Die in diesem Dokument enthaltenen Inhalte und Ideen sind
urheberrechtlich geschützt. Alle Rechte vorbehalten.
37
Stefan Spiegel
Managing Partner |
Leitung Travel & Touristik
Office +49 89 74646-169
Vielen Dank für Ihre Aufmerksamkeit!
Ray Sono AG
Tumblingerstr. 32
80337 München
Office +49 89 74646-0
www.raysono.com
Folgen Sie uns: