Use me, Touch me - to be happy. User Experience Design für Tablet-Websites

2. Touch me - Shake me -
Use me to be Happy!
Christian Kuhn
@NUISOL | nuisol.com

4. Was ist UX-Design?
Der UX Prozess
Die 5 UX Ebenen

5. Das Nutzungsverhalten der nächsten
Anwender-/Kundengenerationen verlangt
das Kommunikation Digital ist.
Sie wird im Web stattfinden.
Sie wird Mobile und Social sein.

7. 760 Mio.
bis 2016 laut Forrester Research

8. Engaging the Tablet User: What They Expect From Web Sites
http://www.gomez.com/engaging-the-tablet-user/

9. Was ist UX-Design?

10. “Design is about
communication, and it
takes more than pixels
to communicate.”
Derek Powazek
Content & Community Genius

11. OK
N
UT
LO
ZE
t
ei
/
igk
RLE
Vereinfache mein Leben
ERT
Joy
en
In
ürd
ie
ter
au
of u
BNIS
Re
Vereinfache mein Leben
on
NUTZW
Glaubw
Vertr
akti
akt
Harm
se
USER
ion
on
/ FEEL
EXPERIENCE
Be it
rech
enbar ke
Fun
k ti o n a lit ä t
Vereinfache mein Leben
I n t u itiv t ä t
U S A BI L I T Y

13. Verstärkung
Konversion
Kenntnisse
Menschen
Inhalt
Technologie
Business

14. 12 1
Freigaben Konkurrenzanalyse
11 2
Audience
Überprüfen
Definition
Einarbeiten
g
s tin
Te E
nt
er
de
Us
10 3
c ku
Entwicklung &
User Testing Benutzer
ng
Szenarien
UX Design
9
4
Prototypen- Content
erstellung Umfrage
Kon
zepterstellung
8 5
Design Prozessabläufe
7 6
Wireframes Site Map

15. 12 1
Freigaben Konkurrenzanalyse
Verstärkung
11 2
Audience
Überprüfen
Definition
Einarbeiten
g
Konversion s tin
Te E
nt
er
de
Us
10 3
c ku
Entwicklung &
Kenntnisse User Testing Benutzer
ng
Szenarien
UX Design
Menschen
9
4
Prototypen- Content
erstellung Umfrage
Inhalt
Kon
zepterstellung
8 5
Technologie
Design Prozessabläufe
7 6
Business
Wireframes Site Map

16. WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen

17. UX WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen

18. UX WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen
Plan Veröffentlichung
Entwicklung
Designen
Definieren

19. UX WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen
Entwicklung
Plan
Release Designen
Definieren
Veröffentlichung
Entwicklung
Designen
DNA Definieren
Veröffentlichung
Release

20. UX WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen
Entwicklung Entwicklung Entwicklung
Release Designen Release Designen Release Designen
Definieren Definieren Definieren
Plan
!
Veröffentlichung Veröffentlichung Veröffentlichung
Release Release Release

21. 12 1 Verstärkung
Freigaben Konkurrenzanalyse
11 2
Audience
Überprüfen
Definition Konversion
Einarbeiten
ng
sti
Te E
nt
er
de
Us
10 3
Kenntnisse
c ku
Entwicklung &
User Testing Benutzer
ng
Szenarien
UX Design Menschen
9
4
Prototypen- Content
erstellung Umfrage
Inhalt
Kon
zepterstellung
8 5
Technologie
Design Prozessabläufe
7 6
Wireframes Site Map Business
Entwicklung Entwicklung Entwicklung
Release Designen Release Designen Release Designen
Definieren Definieren Definieren UX WERTE TESTING WERTE HINZUFÜGEN
Plan
= Projekt
DNA + Projekt
DNA
Projekt
DNA
!
Veröffentlichung Veröffentlichung Veröffentlichung
Release Release
5 Ebenen der UX Fragen was User wollen und brauchen
Release

22. Verstehe den User

24. IBM 370, 1 MIPS Rechenleistung, 36 Teile

25. electricpig.co.uk

27. 2.000
MIPS

28. Official Nokia "4th Screen" video, 2007
http://www.youtube.com/watch?v=XpeNk3E36YU

34. Technology codes our minds, changes our OS. Apple products have done this extensively.
http://www.youtube.com/watch?v=aXV-yaFmQNk

41. Designer Perspektive
Produkt DNA Bestimmungsgemäße Produkt Eigenschaften Resultate
Content
Pragmatische Attribute Anreiz
Präsentation Manipulation
Funktionalität Vergnügung
Hedonistische Attribute
Interaktion Hervorrufung, Stimmulation, Identifikation
Zufriedenstellung
User Perspektive
Produkt DNA Bestimmungsgemäße Produkt Eigenschaften Resultate
Inhalt
Pragmatische Attribute Anreiz
Vortrag Manipulation
Situation
Funktionsweise Vergnügung
Hedonistische Attribute
Beeinflussung Hervorrufung, Stimmulation, Identifikation
Zufriedenstellung

42. http://venturebeat.files.wordpress.com/

43. Quelle: Google Studie 2011, Apfelnews.de am 06.12.2011

45. messagefirst.com

46. WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen

47. Kenne die
Hardware

49. 1024x600 Android ab 2.2, Windows 7/8,
BlackBerry Tablet OS,
Amazon Kindle Fire
1024x768 iOS, Web OS 3
1280x800 Android 3/4, Windows 7/8

50. TABLET-SCREENDESIGN.INFO

52. Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread
Rotate 2 Finger Drag Down 2 Finger Drag Up

53. Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread
Rotate

54. Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread

55. http://gesturecons.com

56. Plane bevor Du
Kreierst

57. Größerer Bildschirm
Mehr Funktionalität
Mehr Portabel
Einfacheres Interface

58. http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx

59. STORM

77. http://adaptive-images.com/
http://loadtimer.org

78. http://retinajs.com

79. Kein Flash
JA, SIE HABEN ES GESCHAFFT

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

85. Überdenke die
Navigation

88. OSIT

96. mobile-zeitgeist.com

98. The Economist on iPhone & iPad
http://youtu.be/c_4XTiE5PEE

99. Tablet UX-Design:
• Portrait und Landscape Modus
• Stark reduzierte Touch-Navigation
• swipen - sliden - zoom - kein scrollen
• Device optimiertes Layout und Inhalte
• HTML5: Offline Reading mit AppCache,
LocalStorage, LBS
• Speed, Speed, Speed

100. Content + Context = King

101. T. O. D.

102. TESTING OR DIE
WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen

104. http://resizemybrowser.com/
http://seesparkbox.com/foundry/media_query_bookmarklet

105. http://quirktools.com/screen!y/

106. http://www.opera.com/developer/tools/

107. http://loadtimer.org

109. UX WERTE TESTING WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
DNA
5 Ebenen der UX Fragen was User wollen und brauchen

110. USER TESTING
PROTOTYPING
MOBILE TESTING
WERTE TESTING CROWDSOURCING
WERTE HINZUFÜGEN
= Projekt
DNA + Projekt
DNA
Projekt
A/B TESTS
DNA
5 Ebenen der UX Fragen was User wollen und brauchen

112. Vielen Dank für Ihre Aufmerksamkeit
Christian.Kuhn@NUISOL.com
Tel. 0151 15 77 66 99
Besuchen Sie auch:
http://www.nuisol.com/xingprofil
http://www.twitter.com/nuisol
http://www.facebook.com/NUISOL.communication

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

114. UX Design Mobile
Webentwicklung Tablet
Social Media Digital Publishing
E-Commerce Live Streaming (HLS)
Artikel, Buch, Vorträge, Workshops, Trainings