Netwinst: Ontwikkeling van standaard Componenten

Standaardisatie componentenFront-end

22-04-2013

Standaardisatie componenten

Inhoud

Waarom componenten

Desktop/mobiel/tablet gebruik

Responsive/mobiele website

Mogelijke componenten

Component specifieke aandachtspunten

Conclusie

Vragen/discussie

22-04-2013


Waarom componenten

Voordelen

• Herbruikbaar

• Tijdsbesparing

• Kwaliteit

Nadelen

• Afstemming doelgroep

22-04-2013


Verschillende apparaten

22-04-2013


http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

Verschillende apparaten

Keuze apparaat afhankelijk van context

22-04-2013



Desktop/laptop bezit

22-04-2013


http://www.marketingfacts.nl/statistieken/algemeen/

PC gebruik

22-04-2013



Informatie en taak georiënteerd

PC gebruik

22-04-2013



Startpunt voor meer complexe activiteiten

Smartphone bezit

22-04-2013


http://www.intomartgfk.nl/imperia/md/content/intomart/trends_in_digitale_media_-_juni_2012.pdf

Smartphone bezit naar leeftijd

22-04-2013


http://www.marketingfacts.nl/statistieken/mobile-marketing/

Smartphone gebruik

Verbonden

22-04-2013



Smartphone gebruik

Startpunt voor online activiteiten

22-04-2013



Tablet bezit

22-04-2013


http://www.intomartgfk.nl/imperia/md/content/intomart/trends_in_digitale_media_-_juni_2012.pdf

Tablet gebruik

Entertainment

22-04-2013



Tablet gebruik

Startpunt voor winkelen en het boeken van een reis

22-04-2013



PC/smartphone/tablet gebruikKlanten gebruiken meerdere apparaten bij het doen van een aankoop

22-04-2013



Andere interessante cijfers45% 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

22-04-2013


Ontwerpen voor mobiele apparaten

Meerdere schermformaten

Performance (snelheid)

Touch screen

Locatie

Apparaat afhankelijke functionaliteiten

22-04-2013


http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

De componenten

Formulier

Inloggen/registreren/gebruikersbeheer

Buttons (basisregels)

Productdetailpagina

Zoeken/zoekresultaten

22-04-2013


Formulieren

Formulieren

Lengte

Lay-out

Tekst invoer

22-04-2013


http://static.lukew.com/MobileInput_LukeW.pdf

Formulier - lengte

22-04-2013


22-04-2013


Stappen

22-04-2013


Conversie verhogen

22-04-2013


Veld lengte

22-04-2013


Formulier

Lay-out

22-04-2013


Fout

22-04-2013


Groeperen

22-04-2013


22-04-2013


Formulier op mobiel

22-04-2013


Zoom

22-04-2013


Formulier – lay-out

22-04-2013


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

22-04-2013


Slimme standaard waarden

Gepersonaliseerd

Meest voorkomend

22-04-2013


Validatie

22-04-2013


Actie buttons

22-04-2013


Vormgeving moet overeenkomen met belang

http://static.lukew.com/webforms_lukew.pdf

Ontwikkeld

22-04-2013


Inloggen / registreren / gebruikersbeheer

Social login

22-04-2013


http://janrain.com/blog/social-login-and-social-sharing-trends-across-the-web-for-q2-of-2012/

Hoe het niet moet

22-04-2013


22-04-2013


Ontwikkeld

22-04-2013


Buttons

Buttons

Aangeraden afmeting:9mm/34px

Minimum afmeting:7mm/26px

Minimale tussenruimte:2mm/8px

22-04-2013


Conclusie

Vragen/discussie

Netwinst: Ontwikkeling van standaard Componenten

Technology

Transcript of Netwinst: Ontwikkeling van standaard Componenten