Das Dokument beschreibt die sieben Schritte zur erfolgreichen Gestaltung von Tablet-Webseiten, wobei der Fokus auf Benutzererfahrung, Benutzererwartungen und technische Aspekte liegt. Es betont die Bedeutung von Einfachheit, einer optimierten Benutzeroberfläche und der Nutzung von responsivem Webdesign. Zudem werden verschiedene Nutzungsszenarien und demografische Informationen zu den Zielgruppen behandelt.

1. In sieben Schritten zur
erfolgreichen Tablet-Website
5. Juni 2013 - Webinale

3. User Experience
Hardware
Die User
Software
Website
Testing
Der Kontext

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

5. 10,3%
Mobile
Usagelaut Statista and NetMarketShare

6. Desktop vs. Mobile.
Quelle: Morgan Stanley Research, 2010

7. Quelle: Gartner

8. TABLETS
replace
Smartphones and Laptops

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

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

16. USER
EXPERIENCE
Joyofuse
Glaubwürdigkeit
Interaktion
Vertrauen
Reaktion
Harmonie
Berechenbarkeit
Funktionalität
Intuitivtät
NUTZWERT/LOOK
N
UTZERLEBNIS/FEEL
USABILITY
Simplify My Life
Simplify My Life
Simplify My Life

22. = +
Fragen was User wollen und brauchen5 Ebenen der UX
UX WERTE TESTING WERTE HINZUFÜGEN
Projekt
DNA
Projekt
DNA
Projekt
DNA

23. Plan
Definieren
DesignenRelease
Entwicklung
Definieren
DesignenRelease
Entwicklung
Definieren
DesignenRelease
Entwicklung
Veröffentlichung
Release
Veröffentlichung
Release
Veröffentlichung
Release
8

24. = +
Fragen was User wollen und brauchen5 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“

27. Foto: imago

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

35. http://goo.gl/s2CoF

38. NEU!
NEU!
Hipstamatic
Summer
Trendnutzer Gelegenheitsnutzer, Best Ager
Digitaler Außenseiter Digitaler Profi Digitale Avantgarde
Gelegenheitsnutzer BerufsnutzerTeenager
Fortgeschrittenes AlterKids
abc
34567

39. Typ: Berufsnutzer
Des Users Kryptonit
Sinus Milieus
10% Etablierte
14% Konsum Materialisten
11% Hedonisten
9% Experimentalisten
15% Bürgerliche Mitte
14% Traditionsverwurzelte
5% Konservative
10% Moderner Performer
Neuorientierung
Mulit-Optionalität
Experimentierfreude
Leben in Paradoxien
Modernisierung
Individualisierung
Selbstverwirklichung
Genuss
Traditionelle Werte
Pflichterfüllung
Ordnung
UnterschichtMittelschichtOberschichtSozialeLage
Grundorientierung
4% DDR-Nostalgische
5% Konservative
Quelle:Sinus2009
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
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

40. http://tandemseven.com/design-services/persona-modeling/

41. People read newspapers,
listen to the radio,
and watch TV,
but they go to the Web to
GET THINGS DONE.
G.M. O'Connell
„

42. Context
artinthepicture.com

43. 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/

45. Smartphone
Tablet
Desktop
TV
Laptop
Couch /
TV
HeimwegArbeitswegFrühstück
ArbeitswegBad Heimweg
Zu Bett
gehen
Zu Bett
gehen
Arbeit
Homeoffice
Couch

51. Device shifting Coherence Complimentary
Screen sharing Simultaneity Synchro

52. Device shifting

54. Coherence

56. Complimentary

58. Screen sharing

60. Simultaneity

62. Synchro

64. Mobil
Öffentlicher Raum
Arbeitsplatz
Privat
NutzungsmodusUmfeld
Situation
Hands-on
Modus
Unterwegs
Portrait Landscape
Nach vorne lehnen
Zurücklehnen
Stationär

68. http://goo.gl/t9a9e

69. http://goo.gl/t9a9e

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

73. The most used Pixel Ratio´s
Mobile/Tablet (low) = (-webkit-device-pixel-ratio:.75)
Mobile/Tablet (mid) = (-webkit-device-pixel-ratio:1)
Mobile/Tablet (high Portrait) = (-webkit-device-pixel-ratio:1.5)
Mobile/Tablet (high Landscape) = (-webkit-device-pixel-ratio:1.5) and
(orientation:landscape)
Mobile/Tablet (Retina Portrait) = (-webkit-device-pixel-ratio:2)
Mobile/Tablet (Retina Landscape) = (-webkit-device-pixel-ratio:2) and
(orientation:landscape)

75. mobile-zeitgeist.com

79. Responsive Web Design (RWD)
fluid grid + fluid images + media queries

80. http://worldwildlife.org/

81. http://tpwd.p/

82. Das fluideste Layout bleibt bestehen bis es auf einem kleineren Bildschirm angezeigt wird.
Demo: http://codepen.io/bradfrost/full/Iardn

83. Eine Einführung zur Content-Choreografie auf Trent Walton‘s Blog
http://trentwalton.com/2011/07/14/content-choreography/

84. Eine Einführung zur Content-Choreografie auf Trent Walton‘s Blog
http://www.jordanm.co.uk/lab/contentchoreography

85. http://www.jordanm.co.uk/lab/contentchoreography

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

