Page 1 Created with Sketch.

Alle berichten

Shape Created with Sketch. Artikels

Het skelet van jouw webshop

Denk eens over jouw webshop alsof het jouw huis is dat je vanaf de grond gaat opbouwen. Waar zou je allemaal aan denken? Natuurlijk moet het huis solide en veilig zijn. Je wil liefst ook een mooi huis waar leuke spullen in staan. Maar sta je ook stil bij de indeling van jouw huis? Hoe deel je het in zodat je optimaal van alle ruimtes kan genieten? Niets is zo vervelend als een huis waar de kamers niet logisch zijn ingedeeld of waar de nodige voorzieningen ontbreken. Met jouw webshop is het niet anders. De basis is een goede structuur. Die bepaalt bijna alle overige onderdelen van jouw webshop. Het leggen van een goede basis is daarom essentieel!

Wireframing

Nadenken over de structuur doe je tijdens de ontwikkeling. Je kan daarvoor gebruik maken van wireframes. Wireframing is het proces waarin je de architectuur van jouw webshop opbouwt aan de hand van een soort bouwtekening. Het is een onopgesmukt prototype zonder content, zodat de structuur en functionaliteit naar voren komen. Pas wanneer je helemaal tevreden bent over de structuur van elke pagina mag je starten met het grafisch ontwerp.

Voordelen wireframing

Je voorkomt dat de vorm van jouw webshop de inhoud en functionaliteit bepaalt.; Je vermijdt fundamentele aanpasingen in een later proces. Dat is vaak een kostbaar proces.; Je kan gemakkelijk overleggen met programmeurs, vormgevers en content marketeers.; Je zorgt voor een duidelijke verdeling van tekst en beeld.; Je kan al jouw wilde ideeën testen in de wireframes.;

Wireframe Tools

Er zijn verschillende, al dan niet betalende, online tools waarmee je eenvoudig wireframes kan maken.
Hieronder enkele voorbeelden:

- Balsamiq mockups: www.balsamiq.com
- Axure: www.axure.com
- Mockingbird: www.gomockingbird.com
- Pidoco: www.pidoco.com

 

Orde op je webshop

Op een webshop is er vaak een boomstructuur waarlangs alle producten geordend worden. Dit zorgt voor een duidelijke structuur, overzicht en orde op jouw webshop. In het vakjargon noemen we die duidelijke orde ook de 'taxonomie'. 

- Steeds meer webshops zorgen ervoor dat er één grote dropdown van vertakkingen vanuit de navigatiebalk vertrek. Dit zorgt voor een duidelijk en makkelijk overzicht.
- Faced navigation: faceted search houdt in dat er aan de linkerzijde op jouw webshop een kolom aanwezig is met een duidelijk overzicht van alle categorieën. Dit zorgt voor een grotere gebruiksvriendelijkheid.
- Keuzes maken: veel verschillende producten op jouw webshop kan ook leiden tot keuzestress. Gelukkig bestaan er heel wat keuzetools. Een wizard laat je bezoeker/klant een lijst met vragen doorlopen. Achteraf volgt een advies.
- Een smartlist is een eenvoudige korte lijst die de bezoeker helpt bij het maken van een keuze. Voorbeelden van smartlists: “Meest gekocht” of “Beste producten”.

Op de webshop van Colora zie je duidelijk het gebruik van een dropdown menu en faceted search.

Tips

Houd het eenvoudig

maak enkel nuttige en zeker niet te veel categorieën aan.

Gebruik

test jouw ontwerp op voorhand met een wireframe-tool.

De knop ‘meer’

kan handig zijn bij te lange lijsten in je taxonomie.

Hiërarchische lijst

Maak een hiërarchische lijst volgens het belang van de categorieën.

Polyhiërarchie

één item toewijzen aan meerdere facetten.

Gegevens

Maak gegevens zoals kleur compact want klanten maken ook visuele keuzes.