11 designmissers in een WordPress website

11 veel gemaakte designmissers op een WordPress website

Steeds meer ben ik zelf bezig met gebruikersvriendelijkheid en conversieoptimalisatie van WordPress websites. Ik durf gerust te stellen dat bij de door mij gebouwde WordPress websites de genoemde zaken boven het design staan. Dit geldt uiteraard ook zeker voor de WooCommerce webshops.

Wil dat zeggen dat ik het liefst lelijke websites oplever? Zeker niet. Maar ik zie vaak hele strakke websites waar zelfs ik moet zoeken naar het menu, een duidelijke afwijkende call to action en meer van deze zaken. Zonde!

Een website wordt eigenlijk altijd als eerste gebouwd om geld op te leveren, niet om heel mooi werkeloos op het wereldwijde web te staan.

In deze blog zal ik 11 veelgemaakte designfouten behandelen. Deze blog is een vertaling van een blog dat ik in de vakantie tegenkwam op Facebook en waar ik heel blij van werd. Daarnaast heb ik het artikel aangepast met voor mij meer relevante voorbeelden.

Als ik je alvast een tip mag geven, sla deze blogpost op bij je favorieten en loop je project eens na aan de hand van de genoemde punten. Het kost je misschien eens 1 of 2 uur, maar het resultaat zal vele malen beter worden. Het gaat niet over heel ingewikkelde zaken, ook jij kunt dit aan.

  1. Contrast in je header
  2. Formaat van je header
  3. Functionele witruimte
  4. Mobielvriendelijke website
  5. Kies passende kleuren
  6. Minimaliseer je menu
  7. Welk formaat logo heb je nodig?
  8. Wat voor kwaliteit heeft je logo?
  9. Welke kwaliteit afbeeldingen?
  10. Style jij plugins van derden?
  11. Optimaliseer de leesbaarheid

1. Slecht contrast in een slider of headerfoto

Jij hebt toch geen slider op je website? Heb je dit nog wel, dan adviseer ik je om direct dit artikel te lezen van AGconsult te lezen. Ik maak regelmatig gebruik van grote headerfoto’s in plaats van een bewegende slider. Beter 1 sterk beeld dat direct duidelijk maakt waar de betreffende pagina over gaat dan diverse foto’s in een slider. Tekst op een foto is geen enkel probleem, maar houd je dan wel aan de onderstaande basisprincipes:

  • Als de tekstkleur wit is, kies dan een donkere achtergrondkleur. Als de slidertekst zwart is, kies dan voor een lichte achtergrond.
  • Bekijk goed of het gebied waar de tekst in staat een niet te drukke achtergrond heeft. Een drukke achtergrond beïnvloedt de leesbaarheid heel erg en leidt daarnaast de aandacht af van de tekst, waardoor het doel gemist wordt.
Tekst contrast slider WordPress

Voorbeeld hoog contrast tekst headerfoto WordPress website

Naast een achtergrond achter je tekst kun je ook overwegen om een schaduw toe te voegen aan de tekst, bij sommige afbeeldingen is dit voldoende om de leesbaarheid te verbeteren.

2. Te grote headerfoto’s

Regelmatig kom ik websites tegen waar direct op de homepage een enorme headerfoto getoond wordt. Waarom? Vaak kun je toe met de helft van een foto; het is een sfeerbeeld. Je drukt de tekst naar beneden en waarschijnlijk ook je call-to-action. Niet doen dus.

Te grote slider WordPress

Grote headerfoto op je WordPress website?

Als je een fotograaf bent kan ik mij voorstellen dat je een grote foto wilt tonen op de homepage. Zorg er dan in ieder geval voor dat het voor mensen duidelijk is dat er onder de foto meer te zien is. Veel thema’s bieden de mogelijkheid om een pijl naar beneden te tonen. Is deze niet aanwezig, denk dan eens aan een schuine lijn waardoor er al een klein deel van de pagina te zien is zonder te scrollen.