88. Oftmals sind Elemente, in kleineren Ansichten, übereinander gestapelt

89. Manchmal ist es nützlicher Content ineinandergreifen zu lassen und die Elemente
ineinander zu falten, wenn sich der Viewport verkleinert.

90. Headlines
News Feed
Weather
Zum Beispiel, die Wetter Section könnte entweder unter die Headline rutschen
anstatt ans Ende der Seite.

91. Headlines
News Feed
Weather
Man könnte jedoch auch die Wetter Section über die Headline setzen.

95. dasauto-magazin.com/DE

99. 30% more Concept and Screendesign,
30% more Coding
30% more Testing

100. Plan before you
are creating

101. larger screen
more functionality
portable
simple interface

102. Its not about design and entertainment,
its about clarity
Mission: simply, clearer, faster
Paul Annett, Creative Lead
UK Government Digital Service
gov.uk

104. = +
Fragen was User wollen und brauchen5 Ebenen der UX
UX WERTE TESTING WERTE HINZUFÜGEN
Projekt
DNA
Projekt
DNA
Projekt
DNA
„Einfachheit ist die größte Form der
Vollendung“.

107. http://nuisol.com/de/wissen/

109. STORM

113. http://touchpunch.furf.com
Touch Events

114. http://touchpunch.furf.com

115. Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread
Rotate 2 Finger Drag Down 2 Finger Drag Uphttp://gesturecons.com

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

117. http://touchpunch.furf.com

118. http://jquerymobile.com/
http://yuilibrary.com/yui/docs/event/touch.html
http://zeptojs.com/
https://github.com/cpojer/mootools-mobile
http://touchpunch.furf.com
https://developer.apple.com/library/safari/#documentation/UserExperience/Reference/
TouchEventClassReference/TouchEvent/TouchEvent.html
http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

124. <script type="text/javascript">
var mybox = new scroller();
mybox.scrollable_element = $('#swipeable');
mybox.scroller_elemets = $('.swipable-box');
mybox.fixed_stop_width = 1040;
mybox.max_stops = 1;
mybox.move_treshold = 0.15;
mybox.bind_events();
mybox.center_to_index(-1);
//Ipad click wird nicht immer erkannt daher touchstart
var ipadtouch = navigator.userAgent,
event = (ipadtouch.match(/iPad/i)) ? "touchstart" : "click";
$(".jcarousel-control-next").bind(event, function(){
mybox.next();
checkScrollerIndex();
});
$(".jcarousel-control-prev").bind(event, function(){
mybox.previous();
checkScrollerIndex();
});
}
</script>
Swipe Box

125. //The Click event is incorrectly interpreted
touchstart
var ipadtouch = navigator.userAgent,
event = (ipadtouch.match(/iPad/i)) ?
"touchstart" : "click";
The Click event is incorrectly interpreted by the iPad and not
converted to a touch event. By the script, the actual click
event is replaced by a touch event.

136. Features vs. Devices
Quelle: http://mobilehtml5.org/

137. HTML5 - Offline.
• App Cache
• Local storage, Indexed DB,WebSQL DB
• History API

139. CACHE MANIFEST
CACHE:
index.html
css/core.css
scripts/myscripts.js
images/title.png
NETWORK:
http://mysharepoint/_vti_bin/ListData.svc
http://api.twitter.com
FALLBACK:
http://www.nuisol.com
img/placeholder.png

140. HTML5 - Geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}

142. HTML5 - Device Orientation.
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
Quelle des Bildes: http://dev.w3.org/geo/api/spec-source-orientation.html

144. One for everything?

153. Tablet UX-Design:
Tablet-optimized websites should have the following characteristics:
★ Simplicity and reduction to the essentials (Simplicity)
★ White space: Bright spots promoting the visibility and reduce reflections in touch
★ Photos, graphics, and buttons optimized for Retina displays
★ Fewer images to allow even with low bandwidth good load times
★ The design of the navigation and functional elements (icons) is based on the current GUI of the operating system.
★ This provides a high recognition value for the user and better integration into the environment.
★ Direct feedback of navigation elements
★ Thumb-friendly navigation elements
★ Clear design principles for "touchable" items
★ Layout optimized for landscape and portrait mode
★ Content has the highest priority, flat information hierarchy
★ The content is optimized for its use in various environments
★ Minimum data required (forms)
★ Larger font sizes than with the desktop version
★ Scrolling and swiping in one direction only
★ There is provided a guide to using the gestures ready
★ Use of the content and offline (local storage, session storage)
★ "Almost no" advertising
★ Fast loading times

156. http://mobitest.akamai.com/m/index.cgi

157. http://mobitest.akamai.com/m/index.cgi

158. http://mobitest.akamai.com/m/index.cgi

159. http://loadtimer.org

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

161. USER TESTING
A/B TESTS
MOBILE TESTING
PROTOTYPING
CROWDSOURCING
http://rapidusertests.com

162. = +
Fragen was User wollen und brauchen5 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.

163. • Christian.Kuhn@nuisol.com
• Managing Director, UX Designer
• nuisol.com
• @nuisol

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

165. Technical Writing, Talks, Workshops, Trainings
UX Design
Webdevelopment
Mobile
Tablet
E-Commerce
Digital Publishing
Live Streaming (HLS)
Social Media