1.
Workshop
Mobile First Design
•
"
@angistudio #mobilefirst
Foto: www.flickr.com/photos/timo/11153618374/
16-01-2014
angi studio
angi studio

2.
Bron: http://www.successfulworkplace.org/2013/02/11/marketer-dont-be-a-mobile-dinosaur/
angi studio

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.
Bron: http://www.flickr.com/photos/yourdon/3564918558/in/photostream/
angi studio

5.
angi studio

6.
2009
Interaction design
@angistudio
angi studio

7.
2009
Interaction design
@angistudio
angi studio

8.
2011
Interaction design
@angistudio
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

21.
Waterpas
Bron: http://gizmodo.com/the-iphone-5s-motion-sensors-are-totally-screwed-up-1440286727
angi studio

22.
Nieuwe mogelijkheden
Panorama
angi studio

23.
Bron: http://www.stepbystep.com/how-to-use-bump-between-an-iphone-and-android-23111/
angi studio

24.
Nieuwe mogelijkheden
Facetime
Navigatie
Kompa
s
angi studio

25.
Nieuwe mogelijkheden
Siri
angi studio

26.
Bron: http://www.flickr.com/photos/moon-goddess/2724685945/sizes/o/
angi studio

27.
Bron:: http://72dpi.nl/projects/marktplaats/
angi studio

28.
Bron: http://72dpi.nl/projects/marktplaats/
angi studio

29.
Waarom Mobile first
Mobiel dwingt je te
focussen op de kern
van de zaak
"
angi studio

30.
Focus
angi studio

31.
angi studio

32.
Focus
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

36.
Focus
36
Bron: http://xkcd.com/773/
angi studio

37.
Focus
Mobile
37
Bron: http://xkcd.com/773/
angi studio

38.
Bron: http://www.flickr.com/photos/earlysound/4490601295
angi studio

39.
angi studio

40.
Bron: http://static.lukew.com/MobileFirst_LukeW.pdf
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

54.
Schetsen
Bron: www.rachelhinman.com/
angi studio

55.
http://www.flickr.com/photos/anthonyarmendariz/4448219641
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

65.
Schermresolutie daklozen
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

77.
9292.nl
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