Tips voor het ontwerp van de homepage

Homepage design: zo maak je van je startpagina een succes

Voor velen is de homepage het heiligdom van een website. Het moet talrijke doeleinden dienen en verschillende doelgroepen bedienen. En bij voorkeur op hetzelfde moment. Hoe zien een goed adres en een doelgericht homepage design eruit? Hier volgt een overzicht van de belangrijkste tips.

Ik heb het in het onderstaande over bedrijven, maar de principes zijn in veel opzichten ook van toepassing op een eenvoudige blog, je speciale interessepagina of die van jouw merk. De homepage moet:

  • Het bedrijf, de instantie of de dienst van zijn beste kant laten zien
  • Gelijktijdig alle gebieden van bedrijfsactiviteit in kaart brengen
  • Laten zien dat het bedrijf up-to-date is, door nieuws en de verbinding met Facebook, Instagram, enz.
  • Ook de Storytelling met de geschiedenis van de oprichters moet gepast zijn.
  • Het abonnement op de nieuwsbrief moet te allen tijde zichtbaar zijn

Evenzo wil je meestal nieuwe vacatures laten zien, hoe je er komt, je adres, alle telefoonnummers met contactpersonen. Enzovoorts.

afbeeldingen homepage optimaliseren
Een homepage volgens het motto: een afbeelding zegt meer dan duizend woorden

Je kunt al zien waar dit heen gaat: de startpagina kan dat allemaal niet en zou dat ook niet moeten kunnen. Je moet de zaak conceptueel en strategisch benaderen en goed nadenken over wat er eigenlijk getoond moet worden en waarom. Mijn aanpak is zeker niet de enige en misschien zelfs niet de beste voor je bedrijf. Maar ik zal proberen alle aanwijzingen te verantwoorden. Ik ben echter ook blij met andere meningen en suggesties in de commentaren.

"*" geeft verplichte velden aan

Ik wil me abonneren op de nieuwsbrief om op de hoogte te blijven van nieuwe blogartikelen, ebooks, features en nieuws over WordPress. Ik kan mijn toestemming te allen tijde intrekken. Bekijk ons Privacybeleid.
Dit veld dient ter validatie en mag niet worden gewijzigd.

De startpagina is een landingspagina

Zoals alle pagina's op je website, is de startpagina een landingspagina. Zie ons artikel over het optimale ontwerp van landingspagina's. Als je dat eenmaal doorhebt, heb je al veel bereikt. Want dan denk je er nog eens over na.

In het ideale geval heb je al gegevens over je homepage verzameld. Waar komen de mensen vandaan die op je startpagina terechtkomen? Wat willen ze bereiken? Hoe kun je hen helpen? Welk doel heeft de landingspagina eigenlijk voor jou? Welke informatie wil je overbrengen?

Analyse van je website

Het verzamelen van cijfers over je homepage en andere subpagina's is uiterst belangrijk. Dit is immers de enige manier om erachter te komen of je inhoud en ontwerp tot het doel leiden. Lees onze gidsen over content KPI's, content hub en content testing.

Waar komen je bezoekers vandaan?

In de meeste gevallen komen gebruikers op je website terecht via Google, marketingactiviteiten (bijv. een visitekaartje) of de socialemediaprofielen op je homepage. Deze bezoekers weten misschien niet echt wat je bedrijf doet. Maar ze zijn duidelijk op zoek naar een bedrijf dat diensten of informatie aanbiedt. Anders zouden ze niet de moeite nemen om je homepage te bezoeken.

In veel gevallen lezen ze eerst een artikel op je website dat je bijvoorbeeld op Instagram hebt gedeeld, en gaan ze pas daarna naar de homepage. Om te zien wat het bedrijf eigenlijk doet. Nu moet je iets bieden aan de gebruikers! En het eerste ding is om de vraag te beantwoorden:

Wat doet het bedrijf überhaupt?

Jammer genoeg wordt dit vaak vergeten. Het eerste wat een homepage voor zijn bezoekers moet beantwoorden is: "Ben ik op de juiste plaats? Omdat ze ergens vandaan komen, op je WordPress website terechtkomen – en nog van niets weten. Zij moeten meteen aan het begin de bevestiging krijgen dat zij op de juiste pagina zijn beland. Het is als een snoepje aan het begin van hun User Experience (UX):

Je bent naar de juiste plaats gekomen. Je kunt rustig ademhalen en ontspannen je informatie krijgen!

Mijn suggestie hier is: drie tot vier zinnen die kort maar precies uitleggen wat je aanbiedt. Met een link eronder als je meer wilt weten. Daar is het internet voor, om je meer informatie te geven met een klik op een knop.

Homepage Basic Text
De homepage van een praktijk met sobere inleidende tekst

