130605 webinale-nuisol

652 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
652
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

130605 webinale-nuisol

  1. 1. In sieben Schritten zurerfolgreichen Tablet-Website5. Juni 2013 - Webinale
  2. 2. User ExperienceHardwareDie UserSoftwareWebsiteTestingDer Kontext
  3. 3. Kindle Edition - 0,99 € - http://www.amazon.de/dp/B00991EC5UE-Book und Softcover - http://goo.gl/VRUxn
  4. 4. 10,3%MobileUsagelaut Statista and NetMarketShare
  5. 5. Desktop vs. Mobile.Quelle: Morgan Stanley Research, 2010
  6. 6. Quelle: Gartner
  7. 7. TABLETSreplaceSmartphones and Laptops
  8. 8. Engaging the Tablet User: What They Expect From Web Siteshttp://www.gomez.com/engaging-the-tablet-user/
  9. 9. Engaging the Tablet User: What They Expect From Web Siteshttp://www.gomez.com/engaging-the-tablet-user/
  10. 10. USEREXPERIENCEJoyofuseGlaubwürdigkeitInteraktionVertrauenReaktionHarmonieBerechenbarkeitFunktionalitätIntuitivtätNUTZWERT/LOOKNUTZERLEBNIS/FEELUSABILITYSimplify My LifeSimplify My LifeSimplify My Life
  11. 11. = +Fragen was User wollen und brauchen5 Ebenen der UXUX WERTE TESTING WERTE HINZUFÜGENProjektDNAProjektDNAProjektDNA
  12. 12. PlanDefinierenDesignenReleaseEntwicklungDefinierenDesignenReleaseEntwicklungDefinierenDesignenReleaseEntwicklungVeröffentlichungReleaseVeröffentlichungReleaseVeröffentlichungRelease8
  13. 13. = +Fragen was User wollen und brauchen5 Ebenen der UXUX WERTE TESTING WERTE HINZUFÜGENProjektDNAProjektDNAProjektDNAKaizen - Das Prinzip stetiger VerbesserungJap. Kai = Veränderung, Wandel;Zen = zum Besseren 改善;„Veränderung zum Besseren“
  14. 14. Foto: imago
  15. 15. http://www.youtube.com/watch?v=aXV-yaFmQNkTechnology codes our minds, changes our OS. Apple products have done this extensively.
  16. 16. http://goo.gl/s2CoF
  17. 17. NEU!NEU!HipstamaticSummerTrendnutzer Gelegenheitsnutzer, Best AgerDigitaler Außenseiter Digitaler Profi Digitale AvantgardeGelegenheitsnutzer BerufsnutzerTeenagerFortgeschrittenes AlterKidsabc34567
  18. 18. Typ: BerufsnutzerDes Users KryptonitSinus Milieus10% Etablierte14% Konsum Materialisten11% Hedonisten9% Experimentalisten15% Bürgerliche Mitte14% Traditionsverwurzelte5% Konservative10% Moderner PerformerNeuorientierungMulit-OptionalitätExperimentierfreudeLeben in ParadoxienModernisierungIndividualisierungSelbstverwirklichungGenussTraditionelle WertePflichterfüllungOrdnungUnterschichtMittelschichtOberschichtSozialeLageGrundorientierung4% DDR-Nostalgische5% KonservativeQuelle:Sinus2009SteckbriefALTER: 34GESCHLECHT: männlichNATIONALITÄT: deutschBESCHÄFTIGUNG:DWS Investment GmbHFACHKOMPETENZEN: Fachwissen in derAltersvorsorge - Spezialwissen Riesterund Rürup - medizinische Risikoprüfungin der Lebensversicherung - kompletteBestandsbearbeitung in der Altersvor-sorge - Grundkenntnisse in Investment-fondsOS: Windows (Desktop), iOS (Tablet),Android (Mobile)BROWSER: Desktop: IE/Firefox Tablet:-SafariDEVICES: iPad, Notebook, PC, Full HDSOCIAL MEDIA: Xing, FacebookWERTE: Das leben ist kein PonnyhofBEDARF: Immer auf dem neusten StandVERTRAUT WEM: Familie und engen FreundenMOTIVATIONEN: „Sky is the limit“ --> nichts ist unerreichbarLIEBLINGSBANDS: unterschiedlich --> Hip Hop, RnBTV SENDUNGEN: Sport1, Sky, Pro SiebenSPORT: Fussball, Joggen, FitnessDEMOGRAFISCHE EIGENSCHAFTEN: neuste Technik, Sport etc.Des Users RoboterMultiscreen Use-ContextSonstigesSituation: Mobil + StationärUmfeld: Privat, Arbeits-platz, öffentlicher Raum,UnterwegsModus:Lean Back (zuhause) , LeanForward( Zuhause + Arbeit)CoherenceSynchronisationScreen SharingDevice ShiftingComplementaritySimultaneity· Keine Tablett optimierte Page· langsame Ladezeit· Unstrukturierter Aufbau· Tablett optimiert· Strukturiert & einfach· Weniger ist mehrXXX
  19. 19. http://tandemseven.com/design-services/persona-modeling/
  20. 20. People read newspapers,listen to the radio,and watch TV,but they go to the Web toGET THINGS DONE.G.M. OConnell„
  21. 21. Contextartinthepicture.com
  22. 22. 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/
  23. 23. SmartphoneTabletDesktopTVLaptopCouch /TVHeimwegArbeitswegFrühstückArbeitswegBad HeimwegZu BettgehenZu BettgehenArbeitHomeofficeCouch
  24. 24. Device shifting Coherence ComplimentaryScreen sharing Simultaneity Synchro
  25. 25. Device shifting
  26. 26. Coherence
  27. 27. Complimentary
  28. 28. Screen sharing
  29. 29. Simultaneity
  30. 30. Synchro
  31. 31. MobilÖffentlicher RaumArbeitsplatzPrivatNutzungsmodusUmfeldSituationHands-onModusUnterwegsPortrait LandscapeNach vorne lehnenZurücklehnenStationär
  32. 32. http://goo.gl/t9a9e
  33. 33. http://goo.gl/t9a9e
  34. 34. 1024x6001024x7681280x800iOS, Web OS 3Android ab 2.2, Windows 7/8,BlackBerry Tablet OS,Amazon Kindle FireAndroid 3/4, Windows 7/8
  35. 35. The most used Pixel Ratio´sMobile/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)
  36. 36. mobile-zeitgeist.com
  37. 37. Responsive Web Design (RWD)fluid grid + fluid images + media queries
  38. 38. http://worldwildlife.org/
  39. 39. http://tpwd.p/
  40. 40. Das fluideste Layout bleibt bestehen bis es auf einem kleineren Bildschirm angezeigt wird.Demo: http://codepen.io/bradfrost/full/Iardn
  41. 41. Eine Einführung zur Content-Choreografie auf Trent Walton‘s Bloghttp://trentwalton.com/2011/07/14/content-choreography/
  42. 42. Eine Einführung zur Content-Choreografie auf Trent Walton‘s Bloghttp://www.jordanm.co.uk/lab/contentchoreography
  43. 43. http://www.jordanm.co.uk/lab/contentchoreography
  44. 44. Diese Beispiel Segmente listen verwandete Produkte und Reviews dazu, auf.Diese können als eingeständige HTML Fragemente bei Bedarf hineingezogenwerden.Demo: http://codepen.io/bradfrost/full/JsAKf
  45. 45. Oftmals sind Elemente, in kleineren Ansichten, übereinander gestapelt
  46. 46. Manchmal ist es nützlicher Content ineinandergreifen zu lassen und die Elementeineinander zu falten, wenn sich der Viewport verkleinert.
  47. 47. HeadlinesNews FeedWeatherZum Beispiel, die Wetter Section könnte entweder unter die Headline rutschenanstatt ans Ende der Seite.
  48. 48. HeadlinesNews FeedWeatherMan könnte jedoch auch die Wetter Section über die Headline setzen.
  49. 49. dasauto-magazin.com/DE
  50. 50. 30% more Concept and Screendesign,30% more Coding30% more Testing
  51. 51. Plan before youare creating
  52. 52. larger screenmore functionalityportablesimple interface
  53. 53. Its not about design and entertainment,its about clarityMission: simply, clearer, fasterPaul Annett, Creative LeadUK Government Digital Servicegov.uk
  54. 54. = +Fragen was User wollen und brauchen5 Ebenen der UXUX WERTE TESTING WERTE HINZUFÜGENProjektDNAProjektDNAProjektDNA„Einfachheit ist die größte Form derVollendung“.
  55. 55. http://nuisol.com/de/wissen/
  56. 56. STORM
  57. 57. http://touchpunch.furf.comTouch Events
  58. 58. http://touchpunch.furf.com
  59. 59. Tap Double Tap Touch and HoldDrag-Flick Pinch SpreadRotate 2 Finger Drag Down 2 Finger Drag Uphttp://gesturecons.com
  60. 60. http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
  61. 61. http://touchpunch.furf.com
  62. 62. http://jquerymobile.com/http://yuilibrary.com/yui/docs/event/touch.htmlhttp://zeptojs.com/https://github.com/cpojer/mootools-mobilehttp://touchpunch.furf.comhttps://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.htmlhttp://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
  63. 63. <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 touchstartvar 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
  64. 64. //The Click event is incorrectly interpretedtouchstartvar ipadtouch = navigator.userAgent,event = (ipadtouch.match(/iPad/i)) ?"touchstart" : "click";The Click event is incorrectly interpreted by the iPad and notconverted to a touch event. By the script, the actual clickevent is replaced by a touch event.
  65. 65. Features vs. DevicesQuelle: http://mobilehtml5.org/
  66. 66. HTML5 - Offline.• App Cache• Local storage, Indexed DB,WebSQL DB• History API
  67. 67. CACHE MANIFESTCACHE:index.htmlcss/core.cssscripts/myscripts.jsimages/title.pngNETWORK:http://mysharepoint/_vti_bin/ListData.svchttp://api.twitter.comFALLBACK:http://www.nuisol.comimg/placeholder.png
  68. 68. 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);}
  69. 69. 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
  70. 70. One for everything?
  71. 71. 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
  72. 72. http://mobitest.akamai.com/m/index.cgi
  73. 73. http://mobitest.akamai.com/m/index.cgi
  74. 74. http://mobitest.akamai.com/m/index.cgi
  75. 75. http://loadtimer.org
  76. 76. http://www.opera.com/developer/tools/
  77. 77. USER TESTINGA/B TESTSMOBILE TESTINGPROTOTYPINGCROWDSOURCINGhttp://rapidusertests.com
  78. 78. = +Fragen was User wollen und brauchen5 Ebenen der UXUX WERTE TESTING WERTE HINZUFÜGENProjektDNAProjektDNAProjektDNAImmer wenn Du glaubst erleuchtet zu sein,beginnst Du wieder am Anfang.
  79. 79. • Christian.Kuhn@nuisol.com• Managing Director, UX Designer• nuisol.com• @nuisol
  80. 80. NUISOL entwickelt digitale Lösungen für Marketing undKommunikation. Der neuste Stand der Technologie istdabei Maßstab.Das Wissen über Entwicklungen und Trends macht NUISOLso praktisch nutzbar und bietet Orientierung in der rasantendigitalen Evolution.NUISOL. Agentur für digitale Aha-Erlebnisse.
  81. 81. Technical Writing, Talks, Workshops, TrainingsUX DesignWebdevelopmentMobileTabletE-CommerceDigital PublishingLive Streaming (HLS)Social Media

×