Zo ontwerp je een effectieve inlogpagina en deze fouten vermijd je

Een website ontwerpen is geen eenvoudige klus. Een website is een groot project dat bestaat uit een hele reeks kleine beslissingen die samen bepalen hoe je website eruitziet. Daarbij krijg je te maken met keuzes die je waarschijnlijk vanzelfsprekend vindt als je andere websites bezoekt.

Een voorbeeld van zo'n kleine beslissing is de indeling van je inlogpagina.

Gebruikerservaring is de ervaring die iemand heeft bij het gebruik van een product, zoals een website, en of die ervaring over het geheel genomen prettig was. Je website is het belangrijkste instrument van je bedrijf, en tijdens het ontwerp moet je het hele project bekijken vanuit de klantervaring.

Functionaliteit is enorm belangrijk op een website. Technische problemen, trage laadtijden, moeite om te vinden wat je zoekt en vergelijkbare problemen kunnen de gebruikerservaring verpesten. Bij inlogpagina's gaat het om een betrokken gebruiker: iemand die al lid is of zich wil aanmelden.

Voor je hele site wil je elk onderdeel zorgvuldig plannen en plaatsen. In dit artikel bekijken we best practices voor het plannen en indelen van je website, en vooral voor inlogpagina's. We behandelen eerst algemene best practices en daarna het ontwerp van inlogpagina's en hoe je het succes ervan meet.

Laten we beginnen.

We beginnen met best practices voor webdesign die gelden voor je hele site. Daaronder vallen ook best practices voor het ontwerp van inlogpagina's, zodat gebruikers efficiënt en veilig bij hun account kunnen.

1. Houd de laadtijd van je pagina's laag

