Page content

article content

Zelf een gebruiksvriendelijke website maken?

Een gebruiksvriendelijke website sluit perfect aan bij de bezoeker en bevat relevante content. De bezoeker begrijpt de website volledig en kan precies vinden waar hij naar op zoek is.

Juist… Voor iedere bezoeker maar een losse website maken dan?!

Nee hoor, dat is zeker niet nodig! 😉 Ik heb een lijst samengesteld van punten waar jij rekening mee moet houden bij het maken van jouw website. Met deze lijst maak je jouw website gebruiksvriendelijk en maak je vriendjes met Google & jouw gebruikers.

Ben je er klaar voor..? (intro overslaan?) Deze punten ga ik bespreken:

Waar moet ik op letten bij het maken van een gebruiksvriendelijke website?

Een gebruiksvriendelijke website moet aan een aantal aspecten voldoen. Er is hierbij geen ‘one fits all’ antwoord helaas, maar de gebruiker moet centraal staan. Wanneer de gebruiker snel kan vinden wat hij zoekt en converteert, kun je in mijn ogen wel spreken van een gebruiksvriendelijke website. Ik geef je vast wat handvatten waarmee jij een goede website maakt. 😉

Maak duidelijk wat jij doet en te bieden hebt

Niets is vervelender voor een bezoeker, dan moeten zoeken op een website naar wat jij doet. Kom snel to-the-point en vertel bezoekers wat ze aan jou of jouw website hebben. Dit is niet altijd even makkelijk.

Wat moet je bijvoorbeeld doen als je meerdere diensten te bieden hebt? Open jouw website dan met het belangrijkste onderdeel en bespreek de overige diensten onder de header. Vervolgens geef je jouw diensten een eigen pagina binnen de website.

simpel en duidelijk voorbeeld van de opening van een website

Een simpel en duidelijk voorbeeld van de opening van een website

Op deze manier vertel je direct wat je doet en geef je bezoekers de mogelijkheid om verder te lezen op een andere pagina. Je houdt het overzichtelijk en de bezoeker is maar één klik verwijdert van hetgeen dat ze willen zien.

Kill your darlings, maar wel tijdelijk. 😉

Ik heb het nu over diensten gehad, maar dat is natuurlijk slechts een voorbeeld. Het is gewoon belangrijk dat je jezelf of jouw ‘core business’ direct laat zien. Bedenk dus voor je een website gaat maken, wat het doel van jouw website wordt en wat de belangrijkste informatie is.

Maak een duidelijk navigatie

Ken je dat gevoel? Je wilt ergens naartoe rijden, maar je hebt geen idee welke kant je op moet? Dat is op een website net zo vervelend. Het is daarom belangrijk dat bezoekers de weg weten of snel kunnen vinden op jouw website. Mede hierom is het belangrijk dat je snel duidelijk maakt wat jij doet.

Maar het is ook belangrijk om een duidelijk menu te hebben, zodat jouw bezoekers snel kunnen navigeren naar de content waarnaar ze op zoek zijn.

slechte navigatie website voorbeeld

Zo moet het dus niet 😉

Bij de bovenstaande afbeelding heb je geen idee wat het primaire menu is, maar ook niet wat er allemaal klikbaar is. Er was een stuk minder klikbaar dan ik dacht. Dit is de link overigens.

Hoe moet het dan wel? Nou bijvoorbeeld zo:
voorbeeld van simpele en duidelijke navigatie

Horizontaal menu vs Verticaal menu: welke is beter?

Als je zelf een website gaat maken, kun je ervoor kiezen een horizontaal of verticaal menu te gebruiken. Maar welke moet jij gebruiken? Welke is beter? Simpel: geen van beiden! Huh?! Beide menustijlen zijn goed. Het ligt er maar net aan wat je mooier vind en wat beter bij jouw design en structuur past. Ik zal wat punten op een rijtje zetten.

De voordelen van een horizontaal menu

  • Neemt weinig ruimte in.
  • Bezoekers zijn horizontale menu’s op gewend op computer.
  • Het menu kan mee scrollen en blijft dan altijd zichtbaar (fixed menu).
  • Geeft de mogelijkheid tot een drop-down menu.

De nadelen van een horizontaal menu

  • Beperkte ruimte voor links.
  • Een drop-down menu valt vaak over content heen.
horizontaal menu - website maken voorbeeld

Het horizontale menu zoals we het gewend zijn

De voordelen van een verticaal menu

  • Er is meer ruimte voor links en dus meer menu-items.
  • Je kunt het menu verbergen achter een hamburger icoon, het veel gebruikte icoon bij mobiele websites.
  • Een fixed menu is mogelijk

De nadelen van een verticaal menu

  • Je gebruikt snel teveel links wat een bezoeker kan afleiden.
  • Neemt superveel ruimte in als je het menu niet achter een icoontje verstopt. Tenzij je het op een hele goede manier gebruikt, zoals in het voorbeeld.
verticaal menu - website maken voorbeeld

Een goed voorbeeld van het verticale menu

Hoewel verticale menu’s heel mooi en fancy kunnen zijn, ben ik meer fan van horizontale menu’s. Voor mobiel geldt: gebruik een verticaal menu verstopt achter een hamburger icoon.

Keuzestress vermijden en de bezoeker aansturen

Vaak denk je: “hoe meer ik mijn bezoekers geef, hoe beter!” Toch? Net als dat je in een supermarkt uit 6 soorten ketchup kunt kiezen. Maar hoe moet jij nou de lekkerste kiezen? Meer keuzes = minder resultaat! Denk hieraan bij het bouwen van jouw website.

Gelukkig heeft een website net als een supermarkt maar beperkte ruimte en kun je maar een deel tegelijk zien. Door de schappen in te delen en de belangrijkste producten op ooghoogte te zetten, bepaalt de supermarkt voor een deel wat jij daar koopt. Zo kun jij bezoekers ook aansturen te doen wat jij wilt. Als je ze veel keuzes geeft, wordt kiezen moeilijk (keuzestress) en zal de bezoeker jouw website waarschijnlijk verlaten.

teveel keuzes voorbeeld met deuren

Hoe maak jij nu de juiste keuze?

Daarom moet jij de keuze voor de bezoeker maken. Geef ze slechts één of twee opties en begeleid ze regelrecht naar jouw doel. Zorg ervoor dat een bezoeker niet hoeft na te denken en elimineer alle afleiding.

Een duidelijk design & herkenbaarheid: steel van de groten

Beter goed gestolen dan slecht bedacht. Het is echt zo.. Kijk maar eens naar de grote partijen om je heen. Ineens zie je dan dat een aantal webdesign trends terugkomen. Bepaalde kleurstellingen, lettertypes, lettergroottes en vlakverdelingen. Veel websites (en apps) zijn natuurlijk gemaakt om vriendjes te maken met Google. Kortom, ze worden zo ingericht dat Google de website begrijpt en positief waardeert. Dit is dan ook niet per se heel moeilijk met Google’s Material Design Guide. Daarin staan alle standaarden voor webdesign en app-design volgens de richtlijnen van werelds grootste zoekmachine. Zo makkelijk kan een website maken zijn. De onderstaande video geeft je een beeld van wat je in deze geweldige handleiding tegenkomt.

Een aantal elementen zie je ook terug op mijn website. Zo maak ik gebruik van Google Cards, bewegende elementen en specifieke schaduwen & typografie. Heel fijn, want dit zit allemaal in het Phoenix Systeem waar ik mee werk.

Als je de Material Design Guide even doorleest, wordt het al een stuk makkelijker om zelf een website te maken die gebruiksvriendelijk is.

Maak je website persoonlijk

Wanneer iemand op zoek is naar iets, is diegene misschien ook benieuwd naar het verhaal en de persoon achter een website. Waarom? Er zijn vele websites die hetzelfde aanbieden, maar iedere website heeft een eigen verhaal. Door een website persoonlijk te maken, kun je vertrouwen opbouwen. Je kunt bezoekers het gevoel geven dat je begrijpt wat zij zoeken en dat jij ze kunt helpen.

Je kunt jezelf of het verhaal van jouw website laten zien met afbeeldingen en natuurlijk tekst over jezelf. Onthoudt wel:

Een afbeelding zegt meer dan 1000 woorden!

Een afgezaagde quote, maar 100% waar. 😉

Waarom is vertrouwen winnen zo belangrijk voor een website? Bezoekers komen vaker terug als ze een website vertrouwen. Vertrouwen is dus van belang voor de lange termijn.

maak je website persoonlijk

SEO & Social = SEOcial

Bij een gebruiksvriendelijke website hoort ook een stukje vindbaarheid. Je hebt tenslotte gebruikers nodig om gebruiksvriendelijk te zijn. 😉

Daar kan SEOcial bij helpen. De combinatie van SEO en social media. Hiermee doel ik op de waarde van social media voor SEO. Iedere keer dat jij een pagina of blog op social media deelt, creëer je een backlink. En dit is belangrijk voor jouw vindbaarheid.

Kortom, maak jouw content deelbaar!

Sharing is Caring 🙂

Hoe maak je content op een website klaar om gedeeld te worden op social media?

Door het gebruik van social media tags kun je in de code aangeven hoe de link die gedeelt wordt eruit gaat zien. Je geeft hiermee aan:

  • Wat de titel van de pagina is die wordt gedeeld
  • De afbeelding die bij de link gedeeld wordt
  • De meta description van de link
  • De URL van de link
  • Het type content dat wordt gedeeld
  • De taal van de content

De code hiervan ziet er zo uit:

social media tags voorbeeld - open graph code

Zo zien social media tags (Open Graph) eruit

Dit ziet er allemaal heel ingewikkeld uit (valt best mee!), maar dit is dan ook alleen nuttig voor webdesigners die met ‘de hand’ programmeren. Old School in kladblok ofzo. Let erop dat je deze code in de head van de code plaatst tijdens het maken van jouw website.

Gebruik je WordPress (of een ander groot CMS)? Dan is de Yoast SEO plugin to the rescue. Met deze plugin kun je alle gegevens zelf simpel invoeren. Zo ziet de plugin eruit:

yoast plugin start - voorbeeld met sidekickmusic.nl

De SEO plugin van Yoast – het startscherm

Als je vervolgens op het ‘share’ icoontje klikt, krijg je de mogelijkheid om de gegevens in te vullen voor het delen van content op social media.

yoast plugin sharing - voorbeeld met sidekickmusic.nl

De SEO plugin van Yoast – delen op social media

Je ziet alleen een Facebook en Twitter icoontje, maar deze informatie wordt ook door andere social media kanalen opgepikt!

Vul deze gegevens in en voila. Jouw pagina’s zijn perfect deelbaar op social media. Laat die backlinks maar komen!

Maak je gebruik van Phoenix? Top! Dan is de Yoast SEO plugin al geïnstalleerd en kun je bij content pagina’s, zoals blogs, de gegevens invullen zoals ik net liet zien. Bij de normale ‘Pages’ kun je bij ‘settings’ de titel etc invullen.

Leesbaarheid van content

Leesbare content houdt in dat de teksten die jij schrijft simpel en duidelijk zijn. Er moet een duidelijke lijn in zitten en het is belangrijk dat bezoekers begrijpen waar je over schrijft. De leesbaarheid van content is zo belangrijk geworden, doordat Google content is gaan begrijpen. Dat betekent dat Google ook begrijpt of bezoekers de content goed kunnen lezen of niet. Hoe weet je of jouw content goed leesbaar is? Je kunt gebruik maken van verschillende tests. Persoonlijk vind ik de deze tool erg nuttig. Voor de WordPress gebruikers is er natuurlijk de Yoast SEO plugin die veel informatie geeft.

Met deze tips schrijf jij voortaan leesbare content:

  • Maak gebruik van korte zinnen. Lees ze eens hardop om te kijken of ze lekker lopen.
  • Schrijf korte alinea’s van maximaal 200 woorden. Zo blijven teksten overzichtelijk en geef je de lezers een beetje ‘ademruimte’.
  • Schrijf actief.
  • Zorg bij blogs voor voldoende afwisseling met media, zoals afbeeldingen of video’s.
  • Voorkom keyword spammen. Gebruik keywords dus niet te vaak!

Wil jij meer weten over leesbare content? Kijk dan eens naar deze blog van Yoast.com. Het is wel Engelstalig.

Kies een CMS dat bij jou past

CMS staat voor Content Management System. Dit is het systeem waarmee jij je website kunt ontwikkelen en onderhouden. Er zijn verschillende CMS systemen die veel gebruikt worden, zoals WordPress, Magento (webshop) en Drupal. Daarnaast kan er een ‘custom’ CMS worden gebouwd door een webdesigner. Maar welk CMS kun jij gebruiken om zelf jouw website te maken of te onderhouden? Hoe bepaal je dat?

Dat hangt af van het doel van de website en de mate waarin jij zelf de controle over de website wilt.

Wordt het een standaard blog website of wil je geautomatiseerde persoonlijke content creëren en producten verkopen?

Besteed je onderhoud uit of ben jij dagelijks met jouw website bezig?

Wordt het een website met simpele of complexe functionaliteiten?

Dat zijn vragen die jij jezelf kunt stellen vóór je een CMS kiest. In veel gevallen kun je met WordPress goed uit de voeten. Het is relatief simpel om mee te werken en er zijn duizenden thema’s die je kunt installeren met ieder zijn eigen functionaliteiten. De website is met WordPress in 99,9% van de gevallen responsive en werkt dus op alle apparaten. Wil je met WordPress aan de slag en heb je hulp nodig? Geen probleem, ik help je graag. 😉

wordpress csm backend voorbeeld

Zo ziet de achterkant van WordPress eruit.

Wil je hele complexe functies of iets heel specifieks? Dan kun je de website wellicht laten bouwen en er een custom CMS aan laten koppelen. Een eigen CMS klinkt heel cool, maar is vaak kostbaar en overbodig.

Deze website heb ik zelf gemaakt met Phoenix, een soort van Lego voor volwassenen haha. 😉 Het draait op WordPress, maar is wel custom gemaakt. Super simpel in gebruik, omdat je visueel kunt bouwen. Content toevoegen is zo gebeurd en je kunt interne links automatiseren om een spinnenweb te bouwen.

simpel in gebruik en direct online met phoenix - hulpmetmarketing.nl

Zo ziet Phoenix eruit in de ‘Build Modus’. Zoals je kunt zien: je hebt 0,0 technische kennis nodig!

Meer weten over Phoenix? Je kunt natuurlijk ook contact met mij opnemen. 🙂

Schone code

Het is belangrijk voor zoekmachines dat zij de code van jouw website kunnen begrijpen. Als een website ‘met de hand gebouwd’ is, is de kans groot dat de code netjes is. Maak je gebruik van WordPress? Dan is de code in de basis waarschijnlijk ook heel degelijk. Helaas is de kans groot dat jij meerdere plugins hebt geïnstalleerd om alle functionaliteiten en designs te hebben die jij nodig hebt. Mijn vraag aan jou is: heb je ze echt allemaal nodig?

Het nadeel van plugins gebruiken met WordPress is dat er veel code aan jouw WordPress Thema wordt toegevoegd. Nu is dat niet zo’n ramp, maar wel dat de plugins door verschillende ontwikkelaars zijn gebouwd. Iedere ontwikkelaar programmeert namelijk in zijn eigen stijl wat ervoor kan zorgen dat de stukjes code ruzie met elkaar krijgen en een error veroorzaken.

Er zijn een aantal dingen die ik je aanraad te doen op het gebied van plugins:

  • Bedenk voor je een plugin installeert of je deze echt nodig hebt en er geen alternatief voor is. Je kunt de plugin altijd weer verwijderen, maar hij kan alsnog voor een error zorgen.
  • Verwijder ongebruikte plugins
  • Heb je veel plugins nodig voor bepaalde functies of designs? Kijk dan eens of een ander WordPress Thema beter bij jouw wensen past.

Als je de bovenstaande punten goed hebt gelezen, moet je in staat zijn een gebruiksvriendelijke website te maken. Dit draagt bij aan de vindbaarheid van jouw website. Als je vervolgens de basis SEO factoren implementeert en goede content schrijft, ben jij klaar om te knallen.

Heb je nog vragen over hoe je zelf een website maakt of wil je advies over webdesign of SEO? Schroom dan niet en neem contact met me op! 🙂

Comment Section

0 reacties op “Zelf een gebruiksvriendelijke website maken?

Plaats een reactie


*