Post on 29-Nov-2014
description
Standaard componenten - deel 2
Marieke van Doesburg
16-9-2013
Realisatie website componenten
Inhoud
Waarom componenten
Componenten
• Vorige keer behandeld:
Formulieren en buttons
Inloggen / Registreren / Gebruikersbeheer
• Zoeken / zoekresultaten
• Productdetailpagina
16-9-2013
Realisatie website componenten
Waarom componenten
Voordelen
• Herbruikbaar
• Tijdsbesparing
• Kwaliteit
Nadelen
• Afstemming doelgroep
16-9-2013
Realisatie website componenten
Verschillende apparaten
16-9-2013
Realisatie website componenten
http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
PC/smartphone/tablet gebruikKlanten gebruiken meerdere apparaten bij het doen van een aankoop
16-9-2013
Realisatie website componenten
http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
De componenten
Formulier & buttons
Inloggen/registreren/gebruikersbeheer
Zoeken/zoekresultaten
Productdetailpagina
16-9-2013
Realisatie website componenten
Responsive
Componenten zijn responsive gemaakt met HTML/CSS
Mobile first / Desktop first
Breekpunten op basis van content
16-9-2013
Realisatie website componenten
Formulieren en buttons
Inloggen / registreren / gebruikersbeheer
Zoeken/zoekresultaten
Goede zoekfunctie belangrijk
Goede zoekfunctie kan bijdragen aan:
• Meer verkopen
• Vaker/uitgebreider gebruik van de website
• Trouwere klanten / behoud van klanten
• Meer tevredenheid over het merk
16-9-2013
Realisatie website componenten
Fout
16-9-2013
Realisatie website componenten
Onderdelen
Invoerveld
Button
Lijst met resultaten (sorteerbaar)
Filters (optioneel)
16-9-2013
Realisatie website componenten
http://www.nngroup.com/articles/top-10-mistakes-web-design/
Zoekveld
Op alle pagina’s zichtbaar
Duidelijk label
Hints hoe in te vullen
Breedte minimaal 25 tekens
Suggesties tonen
Domeinspecifieke woordenboeken
Met behulp van ‘enter’ zoeken starten
Button met duidelijk label
16-9-2013
Realisatie website componenten
Zoekresultaten
Lijst met resultaten
Gebruikte zoekwoorden gemarkeerd
Geen resultaten? Suggesties tonen
Filters
16-9-2013
Realisatie website componenten
Filters
Open of gesloten
Single-select of multi-select
Sliders
Direct resultaten aanpassen
16-9-2013
Realisatie website componenten
Ontwikkeld
Interactieontwerpen
HTML/CSS
16-9-2013
Realisatie website componenten
Productdetailpagina
Aankoopproces
16-9-2013
Realisatie website componenten
Verschillende bezoekers
16-9-2013
Realisatie website componenten
Verschillende onderdelen
Productnaam
Prijs
Bestelbutton
(Meerdere) afbeeldingen
Productbeschrijving
Aantal (input veld)
…
16-9-2013
Realisatie website componenten
Andere optiesNaam fabrikant / merk
Product opties (zoals maat/kleur)
Afmetingen
Voorraad
Beoordelingen
Verlanglijst
Kortingen
Levertijden
16-9-2013
Realisatie website componenten
Verzendkosten
Gerelateerde producten
Bijbehorende producten
Producten die anderen kochten
Waarom voor ‘ons’ kiezen
Social media integratie (delen)
16-9-2013
Realisatie website componenten
Ontwikkeld
Interactieontwerpen
HTML/CSS
16-9-2013
Realisatie website componenten
Vragen?