SlideShare ist ein Scribd-Unternehmen logo
1 von 165
In sieben Schritten zur
erfolgreichen Tablet-Website
5. Juni 2013 - Webinale
User Experience
Hardware
Die User
Software
Website
Testing
Der Kontext
Kindle Edition - 0,99 € - http://www.amazon.de/dp/B00991EC5UE-Book und Softcover - http://goo.gl/VRUxn
10,3%
Mobile
Usagelaut Statista and NetMarketShare
Desktop vs. Mobile.
Quelle: Morgan Stanley Research, 2010
Quelle: Gartner
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/
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
= +
Fragen was User wollen und brauchen5 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 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“
Foto: imago
http://www.youtube.com/watch?v=aXV-yaFmQNk
Technology codes our minds, changes our OS. Apple products have done this extensively.
http://goo.gl/s2CoF
NEU!
NEU!
Hipstamatic
Summer
Trendnutzer Gelegenheitsnutzer, Best Ager
Digitaler Außenseiter Digitaler Profi Digitale Avantgarde
Gelegenheitsnutzer BerufsnutzerTeenager
Fortgeschrittenes AlterKids
abc
34567
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
http://tandemseven.com/design-services/persona-modeling/
People read newspapers,
listen to the radio,
and watch TV,
but they go to the Web to
GET THINGS DONE.
G.M. O'Connell
„
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/
Smartphone
Tablet
Desktop
TV
Laptop
Couch /
TV
HeimwegArbeitswegFrühstück
ArbeitswegBad Heimweg
Zu Bett
gehen
Zu Bett
gehen
Arbeit
Homeoffice
Couch
Device shifting Coherence Complimentary
Screen sharing Simultaneity Synchro
Device shifting
Coherence
Complimentary
Screen sharing
Simultaneity
Synchro
Mobil
Öffentlicher Raum
Arbeitsplatz
Privat
NutzungsmodusUmfeld
Situation
Hands-on
Modus
Unterwegs
Portrait Landscape
Nach vorne lehnen
Zurücklehnen
Stationär
http://goo.gl/t9a9e
http://goo.gl/t9a9e
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
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)
mobile-zeitgeist.com
Responsive Web Design (RWD)
fluid grid + fluid images + media queries
http://worldwildlife.org/
http://tpwd.p/
Das fluideste Layout bleibt bestehen bis es auf einem kleineren Bildschirm angezeigt wird.
Demo: http://codepen.io/bradfrost/full/Iardn
Eine Einführung zur Content-Choreografie auf Trent Walton‘s Blog
http://trentwalton.com/2011/07/14/content-choreography/
Eine Einführung zur Content-Choreografie auf Trent Walton‘s Blog
http://www.jordanm.co.uk/lab/contentchoreography
http://www.jordanm.co.uk/lab/contentchoreography
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
Oftmals sind Elemente, in kleineren Ansichten, übereinander gestapelt
Manchmal ist es nützlicher Content ineinandergreifen zu lassen und die Elemente
ineinander zu falten, wenn sich der Viewport verkleinert.
Headlines
News Feed
Weather
Zum Beispiel, die Wetter Section könnte entweder unter die Headline rutschen
anstatt ans Ende der Seite.
Headlines
News Feed
Weather
Man könnte jedoch auch die Wetter Section über die Headline setzen.
dasauto-magazin.com/DE
30% more Concept and Screendesign,
30% more Coding
30% more Testing
Plan before you
are creating
larger screen
more functionality
portable
simple interface
Its not about design and entertainment,
its about clarity
Mission: simply, clearer, faster
Paul Annett, Creative Lead
UK Government Digital Service
gov.uk
= +
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“.
http://nuisol.com/de/wissen/
STORM
http://touchpunch.furf.com
Touch Events
http://touchpunch.furf.com
Tap Double Tap Touch and Hold
Drag-Flick Pinch Spread
Rotate 2 Finger Drag Down 2 Finger Drag Uphttp://gesturecons.com
http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
http://touchpunch.furf.com
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
<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
//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.
Features vs. Devices
Quelle: http://mobilehtml5.org/
HTML5 - Offline.
• App Cache
• Local storage, Indexed DB,WebSQL DB
• History API
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
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);
}
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
One for everything?
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
http://mobitest.akamai.com/m/index.cgi
http://mobitest.akamai.com/m/index.cgi
http://mobitest.akamai.com/m/index.cgi
http://loadtimer.org
http://www.opera.com/developer/tools/
USER TESTING
A/B TESTS
MOBILE TESTING
PROTOTYPING
CROWDSOURCING
http://rapidusertests.com
= +
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.
• 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

Weitere ähnliche Inhalte

Andere mochten auch

Beautiful pictures -_3_zene_10cc
Beautiful pictures -_3_zene_10ccBeautiful pictures -_3_zene_10cc
Beautiful pictures -_3_zene_10cc
Regina Franco
 
