13 bedste praksis for hjemmesidedesign for 2021

i dag kan du få en hjemmeside i gang på få minutter. Men der er en forskel mellem en hjemmeside bliver levende og det bliver optimeret.

hvorfor betyder design noget? Det tager kun 0,05 sekunder for folk at danne sig en mening om din hjemmeside. Ja, du læste rigtigt—50 millisekunder for nogen at blive blæst væk eller frastødt af din hjemmeside. Det meste af denne opfattelse er dannet ud fra designet.

hjemmesidedesign påvirker også dine konverteringer, troværdighed og i sidste ende gør eller bryder succesen med din hjemmeside. Ingen hjemmeside er perfekt, men du bør optimere det så meget som muligt.

her er også noget at tage i betragtning: efter en dårlig oplevelse er 88% af forbrugerne usandsynligt at vende tilbage til en hjemmeside. Oven i købet, en nylig undersøgelse fandt, at 77% af agenturer sige, at en dårlig hjemmeside design er den mest markante svaghed af deres kunder.

bundlinie: Hvis dit internetdesign ikke er optimeret til brugeroplevelse, vil det være skadeligt for din succes. Derfor skrev jeg denne vejledning.

mange faktorer går i at designe en hjemmeside. Dette er de tretten vigtigste elementer, der skal prioriteres i 2021. Hvis du følger disse bedste fremgangsmåder, vil din hjemmesides ydeevne forbedres drastisk.

Brug denne tjekliste for at sikre, at du har et vindende design

1. Minimer tekst
2. Vis, fortæl ikke
3. brug korte sætninger
4. prøv kortere afsnit
5. Vælg et farveskema, der passer
6. gør din CTA klar
7. forstærk handlinger med fortrolighed
8. forenkle navigationen
9. optimer dit design til mobil
10. prioriter SEO
11. Overvåg din sideindlæsningshastighed
12. kør løbende a/b-test

minimer tekst

fyld ikke dine sider med massive blokke af tekst.

jeg taler ikke om blogindlæg, som nogle gange skal gå i dybden (som denne!). Jeg taler om dine hjemmesider (f.eks. hjemmeside, destinationsside). Hold teksten til et minimum her.

du vil fortælle dine besøgende alt om dig, din virksomhed, dit brand og dine produkter. Men du skal lære at fortælle den historie i nogle få sætninger eller—endnu bedre— et par ord.

Vis, fortæl ikke

Visuals hjælper dig ikke kun med at opdele det skrevne indhold, men de kan også give en dybere forklaring. Vis dine besøgende, hvad du handler om. De vil forstå mere på kortere tid.

Harrys produktside indeholder begge disse to første designprincipper:

lad os for eksempel sige, at din hjemmeside sælger barbermaskiner, knive, barbercreme og andre barberingsprodukter til mænd.

du opererer på et abonnement forretningsmodel og levere disse produkter til dine kunder på månedsbasis. Designet på dine barbermaskiner er meget smukt — de er lavet af udskåret hårdttræ og er dejlige nok til at give som gave.

i stedet for at gå ind i alle disse detaljer på din hjemmeside, kan du blot have et billede af disse produkter med tekst, der siger noget som “leveret til din dør.”Du får din besked på bare fire ord.

sikker på, du kan gå i detaljer, jo dybere den besøgende kommer ind på dine sider, men en lang tekstbeskrivelse er ikke påkrævet.

brug korte sætninger

korte sætninger er lettere at læse.

ikke bombardere besøgende med store bidder af tekst. De ved ikke, hvor de skal begynde at læse, og de kan ikke fordøje dit indhold.

bland det op. Hvis du har brug for en lang sætning, skal du følge den med en kort. Variety hjælper.

prøv kortere afsnit

brug afsnitsbrud til din fordel. Det er okay at skrive længere afsnit, men jeg kan godt lide at holde mine startside-afsnit til et par sætninger.

det er også vigtigt ikke at overdrive det. For meget af en god ting, er faktisk en dårlig ting.

Start hvert afsnit med nye oplysninger, så hvis nogen ruller, kan de hurtigt fortælle, om de har brug for at læse det afsnit.

fjernelse af unødvendig tekst på dine sider reducerer rod og lægger mere vægt på din opfordring til handling.

at have CTA skiller sig ud alene i sit eget afsnit er mere virkningsfuldt end at begrave det i en flok tekst.

et meget nyttigt værktøj i denne situation er kugler. I stedet for at tilføje afsnit og skrivning i lang form, skal du overveje at bruge lister. I disse lister skal du bruge punkttegn.

undersøgelser viser, at flere mennesker vil se på lister med punkttegn end andre formater. Det skyldes, at de hjælper med at forbedre en sides scannbarhed og giver dig mulighed for at fremhæve de vigtigste punkter, du vil komme med.

Vælg et farveskema, der passer til din brandingstrategi

de farvevalg, du foretager på din hjemmeside, er vigtigere, end du tror.

besøgende bedømmer din hjemmeside på mindre end 90 sekunder. Det meste af det er et resultat af de farver, du vælger.

den bedste måde at vælge din hjemmeside farveskema er med branding. Se dit logo. Passer farverne på din hjemmeside med dit brand image?

her er et eksempel. Tænk på Starbucks.

når du hører dette mærke, er jeg sikker på, at du har et billede i dit hoved. Måske er det logoet, et tegn eller en butiksplacering.

forbinder du nogen farver med det navn? Lad os nu se på deres hjemmeside.

det er ikke overraskende, at de gik med et grønt farveskema.

dette designvalg matcher deres logo og brandimage, hvilket styrker det, som forbrugerne allerede forbinder med mærket. Ved at holde tingene konsistente er der ingen forvirring. Det ville være underligt, hvis du besøgte denne hjemmeside, og farverne var gule og røde. Det har intet at gøre med deres brand.

vi vil tale mere om forstærkning i større dybde, når vi fortsætter.

gør din CTA klar og indlysende

CTA ‘ er bør ikke begraves. De skal være store, dristige og magtfulde, og de skal tydeligt skille sig ud som den handling, dine besøgende skal tage næste gang.

alligevel har de fleste hjemmesider ikke en CTA-knap, der kan ses på mindre end tre sekunder. Der er en god chance for, at du falder ind i gruppen, der tager længere tid. Det er ikke den kategori, du ønsker at være i.

du kan ikke køre konverteringer uden en effektiv CTA-knap.

jeg ser næsten aldrig en CTA på en virksomheds indvendige sider (de sider, der forklarer, hvad dit brand gør, og hvad du tilbyder). Dette er en stor designfejl. Du kan ikke forvente, at besøgende navigerer tilbage til din startside for at konvertere.

Tag et kig på denne CTA fra lakmus.

se, hvor simpelt dette design er. Der er minimal tekst på skærmen, så meddelelsen er klar.

som et resultat skiller CTA “Tilmeld dig gratis” sig ud. Faktisk satte lakmus det endda på mere end et sted på skærmen.

hvor du skal placere din CTA adskiller sig fra side til side. For eksempel skal blogindlæg have CTA øverst, så læserne ser det hurtigt og også i bunden, efter at de har læst indlægget.

gå dybere: vil du optimere dine CTA ‘ er? Her er 11 måder at forbedre dine opfordringer til handling.

Forstærk handlinger med fortrolighed

hvis din besked er den samme, skal din CTA være den samme på hver enkelt side.

tænk på, hvordan folk navigerer på din hjemmeside. Selv hvis du opretter en bestemt strøm, lander ikke alle på en side og konverterer på få sekunder. De kan gennemse lidt først.

lad os for eksempel sige, at du har en e-handelsside. Du bør ikke ændre CTA-knappen fra side til side, hvilket ville se sådan ud:

• hjemmeside: Checkout nu
• Kategori side: Køb det i dag
• produktside: Klik for at købe

hvis en besøgende ser en af disse knapper på din startside, den anden på en kategoriside og den tredje på en produktside, er der ingen forstærkning.

i stedet skal du holde meddelelserne og stilen konsistente. Her er et godt eksempel fra smykker og tilbehør mærke MVMT.

det er ligegyldigt, om du er på deres briller, ure eller smykker side. Du kommer til at se den samme “SHOP nu” CTA for deres produkter.

hver side forbliver også i overensstemmelse med deres hjemmesides overordnede minimalistiske, sort-hvide design.

Anvend også dette designprincip på din hjemmeside.

det går ud over CTA-knappen. Ideen er at have denne type forstærkning med så mange elementer som muligt.

konsistens i Sprog, messaging og design styrker din brandidentitet og efterlader et varigt indtryk på dine besøgendes sind.

forenkle navigationen

det bør ikke være svært for en besøgende at finde det, de leder efter på din hjemmeside.

sæt dig selv i deres sko. Hvorfor besøger du hjemmesiden? Hvordan udfører du denne opgave? Måske vil du købe noget, få mere information eller se, hvad der er at tilbyde. Uanset årsagen kan være, hvis besøgende ikke kan finde ud af det hurtigt, de kommer til at forlade.

der er bare for meget konkurrence derude. Brugere har ingen grund til at stille op med uhåndterlig hjemmeside navigation. Alt, hvad de skal gøre, er at forlade din hjemmeside og finde det, de har brug for et andet sted.

forsøg ikke at genopfinde hjulet med et komplekst design. Hold dig til standardformatet.

for eksempel sætter de fleste hjemmesider navigationsmenuen vandret øverst på hver side. Hvis din menu er et andet sted, kan det forvirre dine besøgende.

jo færre muligheder i menuen, jo bedre. Ellers vil det være for svært for folk at finde det, de har brug for. Dette begreb er kendt som Hicks lov.

jo flere muligheder du giver nogen, jo længere tid tager det dem at træffe en beslutning. Derfor vil komplekse designs og navigationer knuse dine konverteringsfrekvenser.

der er et berømt eksperiment om dette, kaldet jam-undersøgelsen, der diskuterer det valgte paradoks.

eksperimentet blev udført i en lokal købmand. Forbrugerne blev præsenteret for 24 syltetøj til prøve på en dag, og seks syltetøj den følgende dag:

• den større skærm på dag et tiltrak 60% af shoppere, men kun 3% af disse mennesker foretog et køb.
• den mindre visning af seks syltetøj på den anden dag tiltrak 40% af kunderne, men 30% af dem købte.

ved at begrænse valg var konverteringer ti gange højere. Det samme koncept kan anvendes til din hjemmeside navigation.

Fjern unødvendige menupunkter. For eksempel, i stedet for at have en “hjem” – knap, skal du bare bruge hjemmesidens logo til at linke tilbage til startskærmen.

Tag et kig på pladsen hjemmeside.

designet er super rent. Menupunkterne er ekstremt begrænsede. Dette gør det nemt for besøgende at vælge et udvalg, der passer til deres behov.

du vil bemærke, at der er minimal tekst på skærmen, og CTA er klar og indlysende.

denne type design gør det næsten umuligt for besøgende at fare vild eller forvirret, når de navigerer.

for dem af jer, der har masser af muligheder på din hjemmeside, såsom en e-handelsbutik, kan du tilføje en søgefelt for at forenkle navigationsprocessen uden at bruge en kompliceret menu. Mange virksomheder sætter deres funktioner i en funktionsfane i stedet for at have en individuel fane for hver funktion.

Optimer dit design til mobile enheder

mobil er, hvordan størstedelen af verden får adgang til internettet. Det betyder, at hvis du ikke er optimeret til mobil, vil din hjemmeside ikke fungere godt.

Tag et kig på disse data fra Hootsuite:

søgemaskiner genkender dette og belønner sider, der er mobilvenlige. Her er et par flere statistikker for at ramme punktet hjem:

• Google ved, at 87% af smartphone-ejere bruger deres enheder til at køre en internetsøgning mindst en gang om dagen.
• 58% af alle Google-søgninger udføres fra en mobilenhed
• resultatet: 70% af de første sideresultater på Google er optimeret til mobile enheder.

mobil SEO er det vigtigste, du kan gøre for at rangere godt på Google. Alvorligt.

hvis din hjemmeside ikke ser godt ud på en smartphone, vil folk ikke holde fast. Så sørg for, at dine hjemmesidedesign er mobilvenlige.

gå dybere: vil du lære at optimere din hjemmeside til mobil? Tjek vores komplette guide til en mobil venlig hjemmeside.

Prioriter SEO

alt, hvad du gør på din hjemmeside skal cirkel tilbage til SEO.

og det er ikke nok bare at tilføje nøgleord her og der. Det er en hjemmeside-dækkende system til at forbedre indhold og ubarmhjertigt målrette specifikke emner til at opbygge din hjemmeside autoritet på dette område.

for eksempel vil en destinationsside for et e-handelssted gerne fokusere på visse elementer på siden, såsom:

• brugervenlighed. Hvor nemt det er for dine besøgende at bruge og navigere.
• mobil. Hvordan din hjemmeside ser ud og fungerer på en mobil enhed.
• søgeordsoptimering. De ord og sætninger, du vil rangere for.
• Interne links. Hvor ofte du linker til andre sider på din hjemmeside.
• overskrift. Dette er ofte den største tekst på en hjemmeside. Som sådan gør det det meste af det tunge løft på din destinationsside.

Opret et sitemap. Dette vil gøre det lettere for søgemaskinerne at analysere indhold på din hjemmeside. Et sitemap vil vise bots placeringen af sider på din hjemmeside, når siden sidst blev opdateret, opdateringsfrekvensen, og forholdet til andre sider på din hjemmeside.

et korrekt sitemap viser Google, at du ikke har duplikatindhold, hvilket kan skade din SEO-placering.

når du designer din hjemmeside, er der et væld af mindre indlysende elementer, der faktor i ranking på Google, også.

vi har allerede gennemgået et par aspekter, du kan forbedre på selve siden. Men andre elementer omfatter:

• domæne. Din URL er ret følge af din google-rang. Nøglefaktorer inkluderer at have dit søgeord i domænet, hvor gammelt domænet er, og hvad din domæneudvidelse er (f .eks .org versus utraditionelle udvidelser).
• Site kvalitet. Din hjemmeside skal være nyttig for besøgende. Nøglefaktorer inkluderer en’ Om os ‘side, en’ kontakt os ‘ side, hvor ofte du opdaterer din hjemmeside, hvor nemt det er at navigere på din hjemmeside, oppetid (hvor ofte din hjemmeside går ned) og SSL-certifikater.
• Backlinks. Dette refererer til den hyppighed, din hjemmeside er knyttet til af andre hjemmesider. Det er en afgørende faktor for placering godt på Google. Nøglefaktorer inkluderer antallet af linksider, kvaliteten og autoriteten af de hjemmesider, der linker til dig, ankerteksten, de bruger til at linke til dig, og om disse links kommer fra .edu-eller .gov-domæner eller ej.

Overvåg din sideindlæsningshastighed

jeg ved, hvad nogle af jer tænker. Hvad har sideindlæsningshastighed at gøre med internetdesign? Alt.

sikker på, loading tider er relateret til din hjemmeside hosting plan, server, trafik, og ting af denne art. Designvalg kan dog også påvirke dine indlæsningstider.

hver gang du tilføjer et element til din hjemmeside, især billeder, videoer og andre komplekse mediefiler, kan dine indlæsningstider blive påvirket. Som sådan, det kan bremse HTTP-anmodninger.

langsom loading tider føre til høje nedlæggelse satser. Du kan ikke ignorere dette. Hvis dine sider tager for lang tid at indlæse, vil det være et stort problem.

desuden forlader 25% af mennesker hjemmesider, der tager mere end fire sekunder at indlæse. Ja, fire sekunder. Det er alt, hvad du har, eller du vil miste 25 ud af hver 100 besøgende. De fleste besøgende forventer, at en side indlæses på to sekunder eller mindre.

så hvordan kan du anvende dette på dit internetdesign?

• reducer filstørrelserne på dine billeder
• Udnyt cachingværktøjer
• reducer HTTP-anmodninger
• forbedre din TTFB (tid til første byte)
• Komprimer og kombiner dine filer

der er masser af værktøjer til rådighed online for at hjælpe dig med at opnå disse ting. Som en ressource til minificering og kombination af dine filer. Og brug Værktøjet Page Speed Insights fra Google til at hjælpe dig med at overvåge dine indlæsningstider, når du foretager designændringer på din hjemmeside.

Kør løbende A/B-test

når det kommer til dit hjemmesidedesign, kan du ikke bare indstille det og glemme det.

som jeg sagde tidligere, er ingen hjemmeside perfekt. Der er altid måder for dig at forbedre dit design.

derfor skal du køre A/B-test. Disse giver dig mulighed for at foretage regelmæssige forbedringer af din hjemmeside og teste elementer for at se, hvad der fungerer bedst, og vigtigere, hvad der slet ikke fungerer.

næsten alle elementer i dit site design kan testes. For eksempel kan du oprette to forskellige destinationssider, der har forskellige CTA ‘ er, men ellers er de samme. Hvis den ene destinationsside fungerer bedre end den anden, ved du, at dens CTA sandsynligvis får jobbet gjort.

her er nogle hurtige forslag til at komme i gang i den rigtige retning:

• Test placeringen af din CTA-knap
• Test farven på din CTA-knap
• Test CTA-kopien
• Test de billeder, du bruger på destinationssider
• Test ordlyd variationer af tekst på skærmen
• Test størrelsen på din navigationslinje

der er så mange muligheder, jeg kunne bruge hele dagen på at tale om dette. For dem af jer, der ikke er bekendt med A/B-test eller har brug for hjælp, tjek min guide til alt hvad du behøver at vide, før du starter A/B-test.

konklusion

at sige, at designet af en hjemmeside er vigtig, ville være en underdrivelse. Dine designvalg vil i sidste ende påvirke, om din hjemmeside er vellykket eller ej.

• alles hjemmeside kan forbedres. Brug denne liste som en guide som en ressource til at hjælpe dig med at foretage disse forbedringer.
• bliv ikke overvældet. Jeg siger ikke, at du skal implementere alle disse designforslag natten over, men du skal starte et sted.
• jeg trak ikke disse ideer ud af tynd luft. Alt på denne liste understøttes af forskning og statistik relateret til designprincipper.

husk: hver hjemmeside er et igangværende arbejde. Hvis du sætter arbejdet i og altid finjustere din hjemmeside, vil du forbedre din kant med dine konkurrenter.

det betyder ikke noget, om din hjemmeside er helt ny, eller om den har eksisteret i et årti. Dette er den bedste praksis for internetdesign, som du skal følge i 2021.