fungerar som ditt företags virtuella ytterdörr, den här sidan ansvarar för att dra in en majoritet av din webbplats trafik. Trots sitt framträdande kämpar många företag för att optimera det ordentligt.

du ser, din hemsida måste ha många hattar. Snarare än att behandla det som en dedikerad målsida byggd kring en viss åtgärd, bör den utformas för att tjäna olika publikgrupper, från olika ursprung. Och för att göra det effektivt måste det byggas med syfte. Med andra ord måste du integrera element som lockar trafik, utbildar besökare och bjuder in konverteringar.

för att förbättra prestandan på din hemsida, Kolla in dessa element varje hemsida måste ha.

 Gratis Nedladdning: 77 exempel på lysande webbdesign

12 kritiska element varje webbplats hemsida måste ha

spara

12 kritiska element för en webbplats hemsida infographic

spara

dela den här bilden på din webbplats

vad du bör inkludera i din webbplats hemsida Design

rubrik

inom tre sekunder måste en webbplats berätta för besökare vad verksamheten har att erbjuda. Det är där din rubrik kommer in. Det kan bara vara några få ord, men det är en av de viktigaste kopiorna på din webbplats.

många typer av människor kan besöka din webbplats, och du kommer att vara hårt pressade att hitta några ord som drabbade hem för alla. Skriv istället din rubrik för att rikta in dig på en tredjedel av de personer som mest sannolikt är nöjda med din produkt.

Håll rubriken själv tydlig och enkel. Dropbox rubrik är ett bra exempel: ”allt du behöver för arbete, allt på ett ställe.”Det är enkelt, men ändå kraftfullt — du behöver inte avkoda jargong för att ta reda på vad Dropbox verkligen gör.

Dropbox hemsida hemsida

underrubrik

din underrubrik bör komplettera rubriken genom att erbjuda en kort beskrivning av vad du gör eller vad du erbjuder. Detta kan göras effektivt genom att nollställa in på en gemensam smärtpunkt som din produkt eller tjänst löser.

här är ett exempel på en stor underrubrik från Mirror: ”gömmer sig i vanlig syn.”Det vässar in på den primära försäljningsargument av mirror gym: Det är ett fullt hemma gym, personlig tränare och träningsplan allt i ditt hem utan att ta upp värdefulla kvadratmeter med utrustning.spegel webbplats hemsida underrubrik som läser gömmer sig i vanlig syn

för att optimera dina rubriker för mobil, Använd större teckensnitt för att ge besökarna en bättre upplevelse. Små teckensnitt kan tvinga mobila besökare att nypa och zooma för att läsa och interagera med innehållet på din webbplats. Vårt råd? Använd rubrikalternativen i din sidredigerare. H1-rubriker är perfekta för sidtitlar-det bör bara finnas en H1 på en sida. Underrubriker ska följa ordningen i hierarkin, H2, H3 … H6 och så vidare. Du kan ha flera av dessa rubriker, se bara till att de är i ordning. Till exempel vill du inte hoppa från en H1 till en H3 — välj en H2 istället.

primära uppmaningar till handling

målet med din hemsida är att tvinga besökare att gräva djupare in på din webbplats och flytta dem ner i tratten. Inkludera två till tre uppmaningar ovanför veckan som leder människor till olika stadier av köpcykeln-och placera dem på platser som är lätta att hitta.

dessa CTA bör vara visuellt slående, helst i en färg som står i kontrast till färgschemat på din hemsida medan du fortfarande passar in i den övergripande designen. Håll kopian kort-högst fem ord-och handlingsorienterad, så det tvingar besökare att klicka på vad du erbjuder. Exempel på CTA-kopia är” Registrera dig, ”” boka tid, ”eller” prova det gratis.”

Afterschool HQ: s webbplats har två CTA ovanför veckan, båda inriktade på programdirektörer som är intresserade av att marknadsföra sina efterskolans program till familjer på webbplatsen. Anteckningen nedan längre CTA” skapa din gratis profil ” ger besökarna knuff de behöver för att skapa ett konto — det första steget till att bli en Afterschool HQ leverantör.

Stödbild

de flesta är visuella. Se till att använda en bild (eller till och med en kort video) som tydligt anger vad du erbjuder. Använd bilder som fångar känslor, driver action och visuellt berättar historien du skriver om.

för att optimera dina bilder för mobila användare, använd högkvalitativa bilder som har en reducerad filstorlek. (HubSpot-kunder behöver inte oroa sig för detta, eftersom bilder som laddas upp till HubSpots programvara komprimeras automatiskt. Annars kommer verktyg som TinyPNG att göra tricket.) Lägg också alltid till alt-text i dina bilder för att göra dem mer tillgängliga för besökare som använder skärmläsare och för att ta dina SEO-ansträngningar upp.

4 Rivers Smokehouse hemsida är ett bra exempel på känslomässiga bilder: den har en serie korta, högupplösta och läckra videor som spelar på en slinga bakom en enkel rubrik, underrubrik och primär CTA:

4 rivers smokehouse hemsida hemsida Dagens bild med en ost burger

fördelar

det är inte bara viktigt att beskriva vad du gör, men varför vad du gör frågor. Utsikterna vill veta om fördelarna med att köpa från dig eftersom det är vad som kommer att tvinga dem att stanna kvar.

Håll kopian lätt och lättläst och tala dina kunders språk. Evernote gör ett bra jobb med att lista fördelar på deras hemsida på ett sätt som är övertygande, visuellt tilltalande och lätt att förstå:

Evernote webbplats hemsida fördelar

Social bevis

Social bevis är en kraftfull indikator på förtroende. Din produkt eller tjänst kan vara den bästa i världen, och det är okej att lägga det påståendet — det är bara att människor kanske inte tror på dig om de inte hör det från andra människor också. Och det är precis vad social proof gör.

inkludera bara några av dina bästa (korta) citat på Hemsidan och länka till fallstudier om tillämpligt. Att lägga till ett namn och foto ger dessa vittnesmål mer trovärdighet. Lessonly naglar detta på deras hemsida med glödande vittnesmål från faktiska kunder.

Lessonly webbplats hemsida vittnesmål och recensioner

navigering

designen och innehållet i din hemsida navigering kan betyda skillnaden mellan en webbplats konvertering och en studs. För att minska avvisningsfrekvensen, ge dina besökare en tydlig väg till de sidor de behöver direkt från hemsidan. Gör navigeringsmenyn synlig högst upp på sidan och ordna länkarna i en hierarkisk struktur.

ingen känner till din webbplats bättre än de som hjälpte till att designa den, så se till att göra användartester för att se till att det är enkelt och intuitivt för besökare att hitta det de letar efter på din webbplats. Inkludera en sökruta om du kan. (Läs det här blogginlägget för mer användbara webbplatsnavigeringstips.)

här är ett exempel på en tydlig, välstrukturerad navigationsdesign från Slim & Husky ’ S Pizza Beeria hemsida:

 Slim och huskys hemsida hemsida navigering

innehåll erbjudande

för att generera ännu fler leads från din hemsida, har en riktigt bra innehåll erbjudande, såsom en whitepaper, ebook, eller guide. Folk som kanske inte är redo att köpa kan hellre ladda ner ett erbjudande som ger dem mer information om ett ämne de är intresserade av. Om du behöver inspiration, här är flera olika innehållstyper att välja mellan.

sekundära uppmaningar till handling

inkludera sekundära cta på din hemsida för att erbjuda ytterligare konverteringsmöjligheter för framtidsutsikter som inte är intresserade av ditt primära mål. Tänk på dem som beredskapsplanen: de erbjuder en annan väg för besökare som ännu inte är redo för något så högt engagemang som du frågar.

medan dina primära CTA bör vara ovanför vikningen, placera sekundära CTA under vikningen för att ge besökarna saker att klicka på när de rullar ner. Till exempel, under vikningen på Spanx hemsida, hittar du tre, tydligt märkta uppmaningar som ger folk som har rullat så långt några fler alternativ att klicka på. Dessa sekundära CTA är för två olika typer av omvandlingar: en längst till vänster för $20 off och en annan, ”shop now” för att utforska onlinekatalogen.

Spanx hemsida hemsida sekundära CTAs

funktioner

förutom fördelar, lista några av dina viktiga funktioner. Detta ger människor mer förståelse för vad som tillhandahålls av dina produkter och tjänster. Återigen, håll kopian lätt och lätt att läsa. Dropbox för företag, till exempel, skämmer inte bort från att visa upp en funktionsmatris direkt på deras hemsida under veckan.

dropbox för företags webbplats hemsida funktioner

resurser

återigen är de flesta besökare på din webbplats inte redo att köpa … ännu. För personer som letar efter mer information, erbjuda en länk till ett resurscenter där de kan bläddra relevant information. Detta håller inte bara dem på din webbsida längre, men det hjälper dig också att skapa din trovärdighet som en tankeledare i din bransch.

Lovesac lägger till en resurslänk till sidfoten under veckan. Lägg märke till hur var och en av dessa sekundära CTA: er täcker flera steg i köpcykeln: en kreditkortslänk som hjälper kunder att enkelt köpa sina möbler, en tygprovguide för dem som fortfarande letar efter den perfekta färgen innan de köper och en onlinekatalog för personer som är på marknaden för nya möbler men ännu inte är redo att göra ett köp.

lovesac webbplats hemsida med resurser och CTA i sidfoten

framgångsindikatorer

förutom kundframgångshistorier kan både utmärkelser och erkännande också hjälpa till att inspirera ett gott första intryck. Är ditt företag en kritikerrosad restaurang? Har du röstat bästa nya app i år? Låt din hemsida besökare vet om dina prestationer. Som socialt bevis kommer det att ge ditt företag mer trovärdighet till dem som inte känner dig.

på Calendlys hemsida hittar du till exempel namnen på kända organisationer som har erkänt dem, som Gartner och Dropbox.

Calendly hemsida hemsida

en hemsida värt att besöka

hemsidan för din webbplats är den första introduktionen varje besökare kommer att ha till ditt företag. Innan de bestämmer sig för att bli kund kommer de att granska din hemsida för att få en uppfattning om vad du säljer, varför det är viktigt för dem och hur de kan dra nytta av vad du har att erbjuda.

gör ett lysande första intryck med en hemsida som innehåller de element som beskrivs ovan. Och för mer inspiration, kolla in fantastiska exempel på hemsidor genom att ladda ner gratis lookbook nedan.

Redaktörens anmärkning: Detta inlägg publicerades ursprungligen i januari 2012 och har uppdaterats för friskhet, noggrannhet och omfattning.

 exempel på lysande hemsida, blogg och målsida design

Lämna ett svar

Din e-postadress kommer inte publiceras.