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


Telefone überholen PCs


Wieviel sufen Smartphone Besitzer ?



“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/


1. Falle: Ist doch alles Web/ HTML / ….


1. Falle: Ist doch alles Web/ HTML / ….


Unterschätzen der Einzigartigkeit mobiler Medien

Niemand steht mit dem Laptop im Laden …


2. Falle: Laufen ist nicht Sitzen


Mobile Konsumenten nicht wie sitzende PC Surfer behandeln

3. Falle: Die Stärke des Augenblicks versäumt


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


Smartphones machen das Internet zum Begleiter im Alltag

4. Falle: Monolog statt Dialog


… 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.


Besser Machen


Alltag


AUFWACHEN

FRÜHSTÜCKEN

Alltag


UNTERWEGS

VORMITTAGSPAUSE

Alltag


MITTAGSPAUSE

KAFFEPAUSE

Alltag


ZUHAUSE

WECKER STELLEN

Zusammenfassung


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


Mobile Web Considerations

Challenges, Problems, Devices, Thoughts


Layout Paradigm: Stack


Positions of layout containers are changed depended on orientation or form factor

Functionality remains unchanged

Layout Paradigm: Stretch & Collapsible


Content is stretched between portrait and landscape mode

Individual Items reduced independently to a minimum

Layout Paradigm: Show & Hide


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


Smartphone Spaghetti to Tablet Layouts

Cross Device Design and Flows


Split

Transform

Overlays (Hide)

Evolution of Device Categories


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


Einladung: Tactile Open Beta


Netbiscuits Multi Device Framework

http://www.netbiscuits.com/tactile‐open‐beta

Stephan Haux+49 175 2234652

[email protected]

Twitter: sthaux


See you at our Mobile Web Sitem.netbiscuits.com

Mobile First N>1 Bildschirmgrößen Geräte & OS übergreifend Smart Development

Design statt Code

Date post:	16-Jan-2015
Category:	Technology
Upload:	connected-blog
View:	1,335 times
Download:	0 times

Den Multi Device Konsumenten zufrieden stellen …

Technology