O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Workshop Mobile First Design in 3 stappen

1.044 visualizações

Publicada em

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.

Publicada em: Design
  • Seja o primeiro a comentar

Workshop Mobile First Design in 3 stappen

  1. 1. Workshop Mobile First Design •  " @angistudio #mobilefirst Foto: www.flickr.com/photos/timo/11153618374/ 16-01-2014 angi studio angi studio
  2. 2. Bron: http://www.successfulworkplace.org/2013/02/11/marketer-dont-be-a-mobile-dinosaur/ angi studio
  3. 3. Bronnen: https://i.ytimg.com/vi/ffRlDG4VshM/0.jpg http://www.ngomonginggris.com/2013/06/eating-makan.html https://www.youtube.com/watch?v=j8lScHO2mM0&list=TLsdfBz7huEN9RTnkVl7OmEtoYC-7nFclS angi studio
  4. 4. Bron: http://www.flickr.com/photos/yourdon/3564918558/in/photostream/ angi studio
  5. 5. angi studio
  6. 6. 2009 Interaction design @angistudio angi studio
  7. 7. 2009 Interaction design @angistudio angi studio
  8. 8. 2011 Interaction design @angistudio angi studio
  9. 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. 10. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
  11. 11. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
  12. 12. Mobile First (2011) by Luke Wroblewski Mobiele context = hét uitgangspunt voor ontwerp Start met mobiel ontwerp angi studio
  13. 13. angi studio
  14. 14. Waarom Mobile first Bereik meer mensen 77% van de wereldbevolking heeft een mobiel apparaat en dat groeit hard " angi studio
  15. 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. 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. 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. 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. 19. angi studio
  20. 20. Waarom Mobile first Mobiel biedt nieuwe mogelijkheden door gebruik te maken van mobiele technologieën zoals locatie, foto, audio, touch " " angi studio
  21. 21. Waterpas Bron: http://gizmodo.com/the-iphone-5s-motion-sensors-are-totally-screwed-up-1440286727 angi studio
  22. 22. Nieuwe mogelijkheden Panorama angi studio
  23. 23. Bron: http://www.stepbystep.com/how-to-use-bump-between-an-iphone-and-android-23111/ angi studio
  24. 24. Nieuwe mogelijkheden Facetime Navigatie Kompa s angi studio
  25. 25. Nieuwe mogelijkheden Siri angi studio
  26. 26. Bron: http://www.flickr.com/photos/moon-goddess/2724685945/sizes/o/ angi studio
  27. 27. Bron:: http://72dpi.nl/projects/marktplaats/ angi studio
  28. 28. Bron: http://72dpi.nl/projects/marktplaats/ angi studio
  29. 29. Waarom Mobile first Mobiel dwingt je te focussen op de kern van de zaak " angi studio
  30. 30. Focus angi studio
  31. 31. angi studio
  32. 32. Focus angi studio
  33. 33. angi studio
  34. 34. Focus op toptaken… Bron: http://www.lukew.com/ff/entry.asp?1117 angi studio
  35. 35. Focus op content… angi studio
  36. 36. Focus 36 Bron: http://xkcd.com/773/ angi studio
  37. 37. Focus Mobile 37 Bron: http://xkcd.com/773/ angi studio
  38. 38. Bron: http://www.flickr.com/photos/earlysound/4490601295 angi studio
  39. 39. angi studio
  40. 40. Bron: http://static.lukew.com/MobileFirst_LukeW.pdf angi studio
  41. 41. •  60 keer per dag •  Elke 15 minuten •  Gem. 2 uur en 41 uur angi studio
  42. 42. angi studio
  43. 43. Context is bij mobiel zeer belangrijk angi studio
  44. 44. Waarom Mobile First Aan de slag Mobile first voor jouw site angi studio
  45. 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. 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. 47. De case: Gemeentelijke Gezondheidsdienst ggdhaaglanden.nl Bewaakt, beschermt en bevordert de gezondheid angi studio
  48. 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. 49. Persona’s van Angi Studio Reiziger Moeder Medewerker Dak- en thuislozenloket Directeur basisschool Huisarts angi studio
  50. 50. Voor de workshop houden we Reiziger Moeder Medewerker Dak- en thuislozenloket Directeur basisschool Huisarts angi studio
  51. 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. 52. 2. Behoeften Waar heeft Hans behoefte aan •  Welke informatie •  Wat wil hij kunnen doen •  Wat heeft focus… angi studio
  53. 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
  54. 54. Schetsen Bron: www.rachelhinman.com/ angi studio
  55. 55. http://www.flickr.com/photos/anthonyarmendariz/4448219641 angi studio
  56. 56. De beste manier om mobiel te ontwerpen is direct en vaak prototypen angi studio
  57. 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. 58. Hang jullie uitwerking op 58 angi studio
  59. 59. angi studio
  60. 60. Schetsen laten zien angi studio
  61. 61. angi studio
  62. 62. Onze vertaling ggdhaaglanden.nl angi studio
  63. 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. 64. Bezoekers komen via …en starten vaak niet op home Ggdzhw.nl 69 % Google verkeer Denhaag.nl/ggd ±80 % Google angi studio
  65. 65. Schermresolutie daklozen angi studio
  66. 66. Dal in de avonduren en het weekend, piek tijdens de werktijden. We hebben te maken met veel professionals hier. angi studio
  67. 67. angi studio
  68. 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. 69. Hoe heeft Mobile First ons geholpen angi studio
  70. 70. Focus op de taak en duidelijke next steps angi studio
  71. 71. angi studio
  72. 72. Mobile menu, focus op de toptaken angi studio
  73. 73. angi studio
  74. 74. Wat betekent Mobile First voor jouw desktop site? angi studio
  75. 75. Voorbeelden sites beïnvloed door mobile •  Rijksmuseum.nl – museum beleving online •  9292.nl – een reisplanner •  Medium.com –een optimale leeservaring angi studio
  76. 76. angi studio
  77. 77. 9292.nl angi studio
  78. 78. angi studio
  79. 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. 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

×