15+ Vackra webbplatsrubriker och varför de fungerar så bra

Vad är det första en användare ser på din webbplats?

Exakt, rubriken.

Om den inte är tillräckligt tilltalande, om den inte är tydlig, kan det hända att dina användare bara går därifrån och kanske aldrig kommer tillbaka.

Vi vill inte ha det, eller hur?

Headers på webbplatser är en central del av utformningen av en webbplats. De spelar en nyckelroll när det gäller att fånga användarnas uppmärksamhet och skapa en kontakt med webbplatsens besökare.

Det är därför som vi i följande rader kommer att ta upp några principer för utformning av webbplatsrubriker som du bör vara medveten om när du utformar en webbplatsrubrik.

Principer för design av rubriker att följa

Forskningsstudier har visat att användarnas ögon rör sig på en webbsida genom att följa ett av de 3 mönstren:

• Gutenbergmönstret

Bildkälla: https://vanseodesign.comThe Gutenbergmönstret kan tillämpas på texttungt innehåll. Det antyder att läsarens ögon sveper över och ner på sidan i en serie horisontella rörelser.

Exempel:

• Det Z-formade mönstret

Z-mönstret definierar den väg som användarnas ögon följer när de skannar en sida, en väg som tar formen av en Z-bokstav. Det rekommenderas för utformning av landningssidor, som läsarna snabbt scannar.

Exempel:

• Det F-formade mönstret

Detta mönster beskriver den vanligaste stilen för att läsa block av innehåll i online-mediet. Användarna skannar snabbt en webbsida och deras ögon följer ett F-mönster.

Exempel:

Och utan att gå in på ytterligare detaljer om dessa mönster vill vi förstärka att för alla dessa modeller är det den övre horisontella linjen som besökarna börjar skanna en sida.

Vad ska man integrera i en webbplatsrubrik?

De här mönstren visar varför en webbdesigner noggrant måste bestämma vad användarna ska se först. Huvudet ska fungera som en krok som fångar deras uppmärksamhet och bjuder in dem att utforska resten av sidan.

Det finns ingen chans att göra ett andra intryck. Så du bör tänka två gånger på vad du ska inkludera i rubriken:

• Stark hjältebild

En hjältebild är en mycket stor bannerbild som visas ovanför viken på en webbsida. Den ingår i rubriksektionen och är det första som användarna ser när de kommer till en webbplats. Hjältebilder har också till uppgift att fästa besökarnas uppmärksamhet på företagets unika försäljningsargument (USP). En bästa praxis säger att om man använder ansikten av riktiga människor i hjältebilderna kan det hjälpa besökarna att relatera bättre till varumärket. Kommunikationen blir mer mänsklig och personlig.

Källa: Drift.com

• Unique selling point (USP)

USP är en fras som förklarar anledningen till att ett företag existerar. Den ska avslöja vad företaget gör, varför och för vem. Den bör också betona unika egenskaper och fördelar, som gör att varumärket sticker ut bland konkurrenterna. En stark USP är avgörande för att förmedla rätt budskap till webbplatsens besökare och i slutändan omvandla dem till kunder.

Källa: miro.com

• Märkesnamn

Märkesnamnet gör människor vana vid webbplatsens identitet eller förstärker den bild som människor har av din företagsidentitet.

Bilden bör återspegla din varumärkespersonlighet och se till att din varumärkesröst är konsekvent på hela webbplatsen. Den ska vara lätt att känna igen även om den skärs ut från webbplatsens rubrik. Och när den placeras i webbplatsens rubrik bör den spela en viktig roll för att skapa en personlig kontakt med varje användare.

Källa: carolinaherrera.com

• Produktvideo

Då det bara tar 50 millisekunder för användarna att bilda sig en uppfattning om en webbplats, innebär det att du bör ha de viktigaste budskapen i rubriken. Det är därför som många företag inte väntar på att användarna ska scrolla ner för att komma till funktionerna hos deras produkt/tjänst, utan de använder videons kraft för att förmedla sitt budskap på ett bättre sätt. Låt oss inte heller glömma att 78 % av människor tittar på onlinevideor varje vecka och 55 % tittar på onlinevideor varje dag.

Källa: wistia.com

• Call to action (CTA)

En CTA är ett budskap (vanligen på en knapp), som utlöser ett visst gensvar från webbplatsens besökare. Call-to-action ska vara tydligt definierat och lätt att förstå för webbplatsbesökarna. Naturligtvis ökar en CTA som placeras i rubriken, precis där besökarna börjar sin resa in på webbplatsen, chanserna att få den önskade åtgärden från respektive användare.

Källa: creatopy.com

• Produkt med

Om du driver en e-handelsbutik kommer du att vilja framhäva en viss produkts kvalitet och bekvämlighet, och det bästa sättet att göra det är att inkludera den produkten i rubriken. Användarnas uppmärksamhet kommer att riktas mot det bästa erbjudandet och de kommer att vara benägna att gå in i köpprocessen.

Källa: amazon.com

I alla ovanstående fall är den allmänna tumregeln: håll det enkelt, håll det tydligt, gör rubriken engagerande! Forskning visar att ”den genomsnittliga skillnaden i hur användarna behandlar information ovanför respektive under viken är 84 %”. Så det är bäst att fokusera dina ansträngningar på att minska dessa siffror så mycket som möjligt. Och det gör du bäst om du har satt upp några mål för vad du vill överföra.

Stora webbplatser, som www.youtube.com, begränsar utrymmet som ägnas åt rubriken till endast en liten del. Detta görs med flit, eftersom avsikten är att låta användarnas uppmärksamhet riktas mot något viktigare, som produkter, eller tjänster, eller videor (t.ex. YouTube).

Undertiden behöver man inte ens en rubrik, eller om man gör det, behöver man bara en liten rubrik.

Det hela beror på webbplatsens särdrag. Tänk efter och ge din webbplats den personlighet den behöver, oavsett vad webbdesigntrenderna ”berättar” för dig då och då.

Vad inspirerar din webbplatsrubrik?

Förutom att förmedla vissa budskap kan du också tänka dig att väcka vissa känslor hos läsarna. Beroende på vilket syfte du ger rubriken kan den inspirera läsarna till något av följande:

• Nyfikenhet

För vissa webbplatser skulle det vara lämpligt att sätta upp en rubrik som inspirerar läsarna till nyfikenhet. De kommer att vilja ta reda på mer, de kommer att längta efter mer, de kommer att skynda sig att utforska resten av berättelsen.

Det är så jag känner för den här rubriken från Canva. De ger ett stort löfte just där: ”Designa vad som helst”. Och du är inbjuden att testa detta. Kan du motstå?

• Action

I vissa fall är det bättre att väcka handling direkt från rubriken. Med en uppmaning till handling kan du uppmana användarna att klicka på en knapp eller utföra någon annan interaktion med webbplatsen direkt från början. I Planables fall är deras USP direkt kopplad till CTA:n nedan. om du inte är helt redo att köpa finns det också ett alternativ för att boka en demo.

• Trust

Det kan vara användbart att börja med att väcka förtroende hos dina besökare. Du vill att de ska vidta någon åtgärd senare, och för att göra det måste de känna sig helt säkra på att de fattar rätt beslut.

Låt oss se hur Salesforce gör det. De uppger att de är världens största CRM. Okej, du kanske säger att 99 procent av företagen där ute inte är först på sitt område. Och du skulle ha rätt. Men om du läser nedan finns det definitivt något som du kan använda. Det finns en fallstudie som visar hur effektiv produkten är. Du kan själv utnyttja en sådan fallstudie.

• Smärta

Varför i hela friden skulle du vilja inspirera till smärta hos läsarna, särskilt från rubriken? Jo, många företag har sin marknadsföring baserad på FUD-principen (Fear, Uncertainty, Doubt). I ett tidigt skede av konverteringsprocessen kommer rädsla/smärta att utlösa beslutet att omedelbart tillämpa en lösning och få smärtan att försvinna.

Detta kan vara ett tillvägagångssätt för cybersäkerhetstjänster, fysiska säkerhetstjänster, men även inom hälso- och sjukvård eller pensionsfonder.

En sådan strategi kan utnyttjas i kampanjer som vill göra människor medvetna om att man måste vaccinera sig mot COVID eller använda säkerhetsbältet.

• Laughter

Kanske vill du skapa en känslomässig kontakt med besökarna, redan från början. Och det finns inget bättre sätt att göra detta än att få dem att skratta. Och skratta högt. En känsla av delaktighet skapas och du får dina användare att stå vid din sida medan de utforskar webbplatsen.

• Familjäritet

Att koppla ihop användarnas situation med en liknande situation som presenteras i rubriken kan skapa en viss grad av förtrogenhet.

Typer av rubriker för olika typer av webbplatser

Avhängigt av webbplatsens särdrag kommer en rubrik att passa bättre in i den övergripande designen än en annan. Följaktligen bör du ha en klar uppfattning om vilken typ av rubrik som passar bäst för din egen webbplats (oavsett om det är e-handel, blogg, portfölj, nättidning etc.).

• CTA-fokuserad rubrik

I fallet med Blue Apron använder sig webbplatsens rubrik av en stor video, i stället för en stor hjältebild. Det förmedlar en känsla av mysighet, förtrogenhet och aptit.

Nästan har vi en CTA som uppmanar användaren att vidta åtgärder för att dra nytta av samma mysiga och smaskiga upplevelse.

CrazyEggs webbplats har en rubrik som bjuder in användarna att ta med sig deras produkt för en live-demonstration. Deras produkt passar alldeles utmärkt för sådana demonstrationer i realtid. Och det bevisar omedelbart fördelarna med produkten. De använder också en visuell ledtråd som pekar ut CTA: mannens hand i ballongen leder ögat mot knappen.

• Märkesfokuserad rubrik

Detta är ett vackert exempel på en webbplats med en rubrik som fokuserar på varumärkesidentitet och varumärkeselement. Den innehåller logotypen, en replikering av varumärkeslogotypens färger i den övre delen, samt deras slogan.

• Innehållsfokuserad rubrik

Det här passar mycket bra för bloggar och tidskrifter, som marknadsför artiklar och berättelser.

Men jag hittade också några undantag.

Patagonia marknadsför inte sin butik på hemsidan, men de trycker på historier som visar deras engagemang för att göra en förändring i världen. Den här aktuella berättelsen, som visas i webbplatsens rubrik, handlar om slaveri och aktivism.

I I Ikeas fall uppmanar den vänstra sidan av skärmen besökarna att gå till en av nätbutikerna, medan den andra halvan uppmanar användarna att läsa berättelsen om Ikea.

• Videobakgrundsfokuserad rubrik

BUKWILD integrerade 3 olika videor i webbplatsens rubrik. Var och en av videorna kan spelas upp genom att placera musen över motsvarande avsnitt. Det intressanta i detta är det kreativa sätt på vilket de använder videor som delar av en större ”bild”, en bild som representerar deras varumärke.

• Produktfokuserad rubrik

I fallet med Cropp, en modebutik på nätet, presenteras de senaste kollektionerna i rubriken.

Threadless.com sätter väggkonst i ett sammanhang och har en CMYK-trupp. I rubriken finns också en tydlig CTA, för alla som känner att de på något sätt tillhör det scenario som presenteras i rubriken av ”squad”.

• Personal branding-fokuserad rubrik

I fallet med resebloggen Alex in Wanderland kan användarna i webbplatsens rubrik, förutom ett foto av Alex, se början på en berättelse i denna rubrik: ”Five years and counting on the road…”. Detta är en inbjudan till läsarna att vilja utforska fler berättelser.

För att avsluta…

Header bidrar i hög grad till en webbplats framgång eller misslyckande. Tekniskt sett är denna övre del naturligtvis det första på webbplatsen som människor interagerar med.