Når du ser på enkelte elementer på en hjemmeside, der også bidrager positivt til brugeroplevelsen, så er logoet brandstiftende og fortjener en egen analyse. I denne artikel vil jeg give dig nogle tips fra vores agenturpraksis om, hvordan du kan sikre en høj brugeroplevelse for dine hjemmesidebrugere, når det kommer til håndtering af dit hjemmeside-logo.

Hjemmeside-logoet erstatter startside-menyen

Logoet er ofte placeret i navigationslinjen og bør ALDRIG mangle et link til startside. Brugerne forventer i dag også, at klikke på logoet vil føre tilbage til startsiden. Logoet er dermed også erstatning for menupunktet "Hjem", som stadig er synligt på visse hjemmesider i dag for at linke til startiden. At have et "Hjem"-link som separat menupunkt i navigationen er unødvendig og sparer derfor værdifuld plads.

Byen Waren (Müritz) i Nordtyskland, hvor vores virksomhed er placeret, har valgt at hjælpe brugerne med et hus-ikon som en genvej tilbage til startiden. Der er sandsynligvis to grunde til, at det blev anvendt her: For det første blev der ud over logoet også placeret et andet logo, hvilket kunne mindske brugernes lyst til at klikke på logoet. For det andet antages det muligvis, at brugerne af denne hjemmeside er mindre fortrolige med internettet. Ærligt sagt øger dette hus-ikon kun brugeroplevelsen marginalt, da hjemmesiden lider under adskillige synlige mangler vedrørende informationsarkitekturen, brugergrænsefladen og tilgængeligheden (især kontrasterne for læsning af links og tekst). Hjemmesiden for byen Waren (Müritz) forbliver derfor et negativt eksempel.

Responsivt logo: Tilpasning af logoet efter enhedens opløsning

I desktop-visninger er der normalt masser af plads til rådighed, så virksomhedsnavnet eller sloganet kan inkluderes i logoet, mens logoets størrelse bør reduceres i mobilvisningen af pladshensyn og for at fange opmærksomheden.

Med logoer, ligesom med hjemmesider, har trenden med tilpasning til størrelse, medie og miljø været fremherskende i årevis. Dette kaldes også et Responsivt Logo, hvilket betyder, at logoet tager hensyn til omgivelserne og præsenterer sig perfekt på mindre medier, hvor det eventuelt kan vises lidt anderledes. I modsætning til statiske logoer, der ser det samme ud på alle enheder og skærmstørrelser, tilpasses responsivt logoet de individuelle krav og tilbyder en konsistent og optimeret brugeroplevelse på tværs af forskellige enheder. Logoet reduceres kun i størrelse, men ikke i dets brandbesked.

Et positivt eksempel er det schweiziske firma Victorinox. Ved første øjekast ser brugeren det store ikon. Eneste negative punkt: Logoet er indlejret som en PNG-fil i stedet for SVG.

Ved scrolling vises kun billedelementet. I baggrunden kan man se et bjerg, der fremhæver det schweiziske ophav. Markedsføringen af brandet er vigtig i den første visning. Brugeren skal forstå: Du er på rette sted hos Victorinox. Hvis brugeren scroller nedad, bliver indholdet vigtigt. Logoet reduceres i størrelse, hvilket giver mere plads til hovedindholdet. Navigationen forbliver fastgjort øverst, hvilket også er meget fornuftigt set fra et brugervenlighedsperspektiv.

Et andet tilgang følges af Guinness' hjemmeside: Logoet er placeret med virksomhedsnavnet. Ved scrolling bliver logoet lidt mindre, men navigationen forbliver synlig. Når en bruger begynder at scrolle opad, bliver både logo og navigation større, da det forventes, at brugerne ønsker at besøge flere sider.

Commerzbank har ikke løst det optimalt på deres hjemmeside. Logoet er placeret med virksomhedsnavnet og er integreret som en SVG-fil, hvilket er godt. Dog konkurrerer det markant med de tilstødende navigationspunkter. Når man scroller, forsvinder navigationen helt, og brugeren skal først scrolle helt op for at se den igen. Det ville have været bedre, hvis navigationen straks vises, når brugeren begynder at scrolle opad, som det er gjort på tid.de.

Et glimrende eksempel på konverteringsoptimering fra Commerzbank er det store billede med de to personers øjenretning. De kigger mod knappen, hvilket automatisk retter besøgendes opmærksomhed mod knappen. Sådan øjenretning mod handlingsknappen er meget effektivt. Godt udført, Commerzbank!

Det bliver interessant, når vi ser på eksemplerne i den mobile version.

I den mobile version vises Victorinox-logoet endnu mindre og er placeret midt på for bedre at strukturere interaktionsmulighederne for brugeren. Guiness har placeret teksten til højre for logoet i stedet for under. På den måde får harpen mere plads, og den øverste navigationslinje bliver ikke for stor. Commerzbank skjuler simpelthen teksten i smartphone-opløsningen.

Rollen af responsive logoer i brugeroplevelsen er vigtig, da de hjælper med at opretholde visuel konsistens og brandidentitet, uanset hvordan brugere får adgang til hjemmesiden.

Hvis et logo ikke reagerer responsivt på ændrende opløsninger, kan det også tiltrække brugerens opmærksomhed for meget. I nedenstående eksempel konkurrerer det meget fremtrædende logo for Hypovereinsbank for meget med Call-to-Action placeret til højre - især i smartphone-visningen. Navigationspunkterne i midtergrå bliver let overset i desktop-visningen. Generelt har denne hjemmeside også nogle andre brugeroplevelsesfejl.

Designere skal derfor sikre flere logo tilpasninger til responsive. Logoet skal også fungere godt på forskellige baggrunde og i forskellige størrelser. Logoet bliver derfor reduceret i detaljer, jo mindre opløsningen er. Det må dog ikke miste kerneværdien. Det er den store kunst ved brugen af responsive logoer. Så hvis du bestiller en relancering af din virksomhed, så tænk allerede på dette krav ved brugen af dit kommende logo.

Websitelogofiletformatet

Brugen af responsive logoer giver mening, fordi den rigtige størrelse indlæses afhængigt af opløsningen. Ved mindre opløsninger, som f.eks. på en smartphone, indlæses også kun det mindre grafik. Det sparer indlæsningstid. Den største effekt på dit indlæsningstid vil du dog opnå, hvis du:

1. indlæser logoet i den rigtige opløsning (også med angivelse af height og width). Ofte er logoer indlæst i en for høj opløsning og bliver derefter skaleret ned til visningen.
2. indlæser logoet i vektorformatet SVG i stedet for PNG eller JPG.

Websitelogoen som Favicon

Brug også den reducerede form af dit logo som favicon. Undlad også tekst eller andre små elementer, som ikke er synlige i faviconets lille opløsning.

Mens Guinnesss hjemmeside fra det ovenstående eksempel bruger logoet responsivt meget godt på hjemmesiden, er det ikke optimalt som favicon. Den lille hvide Guinness-tekst er ikke synlig og reducerer det samlede indtryk i faviconets rammer. Kontrasten er lav. Indtrykket ville være tydeligere bedre uden tekst og kun reduceret til logoets harpe. De andre eksempler i denne artikel har alle løst det bedre end Guinness.

Hvis du leder efter et bureau, der fokuserer på responsive logoer, er du velkommen til at kontakte os. Vi fra 4eck Media er professionelle inden for brugeroplevelse.

Hvis en professionel positionering er vigtig for dig, er følgende ikonpakker og corporate design skabeloner måske også interessante for dig: