Hvis du ser på enkelte elementer på et nettsted som også positivt bidrar til brukeropplevelsen, er logoen merkebyggende og fortjener en egen vurdering. I denne artikkelen vil jeg gi deg noen tips fra vår byråpraksis om hvordan du kan sikre en høy brukeropplevelse for nettstedets brukere når det gjelder håndtering av nettstedets logo.

Nettstedets logo erstatter "Hjem"-menypunktet

Logo er ofte plassert i navigasjonsfeltet, og den bør ALLTID være lenket til startsiden. Brukere forventer i dag også at klikk på logoen fører tilbake til startsiden. Logoet erstatter dermed også menypunktet "Hjem", som noen ganger fremdeles er synlig på nettsteder for å lenke til startsiden. En "Hjem"-lenke som eget menypunkt i navigasjonen er unødvendig. Og dermed sparer man også verdifull plass.

Byen Waren (Müritz) i Nord-Tyskland, hvor selskapet vårt er basert, har valgt å gi brukeren en veiledning ved hjelp av husikonet som en interaksjonsmulighet tilbake til startsiden. På dette nettstedet ble det sannsynligvis brukt av to grunner: For det første ble det plassert et annet logo ved siden av logoen, noe som kan redusere klikkfrekvensen på logoen. For det andre antar man kanskje at brukerne av dette nettstedet er mindre kjent med internett. Ærlig talt øker dette husikonet brukeropplevelsen bare i liten grad, for dette nettstedet har mange åpenbare mangler når det gjelder informasjonsarkitektur, brukergrensesnitt og tilgjengelighet (spesielt kontrastene for å lese lenker og tekster). Nettstedet til byen Waren (Müritz) forblir dermed et negativt eksempel.

Responsivt logo: Tilpasning av logoen etter enhetens oppløsning

Mens det er mye plass tilgjengelig i skrivebordsvisninger, slik at bedriftens navn eller slagord i logoen kan inkluderes, bør logoen i mobilvisningen være plassert i redusert form av plass- og oppmerksomhetsgrunner.

Når det gjelder logoer, har det, som med nettsteder også, vært en trend i mange år med tilpasning til størrelse, medium og miljø. Dette kalles også Responsivt logo, noe som betyr at logoen tar hensyn til miljøet og presenterer seg også perfekt på mindre medier, og dermed kanskje må presenteres på litt anderledes måter. I motsetning til stive logoer, som ser like ut på alle enheter og skjermer, tilpasser responsiv logoer seg til de spesifikke kravene og tilbyr dermed en konsistent og optimalisert brukeropplevelse på tvers av forskjellige enheter. Logoet reduseres bare i formen, men ikke i merkevaremeldingen.

Et godt eksempel tilbys av det sveitsiske selskapet Victorinox. Ved første visning vises det store ikonet for brukeren. Det eneste minuspunktet er at logoen er inkludert som en PNG-fil i stedet for en SVG.

I rulling vises bare bildet. I bakgrunnen er et fjell synlig, som understreker den sveitsiske opprinnelsen. I første visning er merkevarebygging viktig. Brukeren bør forstå. Du er på rett sted hos Victorinox. Når brukeren ruller nedover, blir innholdet viktigere. Logoet reduseres i visningen og gir hovedinnholdet mer plass. Navigasjonen forblir festet øverst, som også gir mening fra et brukervennlighetssynspunkt.

En annen tilnærming følges av Guinness' nettsted: Logoet er plassert med selskapets navn. I rulling blir logoet litt mindre mens navigasjonen forblir synlig. Så snart en bruker begynner å rulle oppover, blir logo og navigasjon igjen større, forventningen er at brukeren vil besøke flere sider.

Commerzbank har ikke løst det optimalt med nettstedet sitt. Logoet er synlig med selskapsnavnet og er plassert som en SVG, noe som er løst bra. Imidlertid konkurrerer det veldig sterkt med de tilstøtende navigasjonspunktene. I rulling forsvinner navigasjonen helt, og brukeren må rulle helt tilbake opp for å se navigasjonen igjen. Det ville vært bedre løst hvis navigasjonen vises umiddelbart ved begynnelsen av rullingen, slik som zeit.de har gjort.

Veldig bra løst fra et konverteringsoptimeringssynspunkt hos Commerzbank er det store bildet med blikkretningen til de to personene. De ser mot knappen, noe som automatisk også retter besøkendes oppmerksomhet mot knappen. Slike blikkretninger mot handlingsknappen er veldig effektive. Godt jobbet, Commerzbank!

Interessant blir det når vi ser på eksemplene i mobilversjonen.

I mobilversjonen vises Victorinox-logoet enda mindre og plasseres midtstilt for å strukturere interaksjonsmulighetene bedre for brukeren. Guiness har plassert teksten til høyre for logoen i stedet for under. Slik får harpen mer plass og den øverste navigasjonslinjen blir ikke for stor. Commerzbank skjuler imidlertid bare teksten i smarttelefonoppløsningen.

Rollen til responsive logoer i brukeropplevelsen er viktig, da de bidrar til å opprettholde visuell konsistens og merkeidentitet uavhengig av hvordan brukere får tilgang til nettstedet.

Hvis et logo ikke reagerer på endrede oppløsninger, kan det også tiltrekke seg for mye oppmerksomhet fra brukeren. I det følgende eksempelet fra Hypovereinsbank konkurrerer det veldig dominerende logoet sterkt med Call-to-Action plassert til høyre – spesielt i smarttelefonvisningen. Navigasjonspunktene i mellomgrått blir lett oversett i skrivebordsvisningen. Generelt har også dette nettstedet noen andre UX-feil.

Designere må derfor tilby flere tilpasninger av logoen for å sikre responsive logoer. Logoet må også fungere godt på ulike bakgrunner og i ulike størrelser. Logoet reduseres detaljert jo mindre oppløsningen er. Det er imidlertid viktig at det ikke mister merkeidentiteten sin. Dette er den høye kunsten med bruk av responsive logoer. Så hvis du bestiller en merkevare-omforming, må du allerede tenke på dette kravet når du bruker det kommende logoet.

Websidelogoets filformat

Bruken av responsive logoer gir mening fordi riktig størrelse lastes basert på oppløsningen. For mindre oppløsninger, for eksempel på en smarttelefon, lastes også bare det mindre grafikken. Dette sparer lastetid. Den største effekten på lastetiden din vil imidlertid bli oppnådd hvis du:

1. legger inn logoet i riktig oppløsning (også med angivelse av høyde og bredde). Ofte er logoer lagt inn med for høy oppløsning og blir deretter skalert ned for visning.
2. legger inn logoet i vektorformatet SVG i stedet for PNG eller JPG.

Bruk websidelogo som favicon

Bruk også den reduserte versjonen av logoen din som favicon. Avstå også fra tekst eller andre små elementer som ikke er synlige i den lille oppløsningen til favicon.

Mens Guiness-nettstedet fra det ovennevnte eksempelet bruker logoet responsivt veldig bra på nettstedet, er det ikke optimalt som favicon. Den lille hvite Guiness-teksten er ikke synlig og reduseres i favicon, noe som reduserer den totale virkningen. Kontrasten er lav. Bildeinntrykket ville være tydeligere bedre uten tekst og bare redusert til harpen til logoet. De andre eksemplene i denne artikkelen har løst dette bedre enn Guiness.

Hvis du leter etter et byrå som fokuserer på responsive logoer, ta gjerne kontakt med oss. Vi i 4eck Media er eksperter på brukeropplevelse.

Hvis du ser viktigheten av en profesjonell posisjonering, er kanskje også følgende ikonpakker og Corporate Design maler interessante for deg: