In sieben Schritten zur erfolgreichen Tabletwebsite · In sieben Schritten zur erfolgreichen...

In sieben Schritten zur erfolgreichen Tabletwebsite 14. November 2013 - World Usability Day Würzburg

• @nuisol

User Experience

User

Modus

Testing

Kontext

Tablets vs. Smartphones

Kindle Edition - 0,99 € - http://www.amazon.de/dp/B00991EC5U E-Book und Softcover - http://goo.gl/VRUxn

Quelle: Adobe.com, Juli 2013

ver3fachung!TABLETS!

!Laut TNS Infratest/Initiative D21

http://www.heise.de/newsticker/meldung/Consumermarkt-Erstmals-mehr-Tablets-als-Notebooks-verkauft-1938179.html

TABLETS!replace

Smartphones and Laptops

Engaging the Tablet User: What They Expect From Web Sites

http://www.gomez.com/engaging-the-tablet-user/

Engaging the Tablet User: What They Expect From Web Sites

http://www.gomez.com/engaging-the-tablet-user/

UX

USEREXPERIENCE

Joy of use

Gla

ubw

ürdi

gkeit

Interaktion

V

ertr

auen Reaktion

H

arm

onie

Berechenbarkeit

Funktionalität

Intuitivtät

NU

TZW

ERT

/ LOOK

NUTZERLEBN

IS / FEEL

USABILITY

Simplify My LifeSimplify My Life

Simplify My Life

= +

Fragen was User wollen und brauchen 5 Ebenen der UX

UX WERTE TESTING WERTE HINZUFÜGEN

Projekt DNA

Projekt DNA

Projekt DNA

Plan

Definieren

DesignenRelease

Entwicklung

Definieren

DesignenRelease

Entwicklung

Definieren

DesignenRelease

Entwicklung

Veröffentlichung

Release

Veröffentlichung

Release

Veröffentlichung

Release

8

= +

Fragen was User wollen und brauchen 5 Ebenen der UX

UX WERTE TESTING WERTE HINZUFÜGEN

Projekt DNA

Projekt DNA

Projekt DNA

Kaizen - Das Prinzip stetiger Verbesserung!

Jap. Kai = Veränderung, Wandel; Zen = zum Besseren 改善;

!

„Veränderung zum Besseren“

USER

http://www.youtube.com/watch?v=aXV-yaFmQNk

Technology codes our minds, changes our OS. Apple products have done this extensively.

NEU!

NEU!

Hipstamatic

Summer

Trendnutzer Gelegenheitsnutzer, Best Ager

Digitaler Außenseiter Digitaler Profi Digitale Avantgarde

Gelegenheitsnutzer BerufsnutzerTeenager

Fortgeschrittenes Alter Kids

abc34567

Typ: Berufsnutzer

Des Users Kryptonit

Sinus Milieus

Welche Funktionen/Benutzungsart bereiten dem User eine schlechte UX?

10% Etablierte

14% Konsum Materialisten

11% Hedonisten

9% Experimentalisten 15% Bürgerliche Mitte

14% Traditionsverwurzelte

5% Konservative

10% Moderner Performer

NeuorientierungMulit-Optionalität

ExperimentierfreudeLeben in Paradoxien

ModernisierungIndividualisierung

SelbstverwirklichungGenuss

Traditionelle WertePflichterfüllung

Ordnung

Unt

ersc

hich

tM

ittel

schi

cht

Obe

rsch

icht

Sozi

ale

Lage

Grundorientierung

4% DDR-Nostalgische

5% Konservative

Que

lle: S

inus

200

9

Steckbrief

ALTER: 34

GESCHLECHT: männlich

NATIONALITÄT: deutsch

BESCHÄFTIGUNG:

DWS Investment GmbH

FACHKOMPETENZEN: Fachwissen in der Altersvorsorge - Spezialwissen Riester und Rürup - medizinische Risikoprüfung in der Lebensversicherung - komplette Bestandsbearbeitung in der Altersvor-

sorge - Grundkenntnisse in Investment-fonds

OS: Windows (Desktop), iOS (Tablet), Android (Mobile)

BROWSER: Desktop: IE/Firefox Tablet:-Safari

DEVICES: iPad, Notebook, PC, Full HD

SOCIAL MEDIA: Xing, Facebook

WERTE: Das leben ist kein Ponnyhof

BEDARF: Immer auf dem neusten Stand

VERTRAUT WEM: Familie und engen Freunden

MOTIVATIONEN: „Sky is the limit“ --> nichts ist unerreichbar

LIEBLINGSBANDS: unterschiedlich --> Hip Hop, RnB

TV SENDUNGEN: Sport1, Sky, Pro Sieben

SPORT: Fussball, Joggen, Fitness

DEMOGRAFISCHE EIGENSCHAFTEN: neuste Technik, Sport etc.

Des Users Roboter

Welche Funktionen erwartet der User und wie lässt es sich übertreffen?

Multiscreen Use-Context

Sonstiges

Situation: Mobil + Stationär

Umfeld: Privat, Arbeits-

platz, öffentlicher Raum,

Unterwegs

Modus:

Lean Back (zuhause) , Lean

Forward( Zuhause + Arbeit)

Coherence

Synchronisation

Screen Sharing

Device Shifting

Complementarity

Simultaneity

· Keine Tablett optimierte Page

· langsame Ladezeit

· Unstrukturierter Aufbau

· Tablett optimiert

· Strukturiert & einfach

· Weniger ist mehr

X

X X

People read newspapers, listen to the radio,

and watch TV,

but they go to the Web to

!

GET THINGS DONE.

G.M. O'Connell

„

Mobile Commerce in Deutschland – Die Rolle des Smartphones im Kaufprozess, Seite 24, ECC-Handel, 2012

Context

artinthepicture.com

Quelle: Google Studie 2012, http://techcrunch.com/2012/10/22/google-research-shows-tablets-are-for-games-and-email-mostly-used-on-couch-in-bed/

http://suitepad.de

mobile-zeitgeist.com

MODUS

Device shifting Coherence Complimentary

Screen sharing Simultaneity Synchro

Device shifting

Coherence

dasauto-magazin.com/DE

Diese Beispiel Segmente listen verwandete Produkte und Reviews dazu, auf. Diese können als eingeständige HTML Fragemente bei Bedarf hineingezogen werden.

Demo: http://codepen.io/bradfrost/full/JsAKf

Complimentary

Screen sharing

Simultaneity

Synchro

Mobil

Öffentlicher Raum

Arbeitsplatz

Privat

NutzungsmodusUmfeld

Situation

Hands-onModus

Unterwegs

Portrait Landscape

Nach vorne lehnen

Zurücklehnen

Stationär

Mobil

Öffentlicher Raum

Arbeitsplatz

Privat

NutzungsmodusUmfeld

Situation

Hands-onModus

Unterwegs

Portrait Landscape

Nach vorne lehnen

Zurücklehnen

Stationär

http://uxmovement.com/mobile/design-your-tablet-interfaces-for-horizontal-swiping/

TESTING

�92

Meine-Hochzeitsdeko.de: Tablet-Nutzer im Shop

m-pathy | Juliane Hartmann | 16.10.2013

Clickmap: Warenkorb mit 4 Artikeln

�93

Besuche: 9,7 % Clicks: 6,1 % abspielen

m-pathy | Juliane Hartmann | 16.10.2013

Video: Hochzeitsshop

�94

�95

Registrierungsformular im Responsive Design

m-pathy | Juliane Hartmann | 16.10.2013

Registrierungsformular: Desktop, Tablet, Phone

�96

Desktop, Tablet Phone

m-pathy | Juliane Hartmann | 16.10.2013

Clickmap: nur Tablet

�97

Besuche: 11,8 % Clicks: 18,6 % abspielen

ein Teil aller Besuche (siehe Clickcounter) versucht mit on-site Klicks Layer, die eigentlich als Ausfüllhilfe dienen und dynamisch auftauchen, zu schließen (siehe Screenshot vom Video anbei)

m-pathy | Juliane Hartmann | 16.10.2013

Video: Tablet-Nutzer bricht ab, weil er die Policenummer nicht zur Hand hat

�98

m-pathy | Juliane Hartmann | 16.10.2013

Darstellungsprobleme bei Tablet-Nutzern mit bestimmten Browser und OS

�99

= +

Fragen was User wollen und brauchen 5 Ebenen der UX

UX WERTE TESTING WERTE HINZUFÜGEN

Projekt DNA

Projekt DNA

Projekt DNA

Immer wenn Du glaubst erleuchtet zu sein, beginnst Du wieder am Anfang.

• Christian.Kuhn@nuisol.com

• Managing Director, UX Designer

• nuisol.com

• @nuisol

NUISOL entwickelt digitale Lösungen für Marketing und Kommunikation. Der neuste Stand der Technologie ist

dabei Maßstab. !

Das Wissen über Entwicklungen und Trends macht NUISOL so praktisch nutzbar und bietet Orientierung in der rasanten

digitalen Evolution. !

NUISOL. Agentur für digitale Aha-Erlebnisse.

Technical Writing, Talks, Workshops, Trainings

UX Design

Webdevelopment

Mobile

Tablet

E-Commerce

Digital Publishing

Live Streaming (HLS)

Social Media