Dit is waar ik vaak de meeste tegenwind krijg: je moet mensen eerst emotioneel betrokken zien te krijgen, zodat ze blijven. Het is zoiets als: "We zetten een enorme foto op de homepage en laten dan het nieuws binnenrollen via een slider. Zodat ze kunnen zien wat een geweldig wereldwijd bedrijf we zijn.

Over de grote sliders: ze werken niet. Velen hebben hier al over geschreven. De website Should I use a carousel? is een goed begin. De uitspraak "dat is belangrijk, dat zetten we in de sidebar!" is helaas niet meer mogelijk, omdat de zijbalk gewoon niet meer up-to-date is – en niet compatibel is met responsive web design.

Emotionele aantrekkingskracht

Ik geef volmondig "ja" tegen het emotioneel aanspreken van de doelgroep. Dit betrekt je klanten niet alleen op feitelijk niveau, maar spreekt ook op een heel andere manier de hersenen aan. Naar mijn mening moet de eerste boodschap nog steeds zijn: "Wat doe je eigenlijk? Hoe kan het emotionele niveau worden toegevoegd?

Dit is een strategische beslissing die gebaseerd moet zijn op de Corporate Identity (CI) van je bedrijf. Jouw CI omvat de manier waarop je je doelgroep aanspreekt. Er zijn in principe drie mogelijkheden:

  • Via de tekst
  • Via het ontwerp
  • Via foto's of video's

Aanspraak via de tekst

Mensen gebruiken een website heel verschillend. Dit betekent dat je niet weet hoe ze iets op je website vinden. Ze gebruiken bijvoorbeeld eerst het menu, de zoekfunctie en scannen dan de koppen of de links op je WordPress website. Het meest voorkomende eerste ankerpunt dat zij vastleggen is echter de eerste tekst op de website die je informatie geeft. Talrijke studies hebben dit aangetoond. Je kunt deze tekst heel verschillend "vormgeven" met behulp van het adres en de toon.

"Ik ben Phillip Roth, ik maak een website voor jouw bedrijf" klinkt anders dan "Hé, ik ben een webdesign influencer die je waanzinnige UX optimaliseert voor top stijgende KPI's!" Kijk goed naar je doelgroep en pas je tone of voice daarop aan. Het is net zo goed een onderdeel van je Corporate Identity als het ontwerp.

Aanspraak via het ontwerp

Een aantrekkelijk design straalt niet alleen professionaliteit uit, het raakt ook emotioneel. Zie ons artikel over de basisprincipes voor een harmonieus webdesign. Kleuren, letterkeuze, ontwerpelementen al deze elementen kunnen vertrouwen, vreugde, coolheid, gekte en vele andere emoties overbrengen op bezoekers. Corporate design maakt deel uit van de algemene boodschap die je bedrijf wil overbrengen. Vertrouwenwekkende elementen zoals certificaten kunnen nog extra bonuspunten opleveren.

Homepage Images Emotions
Startpagina met emotionele aantrekkingskracht en inleidende tekst

Afbeeldingen of video's

Het imago van je bedrijf wordt ook bepaald door de beeldtaal. Ben je een wereldwijd bedrijf met 600 werknemers en koele wolkenkrabbers in Shanghai of een kleine fabriek met een mooie werkplaats? Ben je een coach met mooie workshopruimtes of een arts met een chique praktijk? Dat is wat je bezoekers willen weten en zien. Zij willen te weten komen: "Kan ik mij daar op mijn gemak voelen?", "Spreekt het product mij aan?", "Is dit een bedrijf waar ik zou willen solliciteren?", "Werken er normale mensen?". "Zijn ze aardig?".

Dit alles kan in milliseconden worden overgebracht met een of meer prachtige beelden. Maar daarvoor moeten de foto's authentiek zijn. Want wat je van jezelf en je team laat zien, moet tegenwoordig echt zijn. Anders voelen mensen zich niet serieus genomen. Niemand wil de stockfoto met de vreemde blonde telefoniste meer zien. Net zo min als een vreemde vergaderzaal gevuld met lachende maar "valse" mensen.

Misschien heb je zelfs een goede uitlegvideo die je diensten in 30 seconden samenvat. Of misschien heb je een video op de achtergrond draaien die je chique hotel en het prachtige omringende landschap laat zien. Alles wat je huisstijl en de bijbehorende boodschap ondersteunt, is goed!

Homepage Color Concept
Homepage met aansprekende foto's en uniform kleurenconcept

Wat nu?

Dus nu hebben we de aandacht van de bezoekers. Ze weten nu: "Ik ben op de juiste plaats, ik voel me op mijn gemak. Wat nu volgt, is een strategische beslissing: Nu kun je de informatie die je hier slechts kort hebt aangestipt, verder uitdiepen. Nu kun je je tweede doel nastreven naast de eerste indruk.

