Den Multi Device Konsumenten zufrieden stellen …
-
Upload
connected-blog -
Category
Technology
-
view
1.336 -
download
0
description
Transcript of Den Multi Device Konsumenten zufrieden stellen …
Den Multi Device Konsumenten zufrieden stellen …Stephan HauxDirector Product ManagementNetbiscuits GmbH
February 9, 2012 © Netbiscuits GmbH 2011 1
…Mehr als nur Design erforderlich
Stephan HauxDirector Product ManagementNetbiscuits GmbH
February 9, 2012 © Netbiscuits GmbH 2011 2
Telefone überholen PCs
February 9, 2012 © Netbiscuits GmbH 2011 3
Wieviel sufen Smartphone Besitzer ?
February 9, 2012 © Netbiscuits GmbH 2011 4
February 9, 2012 © Netbiscuits GmbH 2011 5
“The hyper‐connected consumer of today has little patience for clutter or noise. His smartphone is the compass with which he engages the world, the persistent interface that guides him through the ever‐evolving digital landscape. How then, as marketers, do we evolve in order to not only keep pace with the mobile revolution, but also to utilize it as intended?”– Jan 2012: http://mashable.com/2012/01/23/mobile‐marketing‐flaws/
February 9, 2012 © Netbiscuits GmbH 2011 6
1. Falle: Ist doch alles Web/ HTML / ….
February 9, 2012 © Netbiscuits GmbH 2011 7
1. Falle: Ist doch alles Web/ HTML / ….
February 9, 2012 © Netbiscuits GmbH 2011 8
Unterschätzen der Einzigartigkeit mobiler Medien
Niemand steht mit dem Laptop im Laden …
February 9, 2012 © Netbiscuits GmbH 2011 9
2. Falle: Laufen ist nicht Sitzen
February 9, 2012 © Netbiscuits GmbH 2011 10
Mobile Konsumenten nicht wie sitzende PC Surfer behandeln
3. Falle: Die Stärke des Augenblicks versäumt
February 9, 2012 © Netbiscuits GmbH 2011 11
Warum Special Apps (und Webseiten) nicht funktionieren
3. Falle: Die Stärke des Augenblicks versäumt
Stationäres Web Ungeteilte Aufmerksamkeit
Konzentrierte Nutzung
Animation muß aus dem Web selber kommen
“Wenn ich schon mal dran sitze”
Mobil Insellösungen funktionieren nicht
Eines von vielen Eindrücken
Anlass zum Surfen jenseits des Internet
Schnell an – Schnell aus
February 9, 2012 © Netbiscuits GmbH 2011 12
Smartphones machen das Internet zum Begleiter im Alltag
4. Falle: Monolog statt Dialog
February 9, 2012 © Netbiscuits GmbH 2011 13
… Dialog ist nicht nur Worte und Menschen
5. Falle: Nehmen statt Geben
Web ist voll von Formularen …
Marketing Kampagnen sammeln E‐Mails oder “Freunde” oder “Fans” …
… damit man kommunizieren kann.
Cookies, Social Graph und Profile verlangen/ sammeln viel Information, um …
… häufig wenig Antworten zu geben.
February 9, 2012 © Netbiscuits GmbH 2011 14
Besser Machen
February 9, 2012 © Netbiscuits GmbH 2011 15
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 16
AUFWACHEN
FRÜHSTÜCKEN
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 17
UNTERWEGS
VORMITTAGSPAUSE
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 18
MITTAGSPAUSE
KAFFEPAUSE
Alltag
February 9, 2012 © Netbiscuits GmbH 2011 19
ZUHAUSE
WECKER STELLEN
Zusammenfassung
February 9, 2012 © Netbiscuits GmbH 2011 20
Hand aufs Herz: Nur 12 Mal pro Tag online?
Nutzung nach Verfügbarkeit und Situation
Tägliche Surfzeit: 3,4 Stunden – 2,7 davon irgendwie “socializing”(Land: USA)
Tablet + Smartphone billiger als Laptop
February 9, 2012 © Netbiscuits GmbH 2011 21
Mobile Web Considerations
Challenges, Problems, Devices, Thoughts
February 9, 2012 © Netbiscuits GmbH 2012 22
Layout Paradigm: Stack
February 9, 2012 © Netbiscuits GmbH 2012 23
Positions of layout containers are changed depended on orientation or form factor
Functionality remains unchanged
Layout Paradigm: Stretch & Collapsible
February 9, 2012 © Netbiscuits GmbH 2012 24
Content is stretched between portrait and landscape mode
Individual Items reduced independently to a minimum
Layout Paradigm: Show & Hide
February 9, 2012 © Netbiscuits GmbH 2012 25
Layout Container becomes visible if device is turned from landscape to portrait and vice versa
In portrait mode hidden elements can be made visible via button
Today’s Approaches to Mobile Design
09.02.2012 Folie 26© 2010 Netbiscuits GmbH
Name Core principle Content adaptation
Resolution independe
nce
Context Inspection
Performance Pros Cons Device DB req.
Responsive design
Serve same HTML to every device.
‐ flexible grid‐media queries‐ flexible images
No Yes No Good Good technique for making site less dependent on browser resolution
•Inefficient image handling •Achieves resolution independence only •No context driven adaptation
No
Progressive enhancement
Serve base HTML to device, use JavaScript to build up functionality as far as possible
Yes Yes Yes Bad •Full adaptation possible • No High End functionality, look & feel possible• Content adaptation only on client• Hard to maintain
No
Server‐side adaptation
All logic on server, client receives only what is required
Yes Yes No Limited only by server performance
•Full adaptation possible•Fine‐grained controls
Device detection library required (usually commercial)
Yes
(TACTILE + NB Platf.)= Hybrid
Use device detection to serve initial device‐sensitive HTML payload, use client‐side progressive enhancement to build up
Yes Yes Yes GoodAll clients get initial page quickly but subsequent enhancement may impose delays dependend on web app
•Full adaptation possible• Utilize client side adaptation (e.g. config settings, real‐time data) to add to experience • Can be used to overcome HTML5 fragmentation
•Device detection library required•Complex
Yes
Why adaptation begins on the Server …
09.02.2012 Folie 27© 2010 Netbiscuits GmbH
All that
happens on
the server
before sending
it to the client.
Layouts differ
February 9, 2012 © Netbiscuits GmbH 2012 28
Smartphone Spaghetti to Tablet Layouts
Cross Device Design and Flows
February 9, 2012 © Netbiscuits GmbH 2012 29
Split
Transform
Overlays (Hide)
Evolution of Device Categories
February 9, 2012 © Netbiscuits GmbH 2012 30
Distinct Devices evolved to a Connected Continuum
Distin
ct Hardw
are capabilities
Software & Con
tent capab. secon
dary
Continou
s Software & Con
tent capabilitie
sHardw
are capab. secon
dary
Was kommt? & Was machen?
Was kommt?
Die mobile Welt bleibt in Bewegung
Neue Geräte & Geräteklassen
Unbekannte Anforderungen & Benutzergruppen
Was machen?
Mobile First ‐ Now
In multiplen Bildschirmgrößen denken
Design & Business Logik entkoppeln
February 9, 2012 © Netbiscuits GmbH 2011 31
Einladung: Tactile Open Beta
February 9, 2012 © Netbiscuits GmbH 2011 32
Netbiscuits Multi Device Framework
http://www.netbiscuits.com/tactile‐open‐beta
Stephan Haux+49 175 2234652
Twitter: sthaux
February 9, 2012 © Netbiscuits GmbH 2011 33
See you at our Mobile Web Sitem.netbiscuits.com
Mobile First N>1 Bildschirmgrößen Geräte & OS übergreifend Smart Development
Design statt Code