Homepage design: zo maak je van je startpagina een succes

8 Min.
Tips voor homepage-ontwerp

De startpagina of homepage is voor velen het heiligdom van een website. Het moet talrijke doeleinden dienen en verschillende doelgroepen bedienen. En het liefst op hetzelfde moment. Hoe worden klanten goed aangesproken en hoe ziet een doelgericht homepage design eruit? Hier zijn de belangrijkste tips in een overzicht.

Ik heb het hieronder over bedrijven, maar de basisprincipes zijn in veel opzichten ook van toepassing op een eenvoudige blog, een special-interest-site of de site van je band. De homepage moet:

  • Het bedrijf, het bureau of de dienst van de beste kant laten zien
  • Gelijktijdig alle gebieden van de bedrijfsactiviteiten in kaart brengen
  • Laten zien dat het bedrijf up-to-date is, door nieuwtjes en de verbinding met Facebook, Instagram, enz.
  • Maar ook de storytelling met het verhaal van de oprichters moet passen
  • Het abonnement op de nieuwsbrief moet te allen tijde zichtbaar zijn

Evenzo wil je meestal nieuwe vacatures, routebeschrijvingen, je adres, alle telefoonnummers met contacten in kaart brengen. En ga zo maar door.

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

Je ziet al waar dit heen gaat: de startpagina kan en moet dat niet allemaal kunnen. Je moet het conceptueel en strategisch benaderen en nadenken over wat er precies moet komen te staan en waarom. Mijn aanpak is zeker niet de enige en misschien niet eens de beste voor jouw bedrijf. Maar ik zal proberen om eventuele aanwijzingen te rechtvaardigen. Andere meningen en suggesties zijn echter ook welkom in de opmerkingen onder dit artikel.

De startpagina is een landingspagina

Zoals alle pagina's op je website, is de homepage een landing page. Zie ons artikel over het ontwerp van de beste landingspagina's. Als je je dat realiseert, heb je al veel bereikt. Omdat je dan aan het omdenken bent.

In het ideale geval heb je zelfs al de gegevens over je homepage verzameld. Waar komen de mensen vandaan die op je startpagina terechtkomen? Wat willen ze bereiken? Hoe kun je hen daarbij 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 de andere subpagina's is uiterst belangrijk. Het is per slot van rekening de enige manier om erachter te komen of de inhoud en ontwerp functioneren. Lees onze gidsen over Content KPI's, Content hub, en Inhoud testen.

Waar komen je bezoekers vandaan?

In de meeste gevallen komen gebruikers via Google, via jouw marketingactiviteiten (dit kan bijvoorbeeld een visitekaartje zijn) of via de sociale mediaprofielen op je homepage. Deze bezoekers weten misschien niet echt wat je bedrijf doet. Maar zij zijn duidelijk op zoek naar een bedrijf dat jouw diensten of informatie aanbiedt. Anders zouden ze niet de moeite nemen om de startpagina te bezoeken.

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

Wat doet de website of het bedrijf eigenlijk?

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

Je bent op de juiste plek. Je kunt rustig ademhalen en ontspannen en je informatie vinden!

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

Homepage Basistekst
De homepage van een praktijk met een nuchtere inleidende tekst

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

Over de grote sliders: ze werken niet. Velen hebben hier al over geschreven. De pagina Should I use a carousel? is een goed begin. Ook de uitspraak "dit is belangrijk, we zetten het in de sidebar!" werkt niet meer, want de sidebar is gewoon niet meer up to date - en past niet goed bij responsive webdesign.

Emotionele aantrekking

Ik zeg volmondig "ja" tegen het aanspreken van de doelgroep op een emotioneel niveau. Dit bindt je klanten niet alleen op een feitelijk niveau, het spreekt ook de hersenen op een heel andere manier aan. Naar mijn mening moet de eerste boodschap echter nog steeds zijn "Wat doen jullie eigenlijk?". Hoe kan het niveau van emoties ook worden ingebracht?

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 design
  • Via foto's of video's

Aanspreken via de tekst

Mensen gebruiken een website heel verschillend. Dit betekent dat je niet weet hoe ze iets op jouw website vinden. Ze gebruiken bijvoorbeeld als eerste het menu, de zoekfunctie en scannen de koppen of links op je pagina scannen. Het meest voorkomende eerste ankerpunt waarop zij zich fixeren is echter de eerste tekst op de pagina die hen informatie geeft. Talrijke studies hebben aangetoond dat dit het geval is. Je kunt deze tekst heel anders "vormgeven" als je nadenkt hoe en met welke toon je de klanten wilt aanspreken.

"Ik ben Phillip Roth, ik maak een website voor jouw bedrijf" klinkt anders dan "Hey, ik ben een webdesign influencer en optimaliseer jouw crazy UX voor top stijgende KPI's!" Kijk goed naar je doelpubliek en pas je tone of voice daarop aan. Het is net zo goed een onderdeel van je huisstijl als het design.

Aanspreken via het design

Een aantrekkelijk ontwerp straalt niet alleen professionaliteit uit, het raakt ook emotioneel. Zie ons artikel over de basisprincipes voor een harmonieus webdesign. Kleuren, letterkeuze, ontwerpelementen - dit alles kan vertrouwen, vreugde, coolheid, crazyness 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 Afbeeldingen Emoties
Startpagina met emotionele aantrekkingskracht en inleidende tekst

Foto's of video's

Het imago van je bedrijf wordt ook bepaald door de beeldtaal. Zijn jullie een wereldwijd bedrijf met 600 werknemers en coole wolkenkrabbers in Shanghai of een kleine manufactuur 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. Ze willen weten: "Kan ik me er op mijn gemak voelen?", "Spreekt het product me aan?", "Is dit een bedrijf waar ik zou kunnen solliciteren?", "Werken er normale mensen?" "Zijn ze aardig?".

Dit alles kan in milliseconden worden overgebracht met één of meer prachtige beelden. Maar daarvoor moeten de beelden 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 nog de stockfoto zien met de vreemde blonde telefoniste. Net zo min als een vreemde vergaderzaal vol lachende maar "neppe" mensen.

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

Homepage Kleurenconcept
Homepage met aansprekende foto's en uniform kleurenconcept

Wat nu?

Dus nu hebben we de aandacht van de bezoekers. Zij weten nu: "Ik ben op de juiste plek, 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 - naast de eerste indruk - jouw tweede doel nastreven.

Op dit punt is het zinvol om na te denken over wat dit doel eigenlijk is. Zie ook de bijbehorende inhoudsstrategie. Want als de bezoekers niet gefixeerd zijn op het menu of het zoeken van informatie, dan beginnen ze te scrollen. Dus wat bied je ze vervolgens aan?

De mogelijkheden zijn legio:

  • Vertel een verhaal
  • Verdiep de informatie over het dienstenaanbod
  • Toon grote evenementen, gebeurtenissen of nieuws
  • Bied een tool aan om afspraken te maken, dan bellen ze je niet altijd direct
  • Ik verkoop persoonlijk het meest via mijn nieuwsbrief die ik op verschillende plaatsen op de website aanbiedt
  • Link naar de vacaturepagina als je op zoek bent naar nieuwe werknemers
  • Laat goede beoordelingen zien

Zoals je kunt zien, zijn er nu honderden manieren om de startpagina verder vorm te geven. En er is zeker geen standaardrecept om je klanten naar de gewenste conclusie te leiden. Je moet het uitproberen. Houd er echter rekening mee dat je homepagina of landing page niet oneindig veel aandacht krijgt. Heel zelden scrollt iemand 27 meter - en neemt toch alle informatie in zich op.

Homepage Getuigenissen
De startpagina met een citaat 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 home page in eenvoudige rechthoeken met grijze kaders sorteert. Zonder echte inhoud, zonder design. Je kunt dit doen op een vel papier of met programma's als Adobe XD, Sketch, Photoshop, InDesign of zelfs in Powerpoint. Zoals ik al zei, laat het ontwerp hier nu buiten. Op dit punt wil je bijvoorbeeld weten:

  • Wat moet er zeker op de startpagina staan?
  • Wat hoeft daar niet per se op te staan?
  • Wordt het allemaal te veel?
  • Kan het doel worden bereikt 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 in de beperkte ruimte past, moet je je doel verduidelijken. De beste plaats om dit te doen is onderaan de pagina. Zoals ik al zei: daar kun je de belangrijkste informatie benadrukken, de oproep tot actie plaatsen of met een foto van jezelf - naast de contactgegevens - de gebruiker uitnodigen om contact met jou op te nemen. Wat je tweede doel van de pagina ook is: nu kun je het plaatsen voordat je footer komt. Je startpagina is, zoals ik in het begin al zei, een landingspagina.

De voettekst kan weer als secundaire navigatie fungeren, bijvoorbeeld als je daar meer informatie wilt aanbieden. Velen kijken ook graag naar je impressum of je een serieuze aanbieder bent. Maar wees voorzichtig! Te veel elementen in je footer kunnen afleiden van je eigenlijke doel. Als bijvoorbeeld de inschrijving voor de nieuwsbrief erin staat, maar je schrijft slechts één keer per jaar een nieuwsbrief, dan is dat misschien minder doelgericht.

Conclusie

Beschouw je startpagina als een landing page. Geef je bezoekers het gevoel dat ze op de juiste pagina zijn beland. Versterk dit gevoel met een doelgroepgerichte adressering, een chique 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 wat misschien nog beter werkt. 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 :-; Juist daarom ben ik blij om nieuwe inzichten van jou te horen, in de opmerkingen! Misschien heb jij de perfecte formule gevonden voor je startpagina?

Jouw vragen over dit artikel

Heb je vragen voor Phillip? Of een tip voor het ontwerp van een homepage? We kijken uit naar je commentaar. Wil je op de hoogte blijven van nieuwe artikelen over WordPress en webdesign? Volg RAIDBOXES dan op Twitter, Facebook, LinkedIn of via onze newsletter.

Phillip is een freelance ontwerper uit Keulen en bedenkt, ontwerpt, creëert en onderhoudt vanaf 2011 toegankelijke WordPress websites voor zijn klanten. Gedurende vele jaren was hij mede-organisator van WordCamp Europe en andere lokale WordCamps. Als communicatiedesigner ontwerpt Phillip ook graag logo's, bedrijfsuitrusting en reclamemateriaal, waaronder beursstands.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.