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.