Nadat is bepaald welke inhoud, elementen en functionaliteiten er op de website dienen te worden geplaatst, is het noodzaak om te zorgen dat deze zaken zorgvuldig worden neergezet. Elementen kunnen niet lukraak binnen een ontwerp worden geplaatst. Vanuit functioneel oogpunt zijn er standaarden waar het ontwerp bij voorkeur aan dient te voldoen en kan er bovendien een bepaalde hiërarchie worden gecreëerd binnen het ontwerp.
Opzet van het stramien
Om te zorgen dat de website er geordend uit komt te zien en de bezoeker tijdens het bezoek aan de pagina in een ‘rustige’ omgeving terecht komt, dient er een stramien te worden opgezet. Hoe dat stramien wordt ingericht is afhankelijk van diverse factoren zoals de hoeveelheid te plaatsen content en elementen en de omvang van de diepte van de website (moeten er bijvoorbeeld meerdere navigatie-blokken worden opgenomen). Belangrijk is dat het stramien consistent wordt doorgevoerd op alle pagina’s. Zodra iemand gewend is geraakt aan een opzet is het niet de bedoeling dat bij een bezoek aan de volgende pagina er een beroep moet worden gedaan op zijn aanpassingsvermogen. Een aantal voorbeelden van mogelijke stramienen zien we terug bij de volgende website’s.
Adobe maakt voornamelijk gebruik van een horizontaal stramien.
Bol.com maakt via een horizontaal stamien verticale kaders (kolommen)
Een complexer stramien zien we terug bij de website van het Algemeen Dagblad
Je kunt het opzetten van een stramien vergelijken met de inrichting van een stellage in een winkel. De producten die in de winkel moeten komen zullen niet in een grote bak worden aangeboden maar zullen netjes in schappen worden geëtaleerd.
Plaatsing van de elementen
De producten zullen ook niet door de vakkenvuller bij willekeur in de schappen worden neergezet, maar de producten die prominent naar voren dienen te worden gebracht zullen op ooghoogte komen. Producten die minder vaak voorkomen zullen onderin de stellage worden geplaatst. Dit is vergelijkbaar met de wijze waarop de elementen binnen een website worden geplaatst. Normen die zijn ingeburgerd zijn bijvoorbeeld de plaatsing van het logo. Deze wordt eigenlijk altijd bovenaan neergezet. Dit geld ook voor het zoekveld. De bezoeker van de website is gewend om een zoekkader bovenin de website te hebben om snel een trefwoord in te typen als hij “de weg kwijt” is. De website van de NCRV heeft het zoekveld helemaal onderin geplaatst. Hierdoor dient er eerst te worden gespeurd naar de locatie van dit element. Dit is dus een voorbeeld van hoe het niet moet.
Praktijkvoorbeeld BCC
Om een indicatie te krijgen hoe zaken in de praktijk worden uitgevoerd bekijken we aan de hand van de website van BCC een aantal richtlijnen.
Stramien
We zien een duidelijk stramien. De pagina wordt eerst horizontaal opgebouwd. Vervolgens worden er drie kolommen weergegeven waarin de middelste kolom het breedst is om ruimte te maken voor de basisinhoud van de website. We zien dat het stramien consistent wordt doorgevoerd binnen alle pagina’s maar dat de inhoud van de structuur kan verschillen.
Hiërarchie
Er is een duidelijke volgorde van belang van de elementen te zien. Zo zien we dat er een aktiekader (1) is ingeruimd over de volledige breedte van de website. Hiermee wordt de bezoeker meteen bekend gemaakt met een nieuw product of aantrekkelijke Aktie. Vervolgens zien we het logo (2) op de bekende plaats, linksboven. Een horizontale navigatie (3) die ingedeeld is in productcategorieën is ook prominent te vinden en deze wordt ondersteund door het zoekvenster (4). Dit is een handige combinatie. Als iemand niet meteen ziet binnen welke categorie het product zich bevindt waar de persoon naar opzoek is kan meteen de zoekfunctie worden geraadpleegd. Het kader van de basisinhoud (5) is groot waardoor er veel content geplaatst kan worden. De twee zijkolommen (6 en 7) zijn het minst prominent waar een linker colom altijd nog meer opvalt dan een rechter. De rechter kolom wordt dan ook vaak gebruikt voor het plaatsen van additionele informatie over een product.
Aan de slag
Om tot een heldere grafische structuur te komen kan de volgende checklist worden gebruikt:
- Inventarisatie van de te plaatsen elementen
Kijk welke elementen er dienen te worden geplaatst: Logo, zoekveld, navigatie, aktiekaders, tekstkaders etc. - Breng hiërarchie aan in de elementen
Sommige elementen zijn belangrijker dan anderen. Zorg ervoor dat je bepaald welke elementen meer van belang zijn dan andere elementen. - Heb respect voor standaarden
Ga het logo niet onderin de pagina plaatsen. Dit is niet gebruikelijk en bezoekers van de website zullen verward raken. Plaats daarom het logo en het zoekveld altijd bovenin. Bovendien moet de navigatie ook meteen zichtbaar zijn. - Teken stramienen
Ga met een potlood aan de slag en teken stramienen zoals je denk dat ze handig zijn. Teken vervolgens de elementen op de positie die ideaal is. - Digitaliseer het stramien
Het stramien kan worden neergezet binnen je software. Om het concrete formaat te bepalen is de template van het artikel over paginaformaat een handig beginpunt. Hierover heen kunnen de lijnen van het stramien worden geplaatst.
Conclusie
Een stramien geeft de gebruiker houvast, rust en herkenning. De pagina’s worden (samen met de uiteindelijke vormgeving) één geheel. De opbouw van de website is te vergelijken met de inrichting van een winkel. De stellages moeten worden opgezet en ingericht. Belangrijke producten moeten worden geplaatst op prominente plaatsen en gangpaden onderling moeten overeenkomen. Prijskaartjes moeten immer ook op dezelfde plaats worden neergezet.
De vergelijking van een website en een winkel is misschien een beetje vergezocht. Hoe zou jij het opzetten van een stramien omschrijven?