Onze blog

Architecture plan voor je website of webshop

Je staat op het punt om te gaan starten met het opzetten van je eigen website en/of webshop. Het kan zijn dat je niet alleen werkt (denk hierbij aan een webshop). De partijen waar je dan mee samenwerkt leveren dan de volgende zaken aan:

– Logo
– Kleurenstandaard voor huisstijl
– Foto’s van hun producten die jij gaat verkopen
– En… niet te vergeten teksten van het bedrijf zelf.

Dat zijn nogal wat verschillende zaken en het is aan jou om die te ordenen. Ik hoor je al zeggen; ‘dat is een hoop werk en hoe krijg ik dat voor elkaar?’ Nou dat zal ik je gaan vertellen.

Het plan

Voor je start met het maken van je eigen bedrijfswebsite en/of webshop is het van belang om te weten hoe jouw klant denkt en wat hij wil. Bedenk maar eens wat jij graag wilt wanneer jij op internet aan het zoeken bent naar een product, dienst of gewoon informatie. Eigenschappen van je toekomstige klanten die je meeneemt in het plan:

– Gaan voor kwaliteit en betrouwbaarheid
– Scannen de tekst (zit er iets tussen waar ik naar opzoek ben?)
– Willen direct resultaat
– Willen absoluut de controle houden

Zeg nou zelf. Als je bovenstaande punten ziet kun je hierin jezelf ook wel herkennen. Nou ik wel hoor. Ik wil niet eerst zoveel keer moeten klikken voor ik op de pagina, informatie, of het product kom waar ik naar opzoek ben.

Er zijn drie verschillende patronen van hoe een klant en/of bezoeker kijkt. Deze ga ik hieronder even toelichten:

– Gutenbergdiagram
– Z-patroon
– F-patroon

Glutenbergdiagram:

Bij dit diagram gaat het oog van links naar rechts op de pagina. Elke keer wanneer je naar beneden gaat sla je het eerste stukje links over. Dit diagram is een veel gebruikte manier van lezen van bijv. de krant of lappen met tekst.

Z- patroon:

Hoe kan het ook anders? Bij de Z- Patroon lees je in de vorm van een Z. Kort gezegd: je begint linksboven met lezen en eindigt rechtsonder. Dit patroon is geschikt voor eenvoudige ontwerpenGlutenberg diagram 2 waarbij maar weinig teksten worden gebruikt.

F- Patroon:

Ook bij het F- patroon beging je linksboven te lezen en beweegt het oog van horizontaal naar rechts. Hoe lager je komt bij een stuk tekst hoe minder naar rechts wordt gekeken. Daarom is het ergGlutenberg diagram 3 belangrijk om ervoor te zorgen dat de belangrijkste informatie linksboven moet komen. Dat is wat het oog namelijk het eerste ziet!

Architectuurplan ontwerpen

Bij een architectuurplan doorloop je een drietal stappen, namelijk:

– Maken van een kaartenbak
– Opstellen van een hiërarchisch model
– De Wireframes

Maken van een kaartenbak

Een kaartenbak maken is eigenlijk het opschrijven van al je pagina’s die je op je website en/of webshop wilt maken. Deze schrijf je allemaal op verschillende kaarten. Om te zorgen dat je het op de juiste manier kunt gaan invullen kun je aan mensen om je heen vragen om deze kaarten op een voor hun logische volgorde te leggen. Op deze manier krijg je voor jezelf inzicht op de volgende punten:

– Welke pagina waar moet komen
– Hoe verschillende gebruikers jouw website en/of webshop zien
– Wat jezelf anders zou kunnen doen (vooral door de feedback van anderen)

Opstellen van hiërarchisch model

Een hiërarchisch model is niks anders dan het resultaat van de kaartenbak die je hebt gemaakt. Door een hiërarchisch model krijg je inzicht in hoe groot de website en/of webshop gaat worden en wat het doel is van elke pagina.

De Wireframes

Een wireframe is het ontwerp van de lay-out van de webpagina. Op deze manier kun je de opzet visueel krijgen. Op welke manier maak je een goede wireframe? Dat zal ik in de volgende stappen gaan uitleggen.

Stap 1: Verzamel informatie:

Bij deze stap heb je de resultaten van het hiërarchisch model dat is ontstaan vanuit de kaartenbak. De volgende punten zijn hierbij belangrijk.

– Wat zijn de hoofdelementen van de website?
– Welke pagina’s moeten in de navigatie?
– Welke afbeeldingen worden gebruikt?
– Welke tekst moet op de pagina?

Stap 2. Onderzoek mogelijkheden:

Kijk naar de mogelijkheden van de opbouw van je website en/of webshop. Verplaats je hierin wel in je toekomstige klant. Hierbij kun je ook gebruik maken van andere websites en/of webshops om te kijken wat je zelf prettig vindt. Stel hierbij jezelf de vraag: wat vind ik hier zo prettig aan? Dit kan je helpen met het ontwerp van je eigen website en/of webshop.

Stap 3. Schets je wireframe:

Hierbij gaat het om de structuur en functionaliteit van de verschillende pagina’s.  De stap van de echte vormgeving met alle toeters en bellen komt later. Het gaat nu alleen om de grove lijn van de website en/of webshop.

Stap 4. Controleer de usability:

Ik denk dat ik over punt 4 niet heel veel hoef te zeggen. Het resultaat moet in het kort een overzicht zijn van alle functionaliteiten, de structuur en indeling van de site. Je kunt hierbij natuurlijk altijd aan iemand anders vragen om er eens met een frisse blik naar te kijken. Want twee weten meer dan een!

Usability

Usability betekent niets anders dan het kijken naar verschillende aspecten van een website en/of webshop. De volgende punten zijn hierbij het belangrijkste.

– Inhoud:

Alle gegevens die je verwerkt (algemeen en basis), of de veiligheid van de klant is gewaarborgd, informatie over jezelf (wie ben je, de klant moet weten wie de verkoper is) enz. Zorg er vooral voor dat je voldoet aan de eisen van de Thuiswinkel Brancheorganisatie of andere keurmerkeisen (deze zijn er niet voor niets).

– Homepage:

Zie de homepage als het uiterlijk van een knap persoon. Als  je bent aangetrokken door de buitenkant wil je ook de binnenkant leren kennen. En zo werkt het ook bij je klant. De homepage is de eerste pagina waar mensen op komen. Daarom is het belangrijk om te zorgen dat deze overzichtelijk is, mooi is en aan de verwachting van je klant voldoet.

– Navigatie:

Navigatie is niets minder dan het makkelijk op de juiste plek komen. Als een klant bij jou op de website en/of webshop komt kan hij dan makkelijk op de juiste pagina komen? Mocht je hier over twijfelen vraag dan eens een vriend of vriendin om dit te doen en jouw hierover feedback te geven.

Plaats een reactie

Door de site te blijven gebruiken, gaat u akkoord met het gebruik van cookies. meer informatie

De cookie-instellingen op deze website zijn ingesteld op 'toestaan cookies "om u de beste surfervaring mogelijk. Als u doorgaat met deze website te gebruiken zonder het wijzigen van uw cookie-instellingen of u klikt op "Accepteren" hieronder dan bent u akkoord met deze instellingen.

Sluiten