Hoe ziet een goede homepage eruit? 7 tips voor een succesvolle website

Hoe ziet een goede homepage eruit? 7 tips voor een succesvolle website

De homepage van je website is cruciaal voor de argeloze bezoeker. Wie ben je, wat heb je te bieden en is dit wat de bezoeker zoekt? Dat is waar het om draait en daar gaat het bij veel homepagina’s nog mis. Homepagina’s zijn vaak onduidelijk, met teveel of juist te weinig informatie en daardoor haken veel potentiële klanten af. Wat er zoal misgaat, lees je in dit artikel.

De homepage: jouw digitale bedrijfsentree

De homepage is wat mij betreft de digitale entree van jouw bedrijf. Veel mensen komen daar binnen en willen direct een indruk hebben van wie je bent en wat je voor ze kunt betekenen. Je ontvangt ze daar, om ze van daaruit door te leiden naar de volgende belangrijke afdelingen (pagina’s) op de digitale versie van jouw bedrijf: jouw website.

Laat niemand met vragen zitten

Op die eerste pagina komt jouw bezoeker binnen om zo snel mogelijk te weten wat jij hem te bieden hebt. Op welke manier help je jouw bezoeker om dat te bereiken? Ieder element op je homepagina dient daaraan bij te dragen. Dus vraag je bij ieder element af wat het toevoegt voor deze mogelijke klant. Geen element mag te veel zijn. Hieronder 4 fouten die ik erg vaak tegenkom.

Dit is de homepagina van de website van een tekstschrijver, écht!

Gelijk een mooi voorbeeld. Heb jij enig idee van wat voor bedrijf deze homepagina is? [SPOILER ALERT] Het is een tekstschrijver. Had jij dat direct door?

4 veelvoorkomende grote fouten

Ik zie 4 verschillende veelvoorkomende grote fouten op homepagina’s:

  • Te veel tekst
  • Te weinig tekst
  • Te veel focus op design
  • Onduidelijk menu/hamburgermenu

Deze fouten, en andere belangrijke onderdelen van je homepage, komen hier stuk voor stuk aan de orde.

Te veel tekst

Veel ondernemers zijn geneigd om direct hun hele verhaal op hun homepage te zetten. Maar vraag jezelf eens af: komen je bezoekers om gelijk een heel verhaal te lezen? Er zullen uitzonderingen zijn, maar de meeste bezoekers willen eerst weten wat je te bieden hebt voordat ze hele teksten gaan lezen. Presenteer je bedrijf, maar houd het beknopt.

Homepagina met te veel tekst

Zou jij alles lezen op deze homepagina?

Te weinig tekst

Het andere uiterste is natuurlijk te weinig tekst. Wanneer je enkel met visuele elementen wilt laten zien wat je doet, is dat ook niet voor iedereen direct duidelijk. Soms zijn iconen of afbeeldingen voldoende, meestal heb je tekst nodig. Te weinig tekst helpt jouw bezoeker ook niet verder. Niet alles is in beeld te vatten, tekst is ook nodig ter verduidelijking. Wat is dan de juiste hoeveelheid tekst, als het niet veel, maar ook niet weinig mag zijn?

Wat is de juiste hoeveelheid tekst op de homepage?

Niet te veel tekst, niet te weinig tekst, wat is dan wel goed? Bedenk voor jezelf wat het belangrijkste is om direct te laten zien. Geef dan niet alle informatie, maar zorg dat je jouw bezoekers prikkelt om meer te willen lezen. Die leid je dan naar een pagina waar ze meer kunnen lezen, bijvoorbeeld door een button met een call to action.

Laat jouw belangrijkste producten en/of diensten zien, je hoeft niet direct alles te tonen. Een winkel kan ook niet alle producten in de etalage laten zien. Zorg er in ieder geval voor dat duidelijk is wat je bezoekers zoal bij jou kunnen vinden. Licht het waar nodig kort toe, en zorgen voor dat ze direct door kunnen naar de pagina’s waar meer informatie staat.

Qua design wellicht "mooi" en creatief, maar is het duidelijk?

Enig idee wat dit bedrijf doet? Of ben je het met me eens dat de designer is doorgeslagen in creativiteit?

Te veel focus op design

Vormgeving is belangrijk, laat dat voorop staan. Een goed vormgegeven website straalt professionaliteit uit. Het design zelf is echter geen doel op zich. Design staat in dienst van de doelen van jouw website. Toch slaan webdesigners soms teveel door in de vormgeving.

Sliders, enorme headerfoto’s of video-achtergrond

Wanneer je een echte vormgever aan het werk zet om jouw website vorm te geven, is de kans groot dat beeldmateriaal op een belangrijke plek inneemt op de homepage. Soms is dat goed, maar kijk met name uit met:

  • Sliders/carrousels
  • Enorme headerfoto’s
  • Video-achtergrond/hero movies

