Hoe design patterns je website makkelijk te gebruiken maken

Je hebt het vast wel eens ervaren: je komt op een website en je hebt geen idee hoe je op de website kan navigeren en waar de voor jou relevante informatie staat. Je bent dan meer bezig met het uitzoeken hoe de website werkt dan met het lezen of bekijken van de inhoud. Uiteindelijk frustreert het je zo dat je ergens anders op zoek gaat. Als ontwerper frustreert mij dit ook enorm, want het betekent dat de website niet goed ontworpen is!

Je wilt voorkomen dat dit ook op de website van jouw bedrijf gebeurt. Maar hoe ontwerp je eigenlijk een website die gemakkelijk te gebruiken is? Hier zijn veel methoden voor, maar de makkelijkste en meest efficiënte methode om mee aan de slag te gaan is design patterns, ofwel ontwerppatronen.

Design patterns

Design patterns zijn gestandaardiseerde onderdelen waar de interface uit bestaat. Deze onderdelen komen qua vorm en functie overeen met andere interfaces en zijn consistent binnen jouw website.

Maar je vraagt je misschien af: is dit niet enkel relevant voor de ontwerper? Het antwoord is nee. Juist projectmanagers, marketingmanagers en contentstrategen kennen als geen ander hun doelgroep en weten heel goed wat er op de website van het bedrijf te doen en te vinden moet zijn. Kennis over het ontwerpproces van een website kan je helpen bij het bepalen wat jouw wensen voor het ontwerp zijn. Ik nodig je uit voor een kijkje in de keuken van de ontwerper - misschien inspireert het je!

Bouwstenen van je website

Je kunt design patterns zien als de legostenen waarmee je een website bouwt. Je hebt een hoop bouwstenen ter beschikking: bijv. een formulierveld, checkbox, navigatiebalk, testimonial, etc. Een goede fundering voor je bouwwerk is belangrijk. Denk hierbij aan de informatiestructuur, die je als de basisplaat kunt zien. Door de juiste stenen op de juiste plek neer te zetten krijg je een gebruiksvriendelijke website. En door de juiste kleuren stenen te kiezen wordt het ook nog eens een mooi geheel!

Met dit metafoor kun je je voorstellen dat er meerdere typen design patterns zijn. Zo heb je macropatronen; denk hierbij aan check-outsystemen, navigatie in de header, een afbeeldingscarrousel of een overzichtspagina. Daartegenover staan micropatronen; een checkbox, CTA-knop, invoerveld of videospeler zijn hier enkele voorbeelden van. Patronen kunnen ook genest worden. Zo kan het micropatroon ‘invoerveld’ onderdeel zijn van het macropatroon ‘formulier’. We maken dit onderscheid omdat niet alle ontwerpproblemen van dezelfde schaal zijn.

De voordelen

Door design patterns correct toe te passen genieten jij en je bezoekers van en aantal voordelen:

1. Herkenbaarheid. Gebruikers kunnen zich makkelijker oriënteren als je website lijkt op wat bezoekers normaal gewend zijn.
2. Herbruikbaarheid. De ontwerper kan sneller nieuwe interface-onderdelen ontwerpen die bestaan uit al aanwezige elementen.
3. Beste oplossingen voor het probleem. Door de juiste patronen toe te passen los je ontwerpproblemen op de meest efficiënte manier op. Zo kan een bezoeker makkelijker en fijner gebruik maken van je site en behaal jij je businessdoelen.

De juiste patterns kiezen

Alle webdesigners passen design patterns toe omdat iedereen die computers gebruikt al onbewust bekend is met design patterns. Zo weet ook jij wat een onderstreepte blauwe tekst doet, en herken je knoppen aan het vlak achter de tekst en de positie die het inneemt op een pagina. Het is echter belangrijk om goed te begrijpen hoe deze design patterns werken en wanneer je welk ontwerppatroon moet toepassen.

1. Wat is het probleem dat opgelost moet worden? Een interface-ontwerp is in principe een oplossing voor een serie aan problemen voor gebruiker en beheerder.
2. Welke passende ontwerppatronen zouden dit probleem oplossen? Onderzoek welke ontwerppatronen worden toegepast om soortgelijke problemen op te lossen en selecteer de beste.
3. Hoe past het ontwerppatroon binnen de hiërarchie van de interface? Bedenk hoe het ontwerppatroon binnen je algehele ontwerp geplaatst wordt en functioneert. Als het belangrijk is zul je het element prominenter naar voren laten komen. En als het dicht bij andere design patterns gebruikt wordt, communiceer je dat er een relatie tussen de patronen is.
4. Hoe ziet het ontwerppatroon binnen deze interface eruit? Geef het patroon vormgeving die past binnen het stramien van je ontwerp. Zo zorg je voor consistentie en herkenbaarheid.

Design patterns vinden

Je kunt op drie manieren design patterns vinden om toe te passen:

1. Eigen ervaring. Bedenk met welke interface-onderdelen je bekend bent en welke vaak toegepast worden. Waarschijnlijk ken je er al een hoop! Controleer wel of je het design pattern goed begrijpt, bijvoorbeeld met de volgende methode:
2. Patronenbibliotheken. Er zijn meerdere bibliotheken te vinden waarin patronen getoond worden en waar je informatie kunt vinden over het patroon. Het voordeel van deze bibliotheken is dat je een duidelijk overzicht krijgt van de meest toegepaste design patterns. Hier zijn een aantal patronenbibliotheken:
3. 1. https://ui-patterns.com/
   2. https://www.checklist.design/
   3. https://littlebigdetails.com/
   4. https://goodui.org/
4. Vergelijkbare websites. Je kunt altijd bij de concurrentie of op inspiratiesites kijken welke design patterns worden toegepast. Analyseer deze voorbeelden om de patronen te vinden. Je kunt op de volgende sites veel toegepaste design patterns vinden:
5. 1. https://screenlane.com/
   2. https://www.reallygoodux.io/
   3. https://www.siteinspire.com/
   4. https://www.behance.net/
   5. https://www.awwwards.com/
   6. https://dribbble.com/

Design patterns in het ontwikkelproces

Design patterns komen eigenlijk uit de wereld van de softwaredevelopment. Tegenwoordig wordt het steeds belangrijker om goed na te denken over wat en waarom je functionaliteiten voor een programma of website ontwerpt. Ontwerpers hebben gemerkt dat de voordelen van het toepassen van design patterns groot zijn. Software-ontwikkelaars houden van ontwerppatronen omdat ze code kunnen hergebruiken. Dit verbetert zowel de ontwikkelsnelheid als de stabiliteit van je website. Het ontwerp kan verbeterd worden door met de ontwikkelaars van tevoren af te stemmen tot welke design patterns je toegang hebt.

Documenteren

Het is van belang dat je de gebruikte design patterns en de vorm hiervan documenteert zodat marketingmanagers, contentstrategen, ontwikkelaars en ontwerpers tot dezelfde informatie toegang hebben.

Dit kun je doen door een design system op te zetten. Dit is een specificatie waarin je de belangrijkste design patterns en stijlelementen opsomt. Je baseert dit op de huisstijl van je merk en de meest standaard design patterns die je verwacht te gebruiken op je site. Het voordeel van een design system is dat design patterns en de vormgeving hiervan consequent worden toegepast.

Adobe XD en Figma - de twee beste en populairste webdesignprogramma's - hebben standaardfunctionaliteiten om dit te faciliteren in het ontwerpbestand.

Een duidelijke en makkelijk te gebruiken website

We kunnen dus stellen dat het toepassen van design patterns ervoor zorgt dat je website makkelijker te gebruiken is. Maar er zijn nog meer zaken waar je rekening mee moet houden; denk aan kleurgebruik, toegankelijkheid en dat je website goed werkt op alle apparaten.

Ben je enthousiast geworden om je website te verbeteren of zelfs te laten herontwerpen? Bij Emble kunnen we niet wachten om erachter te komen welke uitdaging je voor ons klaar hebt staan! Neem gerust contact met ons op om je te laten informeren over de mogelijkheden.