Če pregledamo posamezne elemente spletne strani, ki pozitivno prispevajo k uporabniški izkušnji, je logotip pomemben za blagovno znamko in si zasluži lasten pregled. V tem članku vam želim podati nekaj nasvetov iz prakse naše agencije, kako zagotoviti visoko uporabniško izkušnjo za uporabnike vaše spletne strani pri ravnanju z logotipom.

Logotip spletne strani nadomesti menijsko povezavo do začetne strani

Logotip je pogosto nameščen v navigacijski vrstici in mora VEDNO biti povezan z začetno stranjo. Uporabniki danes pričakujejo, da jih klik na logotip vrne na začetno stran. Logotip tako nadomesti tudi povezavo v meniju "Domov", ki je včasih še vedno vidna na spletnih mestih, da bi se povezali na začetno stran. Povezava "Domov" kot lasten menijski element v navigaciji je odveč. Tako se tudi prihrani dragocen prostor.

Mesto Waren (Müritz) v Severni Nemčiji, kjer je naše podjetje doma, se je odločilo, da bo uporabniku z ikono hiše pomagalo kot možnost interakcije za vrnitev na začetno stran. V tem primeru je bilo verjetno uporabljeno zaradi dveh razlogov: po eni strani je bil poleg logotipa nameščen še en logotip, zaradi česar bi lahko zmanjšala željo po klikanju na logotip. Po drugi strani morda sklepamo, da uporabniki tega spletnega mesta niso tako dobro seznanjeni z internetom. Iskreno povedano, ta ikona hiše le delno izboljša uporabniško izkušnjo, saj ima to spletno mesto številne opazne pomanjkljivosti glede informacijske arhitekture, uporabniškega vmesnika in dostopnosti (zlasti kontrasti pri branju povezav in besedil). Spletna stran mesta Waren (Müritz) tako ostaja negativni primer.

Prilagodljiv logotip: Prilagajanje logotipa glede na ločljivost naprave

Medtem ko je v pogledih namizja na voljo veliko prostora, zato se lahko podjetje ali slogan navede v logotipu, bi moral biti logotip v mobilnem pogledu nameščen v zmanjšani obliki zaradi prostora in pozornosti.

Pri logotipih je, kot pri spletnih mestih, že vrsto let prevladal trend prilagajanja velikosti, medija in okolja. Govorimo o prilagodljivem logotipu, kar pomeni, da logotip upošteva okoljske razmere in se tudi na manjših medijih popolnoma predstavi, kar lahko zahteva tudi nekoliko drugačen pristop. Za razliko od statičnih logotipov, ki so videti enaki na vseh napravah in zaslonih, se prilagodljivi logotipi prilagajajo specifičnim zahtevam in tako zagotavljajo dosledno in optimizirano uporabniško izkušnjo prek različnih končnih naprav. Pri tem se logotip zmanjša le v svoji obliki, ne pa v svojem sporočilu blagovne znamke.

Primer dobre prakse predstavlja švicarsko podjetje Victorinox. Uporabniku je prikazana velika ikona kot prva slika. Edina pomanjkljivost: Logotip je vključen kot datoteka PNG namesto kot datoteka SVG.

Ob pomikanju navzdol je prikazan samo slikovni element. V ozadju je viden hrib, ki poudarja švicarski izvor. V prvem pogledu je tako pomembna gradnja blagovne znamke. Uporabnik naj razume. Tukaj ste pri Victorinoxu pravilno. Ko uporabnik pomakne navzdol, postanejo vsebine pomembne. Logotip se zmanjša v prikazu in glavnim vsebinam omogoči več prostora. Navigacija ostane pritrjena zgoraj, kar je zelo smiselno tudi z vidika uporabnosti.

Drugi pristop sledi spletna stran Guinness: Logotip je postavljen z imenom podjetja. Med pomikanjem se logotip nekoliko zmanjša, pri čemer je navigacija še vedno vidna. Ko uporabnik začne pomikati navzgor, postanejo logotip in navigacija spet večji, saj se pričakuje, da želi uporabnik obiskati druge strani.

Neoptimalno rešitev je imela Commerzbank s svojo spletno stranjo. Logotip je prikazan z imenom podjetja in je postavljen kot datoteka SVG, kar je dobro. Vendar močno tekmuje z bližnjimi navigacijskimi točkami. Med pomikanjem navigacija popolnoma izgine in uporabnik mora ponovno pomakniti navzgor, da vidi navigacijo. Bolje bi bilo, če bi se navigacija pričela prikazovati takoj ob začetku pomikanja navzgor, kot je to storila npr. stran zeit.de.

Iz vidika optimizacije pretvorbe je Commerzbank dobro rešila veliko sliko z usmerjanjem pogleda obeh oseb proti gumbu, kar samodejno usmerja tudi pogled obiskovalca proti gumbu za klic k dejanju. Takšno usmerjanje pogleda k dejanju je zelo učinkovito. Dobra rešitev, Commerzbank!

Zanimivo postane, ko si ogledamo primere v mobilni različici.

V mobilni različici je logo Victorinox prikazan še manjši in bolj osredotočen, da bi bolje strukturiral interakcijske zmožnosti za uporabnika. Guiness je besedilo postavil desno od logotipa namesto spodaj. Tako ima citra več prostora in vrhnja navigacijska vrstica ni prevelika. Commerzbank preprosto izbriše besedilo v ločljivosti pametnega telefona.

Vloga odzivnih logotipov pri uporabniški izkušnji je pomembna, saj pomagajo ohranjati vizualno doslednost in blagovno identiteto, ne glede na to, kako uporabniki dostopajo do spletnega mesta.

Če logotip ne reagira na spreminjajoče se ločljivosti, lahko premočno pritegne pozornost uporabnika. V spodnjem primeru podjetja Hypovereinsbank preveč izrazit logotip premočno tekmuje z desno postavljenim pozivom k dejanju - zlasti v pogledu pametnega telefona. Navigacijske točke v srednji sivi barvi so v pogledu namizja zlahka spregledane. Na splošno tudi ta spletna stran vsebuje nekaj dodatnih napak v uporabniški izkušnji.

Oblikovalci morajo zagotoviti več prilagoditev logotipov, da bodo odzivni. Logotip mora prav tako dobro delovati na različnih ozadjih in velikostih. Zmanjšati se mora podrobno del logotipa, ko je ločljivost manjša. Pri tem pa ne sme izgubiti jedra blagovne znamke. To je visoka umetnost pri uporabi odzivnih logotipov. Zato že ob naročilu prenove blagovne znamke pomisli na to zahtevo pri uporabi prihajajočega logotipa.

Oblika datoteke logotipa spletnega mesta

Uporaba odzivnih logotipov ima smisel, saj se ob različnih ločljivostih naloži pravilna velikost. Pri manjših ločljivostih, na primer na pametnem telefonu, se naloži tudi manjša grafika. To prihrani čas nalaganja. Največji učinek na vaš čas nalaganja boste dosegli, če boste:

1. vnesli logotip v pravilno ločljivost (tudi z navedbami za višino in širino). Pogosto so logotipi vključeni v previsoki ločljivosti in nato pomanjšani za prikaz.
2. vnesli logotip v formatu SVG vektorja namesto PNG ali JPG.

Uporaba logotipa spletnega mesta kot favicon

Izkoristite zmanjšano obliko logotipa za uporabo kot favicon. Pri tem se izogibajte tudi besedilom ali drugim manjšim elementom, ki v majhni ločljivosti favicona niso razpoznavni.

Medtem ko spletna stran Guiness iz zgoraj navedenega primera zelo dobro uporablja odzivni logotip za spletno mesto, to ni optimalno kot favicon. Majhen bel napisek Guiness ni prepoznaven in zmanjšuje splošni vtis favicona. Kontrast je nizek. Vtis bi bil brez besedila in zgolj zmanjšan na citro logotipa precej boljši. Ostali primeri iz tega članka so ta problem rešili bolje kot Guiness.

Če iščete agencijo, ki se osredotoča na odzivne logotipe, nas z veseljem kontaktirajte. Mi v podjetju 4eck Media smo strokovnjaki za uporabniško izkušnjo.

Če vam je pomembna strokovna postavitev, vas bodo morda zanimale tudi naslednje ikonski paketi in predloge korporativnega oblikovanja: