När du betraktar enskilda element på en webbplats som också positivt påverkar användarupplevelsen, är logotypen varumärkesbyggande och förtjänar en egen analys. I denna artikel vill jag ge dig några tips från vårt byråpraxis om hur du kan säkerställa en hög användarupplevelse för dina webbplatsbesökare när det gäller hanteringen av din webbplatss logotyp.

Logotypen på webbplatsen ersätter startsidans menylänk

Logotypen är ofta placerad i navigeringsfältet och den bör alltid länkas till startsidan. Användare förväntar sig idag också att klicka på logotypen leder tillbaka till startsidan. Logotypen ersätter därmed också menylänken "Hem", som ibland fortfarande syns på webbplatser för att länka tillbaka till startsidan. En Hem-länk som en separat menylänk i navigeringen är onödig. Och på så vis sparas värdefullt utrymme.

Staden Waren (Müritz) i norra Tyskland, där vårt företag är beläget, har beslutat att ge användaren en hjälp med hjälp av husikonen som en interaktionsmöjlighet tillbaka till startsidan. Det kan ha funnits två skäl till att den användes här: Å ena sidan kan det finnas en ytterligare logotyp utöver logotypen, vilket kan minska klickfrekvensen på logotypen. Å andra sidan kanske man antar att användarna av denna webbplats är mindre förtrogna med internet. I ärlighetens namn ökar den här husikonen användarupplevelsen bara marginellt, eftersom det finns många uppenbara brister när det gäller informationsarkitekturen, användargränssnittet och tillgängligheten (särskilt kontrasterna för att läsa länkar och texter). Webbplatsen för staden Waren (Müritz) förblir därmed ett negativt exempel.

Responsiv logotyp: Anpassning av logotypen efter enhetens upplösning

Medan det finns gott om utrymme i desktop-vyer och därför företagsnamnet eller mottoet kan inkluderas i logotypen, bör logotypen i mobilvy vara placerad i en mindre form av utrymme- och uppmärksamhetsskäl.

När det gäller logotyper har trenden med anpassning till storlek, medium och omgivning länge gällt, precis som med webbplatser. Man talar också om Responsiv logotyp, vilket innebär att logotypen tar hänsyn till omgivningen och presenterar sig perfekt även på mindre medier, vilket eventuellt kan innebära att den måste visas på olika sätt. Till skillnad från statiska logotyper som ser likadana ut på alla enheter och skärmstorlekar, anpassar sig responsiva logotyper till de specifika kraven och ger en konsekvent och optimerad användarupplevelse över olika enheter. Logotypen minskar endast i sin form, men inte i sitt varumärkesbudskap.

Ett gott exempel ges av schweiziska företaget Victorinox. Besökaren ser det stora ikonet först. Enda minuspoängen: Logotypen är infogad som en PNG-fil istället för SVG.

I bildrullningen visas endast bildobjektet. I bakgrunden syns en bergskedja som understryker den schweiziska ursprunget. I den första vyporten är varumärkesuppbyggnad viktig. Besökaren ska förstå. Du är på rätt plats på Victorinox. När besökaren skrollar ner minskar logotypen i presentationen och ger mer plats åt huvudinnehållet. Navigeringen förblir fäst högst upp, vilket också är mycket meningsfullt för användbarhetssynpunkt.

Ett annat tillvägagångssätt följs av Guinness webbplats: Logotypen är placerad med företagsnamnet. När du skrollar minskas logotypen något medan navigeringen fortfarande är synlig. Så fort en användare börjar scrolla uppåt blir logotypen och navigeringen större igen, eftersom det förväntas att användaren vill besöka fler sidor.

Commerzbank har inte löst det optimalt på sin webbplats. Logotypen visas tillsammans med företagsnamnet och är placerad som en SVG, vilket är väl löst. Dock konkurrerar den starkt med de intilliggande navigationspunkterna. När du skrollar försvinner navigeringen helt och användaren måste skrolla helt upp igen för att se navigeringen. Det skulle vara bättre löst om navigeringen dyker upp direkt när användaren börjar skrolla uppåt, som till exempel löst av zeit.de.

Commerzbank har löst det mycket bra ur konverteringsoptimeringssynpunkt med den stora bilden med ögonstyrningen från de två personerna. De tittar mot knappen vilket automatiskt leder besökarens blick mot knappen. Den här typen av ögonstyrningar för att styra fokus mot åtgärdsknappen är mycket effektiva. Bra gjort, Commerzbank!

Det blir intressant när vi tittar på exemplen i mobilversionen.

I mobilversionen visas Victorinox-logotypen ännu mindre och är därför centrerad för att bättre strukturera interaktionsmöjligheterna för användaren. Guiness har placerat texten till höger om logotypen istället för under den. På så sätt får harpan mer plats och det övre navigeringsfältet blir inte för stort. Commerzbank visar helt enkelt inte texten i smarttelefonupplösningen.

Den responsiva logotypens roll för användarupplevelsen är viktig eftersom de hjälper till att bibehålla visuell konsistens och varumärkesidentitet oavsett hur användarna får tillgång till webbplatsen.

Om en logotyp inte reagerar responsivt på förändrade upplösningar kan den också dra för mycket uppmärksamhet från användaren. I det följande exemplet med Hypovereinsbank konkurrerar den mycket framträdande logotypen för mycket med call-to-action-placeringen till höger – särskilt i smarttelefonvy. Navigationspunkterna i mörkgrått förbises lätt i skrivbordsvyn. Generellt har även denna webbplats några ytterligare UX-fel.

Designers måste därför tillhandahålla flera logoanpassningar för att säkerställa responsiva logotyper. Logotypen måste också fungera bra på olika bakgrunder och i olika storlekar. Logotypen minskas i detaljgrad ju mindre upplösningen är. Den får dock inte förlora kärnan i varumärket. Det är den stora konsten med responsiva logotyper. Så om du beställer en varumärkesomlansering, tänk redan på denna kravspecifikation vid användningen av din kommande logotyp.

Webbplatslogotypens filformat

Användningen av responsiva logotyper är meningsfull eftersom rätt storlek laddas beroende på upplösningen. Vid mindre upplösningar, som exempelvis på en smartphone, laddas också bara den mindre grafiken. Det sparar laddningstid. Du kommer dock att göra störst effekt på din laddningstid om du:

1. lägger in logotypen i rätt upplösning (också med angivande av höjd och bredd). Ofta är logotyper inbäddade med för hög upplösning och skalas sedan ned för visning.
2. lägger in logotypen i vektorformat SVG istället för PNG eller JPG.

Använda webbplatslogotyp som favicon

Använd även den reducerade formen av din logotyp som favicon. Undvik också text eller andra små element som inte är igenkännbara i favicons lilla upplösning.

Även om Guiness-webbplatsen från exemplet ovan använder logotypen på ett väldigt bra sätt för webbplatsen, är det inte optimalt som favicon. Den lilla vita Guiness-texten är inte igenkännbar och minskar helhetsintrycket av favicongen. Kontrasten är låg. Intrycket skulle vara tydligare utan text och endast fokuserat på harpan i logotypen. De andra exemplen i den här artikeln har alla löst det bättre än Guiness.

Om du letar efter en byrå som fokuserar på responsiva logotyper, kontakta oss gärna. Vi på 4eck Media är proffs på användarupplevelse.

Om en professionell positionering är viktig för dig, kan även följande ikonpaket och företagsdesignmallar vara av intresse för dig: