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

s.haux@netbiscuits.com

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