In de meeste gevallen dient het gebruik van deze elementen voornamelijk het doel om jou homepage “mooi” te maken. En hoewel goede vormgeving jouw website een professionele uitstraling geeft, is “mooi” niet de reden om iets te doen. Niet voor een website die geld moet opleveren in ieder geval.

Wat zeggen de foto's uit de slider echt over dit bedrijf?

Wat zegt deze foto in de slider over het bedrijf? En: wat voegt het toe aan de tekst die erbij staat?

Sliders zijn slecht voor je conversie

Er zijn veel onderzoeken gedaan naar het effect van sliders (carrousels) op je conversie. Vrijwel al deze onderzoeken wijzen uit dat sliders slecht zijn voor je conversie. Een duidelijk onderzoek komt van AGconsult: Wat werkt beter: caroussel of statische banner? Wil je toch een carrousel op je homepage, moet je het natuurlijk helemaal zelf weten. En ja, ik denk dat er wel situaties zijn waar in een slider/carrousel passend is. De belangrijkste vraag die je jezelf daarbij moet stellen is: wat voegt het toe voor mijn bezoeker?

Nee, ik wacht niet tot ik alle carrousel-foto’s heb gezien

Bedenk jezelf ook hoe groot de kans is dat je bezoekers alle foto’s uit je carrousel zien. Of denk je echt dat iedereen wacht tot ze al die carrousel-foto’s voorbij hebben zien komen? Hoe vaak wacht jij op een website tot dat je al die foto’s hebt gezien?

De slider gaat vaak te snel

Heel irritant, ben je net de tekst op de foto in de carrousel aan het lezen, komt de volgende foto alweer. Herkenbaar? Dat gebeurt heel vaak. De slider gaat dan te snel, waardoor je niet de kans krijgt de tekst te lezen of zelfs op de button te klikken. Stel je de slider echter langzamer in, dan weet je zeker dat de meeste bezoekers niet alle afbeeldingen uit de carrousel te zien krijgen. Als dat al zou gebeuren.

Hero movies: bewegend beeld op de achtergrond

Deze ken je vast ook al: de hero movie. Bewegend beeld op de achtergrond. Een video, vaak met mensen die iets aan het uitvoeren zijn. Maar waarom? Wat voegt het toe? Heb jij ooit wel eens zo’n hero movie helemaal afgekeken en gedacht: “nou, dat was me even duidelijk”? Of dat je het beeld bekeek en daarna weer makkelijk door kon met waar je voor kwam? Vast niet. Want je aandacht wordt getrokken door dat bewegende beeld en daardoor ben je afgeleid.

Mooie bewegende beelden in deze hero movie, maar welk doel dient het?

Een hero movie op de homepage. Mooi gemaakt, maar snap jij wat de boodschap is?

Mijn belangrijkste argument: bewegend beeld leidt af

Je bezoeker is ongeduldig en wil snel daarnaartoe waarvoor deze komt op jouw website. Bewegend beeld trekt de aandacht en leidt daarmee af van waar het om draait: to the point komen. Dus daarom liever één statisch beeld dat duidelijk iets van jou onderneming laat zien.

Weg dus met die wisselende foto’s

Die steeds wisselende foto’s werken vrijwel nooit op de juiste manier voor je bezoeker. Te langzaam, te snel, noem het allemaal maar op. Weg ermee. Kies liever voor:

  • Wisselen van headerfoto zodra een pagina laadt
  • Een statische headerfoto
  • Een header zonder foto

Wil je toch echt regelmatig een andere foto in je header laten zien, dan is het wisselen van headerfoto zodra een pagina opnieuw laadt de beste optie. Het risico hierbij is dat je een bezoeker net op het verkeerde moment een boodschap laat zien of dat een bezoeker de voor hem of haar belangrijkste boodschap mist.

Gebruik ook geen enorme headerfoto’s

Hiervoor heb ik je aangeraden om een statische headerfoto te gebruiken of headerfoto’s bij het opnieuw laden te wisselen. Gebruik echter liever geen enorme headerfoto’s die direct het beeldscherm vullen. Je webdesigner kan vinden dat het mooi is, maar vraag je wederom af wat het toevoegt voor jouw bezoeker.
Let wel: het laatste wat ik wil is dat iedere website er vrijwel hetzelfde uitziet. Neem dan ook vooral niet klakkeloos alles over wat jouw concurrent doet. Wat ik vooral belangrijk vind, is dat je het je bezoeker zo makkelijk mogelijk maakt. Dat doe je door in ieder geval rekening te houden met de internetconventies, zoals:

Het meest dringende advies dat ik je wil geven is om niet te creatief te willen zijn. Je eigen identiteit neerzetten is prima, maar vaak leveren creatieve ideeën niet de meest logische en gebruiksvriendelijke websites op.

Enorme headerfoto op homepagina biedt geen duidelijkheid - design lijkt voorop te staan

Hoe duidelijk is deze homepage en hoe draagt die loeigrote headerfoto eraan bij?

Duidelijk hoofdmenu op desktop

Het hoofdmenu moet duidelijkheid bieden. Daarmee kun je dus niet te creatief zijn. Bekijk dit hoofdmenu bijvoorbeeld eens:

Is dit hoofdmenu duidelijk?

Snap jij dit menu? Welke icoon is volgens jou bedoeld voor contact opnemen?

Ook een hamburgermenu als hoofdmenu op de desktopversie van jouw website helpt ook niet echt. Daar hoef ik jou natuurlijk niks over te vertellen, want jij hebt natuurlijk mijn artikel over het hoofdmenu van je website al gelezen :)

Een concreet voorbeeld

Met toestemming van de onderneming, heb ik LabelPlaza als voorbeeld genomen. De website wordt vernieuwd, is mij verteld, dus de homepagina die ik hieronder plaats is actueel op het moment van schrijven. We nemen de homepage even door op basis van een sceenshot:

Homepagina LabelPlaza: veel te vinden, en toch niet duidelijk

Wat je ziet is een op het eerste oog beknopte homepagina. Toch vragen veel dingen je aandacht. Zo staan er 2 menu’s: zowel een topmenu als een zijmenu, waardoor je niet direct duidelijkheid hebt over waar het over gaat. En die duidelijkheid krijg je ook niet, want je ziet dat ze ‘Producten’ en ‘Diensten’ bieden. En er staat iets over RFID op de homepage. Maar wat ze nu echt doen…

Wat is die download?

Verder zie je een foto met een aantal dingen erop, waarvan ik niet geheel kan ontwaren wat het allemaal is, een dame die ongetwijfeld niet de telefoniste bij het bedrijf is (ik heb haar al eens vaker op een website gezien) en een enorme downloadknop. Het vraagt allemaal aandacht, maar biedt weinig duidelijkheid. Want waar is die downloadknop voor? Dat staat er namelijk niet bij. Waarom zou je op die knop drukken als je niet weet wát je downloadt?

Overbodige onderdelen in footer

In de footer wordt iets gedaan wat soms slim is, maar in dit geval overbodig. Alles uit de twee menu’s wordt herhaald, terwijl ik niet eens hoef te scrollen om onderaan de pagina te komen. Die menu-items staan dus 2 keer in beeld. Oh, en aan de sitemap heeft jouw bezoeker niks. Je hoofdmenu en de interne links moeten je bezoeker door je website leiden. Je bezoeker doet niks met de sitemap.

7 tips voor een succesvolle homepage op jouw website

Mede op basis van bovenstaande, een 7-tal tips om jouw website succesvol te beginnen met een goede homepage:

  1. Design is dienend aan de bezoeker
  2. Kies daarom zo weinig mogelijk bewegende elementen
  3. Maak tekst kort genoeg, maar wel zo dat er voldoende informatie in staat
  4. Maak je website persoonlijk, begin al op je homepage
  5. Kies voor een goede balans tussen tekst en beeld
  6. Bied zo snel mogelijk duidelijkheid
  7. Gebruik een duidelijk hoofdmenu

Zo. Jij kan aan de slag. Of heb je eerst nog vragen of opmerkingen? Laat ze hieronder achter en ik reageer altijd.

8 antwoorden
  1. Natascha
    Natascha zegt:

    Helder artikel, wederom. Bedankt!
    M.b.t. de (te) grote headers, welke je afkeurt (begrijpelijk in veel gevallen). Toch heb ik in een nieuwe versie van mijn website (nog in staging) gekozen voor grote headers om z.s.m. het ‘afwijkende’ karakter van een kleinschalige accommodatie te kunnen laten zien (soort kamperen bij de boer). Zou je het dan alsnog afraden?

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      De vraag is of het echt wat toevoegt voor je bezoeker. En of jij daarmee je doelen bereikt. Of eigenlijk: of je bezoeker zijn doel bereikt. De eerste foto en de blauwe, zo tegen het einde van het artikel, zijn volgens mij prima voorbeelden van wanneer het niet werkt. Ze zijn beide niet duidelijk, én het is niet duidelijk dat er nog iets onder staat. Het is bewezen dat dit ten koste gaat van het scrolgedrag. Men scrolt dus niet of nauwelijks naar beneden, omdat het lijkt alsof er niks onder staat. En omdat het niet duidelijk is wat we hier vinden. De klant haakt dan ook snel af.

      Dus: bied jij wel duidelijkheid en weet je bezoeker dat er nog wat onder staat? Dan zou je het kunnen overwegen. Bedenk je wel dat je de ruimte van die grote header ook kunt gebruiken om je klanten al meer te laten zien. Als je mijn homepage bekijkt, zie je dat ik direct onder de blauwe header een drietal diensten aanbied. Toen dit ontwerp van mijn website net live was, was die header veel groter (hoger). Daardoor vielen die diensten weg. Ondanks dat ik die hogere header mooier vond, heb ik ‘m toch laten verkleinen, omdat ik weet dat die grote header weinig toevoegt en mijn belangrijkste diensten juist naar beneden drukte.

      Een mooie foto is prima, maar moet het zo groot en hoe kun je daar dan nog meer duidelijkheid bij verschaffen, zodat je aanbod niet verzuipt, zoals de hiervoor genoemde voorbeelden?

      Beantwoorden
  2. Jolien
    Jolien zegt:

    Bedankt voor het delen van deze tips Nathan! Je website is er uiteraard voor de bezoeker, maar vergeet ook niet dat de website een logische structuur moet hebben voor de zoekmachines. Je wilt namelijk wel dat je mooie website gevonden wordt.

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Dank je wel voor je reactie Jolien. Er zijn natuurlijk veel andere factoren die een rol spelen. De focus van dit artikel is echter het ontwerp van de homepagina. En de structuur wordt daarbij deels aangestipt door het menu onder de aandacht te brengen. De complete websitestructuur is weer van een heel andere orde en heeft niet direct iets met de vormgeving van de homepagina te maken.

      Beantwoorden
  3. Nancy
    Nancy zegt:

    Heel duidelijk en leerzaam artikel. Ik ben ondertussen bij twee mensen geweest voor mijn website wat aan te passen en ik vraag om mijn website rustig te maken omdat het over een cursus massages gaat. En telkens gebruiken ze grote bewegende beelden. Zelfs ook de tweede persoon die ik aansprak deed net hetzelfde…Ik had nochtans gezegd dat ik dit niet wilde. Ik ben heel blij dat ik hier iemand vind die dat bevestigd. Ik vind het niet mooi en ik vind het heel dominant overkomen. Als ik zelf zit te googlen en ik krijg dit soort grote bewegende beelden ben ik direct weg. Ik vergelijk mezelf hoe ik zou reageren.

    Wat voor soort teksten moet ik dan vooral op de homepagina dan zetten? ja mij voorstellen wat ik doe en wat ik aanbied? Dus de WIE WAT en WAAROM op homepagina zetten ?

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      Allereerst dank voor je complimenten Nancy. Precies dat wat jij aangeeft is mijn doel :-)

      Om op jouw vraag terug te komen: afhankelijk van wat jouw aanbod nu precies is, zou je de diverse massages kunnen tonen. Als dat afhankelijk is van de klant, dan wellicht inzetten op een informatie-aanvraag. En vooral duidelijk maken wat ik aan jou heb en waarom ik specifiek bij jou moet zijn voor een massage. Wat bied jij dat jou zo uniek maakt? Kort, krachtig en zodanig dat iedereen makkelijk en snel doorgaan naar een voor hen belangrijke pagina.

      Bedenk dus wat de bezoekers zouden willen/moeten weten en welke keuzes ze dus maken vanaf de homepagina. Grote kans dat je dat nu nog niet weet en pas over enkele maanden of zelfs jaren beseft wat nu de logische ‘routing’ is. Daar ben ik nu ook pas achter hoor ;-)

      Beantwoorden
  4. Kirsten
    Kirsten zegt:

    Beste Nathan,
    Dank voor je heldere uitleg. Ik heb een vraag. Ik ben bezig met de structuur van een nieuwe website. Als onderneming hebben we een viertal projecten waar we de bezoeker van de site voor willen werven. Nu heb ik die 4 projecten allemaal een eigen ‘tab’ (ouderwets woord! ;-)) gegeven bovenaan de pagina. (Dus: in de menustructuur) Zodat ik kan uitleggen waar ze over gaan en hoe het werkt etc.
    Mijn vraag: zou jij op de homepage ook al linken (door middel van een foto en korte tekst) naar die projecten? Zodat de bezoeker direct ziet wat we bieden? Of is dat dan dubbel?

    Beantwoorden
    • Nathan Veenstra
      Nathan Veenstra zegt:

      De vraag stellen is ‘m beantwoorden in dit geval, denk ik ;-) . Ga hiervan uit: helpt het de bezoeker volgens jou?

      En kijk ook gerust naar andere websites hoe die dat op hun homepagina doen. Zoals bijvoorbeeld die van mij :-).

      Beantwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

You have to agree to the comment policy.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.