Kun tarkastelet yksittäisiä elementtejä verkkosivustolla, jotka vaikuttavat positiivisesti käyttäjäkokemukseen, logo on brändiä rakentava ja ansaitsee oman tarkastelun. Tässä artikkelissa haluan antaa sinulle joitain vinkkejä toimistollemme kertyneen kokemuksen perusteella siitä, miten voit varmistaa korkean käyttäjäkokemuksen verkkosivustosi käyttäjille koskien logoasi.

Verkkosivuston logo korvaa aloitussivun valikkokohdan

Logo sijoitetaan usein navigaatioon ja sen TULEE olla aina linkitetty aloitussivulle. Käyttäjät odottavat tänä päivänä, että klikkaus logoon vie takaisin aloitussivulle. Logo korvaa siten myös valikkolinkin "Koti", joka saattaa vielä tänä päivänä näkyä verkkosivustoilla ohjaamassa aloitussivulle. Koti-linkitys erillisenä valikkokohtana navigaatiossa on tarpeeton. Tämä säästää myös tilaa.

Pohjois-Saksassa sijaitseva Waren (Müritz), jossa yrityksemme sijaitsee, on päättänyt tarjota käyttäjälle talo-kuvakkeen avulla ohjeen interaktiomahdollisuutena palata takaisin aloitussivulle. Tämä ratkaisu on todennäköisesti tehty kahdesta syystä: ensinnäkin logoa lukuunottamatta on sijoitettu toinenkin logo, mikä voisi vähentää klikkausintoa logoon. Toiseksi saattaa olettaa, että tämän verkkosivuston käyttäjät ovat vähemmän tottuneita internetiin. Rehellisesti sanottuna tämä talo-kuvake vain vähän parantaa käyttäjäkokemusta, sillä tämän verkkosivuston tiedoissa, käyttöliittymässä ja saavutettavuudessa on paljon puutteita (erityisesti kontrastien osalta linkkien ja tekstien lukemisen suhteen). Waren (Müritz) kaupungin verkkosivusto pysyy siten negatiivisena esimerkkinä.

Responsive-logo: Logon sopeuttaminen laitteen resoluutioon

Tietokoneen näytöille on yleensä paljon tilaa, joten yrityksen nimi tai slogan voidaan sisällyttää logoon, mutta mobiilinäkymässä logon tulisi olla pienempi tilan ja huomion vuoksi.

Kuten verkkosivustoilla yleensäkin, niin myös logosuunnittelussa on jo vuosia hallinnut trendi mukauttaa logoa koon, median ja ympäristön mukaan. Tästä puhutaan myös mukautuvasta logosta, mikä tarkoittaa, että logo ottaa huomioon ympäristön ja esittäytyy täydellisesti myös pienemmillä laitteilla, mahdollisesti vaatien joitakin erilaisia lähestymistapoja. Toisin kuin jäykät logot, jotka näyttävät samalta kaikilla laitteilla ja näyttöjen kooilla, mukautuvat logot sopeutuvat erilaisiin vaatimuksiin tarjoten yhdenmukaisen ja optimoidun käyttäjäkokemuksen eri päätelaitteilla. Tässä tapauksessa logo pienenee vain muodoltaan, mutta ei brändiviestinnän osalta.

Hyvänä esimerkkinä toimii saksalainen yritys Victorinox. Käyttäjä näkee heti suuren kuvakkeen. Ainoa miinus: Logo on upotettu PNG-tiedostona eikä SVG-tiedostona.

Vierityksessä näytetään enää vain kuvaelementti. Taustalla on havaittavissa vuori, joka korostaa sveitsiläistä alkuperää. Ensimmäisessä katselupisteessä brändin rakentaminen on tärkeää. Käyttäjän tulisi ymmärtää: Olet täällä Victorinoxissa oikeassa paikassa. Käyttäjän vierittäessä alaspäin, sisällöt tulevat tärkeiksi. Logo pienenee esityksessä ja antaa enemmän tilaa pääsisällöille. Navigaatio pysyy ylhäällä kiinnitettynä, mikä on myös käytettävyyden kannalta järkevää.

Toinen lähestymistapa on Guinness-verkkosivuston seuraama: Logo on sijoitettu yritysnimen kanssa. Vierityksessä logo hieman pienenee, mutta navigaatio säilyy näkyvillä. Kun käyttäjä alkaa vierittää ylöspäin, logo ja navigaatio suurenevat uudelleen, koska oletetaan, että käyttäjä haluaa käydä muilla sivuilla.

