Wanneer is een website goed ontworpen? Hier let ik op

Of een website goed ontworpen is, merk je pas als je hem gebruikt. Mooi is daarbij niet het eerste waar ik naar kijk.

In dit stuk lees je vijf dingen die ik bij elke site nakijk. Je test ze zelf, met je telefoon in de hand.

Waarom zoveel websites op elkaar lijken

Veel sites komen uit hetzelfde sjabloon. Je ziet dezelfde blokken, dezelfde knoppen en dezelfde opbouw. Alleen de kleur en de foto bovenaan verschillen.

Op social media zie ik steeds vaker aanbiedingen voor een website van € 500, klaar in zeven dagen. Bekijk dan eerst de eigen site van die aanbieder. Daar zie je precies wat je krijgt.

Je herkent een sjabloonsite aan dezelfde letters, dezelfde vakjes met icoontjes en teksten die over elk bedrijf kunnen gaan.

Waarom ik geen site van € 500 maak, lees je in wat kost een website laten maken.

1. Zie je in drie seconden wat je hier kunt doen?

Gebruiksgemak gaat bij mij voor alles. Een bezoeker moet meteen zien wat hij op je site kan doen. Lukt dat niet, dan maakt mooi ook niets meer uit.

Test het zo. Open je site op je telefoon, kijk drie seconden naar het eerste scherm en leg je telefoon weg. Weet je wat dit bedrijf doet, voor wie, en wat je nu kunt doen?

La Vida Linda is een boutique in Jávea, met parfum, make-up en sieraden. Hun site heeft één taak: zorgen dat mensen langskomen.

Daarom staan de openingstijden per dag erop, met vandaag gemarkeerd. Met één tik open je de route in Google Maps.

La Vida Linda

Een one-pager in drie talen, met de route, de openingstijden per dag en een geurkiezer.

Bekijk het project

Bij WeBuyHorsetrucks begint de aanmelding direct onder de kop op de homepage. Wie een paardenwagen wil verkopen, hoeft niets te zoeken.

2. Eén hoofdknop, overal dezelfde

Kies per pagina één hoofdstap. Die knop heeft overal dezelfde kleur, dezelfde woorden en ongeveer dezelfde plek. Een tweede knop mag, maar dan lichter van kleur.

Ik houd zelf een vaste regel aan: hooguit twee knoppen per scherm. Staan er vijf, dan kiest je bezoeker vaak niets.

Laat de knop zeggen wat er gebeurt. "Plan een eerste gesprek" zegt meer dan "Verstuur". Je bezoeker weet dan vooraf waar hij aan begint.

Maak de knop zo groot dat je hem met je duim raakt zonder te mikken.

3. Leesbaar op je telefoon, ook buiten

Licht of donker maakt voor mij niet uit. Een donkere site is niet vanzelf chiquer, en een lichte niet vanzelf beter leesbaar. Het verschil tussen je letters en je achtergrond telt wel.

Lichtgrijs op wit is vaak te zwak, en donkergrijs op zwart net zo goed. Twijfel je, zet je twee kleuren dan in de contrastchecker van WebAIM. Die zegt in een paar seconden of het leesbaar is.

Je klant leest je site niet altijd aan zijn bureau. Hij staat buiten, in de zon, met zijn scherm half zo fel. Test je site daarom ook buiten.

Let op deze drie plekken:

• Kleine tekst onder foto's, in formulieren en in de footer.
• Tekst over een foto. Kijk naar wat er echt achter de letters zit, op elk formaat scherm.
• Knoppen op een donkere achtergrond. Blijft de tekst erop goed leesbaar?

4. Echte foto's van je eigen werk

Een stockfoto van een lachende man met een helm heeft iedereen al eens gezien. Je klant gelooft hem niet. Foto's van je eigen bouwplaats, je eigen machines en je eigen ploeg geloven ze wel.

Dat hoeft geen dure fotograaf te zijn. Telefoonfoto's van de bouwplaats zijn vaak al goed genoeg om mee te beginnen. Bij mij lever je foto's en video zelf aan.

Bij La Vida Linda staan beelden uit hun eigen collectie. Je ziet wat er in de winkel staat.

Kijk ook naar de uitsnede. Een portretfoto in een breed kader toont op een telefoon soms maar een half gezicht. Bekijk je foto's daarom op je telefoon en op je laptop.

5. Je logo en kleuren, goed neergezet

Huisstijl betekent voor mij één ding: je logo en kleuren goed neergezet als onderdeel van je website. Er loopt dan één lijn door de hele site. Dezelfde letters, dezelfde afstanden en dezelfde kleur voor dezelfde soort knop.

Bij La Vida Linda komen de krul van de L en het hartje uit het logo terug in de koppen. Zo hoort de site bij het logo en bij de winkel. Dat haal je niet uit een sjabloon.

Eigen is ook de opbouw. Bij HAK Machines kies je eerst je terrein, en daarna zie je de machines. Zo denkt een gemeente of sportclub: eerst het veld, dan de maaier. Een sjabloon begint bij het assortiment.

Leg een dienstpagina, een project en je contactpagina naast elkaar. Zie je dat ze bij elkaar horen? Dan klopt de lijn.

Sanne Kel liet haar logo en website bij Fixels maken. In haar review schreef ze dat haar site "echt een visitekaartje" is geworden.

Hoe ik logo en kleuren meeneem in je site, lees je bij logo en huisstijl.

Beweging mag, als alles ook zonder werkt

Een bewegend icoon of een rustige animatie geeft een site karakter. Ik gebruik het graag. Maar je informatie en je knoppen moeten ook zonder die beweging werken.

Sommige mensen zetten op hun telefoon "minder beweging" aan. Een goede site houdt daar rekening mee. Dan staat alles er nog, alleen stil.

Zo kijk je je eigen site na in vijf minuten

Pak je telefoon en loop deze vijf punten langs:

1. Kijk drie seconden naar het eerste scherm. Weet je wat je hier kunt doen?
2. Tel de knoppen per scherm. Is er één hoofdknop, en zegt die wat er gebeurt?
3. Ga naar buiten. Kun je de kleine tekst en de knoppen nog lezen?
4. Kijk naar de foto's. Zijn ze van je eigen werk, en staat er niemand half in beeld?
5. Open drie verschillende pagina's. Horen ze bij elkaar, en bij je logo?

Struikel je over twee of meer punten, dan zit daar je eerste winst.

Veelgestelde vragen

Je volgende stap

Wil je weten hoe jouw site scoort op deze vijf punten? Stuur me een appje met het adres van je site. Dan hoor je welk punt ik als eerste zou aanpakken.

Op werkdagen heb je meestal binnen een half uur antwoord.

Is je ontwerp in orde, maar komen er weinig aanvragen binnen? Lees dan welke vier dingen je klant wil weten voordat hij een aanvraag doet.