De ideale hoogte voor een header die ik gebruik is rond de 500 pixels hoog. Soms iets meer omdat de foto daarom vraagt, liever nog minder als het kan. Zorg dat je website ook visueel in balans is met het gebruik van foto’s en tekst.

3. Te veel of te weinig witruimte

Witruimte in een website-ontwerp kun je gebruiken tussen widgets, tekstblokken, afbeeldingen of ieder ander deel van je website. Het geeft rust en een overzichtelijk beeld voor de gebruikers van je website.

Nog te vaak kom ik websites tegen waar op een verkeerde manier gebruik gemaakt wordt van de witruimte. Of de witruimte is veel te groot of alles staat op elkaar geduwd. Denk hier heel goed over na, zoek de balans tussen een goed design en gebruikersgemak. Vaak zul je zelf met CSS aan de slag moeten om de witruimte goed af te stellen. Wil je hier meer over weten, ik heb een handleiding voor het aanpassen van CSS geschreven.

Padding en margin WordPress

Padding / margin rond je elementen

Veel thema’s maken gebruik van een pagebuilder, hier kun je negen van de tien keer ook de padding en margin instellen voor gebruikte blokken op je website.

Ik ga niet in op alle details van mogelijkheden, maar geef je een aantal praktische voorbeelden.

  • Vaak worden er kleine witruimtes gebruikt door designers. Geef de content ruimte om het voor je bezoekers rustiger en dus overzichtelijker te maken.
  • Geef de relatie tussen verschillende elementen aan met ruimte. De titel van een widget bijvoorbeeld, kun je rustig vrij dicht op de content van de widget plaatsen, net als de datum van een blog die je geschreven hebt. De header van een pagina mag wat meer ruimte hebben onderaan richting de content, deze twee elementen staan los van elkaar.
  • Belangrijkste tip: Wees consistent met ruimte. Iedere rij op je website die gelijk aan elkaar is zal dezelfde witruimte rondom moeten hebben.

Consistentie zal balans in je website brengen en de focus van een bezoeker leggen op datgene wat telt: jouw unieke content.

4. Geen mobielvriendelijke website

Ook voor de mobiele versie van je website geldt het bovenstaande qua witruimte. Vaak zul je deze nog apart in moeten stellen, de witruimte op een desktop is vaak echt anders dan op een mobiel apparaat. Hierop zijn nog wel een aantal aanvullingen die je hieronder op een rij vint:

  • Touch-vriendelijk design. Op een mobiele telefoon of tablet zijn je vingers het aangewezen apparaat om door de website te bladeren. Pas je pagina’s hier dus ook op aan. Zorg dat je buttons niet kleiner zijn dan 50px. Zorg ook voor voldoende tussenruimte tussen de elementen om te voorkomen dat gebruikers van je website misklikken op het verkeerde element. Hiermee voorkom je enorm veel frustratie en afhakende bezoekers.
  • Optimaliseer je afbeeldingen voor optimale snelheid. Niet iedereen die jouw website bezoekt beschikt over een glasvezelverbinding, sterker nog: de meesten niet zelfs. Zorg daarnaast ook voor een snelle mobiele website om afhakers te voorkomen.
  • Test je website op verschillende mobiele apparaten. Je kunt je schermgrootte aanpassen op de desktop-pc, maar beter is nog om echt te testen op verschillende apparaten. Mocht je niet alle apparaten hebben dan kun je nog kijken naar een tool als browserstack. Dit is voor een kleine test gratis, wil je meer dan zul je een abonnement moeten nemen.

Google heeft een eigen mobile friendly test, een gratis tool om te checken of jouw website geschikt is voor mobiel.

MedicPress thema op mobiel

Een voorbeeld van een mobielvriendelijk thema

5. Kleurgebruik dat niet bij elkaar past

De juiste kleurcombinatie kiezen is een lastig ding. Als je er gevoel voor hebt dan kun je dit waarschijnlijk wel. Anders zijn er handige tools die je hier zeker bij kunnen helpen.

Hieronder vind je een voorbeeld:

De meeste WordPress thema’s  kennen een primaire en een secundaire kleur. Als je het logo van Shell hebt, dan is de keuze niet moeilijk. Primaire kleur is rood en de secundaire kleur die je gebruikt is geel. Rood gebruik je als de primaire kleur voor je call-to-actions. Geel is een secundaire kleur die je vooral gebruikt als achtergrond of voor ondersteunende elementen.

Shell logo

Als je logo van Starbucks is dan heb je alleen een primaire kleur. De secundaire kleur zul je er dan zelf bij moeten zoeken.

Starbucks logo

Een optie is om het groen van de primaire kleur ook als secundaire kleur te gebruiken. Hiermee schep je echter verwarring voor je bezoekers, dus dit is zeker niet aan te raden.

Als je geen designer bent en je vindt het lastig om kleurencombinaties te zoeken, dan kan ik je deze tool van harte aanbevelen, Coolors. Dit is een simple tool om de perfecte kleurencombinatie te zoeken.

Ga naar de website en voer de eerste kleur in met de hexadecimale kleurcode. Vergrendel deze kleur en klik op de spatiebalk.

https://coolors.co/

Zoals je ziet veranderen alle kleuren behalve degene die jij vastgezet hebt. Wil je nog een keer wisselen dan druk je weer op spatiebalk. Wil je 1 kleur vastzetten klik dan op het slotje.

6. Minimaliseer je website-navigatie

Structureer je website-navigatie in een leesbare logische volgorde. Plaats minder belangrijke zaken in dropdown-items of plaats ze in de topbar of footer. Zorg dat je navigatie logisch en hiërarchisch is en zorg dat alle levels die gelijk zijn dezelfde prioriteit kennen.

Als voorbeeld, de algemene voorwaarden en disclaimer zijn minder belangrijk dan je belangrijkste call-to-action. Hierdoor kunnen ze dus eigenlijk nooit op hetzelfde level staan binnen je website. Vaak zet ik de algemene voorwaarden in de footer en de belangrijkste call-to-action met een opvallende kleur in de topbar of het hoofdmenu als er geen topbar gebruikt wordt.

Houd je hoofdmenu opgeruimd, streef naar maximaal vijf of zes items.

Main menu WordPress

Een duidelijk menu?

7. Logo te groot

Bij minimaal de helft van de projecten die ik opstart krijg ik te horen: “Ik wil graag mijn logo groter hebben”. Ik kom dan altijdmet de wedervraag: “Waarom wil je jouw logo zo groot maken?” Je bent geen Shell, Ikea of welke bekende onderneming dan ook, een klant zal jouw logo niet herkennen en komt ook zeker niet om jouw prachtige logo te bekijken.

Upload je logo op de aanbevolen maat voor jouw thema. Dat is de beste tip die ik je kan geven op dit gebied. Je logo is slechts onderdeel van je website, net als alle andere onderdelen.

Als je mij niet gelooft, kijk dan eens naar een aantal bekende merken op het internet en je zult zien dat 99% van hen een logo heeft dat precies groot genoeg is om herkenbaar te zijn, meer niet. De gebruiker moet weten welk merk achter de website staat, maar de service, aanbiedingen en overige content zijn belangrijker dan het logo.

8. Lage kwaliteit logo

Het gebeurt mij regelmatig dat ik een logo aangeleverd krijg in een Word document. Regelmatig wordt ook ik nog verrast. Een logo uit Word kan ik wel op een website verwerken maar de kwaliteit zal absoluut niet op orde zijn.

Afhankelijk van het logo zul je een bestandsformaat moeten kiezen. De start van een logo is altijd een vector, in een vector-formaat als .pdf, .ai, .svg of .eps. Gebruik een programma als Adobe Illustrator om hiervan een passende PNG- of JPG-afbeelding voor op je website van te maken. Vergeet ook niet om deze op het formaat te maken waarop deze op de website geladen wordt, om onnodige laadtijd te voorkomen.

Logo formaten

Als je het logo niet als vector in je bezit hebt, investeer dan in een grafisch vormgever die dit voor jou kan doen. Je zult hier nu of later veel profijt van hebben als je het logo waar dan ook wilt gebruiken, denk bijvoorbeeld aan promotiemateriaal en dergelijke.

9. Slechte kwaliteit afbeeldingen

Het wordt steeds beter, steeds vaker zie ik professionele beelden op websites. Eerder was dit vooral een ondergeschoven kindje en werden er vaak heel erg standaard stockfoto’s gebruikt.

Vergeet niet dat afbeeldingen een grote impact hebben op je bezoekers. Zeker in een webshop kan een authentieke afbeelding het verschil maken tussen een conversie of niet.

Als je geen hoogstaande kwaliteit afbeeldingen beschikbaar hebt zou je ze kunnen zoeken op een site als Shutterstock. Er zijn ook gratis alternatieven, maar mijn ervaring is dat de kwaliteit van deze foto’s echt niet kan wedijveren met de betaalde versies. Ja het kost geld, maar hoeveel is een conversie je waard? Steek hier tijd in, er zijn echt beelden die je niet op iedere website van een collega tegenkomt.

Standaard stock foto

Een overduidelijke stockfoto die jouw concurrent waarschijnlijk ook gebruikt.

10. Niet stylen van plugins van derden

Ik maak vaak gebruik van de Gravity Forms plugin. En het kost mij tijd om deze ook in de huisstijl te brengen van de website en de verzend-buttons als duidelijk call-to-actions in dezelfde stijl als de andere buttons te maken.

Regelmatig kom ik websites tegen die gebruik maken van andere plugins dan degene die bij het thema horen. En hiervoor is dan niet de moeite genomen (of de kennis ontbreekt) om deze ook in de huisstijl te brengen. Zonde, een overduidelijk gemiste kans. Het kost je misschien tien minuten om de styling over te nemen en geeft een zoveel professioneler uiterlijk aan je website.

11. Slechte leesbaarheid

Een belangrijke claim van websitemakers is dat typografie 95% van het design is, dus besteed ook hier tijd aan.

Zorg voor een goede leesbaarheid. Houd globaal rekening met de volgende punten:

  • Iedere regel is maximaal 60-80 karakters inclusief spaties.
  • Geef tekst genoeg ruimte.
  • Gebruik geen te lichte tekstkleur. Iedere kleur lichter dan #777777  heeft een negatieve invloed op de leesbaarheid.
  • Gebruik niet te kleine lettertypes. Het kleinste wat ik adviseer te gebruiken is 14 pixels. Ik adviseer mijn klanten 16px of 18px te gebruiken.
  • Wees voorzichtig met het gebruik van custom fonts. Sommige lettertypes zijn gemaakt voor koppen en niet geschikt voor paragrafen. Andere lettertypes zijn gemaakt voor print en niet voor het web. Bedenk daarom goed waarom je een specifiek lettertype wilt gebruiken en wijk alleen af van de standaard webfonts als je hier overtuigd van bent.
  • Gebruik de juiste uitlijning. In 95% van de gevallen is links uitlijnen gewoon de beste optie. In de overige 5% kun je gebruik maken van centreren.

Rechts uitlijnen en uitvullen zijn in mijn ogen absoluut niet aan te raden.

Conclusie

Ga bij het volgende project dat je bouwt eens door bovenstaande lijst heen en probeer alle kleine problemen op te lossen. Het kost je hooguit twee uur, je eigen gevoel zal beter zijn en je klant nog meer tevreden.

Bij deze wil ik graag Jaka Šmid bedanken voor de inspiratie in zijn originele artikel en zijn toestemming om dit artikel als bron te gebruiken voor het schrijven van deze blog.

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *