Kui vaadata üksikuid elemente veebisaidil, mis samuti positiivselt kasutajakogemusse panustavad, siis logo on brändiloova tähtsusega ja väärib eraldi analüüsi. Selles artiklis tahan anda sulle mõned näpunäited meie agentuuri praktikast, kuidas tagada oma veebisaidi kasutajatele kõrge kasutajakogemus, kui tegemist on sinu veebisaidi logoga.

Veebisaidi logo asendab avalehe menüüpunkti

Logo on sageli navigeerimisribal ja SELLEGA peaks alati olema lingitud avalehele. Tänapäeval ootavad kasutajad ka, et logo klikk viiks tagasi avalehele. Sellega asendab logo ka menüül linki "Avaleht", mis mõnikord veebisaitidel endiselt nähtav on, et linkida avalehele. Avalehe lingina navigatsioonis on tarbetu. Nii säästetakse väärtuslikku ruumi.

Põhja-Saksamaal asuvas Waren (Müritzi) linnas, kus asub meie ettevõte, otsustati kasutajale majakujutisega abi anda tagasipääsuasutusena avalehele. Siin kasutati seda ilmselt kahest põhjusest: ühelt poolt asetati logo kõrvale veel üks logo, mis võiks logo klõpsamisaktiivsust vähendada. Teisalt eeldatakse võib-olla, et selle veebisaidi kasutajad pole veebiga väga kursis. Ausalt öeldes suurendab see majakujutis kasutajakogemust ainult piiratud ulatuses, kuna sellel veebisaidil on palju märgatavaid puudusi teabe struktuuri, kasutajaliidese ja ka ligipääsetavuse (eriti lingide ja tekstide lugemise kontrastide) osas. Waren (Müritzi) linna veebisait jääb seega negatiivseks näiteks.

Reageeriv logo: Logode kohandamine seadme eraldusvõime järgi

Tavalistes vaadetes on laialt ruumi saadaval ja seega saab ettevõtte nimi või moto logoga koos välja tuua, kuid mobiilsel vaatel tuleks logo paigutada kokkupandud kujul ruumi ja tähelepanu pärast.

Logode puhul ja ka veebisaitidel on juba aastaid toimunud suundumus kohanduda suuruse, meediumi ja keskkonnaga. Siin räägitakse ka reageerivast logost, mis tähendab, et logo järgib keskkonna tingimusi ja esitleb ennast ka väiksematel ekraanidel täiuslikult, mis võib tähendada, et mõningaid lähenemisviise tuleb muuta. Erinevalt jäikadest logodest, mis näevad kõigil seadmetel ja ekraanisuurustel samad välja, kohanduvad reageerivad logod vastavalt konkreetsetele nõuetele, pakkudes nii konsistentsi ja optimeeritud kasutajakogemust erinevate seadmete vahel. Sellega väheneb logo vaid oma vormis, mitte oma brändisõnumis.

Hea näide on Šveitsi ettevõte Victorinox. Kasutaja saab esmalt suure ikooni. Ainus puudus: logo on lisatud PNG-failina, mitte SVG-na.

Kerimisel kuvatakse ainult pildielement. Taustal on märgata mäge, mis rõhutab Šveitsi päritolu. Esimeses vaatepunktis on bränding oluline. Kasutaja peaks aru saama. Oled siin täpselt Victorinoxis. Kui kasutaja kerib alla, saavad oluliseks sisud. Logo väheneb esitluses ja annab peasisule rohkem ruumi. Navigatsioon jääb ülaltpoolt kinnitatud, mis on ka kasutajatele väga mõistlikus kasutatavuse seisukohast.

Muud lahendust kasutab Guinnessi veebisait: logo on ettevõtte nimega paigutatud. Kerimisel muutub logo pisut väiksemaks, hoides samas nähtavat navigatsiooni. Kui kasutaja hakkab kerima ülespoole, suureneb nii logo kui ka navigatsioon, kuna eeldatakse, et kasutaja soovib külastada muid lehekülgi.

Commerzbank lahendas selle ebasoodsalt. Logo on ettevõtte nimega nähtav ja paigutatud SVG-na, mis on hea lahendus. Siiski konkureerib see tugevalt kõrvalolevate navigeerimispunktidega. Kerides kaob navigatsioon täielikult ja kasutaja peab kogu tee uuesti kerima, et navigeerimist näha. Paremini oleks lahendatud, kui koos kerimise algusega ilmuks navigatsioon kohe, nagu seda on teinud näiteks zeit.de.

Väga hästi lahendatud konversiooni optimeerimise seisukohast on Commerzbankil suur pilt kahe inimese vaateväljaga. Nad vaatavad nupule suunatud pilguga, juhtides automaatselt ka külastaja pilku nupule. Sellised pilgujuhtimised suunatuna tegevusele on väga tõhusad. Hästi tehtud, Commerzbank!

Huvitav on vaadata näiteid mobiiliversioonis.

Mobiiliversioonis kuvatakse Victorinoxi logo veelgi väiksemalt ja keskele paigutatult, et paremini struktureerida kasutaja interaktsioonivõimalusi. Guiness on teksti asendanud logost paremal asuvaks, mitte allapoole paigutatuna. Nii saab harf rohkem ruumi ja ülemist navigeerimisriba ei muudeta liiga suureks. Commerzbank lihtsalt peidab teksti ära nutitelefoni lahutusvõimes.

Responsive logo roll kasutajakogemuses on oluline, kuna see aitab hoida visuaalset järjepidevust ja brändi identiteeti olenemata sellest, kuidas kasutajad veebisaidile juurde pääsevad.

Kui logo ei reageeri muutuvale eraldusvõimele, võib see liigselt kasutaja tähelepanu tõmmata. Hypovereinsbanki näites konkureerib väga märgatav logo eriti tugevalt paremal asuva tegevuskutsega - eriti nutitelefonivaates. Hallikas keskmise tooniga navigeerimispunktid jäävad desktopi vaates kergesti märkamatuks. Üldiselt esineb ka sellel veebisaidil mitmeid teisi kasutajakogemuse vigu.

Disaineritel tuleb tagada responsiivsete logode jaoks mitu logokohandust. Logo peab hästi toimima ka erinevatel taustadel ja erinevates suurustes. Eraldusvõime vähenemisel väheneb logo üksikasjalikkus. Sealjuures ei tohi see siiski kaotada brändi tuuma. See on responsiivsete logode kasutamise osas suur kunst. Seega mõtle juba oma tulevasse logo kasutusse võtmisel sellele nõudele, kui tellid brändi uuendamist.

Veebisaidi logo failivorming

Responsive logode kasutamine on mõistlik, kuna vastavalt eraldusvõimele laaditakse õige suurus. Väiksemate eraldusvõimetega seadmete, näiteks nutitelefoni puhul laaditakse ka ainult väiksem graafika. Suurimat mõju laadimisajale saavutad siiski, kui:

1. manustad logo õiges eraldusvõimes (koos kõrguse ja laiuse andmetega). Sageli on logod manustatud liiga suure eraldusvõimega ja seejärel vaadeldakse neid vähendatuna.
2. manustad logo vektorformaadis SVG asemel jpg või png.

Veebisaidi logo kasutamine faviconina

Kasuta oma logo vähendatud versiooni ka faviconina. Sealjuures loobu tekstidest või muudest väikestest elementidest, mis pole faviconi väikese eraldusvõime juures äratuntavad.

Guinnessi veebisait kasutab ülaltoodud näites logo veebisaidil hästi, kuid faviconina pole see ideaalne. Väike valge Guinnessi tekst on äratuntav ja faviconi puhul vähendab see üldmuljet. Kontrast on madal. Mulje oleks parem ilma teksti ja ainult logo harfikeskendatuna. Teised näited selles artiklis on kõik Guinnessist paremad lahendused pakkunud.

Kui otsid agentuuri, kes panustab responsiivsetele logodele, võta meiega julgelt ühendust. Meie 4eck Media spetsialiseerume kasutajakogemusele.

Kui sulle on oluline professionaalne positsioneerimine, võivad sind huvitada järgmised ikoonpakendid ja ettevõtte disaini mallid: