Hoe te doen Conversie Gericht Web Design: Een volledige gids

Hier is hoe te om conversie gericht webontwerp doen in een adem: beslissen de belangrijkste actie elke pagina bestaat om te ondersteunen, dan ontwerp alles – hiërarchie, typografie, kleur, beeldvorming, vormen – om die actie duidelijk, gemakkelijk en betrouwbaar voor de bezoeker te maken. Conversie gericht ontwerp gaat niet over trucs of luider knoppen. Het gaat over duidelijkheid: een vreemdeling die op uw pagina landt moet kunnen zeggen wat u biedt, voor wie het is, en wat u binnen vijf seconden moet doen. Als ze dat niet kunnen, zal geen enkele hoeveelheid polijstmiddel je redden.

Oké, laten we even eerlijk zijn. De meeste websites zijn niet ontworpen voor bezoekers. Ze zijn ontworpen voor de mensen die ze bouwden – de oprichter die haar favoriete slogan boven de vouw wilde, de commissie die aandrong op zes gelijke spandoeken, de ontwerper die verliefd werd op een prachtige animatie die de prijslink begraaft. Ik heb zoveel slimme teams maanden zien gieten in een site die er prachtig uitziet in een portfolio en stilletjes elke echte mens die er op landt verwart. Het goede nieuws? Leren hoe te om conversie gericht webontwerp is meestal over het leren van de gewoonte van het ontwerpen voor jezelf. Laat me je door het hele systeem leiden, zoals ik wou dat iemand me er jaren geleden doorheen had geleid.

Wat betekent conversie gericht webontwerp eigenlijk?

Conversie gericht webontwerp is de praktijk van het ontwerpen van pagina’s rond het doel van de bezoeker in plaats van het ego van het bedrijf. Elk element – de kop, het heldenbeeld, de navigatie, de kleur van de knop, de vormlengte – wordt geëvalueerd met één vraag: helpt dit de bezoeker begrijpen, vertrouwen en handelen? Als een element niet richt, overtuigt, gerust stelt of gids, is het decoratie op zijn best en wrijving op zijn slechtst.

Hier is het deel dat niemand je vertelt: conversie ontwerp en goed ontwerp zijn hetzelfde ding. Een pagina die goed converteert is bijna altijd een pagina die duidelijk, snel, leesbaar en respectvol is voor de tijd en aandacht van de bezoeker. Het stereotype van conversieontwerp als Garish rode knoppen en countdown timers is een karikatuur – en eerlijk gezegd, een schadelijke, omdat het teams toestemming geeft om de discipline volledig te verwerpen. Echte conversie gericht ontwerp is rustiger dan dat. Het kiest helderheid boven slimheid, elke keer als het twee conflict.

En ze zullen conflicteren. Je slimme woordspeling versus een duidelijke verklaring van wat je doet. Je artistieke abstracte held beeld versus een screenshot van het werkelijke product. Je elegante verborgen navigatie versus saaie zichtbare links. Wanneer helderheid en slimheid strijd, duidelijkheid moet winnen. Slimheid is voor de plaatsen waar het niets kost – uw 404 pagina, uw microscopie, uw bevestigingsmails. Niet je waarde voorstel.

De vijf seconden durende test: je noordster

De eenvoudigste diagnostische in alle conversie ontwerp: toon uw pagina aan iemand die het nooit gezien heeft voor vijf seconden, neem het weg, en stel drie vragen. Wat biedt dit bedrijf? Voor wie is het? Wat moest je nu doen? Als ze niet alle drie kunnen beantwoorden, heeft de pagina een helderheidsprobleem – en helderheidsproblemen zitten vóór elke andere optimalisatie. Het heeft geen zin om je knopkleur te perfectioneren als bezoekers niet weten wat de knop hen geeft.

Je vindt een volledig script voor het uitvoeren van deze test aan het einde van deze gids, want ik wil dat je het echt doet – niet alleen knikken mee.

Hoe bouw je visuele hiërarchie die het oog leidt?

Visueel hiërarchie is de volgorde waarin een bezoeker’s oog reist over uw pagina, en het is de kern mechanische vaardigheid in het doen van conversie gericht webontwerp. Je controleert de hiërarchie met vier hendels:

• Grootte. Grotere elementen worden eerst gezien. Uw belangrijkste bericht zou uw grootste tekst moeten zijn.
• Contrast. Hoog contrast tegen de achtergrond trekt aandacht; laag contrast trekt terug. Uw primaire knop moet het sterkste contrast op de pagina hebben.
• Positie. Boven links naar rechts onder (in links naar rechts), met de bovenkant van de pagina die het meeste gewicht draagt. Belangrijke dingen gaan waar ogen natuurlijk landen.
• Whitespace. Leegte ruimte is geen verspilde ruimte – het is een spotlight. Een element omringd door ademruimte wordt opgemerkt; een element dat onder twaalf anderen wordt geklemd wordt afgezaagd voorbij.

De discipline die hiërarchiewerk maakt is dit: één primaire actie per pagina. Niet drie. Niet “nou, we hebben twee grote publiek dus we hebben twee gelijke knoppen nodig.” Eén. Je kunt absoluut secundaire acties aanbieden – een spookknop, een tekstlink, een stiller pad voor mensen die er niet klaar voor zijn – maar er moet nooit een moment zijn waarop een bezoeker naar je pagina kijkt en echt niet kan zeggen welke actie je het meest wilt dat ze ondernemen. Als alles benadrukt wordt, is niets dat. Een pagina met vijf concurrerende oproepen tot actie geeft bezoekers geen opties; het geeft hen een beslissingsbelasting, en de meeste mensen betalen beslissingsbelasting door weg te gaan.

Een snelle zelfcontrole die ik graag doe: knijp op je pagina tot de tekst vervaagt. Wat valt er nog steeds op? Wat de quint overleeft, is wat jullie hiërarchie eigenlijk bevordert. Als het een decoratieve grafische in plaats van uw hoofdletter en primaire knop, je hebt werk te doen.

Wat is de echte baan van het gebied boven de vouw?

Er is een oude mythe dat alles wat belangrijk is, boven de vouw moet worden geplakt omdat niemand scrolt. Mensen scrollen. Ze scrollen voortdurend – op telefoons, scrollen is het standaardgedrag, geen uitzondering. Wat mensen niet doen is een pagina scrollen die het niet verdiend heeft.

Dus het werk van je boven-de-vouw gebied is niet alles te bevatten. Het is om oosterlengte: Vertel de bezoeker waar ze zijn, bevestig dat ze op de juiste plaats zijn, en zorg dat ze willen blijven gaan. Dat betekent meestal een duidelijke kop met wat je biedt en voor wie, een ondersteunende lijn die specificiteit toevoegt, een primaire oproep tot actie voor de ready-now minderheid, en een stuk visueel bewijs — een product screenshot, een echte foto, iets dat eerder laat zien dan vertelt. Dat is het. Weerstaan de drang om een carrousel, drie waarde rekwisieten, een video, en een aankondiging bar in de eerste viewport. Een boven-de-vouw gebied dat probeert te zeggen dat alles niets zegt.

Zie het als de ingang van een goed ontworpen winkel. De ingang heeft niet de hele inventaris. Het vertelt je wat voor soort winkel dit is en nodigt je dieper binnen uit.

Hoe werken richtingssignalen – en wanneer gaan ze over een lijn?

Menselijke aandacht volgt signalen. We kijken waar andere mensen op foto’s kijken. We volgen pijlen, lijnen en de richting van een product afbeelding “punten.” Eerlijk gebruikt, zijn richtingssignalen een mooi hulpmiddel: een subtiele pijl die het oog van je kop naar je vorm leidt, een foto van een persoon die gericht is op je oproep tot actie, een lay-out waarvan de natuurlijke leesstroom eindigt op de knop.

Oneerlijk gebruikt, worden aanwijzingen manipulatie – en hier wil ik echt direct met je zijn. Conversiegericht ontwerp heeft een ethische vloer, en deze dingen zijn eronder:

• Nepknoppen en vermomde advertenties — elementen gestyled om eruit te zien als uw interface die eigenlijk ergens anders leiden.
• Misleidende nadruk – waardoor de “accept alles” optie enorm en de desintegratie optie een licht grijs fluisteren.
• Opt-outs van schulduitstel — De “Nee dank je, ik haat het sparen van geld” school van microscopie.
• Verborgen kosten en stiekeme vooraf gecontroleerde dozen – alles wat de bezoeker ontdekt met een zinkend gevoel later.

Deze patronen kunnen korte termijn klikken produceren, dat is precies waarom ze verleidelijk zijn. Maar ze bekeren mensen die niet wilden bekeren, en die mensen terugbetalen, karnen, klagen, en herinneren. Ontwerp dat de bezoeker respecteert, bekeert de juiste mensen – degenen die blijven. Als een tactiek alleen werkt als de bezoeker het niet merkt, verzend het dan niet.

Waarom is typografie een conversietool?

Niemand converteert op een pagina die ze niet meer lezen. Typografie is het leveringsmechanisme voor elk overtuigend woord dat je hebt geschreven, en het is schokkend vaak het ding saboteren van een anders goede pagina. De basisprincipes:

• Tekstgrootte van de tekst: comfortabel groot — 16px is een verstandige vloer voor body copy, en groter is vaak beter. Kleine tekst luidt als “dit is niet echt bedoeld om gelezen te worden.”
• Lijnlengte: ongeveer 50 – 75 karakters per lijn. De volledige breedte van de paragrafen op een desktop monitor dwingen het oog op een uitputtende reis terug naar de linkermarge.
• Hoogte van de lijn: rond 1.5 voor lichaam kopie, zodat lijnen niet visueel botsen.
• Contrast: donkere tekst op lichte achtergronden (of echt licht op echt donker). Die modieuze lichtgrijs-op-wit tekst van het lichaam? Het filtert iedereen wiens ogen ouder zijn dan 25 jaar of wiens scherm in zonlicht is.

Toegankelijkheid is conversie – geen nalevingscheckbox

Ik wil bij deze zitten, want het hervormt alles. Elke bezoeker die je ontwerp uitsluit is een conversie die je verloor. Iemand die je tekst niet kan lezen met een laag contrast, niet met een toetsenbord naar je formulier kan tabgen, niet kan vertellen wat je icoon knop zonder label doet, of je inhoud alleen voor afbeelding niet kan begrijpen met een schermlezer – ze hebben niet “bouncen.” Je hebt de deur op slot gedaan.

Het ontwerpen van toegankelijkheidsnormen is zowel het juiste om te doen als het conversieslimme ding om te doen, en het is zeldzaam dat één beweging zo schoon is beide:

• Contrast: richt op contrastverhoudingen op WCAG-niveau tussen tekst en achtergrond – uw normale tekst op het lichaam moet duidelijk leesbaar zijn, niet esthetisch zwak.
• Focus stelt: elk interactief element moet een zichtbare omtrek tonen wanneer het met het toetsenbord wordt bereikt. Het verwijderen van focus schetsen omdat ze “look rommelig” strengen toetsenbord gebruikers volledig.
• Alt tekst: betekenisvolle afbeeldingen krijgen beschrijvingen; decoratieve krijgen lege alt attributen zodat schermlezers ze overslaan. Als je held afbeelding je waarde voorstel draagt, moet een blinde bezoeker het toch ontvangen.
• Navigatie met toetsenbord: alles klikbaar moet bereikbaar en opereerbaar zijn zonder muis — inclusief uw menu’s, modals, en die aangepaste dropdown van uw ontwikkelaar gebouwd uit divs.
• Vertrouw niet op kleur alleen: als een fout wordt gecommuniceerd alleen door een veld rood wordt, kleurblind bezoekers worden links raden. Paar kleur met tekst en pictogrammen.

Toegankelijke pagina’s zijn ook duidelijkere pagina’s voor iedereen – beter contrast, betere labels, betere structuur. Het is een van de weinige gratis lunches in design.

Hoe moet u kleur gebruiken en CTA’s opvallen?

Mensen houden van ruzie over welke knop kleur het beste converteert, en het eerlijke antwoord is: de “beste” kleur is degene met het meest contrast tegen de omgeving op uw pagina. Een groene knop op een groen-thema site verdwijnt; hetzelfde groen op een paarse site springt. Contrast met context verslaat elke universele kleurregel.

Een eenvoudig, stevig systeem voor kleur:

• Kies één accentkleur en het vrijwel uitsluitend voorbehouden aan primaire acties. Als uw accentkleur verschijnt op knoppen, links, pictogrammen, badges, en decoratieve swooshes, stopt het met betekenen “hier handelen.”
• Het grootste deel van de pagina behouden kalm en neutraal Dus het accent heeft iets om tegen te contrasteren. Het is een kwestie van kleven.
• Geef je CTA-knop grootte, witruimte en een actie-specifiek label. “Get my free plan” gaat beter dan “Submit” niet vanwege magische woorden, maar omdat het de bezoeker precies vertelt wat de klik levert. Labelknoppen met het resultaat, niet het mechanisme.
• Controleer ook het tekstcontrast van de knop – een levendige knop met laag contrast label tekst is een mooie rechthoek die niemand kan lezen.

Welke afbeeldingen helpt een pagina te converteren?

Beelden dragen betekenis of dragen gewicht – er is geen neutraal. Een afbeelding die uw werkelijke product toont, uw werkelijke resultaten, of de werkelijke mensen achter uw bedrijf bouwt begrip en vertrouwen. Een afbeelding die bestaat om ruimte te vullen – de algemene voorraadfoto van onmogelijk vrolijke mensen die wijzen op een laptop – voegt pagina gewicht, duwt echte inhoud naar beneden, en signalen “template” aan bezoekers die hebben gezien dat exacte glimlachende handdruk duizend keer.

Richtlijnen Ik zou een pagina inzetten op:

• Laat het product zien. Echte screenshots, echte interfaces, echte verpakking. Voor software vooral, een scherpe screenshot antwoorden “wat zal ik eigenlijk krijgen?” sneller dan een paragraaf.
• Laat echte mensen zien – eerlijk. Foto’s van uw werkelijke team en werkelijke klanten (met toestemming) bouwen echt vertrouwen. Wat je nooit mag doen is aandelenmodellen als je team doorgeven of klantfoto’s uitvinden. Als een bezoeker ooit ontdekt dat “Sarah from Customer Success” een stockfoto is, verlies je niet alleen dat vertrouwen – je vergiftigt met terugwerkende kracht al het andere op de pagina. Als u nog geen echte foto’s hebt, gebruik dan illustratie of productafbeeldingen. Eerlijke en algemene beats nep en “authentic.”
• Zorg dat elk beeld zijn bytes verdient. Afbeeldingen zijn meestal de zwaarste dingen op een pagina, en een trage pagina bloedt bezoekers voordat het ontwerp ooit een kans om te werken krijgt. (Speed is zijn eigen diepe onderwerp — mijn gids over hoe om paginasnelheid voor conversies te verbeteren bedekt compressie, luie lading, en de fixes die het meest belangrijk.)

Hoe ontwerp je vormen die mensen eigenlijk afmaken?

Formulieren zijn waar interesse wordt actie, waardoor ze de hoogste-stakes onroerend goed op uw site – en de plaats waar kleine ontwerp beslissingen samengestelde snelst. Het leidende principe: elk veld is een tol. Ieder vraagt de bezoeker om een beetje inspanning te leveren en een beetje privacy over te geven. Laad het minimum tol dat het bedrijf echt nodig heeft.

• Snijd velden meedogenloos door. Vraag voor elk veld: hebben we dit nu nodig, of kunnen we het later vragen, nadat vertrouwen bestaat? “Leuk om te hebben voor de verkoop” is niet “nu nodig.”
• Gebruik duidelijke, zichtbare labels – boven het veld, geen plaatshouder tekst die verdwijnt op het moment dat iemand inklikt. Verdwijnende labels dwingen mensen om te onthouden wat ze antwoordden.
• Valideer inline, vriendelijk. Vertel mensen over een probleem naast het veld, zodra het bekend is, in menselijke taal. “Hmm, die e-mail ziet er onvolledig – mind dubbel-checking?” behandelt de bezoeker als een persoon. Een rode “INVALID INPUT” bovenaan de pagina nadat ze op submit hebben geslagen behandelt ze als een mislukte aanmeldpoging.
• Leg het waarom uit. – Een telefoonnummer vragen? Zeg waar het voor is. Onverklaarbare persoonlijke vragen maken mensen verlaten – en ze zijn gelijk.
• Laat de knop van de presentatie zeggen wat er gebeurt. “Mijn gratis account maken” stelt een verwachting; “Verzenden” stelt een mysterie.
• Voor lange vormen, intrappen in stappen met een voortgangsindicator, en begin met de eenvoudige vragen. Momentum is echt: iemand met drie stappen heeft geïnvesteerd, en geïnvesteerd mensen eindigen.

Waarom is mobiel-eerste ontwerp zo belangrijk voor conversies?

Voor de meeste sites gebeurt de meerderheid van de eerste indrukken nu op een telefoon – vaak in één hand, op een langzame verbinding, door iemand midden-afleiding. Het ontwerpen van desktop-first en “aanpassing naar beneden” produceert de klassieke mobiele rampen: microscopische links, vormen die zoomen, menu’s die chirurg niveau tap precisie vereisen.

Mobiele eerste conversieontwerp:

• Respecteer de duimzone. Op een telefoon met één hand is het onderste midden van het scherm gemakkelijk te bereiken; de bovenste hoeken zijn een stuk stretch. Zet primaire acties waar duimen leven.
• Grootte tik doelen royaal — ten minste rond 44–48px, met echte afstand tussen aangrenzende doelen. Er zijn maar weinig dingen die zeggen: “We hebben dit niet getest op een telefoon” zoals dikke vingers branden.
• Vereenvoudigen, niet krimpen. De mobiele pagina is niet de desktop pagina naar beneden geschaald. Het is hetzelfde werk gedaan met strakkere prioriteiten: kortere kopstapel, enkele kolom, minder gelijktijdige keuzes.
• Gebruik de juiste toetsenborden. E-mailvelden moeten het e-mailtoetsenbord oproepen, nummervelden het nummerpad. Het is een klein vriendelijkheid dat bezoekers voelen zonder het te merken.
• Hou plakkerige elementen bescheiden. Een slanke plakkerige CTA bar kan echt helpen; een stapel plakkerige headers, cookie banners, en chat bubbels verslinden de helft van de viewport echt pijn.

Waarom is consistentie en vertrouwdheid nieuwigheid?

Hier is een waarheid die lichtelijk hartverscheurend is voor creatieve ontwerpers: bezoekers willen uw interface niet leren. Ze brengen het grootste deel van hun leven door op andere websites, en ze komen bij jou met diepe verwachtingen – logo linksboven gaat naar huis, navigatie leeft aan de bovenkant of achter een herkenbare menu-icoon, onderstreept of gekleurde tekst is een link, het kar icoon toont de winkelwagen. Elke conventie die je breekt omwille van onderscheidend zijn is een kleine begrijpbelasting op elke bezoeker.

Jakobs Wet is hiervoor de formele naam, maar je hoeft de vermelding niet te voelen: je bent op een avant-garde site geland met mysterie-vlees navigatie en voelde dat flikkeren van ergernis. Je bezoekers voelen hetzelfde flikkeren op de jouwe. Wees onderscheidend in je stem, je beelden, je ideeën — En saai in je mechanica. Navigatie is absoluut een plek waar vertrouwde beats slim; Ik heb een hele metgezel stuk geschreven op hoe sitenavigatie voor conversies te optimaliseren Als je menu’s zijn waar bezoekers verdwalen.

Consistentie is ook belangrijk binnen uw site. Als primaire knoppen paars zijn en afgerond op een pagina, moeten ze paars en afgerond overal. Interne consistentie laat bezoekers eenmaal een mentaal model bouwen en hergebruiken – wat precies maakt dat een site zich “gemakkelijk” voelt zonder dat iemand kan zeggen waarom.

Hoe reduceer je cognitieve belasting zonder dingen te dommeren?

Elke keuze die je presenteert, elk element dat strijdt om aandacht, elk onbekend patroon dat een bezoeker moet decoderen – het put allemaal uit dezelfde beperkte pool van mentale energie. Als het zwembad droog is, nemen mensen geen zorgvuldige beslissing. Ze maken de makkelijkste: vertrekken.

De klassieke illustratie is de jamstudie – shoppers aangeboden een kleine selectie van jam waren veel meer kans om daadwerkelijk te kopen dan shoppers aangeboden een enorme spread. Wat je ook van het specifieke onderzoek denkt, het onderliggende patroon komt overal in het ontwerp voor: meer opties betekenen vaak minder beslissingen. Praktische manieren om de last te verlichten:

• Verminder gelijktijdige keuzes. Drie prijsniveaus, niet zeven. Een aanbevolen plan, visueel gemarkeerd. Eén primaire actie per scherm.
• Gebruik progressieve onthulling. Laat zien wat de meeste mensen nu nodig hebben; stop details achter “Meer leren,” accordeons, of latere stappen. Geavanceerde instellingen bestaan – ze hoeven niet iedereen aan de deur te begroeten.
• Alles. Korte paragrafen, scanneerbare onderverdelingen, lijsten met kogels, tabellen voor vergelijkingen. Mensen scannen eerst en lezen tweede; ontwerp voor de scan.
• Dood de sier. Autoplaying carrousels, parallax bloeit, en geanimeerde achtergronden fluisteren allemaal “kijk naar me” terwijl uw bericht probeert te spreken. Motie moet iets betekenen of weg zijn.

Kan het zelf ontwerpen mensen jou vertrouwen?

Ja – binnen de grenzen de moeite waard eerlijk over te zijn. Bezoekers beoordelen geloofwaardigheid snel, en voordat ze een woord hebben gelezen, is ontwerp alles wat ze hebben. Een gepolijste, coherente, snelle pagina signalen “echte operatie, voorzichtig mensen.” Typos, gebroken beelden, botsende stijlen, en 2009-era lay-outs signaal risico – eerlijk of niet, bezoekers behandelen slordig ontwerp als een proxy voor slordige alles.

Het vertrouwenswerk bij de basislijn is simpelweg ambachtelijk: uitgelijnde elementen, consistente afstand, werklinks, professionele typografie, een site die snel laadt en opzettelijk lijkt. Vervolgens laag in stof:

• Echte bijzonderheden — werkelijke klantnamen en woorden (met toestemming), echte getallen waar je ze echt hebt, concrete beschrijvingen in plaats van “wereldklasse oplossingen.”
• Transparantie – vindbare prijzen, een echte pagina, duidelijke contactgegevens, duidelijk aangegeven beleid. Deze leest verbergen als iets te verbergen hebben.
• Verzekering op het moment van twijfel – zet “geen creditcard vereist” naast de aanmeldingsknop, het terugbetalingsbeleid in de buurt van de koopknop. Antwoord de angst waar het voorkomt, niet drie pagina’s verderop.

Maar hier is de limiet: poetsen kan alleen maar de waarheid versterken, nooit vervangen. Een prachtige pagina verpakt rond een vage of oneerlijke aanbod bekeert erger in de tijd dan een gewone pagina verpakt rond een echt goede – en “over tijd” is de enige termijn waarin een echt bedrijf leeft. Design verdient de eerste blik. Eerlijke inhoud verdient de klik.

Wat is de taak van elk paginatype in een conversiegerichte site?

Een verrassend veel voorkomende ontwerpfout is het behandelen van elke pagina als een brochure voor algemeen gebruik. Elk template heeft één taak, en het ontwerpen van die taak is de helft van de strijd:

Paginatype	Het is één taak.	Ontwerpprioriteit
Startpagina	Oriënt en route bezoekers naar het juiste pad	Onmiddellijke helderheid over wat/wie/waarom, dan duidelijke paden door publiek of behoefte
Aanlandingspagina	Converteren op een enkel aanbod	Een bericht dat overeenkomt met de verkeersbron, één CTA, minimale of geen navigatie
Product/dienstpagina	Bouw verlangen en twijfel op te lossen	Voordelen plus eerlijke details, echte beelden, bezwaren beantwoord in de buurt van de TTA
Prijslijst	Een zelfverzekerde beslissing inschakelen	Eenvoudige vergelijking, een aanbevolen optie, vergoedingen en termen zichtbaar, veelgestelde vragen naast
Blog/inhoudspagina	Verdien vertrouwen en nodig een volgende stap uit	Leesbare typografie vooral, een relevante en onopvallende CTA

Merk op hoe de ontwerpprioriteiten verschillen. Strip navigatie is zinvol op een gerichte landingspagina en zou vijandig zijn op een homepage. Een harde verkoop hoort bij een prijstabel en voelt zich bruto midden-artikel. “Wat is de enige taak van deze pagina?” zou de eerste vraag moeten zijn in elke ontwerpreview – wat ons tot discipline brengt.

Hoe verander je je ontwerp zonder blind te vliegen?

Alles hierboven vertelt je hoe goed eruit ziet. Dit deel gaat over Hoe daar te komen vanaf hier — Omdat het proces is waar de meeste teams zichzelf saboteren.

Onderzoek voor het herontwerp. De grootste design wint komt door het oplossen van problemen die bezoekers eigenlijk hebben, geen problemen die het team zich in een conferentieruimte voorstelt. Voordat je een enkele pixel verplaatst, verzamel bewijs: kijksessie opnames, lees enquête reacties, studie waar mensen uit je trechter vallen, doe vijf seconden testen. Mijn pilaar gids over hoe ombouwonderzoek te doen wandelt door de volledige gereedschapskist — Het is echt het eerste ding om te lezen voordat een ernstig ontwerp werk, want onderzoek vertelt u welke van de principes van dit artikel uw site is overtreden en wat het niet is.

Test grote veranderingen – en verander één groot ding tegelijk. Als je genoeg verkeer hebt, A/B test significante ontwerpveranderingen in plaats van vertrouwen op uw smaak (iedereen smaak is soms verkeerd, inclusief de mijne). En verzet je tegen de grote onthulling. De herontwerp-alles-op-eens lancering is de meest verleidelijke fout op dit gebied: als conversies omhoog gaan, weet je niet welke verandering het deed. Als ze neerstorten, weet je niet welke schuld je moet geven. Hoe dan ook, je hebt je grootste budget uitgegeven om niets te leren. Sequentiële, gemeten veranderingen bouwen samengestelde kennis; big-bang herontwerpen reset het op nul.

Verwacht wat verliezen. Eerlijke beoefenaars zullen je vertellen dat veel ontwerpwijzigingen het origineel niet verslaan, en dat is prima – elke test leert je iets over je publiek dat geen enkel best practice artikel (inclusief deze) zou kunnen. Ik kan beloven dat de methode werkt; niemand kan je eerlijk gezegd een specifiek resultaat beloven van een specifieke verandering. Doe het proces, hou de overwinningen, leer van de verliezen.

Uw ontwerp-review checklist en vijf-seconden testscript

Dit is het deel dat je deze week kunt runnen. Ten eerste, de checklist – loop uw hoogste verkeerspagina en antwoord eerlijk:

• Duidelijkheid: Zou een vreemdeling weten wat wij bieden, voor wie, en wat te doen binnen vijf seconden?
• Hiërarchie: Is er precies één visueel dominante primaire actie? Heeft de scherf test oppervlak van de juiste elementen?
• Boven de vouw: Heeft de eerste viewport oriëntatie en uitnodigen – of kramen en overweldigen?
• Typografie: Is lichaamstekst minstens 16px, lijnen 50 – 75 karakters, contrast sterk genoeg om te lezen in zonlicht?
• Toegankelijkheid: Zichtbare scherpstelling? Betekenisvolle alt sms? Volledig toetsenbord navigatiebaar? Niets gecommuniceerd door kleur alleen?
• Eerlijkheid: Nul nep knoppen, vermomde advertenties, schuld-trip opt-outs, vooraf gecontroleerde dozen, of verborgen kosten?
• Afbeelding: Heeft elke afbeelding betekenis? Is elke foto van mensen eerlijk over wie ze zijn?
• Formulieren: Is elk veld nu echt nodig? Zichtbare etiketten? Vriendelijke inline validatie? Op de toets van de resultaten gelabelde submit?
• Mobiel: Primaire acties in de duimzone? Tik op doelen 44px+? Correcte toetsenborden? Kleed je je vast?
• Samenhang: Gedragen knoppen, links en patronen zich identiek over de site? Zijn er conventies gebroken zonder reden?
• Laden: Kan een element worden verwijderd zonder betekenis te verliezen? (Zo ja – verwijderen.)
• Vertrouwen: Prijzen vindbaar? Contact info echt? Op de momenten van twijfel?

En het vijf seconden test script. Recruit drie tot vijf mensen die de pagina nog nooit gezien hebben – vrienden-vrienden, een online test panel, iedereen buiten je bubble:

1. Opstellen: “Ik ga je vijf seconden een webpagina laten zien. Kijk er gewoon naar – er is geen verkeerd antwoord, en je test de pagina, niet andersom.”
2. Tonen de pagina gedurende vijf seconden (een screenshot werkt prima), dan verbergen.
3. Vraag, in volgorde: “Wat biedt dit bedrijf?” … “Voor wie denk je dat het is?” … “Wat moest je op die pagina doen?” … “Wat herinner je je het meest?”
4. Antwoorden letterlijk opnemen. Niet corrigeren, uitleggen of verdedigen… zodra je zegt: “Nou, eigenlijk is het voor…” is de test voorbij.
5. Score het: als de meeste deelnemers missen een van de eerste drie vragen, je hebt je helderheid gap gevonden. Eerst de grootste miss repareren, dan opnieuw testen met frisse ogen.

Vijf mensen en dertig minuten zullen je meer leren over je pagina dan een maand intern debat. Ik beloof je dat dit makkelijker wordt… en eerlijk gezegd, nogal verslavend.

Een eerlijke opmerking daarover: SocialBlaze is een tool voor organisch social media management – het plant, publiceert en meet je sociale inhoud. Het zal uw website niet voor u ontwerpen. Maar het verkeer dat je sociale aanwezigheid stuurt is precies het verkeer waar je nieuwe conversiegerichte pagina’s op wachten, en de twee disciplines zijn prachtig: betere berichten brengen meer bezoekers, beter ontwerp zet meer van hen om.

Veelgestelde vragen

Wat is conversie gericht webontwerp in eenvoudige termen?

Het ontwerpt elke pagina rond het doel van de bezoeker: een duidelijke primaire actie, een visuele hiërarchie die het oog erop leidt, leesbare toegankelijke typografie, eerlijke beelden en minimale wrijving. De test is of een vreemde kan zeggen wat je biedt, voor wie het is, en wat je daarna moet doen binnen vijf seconden.

Heeft toegankelijkheid echt invloed op de conversiepercentages?

Ja, direct: elke bezoeker die je laag-contrast tekst niet kan lezen, navigeren op het toetsenbord, of begrijpen dat je niet-gelabelde knoppen een conversie is die je verloor voordat de overtuiging ooit begon. Toegankelijk ontwerp – sterk contrast, zichtbare focustoestanden, alt tekst, toetsenbord ondersteuning – verbreedt de pool van mensen die daadwerkelijk uw stromen kunnen voltooien, en het heeft de neiging om pagina’s duidelijker te maken voor iedereen.

Moet ik mijn hele website tegelijk opnieuw ontwerpen?

Bijna nooit. Een big-bang herontwerp verandert alles tegelijkertijd, dus of de resultaten omhoog of omlaag gaan, je kunt niet zien welke verandering het veroorzaakt – je besteedt je grootste budget om niets te leren. Verander één belangrijk ding tegelijk, meet, houd wat werkt, en laat de kennis samenkomen.

Wat is de beste kleur voor een call-to-action knop?

Er is geen universeel beste kleur – wat telt is contrast met zijn omgeving op uw specifieke pagina, gekoppeld met terughoudendheid overal anders, zodat het accent eigenlijk opvalt. Reserveer een accentkleur bijna uitsluitend voor primaire acties, zorg ervoor dat de labeltekst van de knop goed leesbaar is en label het met het resultaat van klikken in plaats van een algemene “Submit.”

Hoeveel velden moet een aanmelding of lood formulier hebben?

Zo weinig als het bedrijf echt nodig heeft op dit moment – behandel elk veld als een tol de bezoeker betaalt in inspanning en privacy. Vraag alleen wat nodig is om de onmiddellijke waarde te leveren, verzamel later mooie details zodra vertrouwen bestaat, en steun de velden die je met zichtbare labels houdt, soort inline validatie, en een duidelijke uitleg voor alles wat persoonlijk is.