Commerzbank ei ole ratkaissut tilannetta optimaalisesti verkkosivustollaan. Logo on sijoitettu yritysnimen kanssa ja SVG-muodossa, mikä on hyvä ratkaisu. Kuitenkin se kilpailee voimakkaasti vieressä olevien navigointipisteiden kanssa. Vierityksessä navigointi katoaa kokonaan ja käyttäjän on palattava ylös, jotta navigointi näkyy uudelleen. Parempi ratkaisu olisi, jos aloitetaan välittömästi vierittäminen, navigointi tulee näkyviin, kuten esimerkiksi aika.de-sivusto on ratkaissut.

Konversion optimoinnin näkökulmasta Commerzbankilla on erittäin onnistunut suuri kuva, jossa kahden henkilön katseet ohjaavat automaattisesti kävijän katseen painikkeeseen. Tällaiset katseohjausvaikutukset kohti toimintakehotetta ovat erittäin tehokkaita. Hienoa työtä, Commerzbank!

Se muuttuu mielenkiintoiseksi, kun katsomme esimerkkejä mobiiliversiossa.

Mobiiliversiossa Victorinoxin logo on esitetty vielä pienempänä ja sijoitettu keskelle, jotta käyttäjän vuorovaikutusmahdollisuudet olisivat paremmin järjestetty. Guiness on sijoittanut tekstin logon oikealle sen sijaan, että se olisi alapuolella. Näin harpulle jää enemmän tilaa, eikä ylin navigointirivi ole liian suuri. Commerzbank puolestaan yksinkertaisesti piilottaa tekstin älypuhelimenäytössä.

Responsive-logojen rooli käyttäjäkokemuksessa on tärkeä, koska ne auttavat ylläpitämään visuaalista yhtenäisyyttä ja brändin identiteettiä riippumatta siitä, miten käyttäjät käyttävät verkkosivustoa.

Jos logo ei reagoi muuttuviin resoluutioihin, se voi myös vetää liikaa käyttäjän huomiota. Esimerkiksi Hypovereinsbankin erittäin hallitseva logo kilpailee oikealla sijaitsevan Call-to-Actionin kanssa - erityisesti älypuhelinäkymässä. Keskiharmaat navigointipisteet jäävät helposti huomaamatta työpöytänäkymässä. Yleisesti ottaen myös tällä verkkosivustolla on joitain muita käyttökokemusvirheitä.

Designerin on siis varmistettava, että responsive-logot tarjoavat useita logon sopeutuksia. Logon on toimittava hyvin myös erilaisilla taustoilla ja eri kokoisina. Resoluution pienentyessä logo yksityiskohtineen vähenee. Siitä ei kuitenkaan saa luopua brändiydintä. Tämä on korkein taiteenlaji Responsive-logojen käytössä. Joten jos tilaat brändiuudistuksen, ota jo huomioon tämä vaatimus tulevaa logoasi käyttäessäsi.

Verkkosivuston logon tiedostomuoto

Responsive-logojen käyttö on järkevää, koska oikea koko ladataan resoluution mukaan. Pienemmissä resoluutioissa, kuten esimerkiksi älypuhelimessa, ladataan myös vain pienempi grafiikka. Tämä säästää latausaikaa. Kuitenkin suurimman vaikutuksen latausaikaasi saat, kun:

1. upotat logon oikeassa resoluutiossa (myös korkeus ja leveys). Usein logot upotetaan liian korkealla resoluutiolla ja niitä sitten pienennetään näkymää varten.
2. upotat logon vektorimuodossa SVG JPG:n tai PNG:n sijasta.

Logon käyttö faviconina verkkosivustolla

Käytä logoasi myös faviconina sen pienennetyssä muodossa. Vältä tekstiä tai muita pieniä elementtejä, jotka eivät ole tunnistettavissa faviconin pienessä resoluutiossa.

Vaikka Guinness-verkkosivusto yllä olevasta esimerkistä käyttää logoa erittäin hyvin responsiivisesti sivustolla, se ei ole ihanteellinen faviconina. Pieni valkoinen Guinness-teksti ei ole tunnistettavissa ja pienentää faviconin kokonaisvaikutelmaa. Kontrasti on matala. Vaikutelma olisi ilman tekstiä ja pelkästään logoa harpilla selvästi parempi. Muut esimerkit tässä artikkelissa ovat ratkaisseet asian paremmin kuin Guinness.

Mikäli etsit virastoa, joka keskittyy responsiivisiin logoihin, ota rohkeasti yhteyttä. Me 4eck Media - yrityksessä olemme User Experience -ammattilaisia.

Mikäli sinulle on tärkeää ammattimainen asemoituminen, saatat olla kiinnostunut myös seuraavista ikonipaketeista ja Corporate Design -malleista: