13 best Practices voor websiteontwerp voor 2021

tegenwoordig kunt u een website in een paar minuten operationeel krijgen. Maar er is een verschil tussen een website die live is en die geoptimaliseerd wordt.

Waarom is ontwerp belangrijk? Het duurt slechts 0,05 seconden voor mensen om een mening te vormen over uw website. Ja, je leest dat goed-50 milliseconden voor iemand om weggeblazen of afgeslagen door uw website. Het grootste deel van die mening wordt gevormd door het ontwerp.

Website ontwerp heeft ook invloed op uw conversies, geloofwaardigheid, en, uiteindelijk, maakt of breekt het succes van uw site. Geen website is perfect, maar je moet het zo veel mogelijk te optimaliseren.

hier is ook iets om rekening mee te houden: na een slechte ervaring is het onwaarschijnlijk dat 88% van de consumenten naar een website zal terugkeren. Op de top van dat, een recente studie bleek dat 77% van de agentschappen zeggen dat een slechte website ontwerp is de belangrijkste zwakte van hun klanten.

Bottom line: Als uw webdesign is niet geoptimaliseerd voor user experience (UX), het gaat schadelijk zijn voor uw succes. Daarom heb ik deze gids geschreven.

bij het ontwerpen van een website zijn veel factoren betrokken. Dit zijn de dertien belangrijkste elementen om prioriteit te geven in 2021. Als u deze best practices volgt, zullen de prestaties van uw site drastisch verbeteren.

Gebruik deze checklist om te zorgen dat u een winnende ontwerp

1. Minimaliseren tekst
2. Toon, don ’t tell
3. Gebruik korte zinnen
4. Probeer een kortere alinea’ s
5. Kies een kleurenschema dat past
6. Maak uw CTA duidelijk
7. het Versterken van de acties met de vertrouwdheid
8. Vereenvoudigen de navigatie
9. het Optimaliseren van uw ontwerp voor mobiele
10. Prioriteit SEO
11. Monitor uw pagina laadsnelheid
12. Het continu uitvoeren van A/B tests

Minimaliseren tekst

niet vullen uw pagina ‘ s met massieve blokken tekst.

ik heb het niet over blog posts, die soms dieper moeten gaan (zoals deze!). Ik heb het over uw webpagina ‘ s (bijvoorbeeld homepage, landing page). Houd de tekst hier tot een minimum.

u wilt uw websitebezoekers alles vertellen over u, uw bedrijf, uw merk en uw producten. Maar je moet leren hoe je dat verhaal te vertellen in slechts een paar zinnen of—nog beter— een paar woorden.

Show, don ‘ t tell

Visuals helpen u niet alleen om de geschreven inhoud op te splitsen, maar ze kunnen ook een diepere verklaring geven. Laat je bezoekers zien waar je over gaat. Ze zullen meer begrijpen in een kortere tijd.

Harry ‘ s productpagina belichaamt beide eerste twee ontwerpprincipes:

bijvoorbeeld, laten we zeggen dat uw website verkoopt scheermessen, messen, Scheerschuim, en andere Scheerproducten voor mannen.

u werkt met een abonnementsmodel en levert deze producten maandelijks aan uw klanten. Het ontwerp van uw scheermessen is erg knap — ze zijn gemaakt van gesneden hardhout en zijn leuk genoeg om te geven als een geschenk.

in plaats van in al dit detail op uw homepage te gaan, kunt u gewoon een foto van deze producten met tekst die iets zegt als, “geleverd aan uw deur.”Je krijgt je boodschap in slechts vier woorden over.

zeker, u kunt meer in detail gaan hoe dieper de bezoeker in uw pagina ‘ s komt, maar een lange tekst beschrijving is niet vereist.

korte zinnen gebruiken

korte zinnen zijn gemakkelijker leesbaar.

bombardeer bezoekers niet met grote stukken tekst. Ze zullen niet weten waar te beginnen met lezen en zal niet in staat zijn om uw inhoud te verteren.

meng het. Als je een lange zin nodig hebt, volg die dan met een korte. Variatie helpt.

probeer kortere alinea ‘ s

gebruik alinea-onderbrekingen in uw voordeel. Het is goed om langere alinea ’s te schrijven, maar ik hou van mijn homepage alinea’ s om een paar zinnen.

het is ook belangrijk om het niet te overdrijven. Te veel van een goede zaak, is eigenlijk een slechte zaak.

Begin elke alinea met nieuwe informatie, dus als iemand scrolt, kan hij snel zien of hij die alinea moet lezen.

het elimineren van onnodige tekst op uw pagina ‘ s vermindert rommel en legt meer nadruk op uw call-to-action.

het feit dat het TCL alleen in zijn eigen paragraaf opvalt, heeft meer impact dan het in een bos tekst te verbergen.

een zeer nuttig hulpmiddel in deze situatie zijn kogels. In plaats van het toevoegen van alinea ‘ s en lange vorm schrijven, overwegen het gebruik van lijsten. In die lijsten, gebruik bullet points.

Studies tonen aan dat meer mensen naar lijsten met opsommingstekens zullen kijken dan andere formaten. Dat komt omdat ze helpen bij het verbeteren van de scannability van een pagina en kunt u de belangrijkste punten die u wilt maken markeren.

Kies een kleurenschema dat past bij uw merkstrategie

de kleurkeuzes die u maakt op uw website zijn belangrijker dan u denkt.

bezoekers beoordelen uw website in minder dan 90 seconden. Het meeste daarvan is een gevolg van de kleuren die u kiest.

de beste manier om uw website kleurenschema te kiezen is met branding. Zie uw logo. Passen de kleuren op uw website bij uw merkimago?

hier is een voorbeeld. Denk aan Starbucks.

als je deze merknaam hoort, Weet ik zeker dat je een afbeelding in je hoofd hebt. Misschien is het het logo, een bord of een winkellocatie.

associeert u Kleuren aan die naam? Laten we nu eens kijken naar hun website.

het is geen verrassing dat ze gingen met een groene kleurenschema.

deze ontwerpkeuze komt overeen met hun logo en merkimago, wat versterkt wat consumenten al associëren met het merk. Door de zaken consistent te houden, is er geen verwarring. Het zou vreemd zijn als je deze website bezocht en de kleuren geel en rood waren. Dat heeft niets te maken met hun merk.

we zullen meer praten over versterking in grotere diepte als we doorgaan.

maak uw CTA duidelijk en duidelijk

CTA ‘ s mogen niet worden begraven. Ze moeten groot, gedurfd en krachtig zijn en ze moeten duidelijk opvallen als de actie die uw bezoekers vervolgens moeten nemen.

toch hebben de meeste websites geen CTA-knop die in minder dan drie seconden Gespot kan worden. Er is een goede kans dat je in de groep valt die langer duurt. Dat is niet de categorie waar je in wilt zitten.

u kunt geen conversies starten zonder een effectieve CTA-knop.

ik zie bijna nooit een CTA op de binnenpagina’ s van een bedrijf (de pagina ‘ s die uitleggen wat uw merk doet en wat u aanbiedt). Dit is een grote ontwerpfout. Je kunt niet verwachten dat bezoekers om terug te navigeren naar uw homepage om te converteren.

kijk eens naar deze CTA van lakmoes.

kijk eens hoe simpel dit ontwerp is. Er is minimale tekst op het scherm, dus de boodschap is duidelijk.

hierdoor valt de CTA “sign up free” op. In feite, lakmoes zet het zelfs in meer dan één locatie op het scherm.

waar u uw CTA moet plaatsen verschilt van pagina tot pagina. Bijvoorbeeld, blog posts moet de CTA boven zodat lezers zien het snel en ook aan de onderkant nadat ze de post hebben gelezen.

ga dieper: wilt u uw CTA ‘ s optimaliseren? Hier zijn 11 manieren om uw oproepen tot actie te verbeteren.

acties met vertrouwdheid versterken

als uw bericht hetzelfde is, moet uw CTA op elke pagina hetzelfde zijn.

denk na over hoe mensen uw website navigeren. Zelfs als u een bepaalde stroom instelt, zal niet iedereen op een pagina landen en in seconden converteren. Ze kunnen eerst even rondsnuffelen.

bijvoorbeeld, stel dat je een e-commerce website hebt. U moet de CTA knop niet veranderen van pagina naar pagina, die er zo uit zou zien:

• Homepage:Nu afrekenen
• Category page: Koop het vandaag
• productpagina: Klik om

aan te schaffen als een bezoeker een van deze knoppen op uw homepage ziet, de andere op een categoriepagina en de derde op een productpagina, is er geen versterking.

houd in plaats daarvan de messaging en de stijl consistent. Hier is een goed voorbeeld van de sieraden en accessoires merk MVMT.

het maakt niet uit of je op hun Brillen, Horloges, of sieraden pagina. Je gaat dezelfde “SHOP NOW” CTA zien voor hun producten.

elke pagina blijft ook consistent met het minimalistische, zwart-wit ontwerp van hun website.

pas dit ontwerpprincipe ook toe op uw website.

het gaat verder dan de CTA-knop. Het idee is om dit soort wapening te hebben met zoveel mogelijk elementen.Consistentie in taal, berichtgeving en design versterkt uw merkidentiteit en laat een blijvende indruk achter bij uw bezoekers.

Vereenvoudig de navigatie

het zou voor een websitebezoeker niet moeilijk moeten zijn om te vinden wat hij zoekt op uw site.

plaats uzelf in hun schoenen. Waarom bezoekt u de website? Hoe bereik je die taak? Misschien wil je iets kopen, meer informatie krijgen, of zien wat er te bieden is. Wat die reden ook mag zijn, als bezoekers er niet snel achter komen, gaan ze weg.

er is gewoon te veel concurrentie. Gebruikers hebben geen reden om te gaan met logge website navigatie. Het enige wat ze hoeven te doen is uw site verlaten en vinden wat ze nodig hebben ergens anders.

probeer het wiel niet opnieuw uit te vinden met een complex ontwerp. Blijf bij het standaardformaat.

bijvoorbeeld, de meeste websites plaatsen het navigatiemenu horizontaal boven aan elke pagina. Als uw menu ergens anders is, kan het uw bezoekers verwarren.

hoe minder opties in het menu, hoe beter. Anders zal het voor mensen te moeilijk zijn om te vinden wat ze nodig hebben. Dit concept staat bekend als Hick ‘ s Law.

hoe meer opties je iemand geeft, hoe langer het duurt om een beslissing te nemen. Dat is de reden waarom complexe ontwerpen en navigaties zal verpletteren uw conversie tarieven.

er is een beroemd experiment over dit, aangeduid als de jam studie, die de paradox van keuze bespreekt.

het experiment werd uitgevoerd in een lokale supermarkt. De consumenten kregen op één dag 24 jams om te proeven en de volgende dag zes jams.:

• de grotere display op dag één trok 60% van de shoppers, maar slechts 3% van die mensen maakte een aankoop.
• de kleinere vertoning van zes jams op de tweede dag trok 40% van de shoppers aan, maar 30% van hen deed een aankoop.

door het beperken van keuzes waren de conversies tien keer hoger. Dit zelfde concept kan worden toegepast op uw website navigatie.

Elimineer onnodige menu-opties. Bijvoorbeeld, in plaats van het hebben van een “home” knop, gewoon gebruik maken van de website logo om terug te linken naar het startscherm.

kijk eens op de homepage van Square.

het ontwerp is super schoon. De menu-opties zijn zeer beperkt. Dit maakt het gemakkelijk voor bezoekers om een selectie die past bij hun behoeften te kiezen.

u zult merken dat er minimale tekst op het scherm is, en de CTA is duidelijk en duidelijk.

dit type ontwerp maakt het bijna onmogelijk voor websitebezoekers om te verdwalen of verward te raken tijdens het navigeren.

voor degenen onder u die veel opties op uw website hebben, zoals een e-commerce winkel, kunt u een zoekbalk toevoegen om het navigatieproces te vereenvoudigen zonder een ingewikkeld menu te gebruiken. Veel softwarebedrijven zetten hun functies in een tabblad functies in plaats van een individueel tabblad voor elke functie.

Optimaliseer uw ontwerp voor mobiele apparaten

mobiel is hoe het grootste deel van de wereld toegang heeft tot het Internet. Dat betekent dat als je niet geoptimaliseerd voor mobiel, uw website is niet van plan om goed te presteren.

bekijk deze gegevens uit Hootsuite:

zoekmachines herkennen dit en belonen sites die mobiel-vriendelijk zijn. Hier zijn een paar meer statistieken om het punt te raken home:

• Google weet dat 87% van de smartphonebezitters hun apparaten gebruiken om minstens één keer per dag een internetzoekopdracht uit te voeren.
• 58% van alle Google-zoekopdrachten worden uitgevoerd vanaf een mobiel apparaat
• het resultaat: 70% van de eerste pagina-resultaten op Google zijn geoptimaliseerd voor mobiele apparaten.

mobiele SEO is het belangrijkste wat u kunt doen om goed te scoren op Google. Serieus.

als uw website er niet goed uitziet op een smartphone, zullen mensen niet willen blijven. Dus, zorg ervoor dat uw website ontwerpen zijn mobiel-vriendelijk.

ga dieper: wilt u leren hoe u uw website kunt optimaliseren voor mobiel? Bekijk onze complete gids voor een mobiele vriendelijke website.

prioriteer SEO

alles wat u op uw site doet, moet terug naar SEO.

en het is niet genoeg om hier en daar trefwoorden toe te voegen. Het is een website-breed systeem van het verbeteren van de inhoud en meedogenloos gericht op specifieke onderwerpen om uw site autoriteit op te bouwen in dat gebied.

bijvoorbeeld, een bestemmingspagina voor een e-commerce site zal zich willen concentreren op bepaalde on-page elementen zoals:

• bruikbaarheid. Hoe gemakkelijk het is voor uw bezoekers om te gebruiken en te navigeren.
• mobiel. Hoe uw website eruit ziet en presteert op een mobiel apparaat.
• Trefwoordoptimalisatie. De woorden en zinnen die u wilt rang voor.
• interne links. Hoe vaak u linkt naar andere pagina ‘ s op uw website.
• Headline. Dit is vaak de grootste tekst op een webpagina. Als zodanig, het doet het grootste deel van het zware tillen op uw landing page.

Maak een XML-sitemap aan. Dit zal het gemakkelijker maken voor zoekmachine crawlers om inhoud te analyseren op uw website. Een sitemap toont de bots de locatie van pagina ’s op uw site, wanneer de pagina voor het laatst is bijgewerkt, de updatefrequentie en de relatie met andere pagina’ s op uw site.

een goede sitemap toont Google dat u geen dubbele inhoud hebt, wat uw SEO-rankings kan beschadigen.

wanneer u uw site ontwerpt, zijn er ook veel minder voor de hand liggende elementen die een rol spelen bij het rangschikken op Google.

we hebben al een paar aspecten besproken die je kunt verbeteren op de pagina zelf. Maar andere elementen omvatten:

• domein. Uw URL is vrij consequential om uw google rank. Belangrijke factoren zijn het hebben van uw zoekwoord in het domein, hoe oud het domein is, en wat uw domeinextensie is (bijvoorbeeld hoge kwaliteit zoals. com,. net,. gov, .org versus niet-traditionele extensies).
• kwaliteit van de Site. Uw website moet nuttig zijn voor bezoekers. Belangrijke factoren zijn onder meer een pagina’ over ons’, een pagina’ Contact’, Hoe vaak u uw website bijwerkt, hoe gemakkelijk het is om door uw website te navigeren, uptime (hoe vaak uw website crasht) en SSL-certificaten.
• Backlinks. Dit verwijst naar de frequentie waarmee uw website door andere websites wordt gekoppeld. Het is een cruciale factor voor een goede ranking op Google. Belangrijke factoren zijn onder meer het aantal linkpagina ‘ s, de kwaliteit en autoriteit van de websites die naar u linken, de ankertekst die ze gebruiken om naar u te linken, en of die links al dan niet afkomstig zijn van .edu of .gov domeinen.

Monitor uw pagina laadsnelheid

ik weet wat sommigen van u denken. Wat heeft de snelheid van het laden van pagina ‘ s te maken met web design? Alles.Zeker, laadtijden zijn gerelateerd aan uw website hosting plan, server, verkeer, en dingen van die aard. Ontwerpkeuzes kunnen echter ook van invloed zijn op uw laadtijden.

elke keer dat u een element aan uw site toevoegt, met name afbeeldingen, video ‘ s en andere complexe mediabestanden, kunnen uw laadtijden worden beïnvloed. Als zodanig kan het HTTP-verzoeken vertragen.

trage laadtijden leiden tot hoge leegstandspercentages. Je kunt dit niet negeren. Als uw pagina ‘ s te lang duren om te laden, het gaat om een groot probleem.

bovendien, 25% van de mensen verlaten websites die meer dan vier seconden duren om te laden. Ja, vier seconden. Dat is alles wat je hebt, of je verliest 25 van elke 100 bezoekers. De meeste bezoekers verwachten dat een pagina in twee seconden of minder wordt geladen.

hoe kunt u dit toepassen op uw webdesign?

• de bestandsgrootte van uw afbeeldingen verkleinen
• Profiteer van browser caching tools
• verminder HTTP-verzoeken
• Verbeter uw ttfb (time to first byte)
• Minify en combineer uw bestanden

er zijn veel hulpmiddelen online beschikbaar om u te helpen deze dingen te bereiken. Bijvoorbeeld, kijk op de WordPress Rocket plugin als een bron voor het minifying en het combineren van uw bestanden. En gebruik de pagina snelheid inzichten tool van Google om u te helpen uw laadtijden te controleren wanneer u ontwerpwijzigingen op uw website.

continu A / B-tests uitvoeren

als het gaat om uw website ontwerp, kunt u het niet zomaar instellen en vergeten.

zoals ik al eerder zei, geen enkele website is perfect. Er zijn altijd manieren voor u om uw ontwerp te verbeteren.

daarom moet u A / B-tests uitvoeren. Hiermee kunt u regelmatig verbeteringen aan uw website te maken en uit te testen elementen om te zien wat het beste werkt en, nog belangrijker, wat niet werkt helemaal.

bijna elk element van uw site ontwerp kan worden getest. U kunt bijvoorbeeld twee verschillende landingspagina ’s maken die verschillende CTA’ s hebben, maar verder hetzelfde zijn. Als een landing page presteert beter dan de andere, U zult weten dat de CTA is waarschijnlijk het krijgen van de klus.

hier zijn enkele snelle suggesties om u op weg te helpen:

• Test de locatie van uw CTA-knop
• Test de kleur van uw CTA-knop
• Test de CTA-kopie
• Test de afbeeldingen die u gebruikt op landingspagina ‘ s
• test tekstvariaties op het scherm
• Test de grootte van uw navigatiebalk

er zijn zoveel opties, Ik zou hier de hele dag over kunnen praten. Voor degenen onder u die niet bekend zijn met A/B-tests of hulp nodig hebben, Bekijk mijn gids over alles wat u moet weten voordat u begint met A/B-testen.

conclusie

zeggen dat het ontwerp van een website belangrijk is, zou een understatement zijn. Uw web design keuzes zal uiteindelijk van invloed zijn of uw site succesvol is.

• ieders website kan worden verbeterd. Gebruik deze lijst als een gids als een bron om u te helpen deze verbeteringen aan te brengen.
• raak niet overweldigd. Ik zeg niet dat je al deze ontwerpsuggesties ‘ s nachts moet implementeren, maar je moet ergens beginnen.
• ik heb deze ideeën niet uit het niets gehaald. Alles op deze lijst wordt ondersteund door onderzoek en statistieken met betrekking tot ontwerpprincipes.

onthoud: elke website is een werk in uitvoering. Als je het werk in en altijd fine-tunen van uw website, je gaat om uw voorsprong met uw concurrenten te verbeteren.

het maakt niet uit of uw website gloednieuw is of al tien jaar bestaat. Dit zijn de web design best practices die je moet volgen in 2021.