Standaardisatie componenten presentatie deel 2

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


Waarom componenten

Voordelen

• Herbruikbaar

• Tijdsbesparing

• Kwaliteit

Nadelen

• Afstemming doelgroep

16-9-2013


Verschillende apparaten

16-9-2013


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


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


Responsive

Componenten zijn responsive gemaakt met HTML/CSS

Mobile first / Desktop first

Breekpunten op basis van content

16-9-2013


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


Fout

16-9-2013


Onderdelen

Invoerveld

Button

Lijst met resultaten (sorteerbaar)

Filters (optioneel)

16-9-2013


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


Zoekresultaten

Lijst met resultaten

Gebruikte zoekwoorden gemarkeerd

Geen resultaten? Suggesties tonen

Filters

16-9-2013


Filters

Open of gesloten

Single-select of multi-select

Sliders

Direct resultaten aanpassen

16-9-2013


Ontwikkeld

Interactieontwerpen

HTML/CSS

16-9-2013


Productdetailpagina

Aankoopproces

16-9-2013


Verschillende bezoekers

16-9-2013


Verschillende onderdelen

Productnaam

Prijs

Bestelbutton

(Meerdere) afbeeldingen

Productbeschrijving

Aantal (input veld)

…

16-9-2013


Andere optiesNaam fabrikant / merk

Product opties (zoals maat/kleur)

Afmetingen

Voorraad

Beoordelingen

Verlanglijst

Kortingen

Levertijden

16-9-2013


Verzendkosten

Gerelateerde producten

Bijbehorende producten

Producten die anderen kochten

Waarom voor ‘ons’ kiezen

Social media integratie (delen)

16-9-2013


Ontwikkeld

Interactieontwerpen

HTML/CSS

16-9-2013


Vragen?

Standaardisatie componenten presentatie deel 2

Business

Transcript of Standaardisatie componenten presentatie deel 2