The mind body link
The mind body linkThe mind body link
The mind body link
Kim Newman
 
Do Golpe A RedemocratizaçãO
Do Golpe A RedemocratizaçãODo Golpe A RedemocratizaçãO
Do Golpe A RedemocratizaçãO
guest051a8d5
 
Measurement profile evaluation pdf form
Measurement profile evaluation pdf formMeasurement profile evaluation pdf form
Measurement profile evaluation pdf form
Maggie Skillnet
 
Rainer maria rilke dimitris zoe
Rainer maria rilke dimitris zoeRainer maria rilke dimitris zoe
Rainer maria rilke dimitris zoe
Maria Chatzigiossi
 
Liga heroclix 2013 jornada 2
Liga heroclix 2013 jornada 2Liga heroclix 2013 jornada 2
Liga heroclix 2013 jornada 2
Nikonakis
 

Andere mochten auch (18)

Skeptical Editing
Skeptical EditingSkeptical Editing
Skeptical Editing
 
Beautiful pictures -_3_zene_10cc
Beautiful pictures -_3_zene_10ccBeautiful pictures -_3_zene_10cc
Beautiful pictures -_3_zene_10cc
 
Je+laime+a+mourir
Je+laime+a+mourirJe+laime+a+mourir
Je+laime+a+mourir
 
Boccherini minuet
Boccherini minuetBoccherini minuet
Boccherini minuet
 
Monitoramento Online e Vigilancia nas Eleicoes 2010
Monitoramento Online e Vigilancia nas Eleicoes 2010Monitoramento Online e Vigilancia nas Eleicoes 2010
Monitoramento Online e Vigilancia nas Eleicoes 2010
 
The mind body link
The mind body linkThe mind body link
The mind body link
 
Building real-time collaborative apps with Ajax.org Platform
Building real-time collaborative apps with Ajax.org PlatformBuilding real-time collaborative apps with Ajax.org Platform
Building real-time collaborative apps with Ajax.org Platform
 
Hos Konsumentverket, Knistad 20100915
Hos Konsumentverket, Knistad  20100915Hos Konsumentverket, Knistad  20100915
Hos Konsumentverket, Knistad 20100915
 
Dk
DkDk
Dk
 
Do Golpe A RedemocratizaçãO
Do Golpe A RedemocratizaçãODo Golpe A RedemocratizaçãO
Do Golpe A RedemocratizaçãO
 
Leave us alone vipacs
Leave us alone  vipacsLeave us alone  vipacs
Leave us alone vipacs
 
Danny
DannyDanny
Danny
 
Measurement profile evaluation pdf form
Measurement profile evaluation pdf formMeasurement profile evaluation pdf form
Measurement profile evaluation pdf form
 
Rainer maria rilke dimitris zoe
Rainer maria rilke dimitris zoeRainer maria rilke dimitris zoe
Rainer maria rilke dimitris zoe
 
Slide18 jpg
Slide18 jpgSlide18 jpg
Slide18 jpg
 
Diapositivas canutoo
Diapositivas canutooDiapositivas canutoo
Diapositivas canutoo
 
Liga heroclix 2013 jornada 2
Liga heroclix 2013 jornada 2Liga heroclix 2013 jornada 2
Liga heroclix 2013 jornada 2
 
Elvetia
ElvetiaElvetia
Elvetia
 

Ähnlich wie 130605 webinale-nuisol

2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...
2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...
2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...
topsoft - inspiring digital business
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Christoph Mühlbauer
 
10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen
ONE Schweiz
 

Ähnlich wie 130605 webinale-nuisol (20)

Mobile web #bch11
Mobile web #bch11Mobile web #bch11
Mobile web #bch11
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)
 
Der mobile Wissenarbeit
Der mobile WissenarbeitDer mobile Wissenarbeit
Der mobile Wissenarbeit
 
2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...
2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...
2011 05 12 10-45 erfolgsfaktoren virtueller zusammenarbeit_schulze_huber_2011...
 
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile GerätePidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
Pidoco @ DT-HH - Prototyping begreifbarer Interaktionen für mobile Geräte
 
Die mobile Herausforderung
Die mobile Herausforderung Die mobile Herausforderung
Die mobile Herausforderung
 
IA Konferenz München 2011
IA Konferenz München 2011IA Konferenz München 2011
IA Konferenz München 2011
 
Anforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-DesignAnforderungen an das Touchscreen-Design
Anforderungen an das Touchscreen-Design
 
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
„Context is King and Device is Queen!“ in der mobilen Markenkommunikation
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or die
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen10 do’s und dont’s der gestaltung mobiler anwendungen
10 do’s und dont’s der gestaltung mobiler anwendungen
 
WUD Berlin 2010
WUD Berlin 2010WUD Berlin 2010
WUD Berlin 2010
 
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 

130605 webinale-nuisol