1. Standaardisatie componenten
Front-end
Standaardisatie componenten
22-04-2013

2. Inhoud
Waarom componenten
Desktop/mobiel/tablet gebruik
Responsive/mobiele website
Mogelijke componenten
Component specifieke aandachtspunten
Conclusie
Vragen/discussie
Standaardisatie componenten
22-04-2013

3. Waarom componenten
Voordelen
• Herbruikbaar
• Tijdsbesparing
• Kwaliteit
Nadelen
• Afstemming doelgroep
Standaardisatie componenten
22-04-2013

4. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
Verschillende apparaten
Standaardisatie componenten
22-04-2013

5. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
Verschillende apparaten
Keuze apparaat afhankelijk van context
Standaardisatie componenten
22-04-2013

6. http://www.marketingfacts.nl/statistieken/algemeen/
Desktop/laptop bezit
Standaardisatie componenten
22-04-2013

7. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
PC gebruik
Informatie en taak georiënteerd
Standaardisatie componenten
22-04-2013

8. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
PC gebruik
Startpunt voor meer complexe activiteiten
Standaardisatie componenten
22-04-2013

9. http://www.intomartgfk.nl/imperia/md/content/intomart/trends_in_digitale_media_-_juni_2012.pdf
Smartphone bezit
Standaardisatie componenten
22-04-2013

10. http://www.marketingfacts.nl/statistieken/mobile-marketing/
Smartphone bezit naar leeftijd
Standaardisatie componenten
22-04-2013

11. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
Smartphone gebruik
Verbonden
Standaardisatie componenten
22-04-2013

12. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
Smartphone gebruik
Startpunt voor online activiteiten
Standaardisatie componenten
22-04-2013

13. http://www.intomartgfk.nl/imperia/md/content/intomart/trends_in_digitale_media_-_juni_2012.pdf
Tablet bezit
Standaardisatie componenten
22-04-2013

14. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
Tablet gebruik
Entertainment
Standaardisatie componenten
22-04-2013

15. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
Tablet gebruik
Startpunt voor winkelen en het boeken van een reis
Standaardisatie componenten
22-04-2013

16. http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
PC/smartphone/tablet gebruik
Klanten gebruiken meerdere apparaten bij het doen van een aankoop
Standaardisatie componenten
22-04-2013

17. Andere interessante cijfers
45% van de consumenten gebruikt smartphones voor in-
store product research & browsing
53% van de mannen en 38% van de vrouwen gebruikt
zijn/haar smartphone in de winkel om prijzen te
vergelijken met andere winkels
39% van de mensen die een winkel verlaten zonder een
aankoop, waren door smartphones beinvloed
12% checkte andere online retailers
8% checkte beschikbaarheid in andere winkels
Standaardisatie componenten
22-04-2013

18. http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Ontwerpen voor mobiele apparaten
Meerdere schermformaten
Performance (snelheid)
Touch screen
Locatie
Apparaat afhankelijke functionaliteiten
Standaardisatie componenten
22-04-2013

19. De componenten
Formulier
Inloggen/registreren/gebruikersbeheer
Buttons (basisregels)
Productdetailpagina
Zoeken/zoekresultaten
Standaardisatie componenten
22-04-2013

20. Formulieren

21. http://static.lukew.com/MobileInput_LukeW.pdf
Formulieren
Lengte
Lay-out
Tekst invoer
Standaardisatie componenten
22-04-2013

22. Formulier - lengte
Standaardisatie componenten
22-04-2013

23. Standaardisatie componenten
22-04-2013

24. Stappen
Standaardisatie componenten
22-04-2013

25. Conversie verhogen
Standaardisatie componenten
22-04-2013

26. Veld lengte
Standaardisatie componenten
22-04-2013

27. Formulier
Lay-out
Standaardisatie componenten
22-04-2013

28. Fout
Standaardisatie componenten
22-04-2013

29. Groeperen
Standaardisatie componenten
22-04-2013

30. Standaardisatie componenten
22-04-2013

31. Formulier op mobiel
Standaardisatie componenten
22-04-2013

32. Zoom
Standaardisatie componenten
22-04-2013

33. Formulier – lay-out
Standaardisatie componenten
22-04-2013

34. Tekst invoer
Autocapitalize uit bij e-mail, wachtwoord, URL en
andere hoofdlettergevoelige invoervelden
Autocorrect uit bij e-mail, wachtwoord, URL, etc.
Verwijder overbodige spaties automatisch
Toon het juiste toetsenbord door het juiste input type
mee te geven
Standaardisatie componenten
22-04-2013

35. Slimme standaard waarden
Gepersonaliseerd
Meest voorkomend
Standaardisatie componenten
22-04-2013

36. Validatie
Standaardisatie componenten
22-04-2013

37. Validatie
Standaardisatie componenten
22-04-2013

38. http://static.lukew.com/webforms_lukew.pdf
Actie buttons
Vormgeving moet overeenkomen met belang
Standaardisatie componenten
22-04-2013

39. Ontwikkeld
Standaardisatie componenten
22-04-2013

40. Inloggen / registreren / gebruikersbeheer

41. http://janrain.com/blog/social-login-and-social-sharing-trends-across-the-web-for-q2-of-2012/
Social login
Standaardisatie componenten
22-04-2013

42. Hoe het niet moet
Standaardisatie componenten
22-04-2013

43. Standaardisatie componenten
22-04-2013

44. Standaardisatie componenten
22-04-2013

45. Ontwikkeld
Standaardisatie componenten
22-04-2013

46. Buttons

47. Buttons
Aangeraden afmeting:
9mm/34px
Minimum afmeting:
7mm/26px
Minimale tussenruimte:
2mm/8px
Standaardisatie componenten
22-04-2013

48. Conclusie

49. Vragen/discussie