Workshop Mobile First Design in 3 stappen
-
Upload
angi-studio -
Category
Design
-
view
691 -
download
0
Transcript of Workshop Mobile First Design in 3 stappen
angi studio
Workshop
Mobile First Design
• " 16-01-2014
angi studio
@angistudio #mobilefirst Foto: www.flickr.com/photos/timo/11153618374/
angi studio Bron: http://www.successfulworkplace.org/2013/02/11/marketer-dont-be-a-mobile-dinosaur/
angi studio 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 Bron: http://www.flickr.com/photos/yourdon/3564918558/in/photostream/
angi studio
angi studio
2009 Interaction design @angistudio
angi studio
2009 Interaction design @angistudio
angi studio
2011 Interaction design @angistudio
angi studio
Scenario 1 Bestaande klant
E-mail uitnodiging n.a.v 5 jaar klant Na inlog > Mijn ICS
2013 Interaction design @angistudio
angi studio
Waarom Mobile First Aan de slag Mobile first voor jouw site
angi studio
Waarom Mobile First Aan de slag Mobile first voor jouw site
angi studio
Mobile First (2011) by Luke Wroblewski
Mobiele context = hét uitgangspunt voor ontwerp
Start met mobiel ontwerp
angi studio
angi studio
Waarom Mobile first
Bereik meer mensen
77% van de wereldbevolking heeft een mobiel apparaat en dat groeit hard"
angi studio
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 Bron: http://www.marketingfacts.nl/images/research/deloitte-nl-global-mobile-consumer-survey.pdf
Gemiddeld 4,3 mobiel apparaat per persoon ±9 per huishouden (nov. 2013)
Gebruik in Nederland
angi studio
Gebruik in Nederland
Bron: http://www.marketingfacts.nl/images/research/deloitte-nl-global-mobile-consumer-survey.pdf
Nederland staat op nr. 1 in tabletgebruik Europa (nov. 2013)
angi studio Bron: http://www.gfk.com/nl/news-and-events/press-room/press-releases/paginas/aantal-smartphones-hoger-dan-aantal-computers.aspx
Update jan 2013 Aantal Smartphones is over PC’s heen!
angi studio
angi studio
Waarom Mobile first
Mobiel biedt nieuwe mogelijkheden
door gebruik te maken van mobiele technologieën zoals locatie, foto, audio, touch"
"
angi studio
Waterpas
Bron: http://gizmodo.com/the-iphone-5s-motion-sensors-are-totally-screwed-up-1440286727
angi studio
Nieuwe mogelijkheden
Panorama foto
angi studio Bron: http://www.stepbystep.com/how-to-use-bump-between-an-iphone-and-android-23111/
angi studio
Nieuwe mogelijkheden
Facetime Navigatie Kompas
angi studio
Nieuwe mogelijkheden
Siri
angi studio Bron: http://www.flickr.com/photos/moon-goddess/2724685945/sizes/o/
angi studio Bron:: http://72dpi.nl/projects/marktplaats/
angi studio Bron: http://72dpi.nl/projects/marktplaats/
angi studio
Waarom Mobile first
Mobiel dwingt je te
focussen op de kern van de zaak
"
angi studio
Focus
angi studio
angi studio
Focus
angi studio
angi studio
Focus op toptaken…
Bron: http://www.lukew.com/ff/entry.asp?1117
angi studio
Focus op content…
angi studio 36 Bron: http://xkcd.com/773/
Focus
angi studio 37
Mobile
Bron: http://xkcd.com/773/
Focus
angi studio Bron: http://www.flickr.com/photos/earlysound/4490601295
angi studio
angi studio Bron: http://static.lukew.com/MobileFirst_LukeW.pdf
angi studio
• 60 keer per dag
• Elke 15 minuten
• Gem. 2 uur en 41 uur
angi studio
angi studio
Context is bij mobiel zeer belangrijk
angi studio
Waarom Mobile First Aan de slag Mobile first voor jouw site
angi studio
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
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
ggdhaaglanden.nl Bewaakt, beschermt en bevordert de gezondheid
De case: Gemeentelijke Gezondheidsdienst
angi studio
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
Persona’s van Angi Studio
Reiziger Moeder
Huisarts
Directeur basisschool
Medewerker Dak- en thuislozenloket
angi studio
Voor de workshop houden we
Reiziger Moeder
Huisarts
Directeur basisschool
Medewerker Dak- en thuislozenloket
angi studio
Reiziger – Scenario Waarom en hoe op de site?
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.
Hans woont in Delft en gaat binnenkort 1,5 maand rondreizen in Thailand, Vietnam en Malaysia.
angi studio
2. Behoeften
Waar heeft Hans behoefte aan
• Welke informatie
• Wat wil hij kunnen doen
• Wat heeft focus…
angi studio
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
Schetsen
Bron: www.rachelhinman.com/
angi studio http://www.flickr.com/photos/anthonyarmendariz/4448219641
angi studio
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"
angi studio 58
Hang jullie uitwerking op
angi studio
angi studio
Schetsen laten zien
angi studio
angi studio
Onze vertaling ggdhaaglanden.nl
angi studio
Reizigersvaccina,es Ambulance
Gezondheidsonderzoek
OGGZ
SMA
Medische Milieukunde
Technische hygiënezorg
Inspec,e Kinderopvang
Forensische geneeskunde
I&H
Epidemiologie
Burger
Professional
RSSG
Informa,eloket dak-‐ en thuislozen
angi studio
Bezoekers komen via
Denhaag.nl/ggd Ggdzhw.nl
69 % Google verkeer ±80 % Google
…en starten vaak niet op home
angi studio
Schermresolutie daklozen
angi studio
Dal in de avonduren en het weekend, piek tijdens de werktijden. We hebben te maken met veel professionals hier.
angi studio
angi studio
Ik weet niet wat OGGZ betekent, Milieu en Gezondheid…is dit voor mij?
Natuurlijk, ook SOA en bezorgd over kinder-mishandeling… ja, belangrijk!
Van
Naar
angi studio
Hoe heeft Mobile First ons geholpen
angi studio
Focus op de taak en duidelijke next steps
angi studio
angi studio
Mobile menu, focus op de toptaken
angi studio
angi studio
Wat betekent Mobile First voor jouw desktop site?
angi studio
Voorbeelden sites beïnvloed door mobile
• Rijksmuseum.nl – museum beleving online • 9292.nl – een reisplanner • Medium.com –een optimale leeservaring
angi studio
angi studio
9292.nl
angi studio
angi studio
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
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.