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.
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
20. Waarom Mobile first
Mobiel biedt nieuwe mogelijkheden
door gebruik te maken van mobiele
technologieën zoals locatie, foto, audio, touch
"
"
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
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
75. Voorbeelden sites beïnvloed door mobile
• Rijksmuseum.nl – museum beleving online
• 9292.nl – een reisplanner
• Medium.com –een optimale leeservaring
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