Op dit punt is het zinvol na te denken over wat dit doel eigenlijk is. Zie ook de verwante inhoudsstrategie. Want als de bezoekers niet gefixeerd zijn op je menu of het zoeken naar informatie, zullen ze gaan scrollen. Dus wat bied je ze nu aan?

De mogelijkheden zijn legio:

  • Vertel een verhaal
  • Verdiep de informatie over je dienstenaanbod
  • Toon grote evenementen, engagements of nieuws
  • Bied een tool aan om afspraken te maken, dan bellen ze je niet altijd direct
  • Het meeste wat ik persoonlijk verkoop is via mijn nieuwsbrief, ik bied het op verschillende plaatsen op de website aan
  • Link naar je vacaturepagina wanneer je op zoek bent naar nieuwe werknemers
  • Laat goede beoordelingen zien

Zoals je ziet, zijn er nu honderden manieren om de homepage verder vorm te geven. En er is zeker geen standaardrecept om je klanten naar de gewenste richting te leiden. Je moet het uitproberen. Houd er echter rekening mee dat je startpagina of landingspagina niet oneindig veel aandacht krijgt. Bijna niemand scrollt 27 meter – en neemt toch alle informatie in zich op.

Homepage Testimonials
De homepage met een prijsopgave en de aangeboden diensten

Voor dit concept maak ik graag gebruik van zogenaamde wireframes of mockups. Dat wil zeggen dat je de inhoud van de startpagina sorteert in eenvoudige rechthoeken met grijze kaders. Zonder echte inhoud, zonder ontwerp. Je kunt dit doen op een stuk papier of met programma's als Adobe XD, Sketch, Photoshop, InDesign of in PowerPoint. Zoals ik al zei, laat het ontwerp er voorlopig buiten. Op dit punt, wil je bijvoorbeeld weten:

  • Wat moet er zeker op de homepage komen?
  • Wat hoeft daar niet per se op staan?
  • Wordt het allemaal te veel?
  • Is het mogelijk om het doel te bereiken met de beschikbare ruimte?
  • Zien de bezoekers de Call to Action vroeg genoeg?
Mockup Wireframes Adobe XD
Wireframes in Adobe XD

Kom terzake!

Nu je je secundaire doel hebt vastgesteld en de gebruikers alle informatie hebt gegeven die je in de beperkte ruimte kunt passen, moet je uw doel verduidelijken. Dit kan het best onderaan de pagina gebeuren. Zoals ik al zei, kun je daar de belangrijkste informatie benadrukken, de oproep tot actie plaatsen of een foto van jezelf gebruiken – naast je contactgegevens – om gebruikers uit te nodigen contact met je op te nemen. Wat je tweede doel van de pagina ook is: nu kun je het voor je footer plaatsen. Je startpagina is, zoals gezegd, een landingspagina.

De voettekst kan ook als secundaire navigatie fungeren, bijvoorbeeld als je daar extra informatie wilt aanbieden. Veel mensen kijken ook graag naar je impressum om te zien of je een gerenommeerde leverancier bent. Maar wees voorzichtig! Te veel elementen in je footer kunnen afleiden van je eigenlijke doel. Als er bijvoorbeeld een inschrijving is voor de nieuwsbrief, maar je schrijft slechts één keer per jaar een nieuwsbrief, dan is dit minder effectief.

"*" geeft verplichte velden aan

Ik wil me abonneren op de nieuwsbrief om op de hoogte te blijven van nieuwe blogartikelen, ebooks, features en nieuws over WordPress. Ik kan mijn toestemming te allen tijde intrekken. Bekijk ons Privacybeleid.
Dit veld dient ter validatie en mag niet worden gewijzigd.

Conclusie over homepage design

Beschouw je startpagina als een landingspagina. Geef je bezoekers het gevoel dat ze op de juiste pagina zijn beland. Versterk dit gevoel met een doelgroepgerichte aanpak, een slimme vormgeving en ondersteunende, authentieke beelden.

Definieer je secundaire doel nauwkeurig. Leid de bezoekers erheen. Controleer zo mogelijk met analytics en A/B-tests of dit werkt. En misschien nog beter. Naar mijn mening kun je een homepage niet veel perfecter maken dan dat.

Zoals je kunt zien aan de pagina's die ik heb gemaakt (zie screenshots) in deze post, leidde zelfs mijn advies niet altijd tot het resultaat dat ik wilde. Daarom kijk ik uit naar nieuwe inzichten van jullie in de commentaren! Misschien heb jij de perfecte formule gevonden voor je homepage?

Jouw vragen over dit artikel

Heb je vragen voor Phillip? Of een tip voor het ontwerp van de homepage? We kijken uit naar je reactie. Wil je op de hoogte blijven van nieuwe WordPress en web design artikelen? Volg Raidboxes dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

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