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.

Hjem-ikon som startside-lenke
Screenshot (01.04.2024) av startssiden på Waren (Müritz)s nettsted. Et husikon i begynnelsen av navigasjonen er lenket til startsiden.

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.

Logoet i desktop-versjonen av selskapet Victorinox.
Her er logoen synlig sammen med selskapets logo (screenshot fra victorinox.com: 01.04.2024)

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.

Det reduserte logoet i skrivebordsversjonen når du scroller på Victorinox-nettstedet.

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.

Guinness-logoet i skrivebordsvisning ved rulling

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!

Commerzbank-startsiden med logo og navigasjon.
Screenshot av startssiden til Commerzbank fra 01.04.2024.

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

Mobile visninger og eksempler på responsive logoer.

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.

Stivt logo uten responsiv tilpasning.
Screenshots av Hypovereinsbank's hjemmeside fra 01.04.2024.

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.

Nettstedets logo som favicon.

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:

1108,1009,1089,1104

Høy brukeropplevelse på nettstedslogoen med responsiv atferd

Publisert av Matthias Petri
Publisert: Fra Matthias Petri
Matthias Petri grunnla sammen med broren sin Stefan Petri selskapet 4eck Media GmbH & Co. KG i 2010. Sammen med teamet sitt driver han den populære faglige forumet PSD-Tutorials.de og e-læringsportalen TutKit.com. Han har publisert mange opplæringer for bildebehandling, markedsføring og design og underviste som faglærer ved FHM Rostock innen "Digital Markedsføring & Kommunikasjon". For sitt engasjement har han blitt flere ganger hedret, blant annet med spesialprisen for Mecklenburg-Vorpommerns nettstedpris i 2011 og som kreativ skaper for Mecklenburg-Vorpommern i 2015. Han ble utnevnt til Fellow for Kompetansesenter for Kultur- & Kreativindustri i 2016 av forbundet og er engasjert i initiativet "Vi er Øst" som gründer og administrerende direktør stedfortredende sammen med mange andre aktører av østtysk opprinnelse.