Think mobile first - Dutch version

1,045 views

Published on

Think Mobile First for Online SurveyDesign

Published in: Design
  • Be the first to comment

Think mobile first - Dutch version

  1. 1. THINK MOBILE FIRST! Dennis Sewberath
  2. 2. Een prettige ervaring voor iedere respondent Los van welk device men gebruikt thinkmobile1st.com
  3. 3. You need to find a way to make your respondents… STOP & ACTUALLY THINK! thinkmobile1st.com
  4. 4. Mobile surveys: Gesneden koek? Hype? thinkmobile1st.com
  5. 5. Mobile is … Niet een (nieuwe) strategie Mobile is … Een (nieuwe) realiteit thinkmobile1st.com
  6. 6. Negeren? Mis je doelgroepen als je mobile uitsluit? Zijn alle online vragenlijsten geschikt voor mobile? thinkmobile1st.com
  7. 7. Wat voor excuus heb jij om mobile devices uit te sluiten? Omdat je vragenlijst… • Teveel vragen en antwoordopties heeft? • Teveel tekst, of teveel plaatjes heeft? • Te lang is? • Voor een specifieke methode is? thinkmobile1st.com
  8. 8. Anders gezegd … Als het wel mobile kan, zou je het dan willen? thinkmobile1st.com
  9. 9. Dennis Sewberath thinkmobile1st.com
  10. 10. THINKMOBILE1ST.com thinkmobile1st.com
  11. 11. Vandaag Voordelen van… THINK MOBILE FIRST 1) Design 2) Content thinkmobile1st.com
  12. 12. Mobile First – Think Mobile First Aanpak - denkwijze sluit perfect aan hoe wij naar online surveydesign kunnen kijken thinkmobile1st.com
  13. 13. Van Think Desktop First … thinkmobile1st.com
  14. 14. … naar Think Mobile First thinkmobile1st.com
  15. 15. Iedereen, overal en altijd mobiel Het brengt niet alleen nieuwe mogelijkheden Vereist ook aanpassingen op vragenlijsten in design thinkmobile1st.com
  16. 16. Situatie en stemming bepalen device thinkmobile1st.com
  17. 17. Er is een verandering in gebruik thinkmobile1st.com
  18. 18. Ons mobiel gebruiksgedrag bepaalt content en design Afleiding – One Eye Focus Design Content neemt voorrang op navigatie Duidelijk ontwerp is must thinkmobile1st.com
  19. 19. Wat definieer jij ZELF als mobile? thinkmobile1st.com
  20. 20. Smartphones? Feature phones? Tablets? Laptops? Als je onderweg bent? F2F met tablets? Of alleen bij gebruik specifieke opties (camera, geo, etc.) thinkmobile1st.com
  21. 21. THE MOBILE JUNGLE HTML5, APPS, WAP, MOBILE RESEARCH, WEB, ETC thinkmobile1st.com
  22. 22. Mobile Web Online ben je niet alleen met een PC, dus een website of online vragenlijst ook niet. thinkmobile1st.com
  23. 23. Native of web app NATIVE APP thinkmobile1st.com VS WEB APP
  24. 24. Drie soorten apps NATIVE APPS Geïnstalleerd op je telefoon, maakt gebruik van functies van je apparaat Voorbeelden: WhatsApp, Skype, Angrybirds WEB APPS Mobile friendly versie van een webiste/vragenlijst via de browser Voorbeelden: m.youtube.com, m.facebook.com HYBRID APPS Combinatie van native en web In feite een native app maar de content wordt ingeladen vanuit web Voorbeelden: BBC, NU.nl thinkmobile1st.com
  25. 25. Keuze welke type App Checklist Uitnodigingen Push, SMS, QR Code, Mail, GEO Fencing Opties Bepaalde functies – camera, offline, passieve meetmethoden Extra Snelle response rate in korte tijd, moet werken op alle devices thinkmobile1st.com
  26. 26. ÉÉN PROBLEEM MET EEN NATIVE APP! Mensen bereid vinden om de app te willen installeren en te gebruiken thinkmobile1st.com
  27. 27. Html5 of Flash? thinkmobile1st.com
  28. 28. Teveel variatie in devices, welke kies je? thinkmobile1st.com
  29. 29. Wat te doen met feature phones? Opkomende landen, 2G, Type gebruiker +/- 10 vragen Feature phone internet thinkmobile1st.com Smart phone
  30. 30. + GEEN TOUCH! thinkmobile1st.com
  31. 31. Welk device en welk design bepaal jij als onderzoeker! device detection device agnostic device friendly thinkmobile1st.com
  32. 32. Touch vs. Mouse navigatie Interact met content, niet met de traditionele menus, knoppen en buttons thinkmobile1st.com NUI ipv. GUI
  33. 33. Respondent = een ECHT persoon thinkmobile1st.com
  34. 34. SPECIFIEKE OPTIES IN MOBILE SURVEYS Camera, GEO, Offline, Passieve meetmethoden thinkmobile1st.com
  35. 35. Camera en audio Foto, video, barcode, QR scan, opnemen thinkmobile1st.com
  36. 36. BEPERKINGEN? Privacy wetgeving, Voorschriften fotograferen, Inspreken op locatie, Verhaal tot leven brengen, Kosten data verkeer, Internet verbinding thinkmobile1st.com
  37. 37. GEO 1) Opslaan van GEO gegevens 2) GEO Fencing, een onderzoek kan worden geactiveerd rond een geografische locatie thinkmobile1st.com
  38. 38. BEPERKINGEN? Het verschil tussen gps en wifi tracking: Gps kan niet iemand volgen, Net zomin als een radiozender iemand kan volgen die een radio bij zich heeft Gps werkt niet indoor, wifi wel Wifi aan – android/iphone detecteren 90% van de tijd zichzelf ook zonder “echte” internet verbinding Mensen moeten aangeven locatie gebasseerde vragenlijsten te willen ontvange thinkmobile1st.com
  39. 39. TYPISCHE MOBILE PROJECTEN thinkmobile1st.com
  40. 40. SPECIFIEKE INFORMATIE, RICHER DATA Camera, GEO BEPAALDE DOELGROEPEN Jongeren, opkomende landen BETROKKENHEID, BEPAALDE MOMENTEN “Heat of the moment”, dagboek studies, tv show, events, Polls ALTERNATIEVE OPLOSSING F2F thinkmobile1st.com
  41. 41. Maar vergeet niet, je doet al aan mobile … Ook je huidige online vragenlijst wordt op mobile devices ingevuld! thinkmobile1st.com
  42. 42. Het doel: device friendly! thinkmobile1st.com
  43. 43. En alle kennis van gisteren voor “online PC” is een voordeel voor mobile van vandaag thinkmobile1st.com
  44. 44. LET OP: Steekproef Survey design effecten Verschillen per land Panel kwaliteit thinkmobile1st.com De impact van vraagtypen Speeding Vertaal problemen Culturele verschillen Panel verschillen Oneerlijk invullen
  45. 45. Niet scripten maar designen thinkmobile1st.com
  46. 46. Evolutie in advertising 150 jaar Focus was eerst alleen op wat je wilt zeggen thinkmobile1st.com Focus niet alleen meer op wat je wilt zeggen maar ook hoe
  47. 47. Soortgelijke evolutie in presentatie design thinkmobile1st.com
  48. 48. Toen ontdekte iemand clipart! thinkmobile1st.com
  49. 49. Focus eerst alleen op wat je wilt zeggen thinkmobile1st.com Focus hoe de boodschap over te brengen
  50. 50. En de evolutie van SURVEY DESIGN.... thinkmobile1st.com
  51. 51. We begonnen met … thinkmobile1st.com
  52. 52. …en vandaag thinkmobile1st.com
  53. 53. Waar is de kunst van surveydesign? Surveydesign is ook een creatieve uiting net zoals webdesign. We weten alleen nog niet hoe we hier mee om moeten gaan thinkmobile1st.com
  54. 54. We staan nog in de beginjaren van powerpoint CLIPART & overgangseffecten thinkmobile1st.com
  55. 55. En de problemen gaan verder dan alleen het visuele ... thinkmobile1st.com
  56. 56. Het survey design proces moet anders ? Focus op wat we willen weten thinkmobile1st.com ? Focus hoe mensen te stimuleren om te reageren
  57. 57. Meer aandacht voor wat we ECHT willen weten thinkmobile1st.com
  58. 58. Stel je voor: Een buitenaardswezen landt op de aarde en je mag hem ÉÉN vraag stellen thinkmobile1st.com
  59. 59. “OP EEN SCHAAL VAN 1 TOT 10” Hoe leuk vind je de aarde? thinkmobile1st.com
  60. 60. You need to find a way to make your respondents… STOP & ACTUALLY THINK! thinkmobile1st.com
  61. 61. Wat kan ons helpen om mensen te stimuleren om te reageren? Maak het visueel Gebruik interactieve vraagtypen Questification Beloon eerlijkheid Gebruik spel elementen, regels Gamification thinkmobile1st.com
  62. 62. Maak het visueel Illustreer antwoorden - beelden worden makkelijker verwerkt thinkmobile1st.com
  63. 63. Met het gebruik van emotie hebben we ontdekt dat dit mensen bevordert om meer na te denken thinkmobile1st.com
  64. 64. GEBRUIK VAN BEELDEN helpt tot de verbeelding en stimuleert emotionele reacties thinkmobile1st.com
  65. 65. GEBRUIK VAN PLAATJES HELPT MET EFFICIËNTER COMMUNICEREN Eén plaatje zegt meer dan 1.000 woorden thinkmobile1st.com
  66. 66. Gebruik interactieve vraagtypen Voorbeeld – „ergonomisch‟ vraagtype thinkmobile1st.com
  67. 67. Voorbeeld – kleuren en afbeelding thinkmobile1st.com
  68. 68. Het gebruik van icoontjes Minder belasting voor de hersenen thinkmobile1st.com
  69. 69. QUESTION OPYWRITING QUESTIFICATION Niet alleen visuele aanpassingen, maar ook een andere manier van vragen stellen thinkmobile1st.com
  70. 70. Hoe krijg je meer betrokkenheid? thinkmobile1st.com
  71. 71. Injecteer meer menselijkheid in je vragen… thinkmobile1st.com
  72. 72. Maak het persoonlijk... Welke van deze kleuren verf vindt je het mooist? Als je de woonkamer moet schilderen welke van deze kleuren zou je kiezen? thinkmobile1st.com
  73. 73. BRENG EMOTIE ... Wat trek je aan? Wat zou je aantrekken op een eerste afspraakje? thinkmobile1st.com
  74. 74. Laat ze zich identificeren met iemand anders ... Wat vind je van dit nieuwe product? Stel, je bent de baas van het bedrijf. Jouw taak is nu om dit nieuwe product te beoordelen … thinkmobile1st.com
  75. 75. Stimuleer inbeeldingsvermogen Kunt u een lijst van uw favoriete winkels maken? Stel u krijgt de kans uw perfecte winkelcentrum op te zetten. Kunt u een overzicht maken van de winkels die u in uw winkelcentrum zou willen zien? thinkmobile1st.com
  76. 76. voorbeeld – combinatie van Inbeelden, interactieve vraagtype, Icoontjes thinkmobile1st.com
  77. 77. Rewarding the truth Begrijp de rol van incentives en (mentale) beloning in vragenlijsten thinkmobile1st.com
  78. 78. Vragenlijsten invullen beloont automatisch “speeding” ACTION TRIGGER REWARD SPEED THROUGH IT SURVEY thinkmobile1st.com SAME POINTS REWARD + SAVED TIME
  79. 79. Oplossing = gebruik spel mechanismen in vragenlijsten die juist belonen op waarheid en inspanning BEING THOUGHTFUL & TRUTHFUL TRIGGER = GAME thinkmobile1st.com REWARD
  80. 80. Voorbeeld: Spontane merk bekendheid Bonus Rewarding thinking thinkmobile1st.com
  81. 81. Voorbeeld: Geholpen merk bekendheid thinkmobile1st.com
  82. 82. Simpele regels kunnen vragen veranderen in mentale puzzels thinkmobile1st.com
  83. 83. Abstracte regels en voorwaarden in vragen In MINDER DAN 7 woorden Noem ÉÉN DING dat je wilt veranderen van dit product Kies EXACT 3 ... Als je product …. zou kopen. Welke van deze items zou ABSOLUUT de doorslag geven? In de PERFECTE wereld wat zou je doen … thinkmobile1st.com
  84. 84. Het visuele aspect, interactieve vraagtypen, manier van vragen stellen, heeft geleid tot alles wat we onder Gamification verstaan thinkmobile1st.com
  85. 85. Een meer „entertaining‟ manier van ontwerpen van vragenlijsten thinkmobile1st.com
  86. 86. Voorbeeld studie: Opnieuw opzetten van een RETAIL evaluatieonderzoek thinkmobile1st.com
  87. 87. Gebaseerd op het concept inbeelden / uitdagen van het maken van een perfecte supermarkt thinkmobile1st.com
  88. 88. thinkmobile1st.com
  89. 89. En vervolgens stellen wij hun huidige primaire supermarkt op de proef Please give your judgment on how ALDI performs on these range of factors thinkmobile1st.com
  90. 90. Maar er is een limiet hoever je kunt gaan … thinkmobile1st.com
  91. 91. “Maak er geen poppenkast van” thinkmobile1st.com met alleen decoratief aanpassen mis je het doel
  92. 92. Voorbeeld - DETROIT/FORD thinkmobile1st.com
  93. 93. Voorbeeld - EMI thinkmobile1st.com
  94. 94. Voorbeeld – Snacken onderweg thinkmobile1st.com
  95. 95. Nieuwe uitdaging mobile … Al deze kennis met online is dus niet voor niks geweest het is juist PERFECT VOOR MOBILE … thinkmobile1st.com
  96. 96. Hoe begin je? 1) Nieuwe specifieke mogelijkheden 2) Uitdagingen in design thinkmobile1st.com
  97. 97. Visuele aspect, interactieve vraagtypen, gamification NICE TO HAVE voor desktop MUST HAVE voor Mobile en Touch THINK MOBILE FIRST in design en content! Als het werkt voor mobile werkt het ook voor desktop thinkmobile1st.com
  98. 98. Beperkte ruimte Bonsai Surveys thinkmobile1st.com
  99. 99. Beperkte ruimte voor content Vragen en antwoorden kort en makkelijk te lezen Verander de manier hoe je vragen stelt Minimaliseer niet-essentiële inhoud (verwijder logo's etc.), houdt het simpel Zorg voor minimale afleiding, mensen zijn sneller afgeleid je moet dus meteen hun aandacht te pakken hebben als ze de vraag op het scherm zien = one eye focus thinkmobile1st.com
  100. 100. Beperkte ruimte in design Maar deze beperking vergt juist meer creativiteit en laat overbodige zaken weg Teveel opties zijn misleidend Met “Think Mobile First” concentreer je je alleen op de dingen die belangrijk zijn thinkmobile1st.com
  101. 101. • • • • Portrait of landscape? Eén of meerdere pagina‟s? Adaptive, Responsive of een “One size fits all” aanpak … Geen goed of fout! Keuze is aan jou! En die keuze verschilt per project thinkmobile1st.com
  102. 102. Portrait vs landscape? GMI surveys Question GMI surveys Option 1 Option 2 Option 3 Option 4 > Question Option 1 Option 2 Option 3 Option 4 Veel scrollen voor de “next” button Natuurlijke voorkeur thinkmobile1st.com
  103. 103. Portrait – geweldig op mobiel … thinkmobile1st.com
  104. 104. Maar je krijgt problemen met bredere vraagtypen. Een HORIZONTALE SCROLL… A BIG NO-NO! GMI surveys Grid Question Option 1 Option 2 Option 3 Option 4 OO OO OO OO > thinkmobile1st.com GMI surveys Grid Question Option 1 O O O O O Option 2 O O O O O Option 3 O O O O O Option 4 O O O O O
  105. 105. Gebruik van een adaptive design? Design horizontaalvoor pc‟s & tablets en portrait voor mobiel GMI surveys Grid Question Option 1 O O O O O Option 2 O O O O O Option 3 O O O O O Option 4 O O O O O GMI surveys GMI surveys Option 1 2 Column 1 Column 1 Column 2 Column 2 Column 3 Column 3 Column 4 Column 4 O O O O > Bijvoorbeeld op een PC een traditionele grid vraag thinkmobile1st.com en op een mobiel in 4 aparte vragen
  106. 106. Deze aanpak brengt echter een hoop extra werk met zich mee … thinkmobile1st.com
  107. 107. Het is bijna onmogelijk om dit geautomatiseerd te doen. Op zo een manier dat de layout van de vraagtype perfect blijft. Uiteindelijk – 2x design? 2x testen? 2x data? GMI surveys GMI surveys LOGO 1 LOGO 1 LOGO 2 LOGO 3 LOGO 2 OPTION 1 OPTION 2 OPTION 3 LOGO 3 OPTION 1 OPTION 3 thinkmobile1st.com OPTION 2
  108. 108. Je loopt ook tegen “scherm kantelen” problemen op GMI surveys Rate this ad? GMI surveys GMI surveys Rate this Option 1 ad? Column 1 Column 2 Column 3 Column 4 O O O O > thinkmobile1st.com
  109. 109. Gelimiteerd aan de vraagtypen die je kunt gebruiken GMI surveys thinkmobile1st.com GMI surveys
  110. 110. Onze Aanpak = Een vaste landscape aanpak Niet vergeten om dit ook tegen de respondenten te zeggen! thinkmobile1st.com
  111. 111. PCs zijn van nature ook LANDSCAPE thinkmobile1st.com
  112. 112. INTERACTIEVE VRAAGTYPEN VOOR PC ZIJN NICE TO HAVE VOOR MULTI DEVICE DESIGN, VOOR EFFICIENT GEBRUIK VOOR MUIS EN TOUCH GELOVEN WIJ DAT DIT EEN MUST HAVE IS thinkmobile1st.com
  113. 113. Onze aanpak = Investeer in meer interactieve vraagtypen thinkmobile1st.com
  114. 114. Interactieve vraagtypen, bijvoorbeeld dynamische grid/matrix alternatieven I likeI chocolate I likelike broccoli like like brocolli I broccoli I cheese Strongly disagree thinkmobile1st.com disagree Neither Agree Strongly Agree
  115. 115. Scherm optimaliseren voor mobile thinkmobile1st.com
  116. 116. Begrijp de beperkte ruimte MOBILE SCHERM 800 X 480 pixels PC SCHERM 1024 X 768 pixels thinkmobile1st.com
  117. 117. En met tablets … 800 x 480 pixels MOBILE SCHERM TABLETS TOT 2048 × 1536 pixels thinkmobile1st.com
  118. 118. ELKE PIXEL TELT thinkmobile1st.com
  119. 119. Maar dat is niet alles, ook rekening houden met pixel density - dichtheid SAMSUNG GALAXY S2 800 X 480 iPhone 5 = 1136 X 640 pixels iPhone heeft een hogere pixel density thinkmobile1st.com Maar is in feite een stuk kleiner
  120. 120. Ruimte is luxe … Which car logo do you like best? thinkmobile1st.com
  121. 121. Onnodige lege ruimte weglaten Which car logo do you like best? thinkmobile1st.com
  122. 122. En het probleem van beeldverhouding, scherm ratio: Mobile < 1/3 van de grootte van een pc scherm thinkmobile1st.com
  123. 123. Hoe ga je hiermee om? thinkmobile1st.com
  124. 124. ONZE AANPAK Gebruik autowidth scaling Met welk apparaat dan ok, het opent altijd in maximale breedte Denk aan scale ratio’s niet pixels Wij maken momenteel maken gebruik van 1:1.7 design ratio Naar beneden schalen Anders eindig je met vragenlijst die te klein zijn voor PC‟s & Tablets thinkmobile1st.com
  125. 125. Op een mobiel heb je weinig ruimte in de hoogte (in landscape mode) thinkmobile1st.com
  126. 126. De top van de vragenlijst is heilig VIEWING ZONE Druk alles zo dicht mogelijk naar de top van het scherm thinkmobile1st.com
  127. 127. Aanpassing templates Verwijder onnodige items GMI surveys Question Option 1 Option 2 Option 3 Option 4 Question Option 1 Option 2 Option 3 Option 4 Option 5 OOOOO OOOOO OOOOO OOOOO OOOOO OOOOO OOOOO OOOOO OOOOO Plaats de “next` button aan de zijkant > Maak gebruik AUTO-NEXT waar dit zich toelaat thinkmobile1st.com
  128. 128. Voorbeeld PC scherm Voortgangsbalk over de gehele top Navigatie BRANDING In de navigatie Twee kolommen: antwoorden waar je moet scrollen worden vaak minder geselecteerd thinkmobile1st.com
  129. 129. Zelfde voorbeeld op een mobiel Geen OLD SCHOOL buttons, radio/checkboxes thinkmobile1st.com
  130. 130. Weg van OLD SCHOOL buttons … Question title If you have questions with lots of option choices And some of them are really long sentences like this Realise that the buttons themselves take up valuable space thinkmobile1st.com
  131. 131. Ruimte is luxe op een mobiel, elke pixel telt Question title By switching to box questions like this You can fit in a lot more content onto the page Because you are using up the whole width of the available question space So you have more space to fit in more words You can use box highlighting like this to indicate that you have selected thinkmobile1st.com
  132. 132. Ruimte is luxe op een mobiel, elke pixel telt Question title By switching to box questions like this You can fit in a lot more content onto the page Because you are using up the whole width of the available question space So you have more space to fit in more words You can use box highlighting like this to indicate that you have selected thinkmobile1st.com
  133. 133. Minimale groottes, maak een stylesheet per device Minimum font sizes PC survey = 11pt Mobile = 18pt Minimum button sizes 44 pixels Minimum line thickness 2 pixels thinkmobile1st.com
  134. 134. Denk na waar je de labels neerzet Labels moeten goed zichtbaar blijven anders zit je vinger in de weg thinkmobile1st.com
  135. 135. Plaats open tekst vragen aan de top. Hiermee blijf je de vraag zien als het toetsenbord opkomt thinkmobile1st.com
  136. 136. Het gebruik van plaatjes is luxe en kost ruimte en bandbreedte What brand of printer do you have? HP Deskjet 20xxxxx HP Deskjet 40xxx HP Deskjet 80xxxx thinkmobile1st.com
  137. 137. Gebruik plaatjes en icoontjes slim. Waar ruimte het toelaat, het brengt de vragenlijst meer tot leven! thinkmobile1st.com Tekst in buttons maakt het tevens eenvoudiger om aan te klikken
  138. 138. Extra voordelen met interactieve vraagtypen Drag and drop is veel intuïtiever choice Option A thinkmobile1st.com Option B choice
  139. 139. Sliding komt goed tot zijn recht thinkmobile1st.com
  140. 140. Helemaal als je animatie gebruikt in je sliders zodat je ziet wat er gebeurd thinkmobile1st.com
  141. 141. Bij vragen met veel instructies of tekst Plaats de introductie op een aparte pagina thinkmobile1st.com
  142. 142. Instructies Kort samengevat bij de vraag thinkmobile1st.com
  143. 143. Bij gebruik van veel tekst – probeer dit anders weer te geven – niemand leest graag grote blokken met tekst thinkmobile1st.com
  144. 144. Een aanpak? Gebruik een tweet stijl om je vragen te definiëren en blijf onder de 140 karakters! Helder, duidelijk en het wordt gelezen thinkmobile1st.com
  145. 145. We hebben twee duimen, dus dubbele vragen op één scherm kan zijn voordeel hebben thinkmobile1st.com
  146. 146. Deze opties in design hebben niet alleen voordeel voor mobile specifiek maar ook voor pc. Met think mobile first heb je zowel voordeel in design en content ook al ga je niet mobile! thinkmobile1st.com
  147. 147. Techniek Laat je niet beperken door software thinkmobile1st.com
  148. 148. Inzicht gegeven in … STOP & ACTUALLY THINK! voordelen met … THINK MOBILE FIRST design en content thinkmobile1st.com
  149. 149. Vragen? thinkmobile1st.com

×