Workshop Mobile First Design in 3 stappen
1 like1,211 views
Bij veel bedrijven komt de mobiele versie van een website of applicatie pas na de desktop versie, bij Angi Studio doen we de twee vaak tegelijk met responsive design. Maar volgens Luke Wroblewski gaat dat niet ver genoeg. Hij heeft ‘Mobile First Design’ bedacht, een filosofie die benadrukt dat de mobiele context het uitgangspunt zijn wanneer je een online service of product ontwerpt. Daarmee richt je je op de toekomst en kun je focus creëren, dat zorgt ook voor een betere desktop-versie. Maar wat is Mobile First Design? In deze 2 uur workshop zetten we samen met deelnemers in een mobile-first ontwerp neer. Je leert denken vanuit een gebruikersperspectief en je inleven in een relevant gebruiksscenario. Deze workshop helpt je beter focus te creëren, niet alleen in het mobiele ontwerp, maar ook voor de desktop site.
Workshop Mobile First Design in 3 stappen
- 1. Workshop Mobile First Design • " @angistudio #mobilefirst Foto: www.flickr.com/photos/timo/11153618374/ 16-01-2014 angi studio angi studio
- 5. angi studio
- 9. 2013 Interaction design @angistudio Scenario 1 Bestaande klant E-mail uitnodiging n.a.v 5 jaar klant Na inlog > Mijn ICS angi studio
- 10. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
- 11. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
- 12. Mobile First (2011) by Luke Wroblewski Mobiele context = hét uitgangspunt voor ontwerp Start met mobiel ontwerp angi studio
- 13. angi studio
- 14. Waarom Mobile first Bereik meer mensen 77% van de wereldbevolking heeft een mobiel apparaat en dat groeit hard " angi studio
- 15. Bereik meer mensen Mobiel groeit veel harder dan desktop: nu 1,4 miljard gebruikers 79% gebruikt hun mobiel om goederen en diensten aan te schaffen Bron: http://static.lukew.com/ MobileFirst_LukeW.pdf " angi studio
- 16. Gebruik in Nederland Gemiddeld (nov. 2013) 4,3 mobiel apparaat per persoon ±9 per huishouden Bron: http://www.marketingfacts.nl/images/research/deloitte-nl-global-mobile-consumer-survey.pdf angi studio
- 17. Gebruik in Nederland Nederland staat op nr. 1 in tabletgebruik Europa Bron: http://www.marketingfacts.nl/images/research/deloitte-nl-global-mobile-consumer-survey.pdf (nov. 2013) angi studio
- 18. Update jan 2013 Aantal Smartphones is over PC’s heen! Bron: http://www.gfk.com/nl/news-and-events/press-room/press-releases/paginas/aantal-smartphones-hoger-dan-aantal-computers.aspx angi studio
- 19. angi studio
- 20. Waarom Mobile first Mobiel biedt nieuwe mogelijkheden door gebruik te maken van mobiele technologieën zoals locatie, foto, audio, touch " " angi studio
- 29. Waarom Mobile first Mobiel dwingt je te focussen op de kern van de zaak " angi studio
- 31. angi studio
- 33. angi studio
- 34. Focus op toptaken… Bron: http://www.lukew.com/ff/entry.asp?1117 angi studio
- 35. Focus op content… angi studio
- 39. angi studio
- 41. • 60 keer per dag • Elke 15 minuten • Gem. 2 uur en 41 uur angi studio
- 42. angi studio
- 43. Context is bij mobiel zeer belangrijk angi studio
- 44. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
- 45. Aan de slag met ggdhaaglanden.nl 1 – Wie gebruikt de website Wie is de gebruiker & Waarom op de site 2 – Behoeften Welke informatiebehoeften en elementen 3 – Schetsen Prototypen: hoe ziet het er uit angi studio
- 46. Aan de slag met ggdhaaglanden.nl ✔– Vooronderzoek 1 – Wie gebruikt de website Wie is de gebruiker & Waarom op de site 2 – Behoeften Welke informatiebehoeften en elementen 3 – Schetsen Prototypen: hoe ziet het er uit angi studio
- 47. De case: Gemeentelijke Gezondheidsdienst ggdhaaglanden.nl Bewaakt, beschermt en bevordert de gezondheid angi studio
- 48. 1. Wie gebruikt de website Wie is de gebruiker • Hij of zij, leeftijd, opleidingsniveau • Beroep • Andere relevante details Waarom – Scenario • Waarom komt deze persoon op de GGD site, hoe? • Met welke vraag, welk doel? " angi studio
- 49. Persona’s van Angi Studio Reiziger Moeder Medewerker Dak- en thuislozenloket Directeur basisschool Huisarts angi studio
- 50. Voor de workshop houden we Reiziger Moeder Medewerker Dak- en thuislozenloket Directeur basisschool Huisarts angi studio
- 51. Reiziger – Scenario Waarom en hoe op de site? Hans woont in Delft en gaat binnenkort 1,5 maand rondreizen in Thailand, Vietnam en Malaysia. Via e-mail wordt hij door het reisbureau herinnerd aan de benodigde vaccinaties voor tropische bestemmingen. Hij zit in de trein en via zijn mobiel zoekt hij op ‘reisvaccinatie’ in Google. Hij wil snel een afspraak maken. angi studio
- 52. 2. Behoeften Waar heeft Hans behoefte aan • Welke informatie • Wat wil hij kunnen doen • Wat heeft focus… angi studio
- 53. 3. Schetsen Maak een schets, een prototype, van de pagina waar Hans terecht komt Wat ziet Hans op deze pagina, wat kan hij er doen? angi studio
- 56. De beste manier om mobiel te ontwerpen is direct en vaak prototypen angi studio
- 57. Tips › Denk aan ruimte Een link of knop moet makkelijk aanklikbaar zijn met je duim/vinger › Leesbaarheid Teksten kunnen niet te klein zijn › Wat heeft nadruk Dingen die je direct naar voren wilt hebben, geef dat aan via bijv. arcering of vetter maken of geef het extra ruimte. › Gebruik echte teksten Probeer in ieder geval kopjes en labels te benoemen " 57 angi studio
- 58. Hang jullie uitwerking op 58 angi studio
- 59. angi studio
- 60. Schetsen laten zien angi studio
- 61. angi studio
- 62. Onze vertaling ggdhaaglanden.nl angi studio
- 63. Reizigersvaccina,es Ambulance Burger Professional I&H RSSG Epidemiologie Medische Milieukunde SMA Informa,eloket dak-‐ en thuislozen Inspec,e Kinderopvang Gezondheidsonderzoek Forensische geneeskunde OGGZ Technische hygiënezorg angi studio
- 64. Bezoekers komen via …en starten vaak niet op home Ggdzhw.nl 69 % Google verkeer Denhaag.nl/ggd ±80 % Google angi studio
- 66. Dal in de avonduren en het weekend, piek tijdens de werktijden. We hebben te maken met veel professionals hier. angi studio
- 67. angi studio
- 68. Van Ik weet niet wat OGGZ betekent, Milieu en Gezondheid…is dit voor mij? Naar Natuurlijk, ook SOA en bezorgd over kindermishandeling… ja, belangrijk! angi studio
- 69. Hoe heeft Mobile First ons geholpen angi studio
- 70. Focus op de taak en duidelijke next steps angi studio
- 71. angi studio
- 72. Mobile menu, focus op de toptaken angi studio
- 73. angi studio
- 74. Wat betekent Mobile First voor jouw desktop site? angi studio
- 75. Voorbeelden sites beïnvloed door mobile • Rijksmuseum.nl – museum beleving online • 9292.nl – een reisplanner • Medium.com –een optimale leeservaring angi studio
- 76. angi studio
- 78. angi studio
- 79. Mobile first tips Focus, focus, focus.. 1. Niet alles hoeft op één pagina, durf weg te laten 2. Geef ruimte om te ademen, groot is goed 3. Maak het extra waardevol en relevant voor de gebruiker angi studio
- 80. Vervolg-Workshop Responsive Design Donderdag 20 maart van 15 tot 17 uur • • • • • • Fluid grids en fluid layout Flexibele afbeeldingen good practices Media queries wat kun je beinvloeden Ontwerpen voor verschillende input typen Responsive content Responsive typografie en responsive kleur" Invite-only event. angi studio