We gaan hier niet te technisch worden, maar dit punt moet gezegd worden. Gebruikers willen niet zitten wachten tot je pagina('s) geladen zijn. We duiken hier niet in de technische kant, maar zoek even op hoe je je laadtijden laag houdt.

2. Een consistente stijl op alle pagina's

Van je hoofdpagina's tot je landingspagina's: je site heeft een duidelijk gedefinieerd thema en een herkenbare stijl nodig. Dat samenhangende ontwerp moet ook doorlopen in het ontwerp van de inlogpagina, zodat alle contactmomenten met gebruikers consistent zijn. Bouw voort op je logo en gebruik op al je pagina's een vergelijkbaar kleurenpalet, zodat bezoekers zich thuis voelen en weten dat ze op de juiste plek zijn.

3. Houd de navigatie eenvoudig

Maak je website niet onnodig ingewikkeld met rommelige navigatiebalken. Zet in je hoofdnavigatie alleen het essentiële en voeg daar vervolgkeuzemenu's voor je subpagina's aan toe. Het laatste wat je wilt, is je bezoekers overweldigen. Maak het ze makkelijk om te komen waar ze naartoe willen.

4. Zet op elke pagina een call-to-action (CTA)

Met calls-to-action maak je van websitebezoekers klanten voor je bedrijf. Het doel is om alles eenvoudig te maken voor gebruikers. Waar ze ook binnenkomen of naartoe gaan op je website, ze moeten altijd de mogelijkheid hebben om hun gegevens achter te laten en mogelijk klant te worden.

5. Houd je content goed leesbaar

Dat kan op allerlei manieren, maar je wilt niet dat bezoekers op je pagina's grote lappen tekst zien. Er zijn verschillende strategieën; we bespreken er een paar.

Houd om te beginnen je alinea's kort en to the point. Verdeel je tekst in kleinere, beter verteerbare stukken.

Wissel daarnaast de opmaak af. Zie je hoe dit artikel nu in genummerde onderdelen is verdeeld? Ook dat is een effectieve strategie.

Ook opsommingstekens zijn een goed idee om content op te delen.

Met opsommingstekens ziet de content op je pagina er minder overweldigend uit.
Met opsommingstekens breng je je punten sneller over.
Verveel gebruikers niet met een overdaad aan informatie!
Het laatste advies over content op je pagina past hier ook, maar verdient waarschijnlijk een eigen onderwerp.

6. Gebruik multimedia

Gebruik allerlei afbeeldingen, illustraties, video's, grafieken, banners en alles wat je maar kunt bedenken om de content op je pagina op te fleuren. Multimedia geeft je pagina persoonlijkheid, houdt je gebruikers betrokken en zorgt vooral voor vermaak.

7. Gebruik plugins

Waar je ook host, gebruik plugins om functionaliteit aan je site toe te voegen. Laten we als voorbeeld zeggen dat je WordPress gebruikt.

Je gaat dus op zoek naar de beste WordPress-plugins. Je hebt een kapsalon en wilt dat mensen direct op je site afspraken kunnen boeken. Je zoekt dus specifiek een WordPress-boekingsplugin of afsprakenplugin.

Dan heb je geluk.

Je komt Bookly tegen, een plugin voor afsprakenbeheer. Zulke plugins toevoegen aan je site levert je gebruikers enorm veel waarde op.

Tot nu toe hebben we algemene best practices voor je website besproken. Nu richten we ons specifiek op inlogpagina's, met tips en strategieën voor een optimaal ontwerp. Daarbij is het essentieel om stil te staan bij veelgemaakte fouten bij het ontwerpen van een inlogpagina, zodat de gebruikerservaring naadloos is.

Houd bij het ontwerpen je gebruiker altijd voorop. Dat punt is je inmiddels vast duidelijk, maar het kan niet vaak genoeg worden benadrukt. Buyer persona's opstellen is een enorm nuttige oefening in het ontwerpproces.

Het is belangrijk dat we hier allemaal hetzelfde bedoelen. Voor wie zich afvraagt wat een buyer persona is, beginnen we daar.

Een buyer persona is een weergave van je ideale klant die je hebt opgesteld op basis van onderzoek en gegevens over je klanten.

Begin bij elke ontwerpbeslissing met je buyer persona's. In dit geval, bij inlogpagina's, heb je eigenlijk met twee persona's te maken.

Laten we ze los van elkaar bekijken terwijl we ons ontwerp uitstippelen.

1. Het potentiële lid

Deze buyer persona is de nieuwe bezoeker van je site die lid wil worden, maar nog geen account heeft. Het doel, en dat geldt voor beide buyer persona's, is dat duidelijk en eenvoudig te zien is waar je inlogt en waar je je als lid registreert.

Maak deze opties duidelijk verschillend. Een goede strategie is twee aparte vakken voor deze functies, met verschillende kleuren om ze te onderscheiden. Gebruik daarnaast duidelijke, grote tekst om de vakken te benoemen.

Maak het niet te ingewikkeld.

Dan de invoervelden. De beste strategie is om de informatie die je nodig hebt in stappen te vragen. Bepaal eerst welke informatie je echt nodig hebt van een nieuw lid.

Houd het liefst eenvoudig en vraag op de hoofdpagina alleen voornaam, achternaam en e-mailadres. Daarna stuur je ze naar een tweede pagina waar je meer informatie kunt vragen om de aanmelding af te ronden.

2. Het terugkerende lid

Bij deze buyer persona gaat het om een terugkerend lid dat gewoon zo makkelijk en moeiteloos mogelijk wil inloggen. De opmaaktips van hierboven gelden hier natuurlijk ook, maar om de inlogervaring echt te verbeteren, voegen we hier opties toe.

Deze opties moeten het inloggen voor terugkerende leden supermakkelijk en gestroomlijnd maken. Laten we een paar manieren bekijken om het eenvoudiger te maken.

Maak het gebruikers eerst makkelijker om de volgende keer in te loggen. Voeg een selectievakje 'Onthoud mij' toe. Dan kan je site de inloggegevens van deze gebruiker de volgende keer op dit apparaat automatisch invullen. Deze gebruikers hoeven dan alleen nog op de inlogknop te klikken als ze terugkomen op je site.

Simpel.

Maak het nu ook makkelijk voor mensen die hun wachtwoord intypen. Herinner ze eraan dat wachtwoorden hoofdlettergevoelig zijn. Dat lijkt een open deur, maar geloof ons: het helpt mensen bij het inloggen.

En dan de vergeetachtige gebruikers die niet op 'Onthoud mij' hebben geklikt, een nieuw apparaat gebruiken en/of hun wachtwoord en/of gebruikersnaam niet hebben opgeschreven.

Deze mensen roepen: 'Help!'

Twee eenvoudige knoppen nemen al deze zorgen weg. Zorg voor een knop 'Wachtwoord vergeten' en een knop 'Gebruikersnaam vergeten'. Vervolgens stuur je gebruikers instructies om hun wachtwoord en/of gebruikersnaam te herstellen of opnieuw in te stellen, zodat ze weer bij hun account kunnen.

Pro-tip: laat gebruikers zien dat je om ze geeft en wijs ze op de optie 'Onthoud mij' en/of het opschrijven van hun wachtwoord, zodat ze dit probleem in de toekomst niet meer hebben. Zulke proactieve hulp bouwt vertrouwen en een band met je gebruikers op.

We hebben tot nu toe veel behandeld. Nu bekijken we wat we kunnen doen om te volgen en te meten hoe succesvol ons ontwerp en de inrichting van onze pagina's zijn. Geef je site minstens 90 dagen om gegevens te verzamelen en zet daarna A/B-tests op om je site verder te ontwikkelen en te verbeteren.

Voordat we daar verder op ingaan, vatten we snel samen wat we tot nu toe hebben behandeld.

Best practices voor websiteontwerp

• Zorg dat je pagina's snel laden. Gebruikers zijn niet bepaald geduldig.
• Zorg voor een consistente stijl en een consistent thema op je hele website.
• Maak de navigatie makkelijk voor je gebruikers.
• Gebruik op elke pagina CTA's.
• Verdeel je content in verteerbare stukken. Geen lange alinea's!
• Fleur je pagina's op en houd ze levendig met multimedia.
• Gebruik plugins om geavanceerde functionaliteit aan je pagina's toe te voegen.

Best practices voor inlogpagina's

• Stel buyer persona's op en begrijp wie je eindgebruikers zijn.
• Maak de opties om je als nieuw lid aan te melden en als terugkerend lid in te loggen makkelijk herkenbaar.
• Zorg dat beide processen moeiteloos en eenvoudig zijn. Beperk wat gebruikers moeten doen tot het minimum.
• Geef in beide processen aanbevelingen en handige tips om gebruikers te laten zien dat je er bent om te helpen en dat hun ervaring telt.
• De belangrijkste les tot nu toe: verplaats je altijd in de gebruiker. Neem elke beslissing voor je website vanuit de gebruikerservaring. De gebruikerservaring staat voorop!

Dan nu het meten.

Eerst het belangrijkste, en nee, dit is geen reclame voor Google. Er bestaat simpelweg geen betere tool voor websiteanalyse dan Google Analytics.

Maak een Google Analytics-account aan en volg een korte online training om te begrijpen hoe je deze tool optimaal benut. Google biedt deze cursussen zelf gratis aan. We geven hier dus geen volledige tutorial over Google Analytics, maar wel een paar algemene tips om al het ontwerpwerk dat we hebben besproken te meten.

1. Stel je bedrijfsdoelen en doelvoltooiingen in

Wat zijn de doelen van je website? Veel verkeer dat geen meetbare zaken voor je oplevert, is je tijd niet echt waard. Bepaal je doelen (de acties die je bezoekers op je website wilt zien uitvoeren) en stel ze in als doelvoltooiingen in je Analytics-account.

2. Houd de zoektermen van je gebruikers in de gaten

Eerlijk is eerlijk: hiervoor moet je een Google Search Console-account aanmaken en koppelen. Dat is gratis en eenvoudig, en de Help van Google legt je snel uit hoe dat werkt. Kijk daarna met welke zoekopdrachten mensen op je website terechtkomen. Gebruik die gegevens om je strategie voor zoekmachineoptimalisatie steeds verder bij te stellen.

3. Gebruik de tool Page Analytics

Met deze tool zie je welke plekken op elke pagina de meeste klikken en aandacht trekken. Zo zie je wat op je pagina's wel en niet werkt. Bij inlogpagina's kunnen dat waardevolle gegevens zijn.

4. A/B-tests

Gooi het bij pagina's die achterblijven eens over een andere boeg en test nieuwe strategieën naast elkaar. Leg de gegevens vast en voer onderweg de nodige wijzigingen door. Websites zijn levende organismen die voortdurend aandacht nodig hebben.

We hopen dat je hier iets aan hebt gehad. Ontwerp is een breed onderwerp en een proces dat nooit af is. Deze best practices helpen je goed bij het ontwerpen, bouwen, implementeren en monitoren van je website. Succes!

Bookly FAQ

Welke fouten moet je vermijden op een inlogpagina?

Te veel velden tonen voordat de gebruiker zelfs maar weet waar hij moet beginnen. Tegelijk om een avatar, een beveiligingsvraag en een telefoonnummer vragen en er dan nog een verborgen CAPTCHA achteraan plakken: zo jaag je mensen weg. Vermijd rommel. Gebruik duidelijke labels: 'E-mail', niet 'Gebruikersidentificatie'. Dwing niet bij elke keer inloggen een nieuw wachtwoord af. Wachtwoorden van 16 tekens met symbolen, hoofdletters, kleine letters en emoji klinken misschien veilig, maar ze frustreren meer dan ze beschermen. En verstop 'Wachtwoord vergeten' alsjeblieft niet in kleine grijze letters onderaan. Zien gebruikers het niet, dan haken ze gewoon af.

Hoe ontwerp je een gebruiksvriendelijke inlogpagina?

Begin met doortastende eenvoud. Eén formulier met twee velden, e-mail en wachtwoord, gecentreerd op het scherm. Grote knoppen die op mobiel makkelijk aan te tikken zijn. Bied een schakelaar 'Wachtwoord tonen', zodat mensen zich niet in het donker vertypen. Zet een duidelijke link 'Wachtwoord vergeten' direct onder het veld. 

Ondersteun je inloggen via social media of single sign-on, zet die knoppen dan na het hoofdformulier, met een scheidingslijn en een vriendelijke tekst als 'of ga verder met'. Houd foutmeldingen beleefd en precies: 'Dit e-mailadres komt niet voor in ons systeem' is beter dan 'Inloggen mislukt'. Gebruik tot slot vertrouwde lettertypen, het kleurenpalet van je merk en ruim voldoende witruimte, zodat niets krap aanvoelt. Dat is de kern van de best practices voor het ontwerp van inlogpagina's en een solide blauwdruk voor je inlogpagina.

Wat maakt een inlogpagina veilig en effectief?

SSL-versleuteling is een must. Zorg dat je URL met HTTPS begint en dat het slotje duidelijk zichtbaar is. Beperk het aantal inlogpogingen, zodat bots niet de hele dag wachtwoorden kunnen uitproberen. Bied tweestapsverificatie aan, via sms, e-mail of een authenticator-app, zodat gebruikers een extra beveiligingslaag hebben. Sla wachtwoorden op de server op als gesalte hashes. Registreer op de achtergrond mislukte pogingen voor monitoring. Maar overspoel gebruikers niet met jargon. Communiceer helder over beveiliging: 'We beschermen je gegevens met versleuteling volgens de industriestandaard.' Zo stel je gebruikers gerust en volg je de best practices voor het ontwerp van inlogpagina's op het gebied van veiligheid en duidelijkheid.

Hoe kan een slecht inlogontwerp de klantbinding schaden?

Kunnen mensen niet snel inloggen, dan vertrekken ze. Elke extra klik of verwarrende foutmelding werkt afschrikwekkend. Frictie bij het inloggen voelt als een dichte deur terwijl je naar binnen wilt. Gefrustreerde gebruikers laten winkelwagens achter, slaan updates over en verdwijnen naar concurrenten met de deur wél open. Die e-mailnieuwsbrief waar je zo hard aan hebt gewerkt? Nooit gezien. De verkoop die je wilde sluiten? Weg. Kortom: een onhandige inlogpagina is een lekke emmer. Wie naadloze toegang voorop zet, volgt de best practices voor het ontwerp van inlogpagina's en zorgt dat gebruikers keer op keer terugkomen.