Atkreipiant dėmesį į atskirus svetainės elementus, kurie teigiamai prisideda prie vartotojų patirties, logo yra prekės ženkluotumas ir pelna atskirą dėmesį. Šiame straipsnyje noriu pasidalinti keletu patarimų iš mūsų agentūros praktikos, kaip užtikrinti didelę vartotojų patirtį su savo svetainės logotipu.

Svetainės logotipas pakeičia pradinio puslapio meniu punktą

Logotipas dažnai yra įdėtas į naršymo juostą ir VISADA turi būti susietas su pradžios puslapiu. Vartotojai šiandien taip pat tikisi, kad paspaudus ant logotipo būtų grąžinama į pradžios puslapį. Taigi, logotipas taip pat pakeičia meniu punktą "Namai", kuris kartais dar matomas svetainėse, kad būtų galima grįžti į pradžios puslapį. Namų nuoroda kaip atskiras meniu punktas naršyme yra nereikalinga. Taip taip pat išsaugomas vertingas vietas.

Varen (Miurico) miestas Šiaurės Vokietijoje, kur mūsų įmonė įsikūrusi, nusprendė padėti vartotojui su namo piktograma kaip sąveikos galimybe grįžti į pradžios puslapį. Čia tai greičiausiai buvo įgyvendinta dviem priežastimis: Pirma, be logotipo, taip pat buvo įdėtas kitas logotipas, kuris galėtų sumažinti paspaudimų ant logotipo norą. Antra, galbūt manoma, kad šios svetainės vartotojai yra mažiau patyrę internete. Atvirai sakant, ši namo piktograma tik šiek tiek pagerina vartotojų patirtį, nes šioje svetainėje yra daug pastebimų trūkumų informacijos architektūroje, vartotojo sąsajos ir prieinamumo (ypač kontrastai skaityti nuorodas ir tekstus). Taigi Varen (Miurico) miesto svetainė išlieka neigiamas pavyzdys.

Reaguojantis logotipas: Logotipo pritaikymas priklausomai nuo įrenginio raiškos

Stacionariuose peržiūros rėmuose yra daug vietos ir todėl bendrovės pavadinimas ar sloganas gali būti įtrauktas į logotipą, o mobiliajame peržiūros režime, tiksliai dėl vietos ir dėmesį atkreipiant į logotipą, jis turi būti įtrauktas sumažintoje formoje.

Logotipai, kaip ir svetainės, jau daugelį metų yra tendencija pritaikyti prie dydžio, priemonių ir aplinkos. Tai vadinama Reaguojančia logotipu, tai reiškia, kad logotipas atsižvelgia į aplinkos sąlygas ir puikiai pristato save net mažesniuose įrenginiuose, todėl jis gali būti perteiktas šiek tiek kitaip. Skirtingai nei standūs logotipai, kurie atrodo vienodi visuose įrenginiuose ir ekrano dydžiuose, reaguojantys logotipai prisitaiko prie konkrečių reikalavimų ir taip siūlo nuoseklų ir optimizuotą vartotojų patirtį per skirtingus įrenginius. Šiuo atveju logotipas mažėja tik savo formoje, bet ne savo prekės ženklo pranešime.

Pavyzdį teikia Šveicarijos įmonė Victorinox. Pirmos rodinys vartotojui rodo didelį piktogramą. Vienintelis neigiamas momentas: Logotipas įkeltas kaip PNG failas, o ne kaip SVG.

Slinkdami rodomas tik paveikslėlio elementas. Fone galima pamatyti kalną, kuris sustiprina Šveicarijos kilmę. Pirmame lauke yra svarbi prekės zenklo kūrimas. Vartotojas turėtų suprasti. Tu teisingai čia pasirinkai Victorinox. Vartotojas slinkdamas žemyn svarbus patys turinio elementai. Logotipas sumažėja pavaizdavime ir suteikia daugiau vietos pagrindiniams elementams. Naršymo juosta liko viršuje prikabinta, kas yra labai protinga iš naudojamumo perspektyvos.

Dar vieną požiūrį keliantį sekantys išlaiko Guinness svetainė: Logotipas yra su įmonės pavadinimu. Slidinėjant logotipas tampa šiek tiek mažesnis, neišnykstantį navigacijos. Kai vartotojas pradeda slinkti aukštyn, logotipas ir navigacija vėl tampa didesni, nes tikimasi, kad vartotojas norės aplankyti kitas puslapius.

Ne itin gerai išsprendė tai Commerzbank su savo svetaine. Logotipas yra parodytas su įmonės pavadinimu ir kaip SVG įterptas, kas yra gerai išspręsta. Tačiau jis yra stipriai konkuruojantis su šalia esančiais navigacijos taškais. Slidinėjant, navigacija visiškai dingsta ir vartotojui reikia vėl kilti viršutinėje pusėje, kad pamatytų navigaciją. Būtų geriau išspręsti, jei pradedant slinkti aukštyn iš karto pasirodytų navigacija, kaip tai darydavo, pvz., zeit.de.

Iš konversijų optimizavimo požiūrio Commerzbank labai gerai išspręsta didelė veidrodinėnuotrauka su abiejų asmenų žvilgsnių kryptimi. Jie žiūri į mygtuką, kas automatiškai nukreipia lankytojo žvilgsnį į mygtuką. Tokios žvilgsnio kryptys į Pagalbos veiksmą nukreipimas yra labai efektyvus. Gerai padaryta, Commerzbank!

Įdomu bus, kai pažiūrėsime pavyzdžius mobiliajame variante.

Mobiliojo varianto atveju Victorinox logotipas yra rodomas mažesnis ir centriniame lauke, siekiant pagerinti naudotojo sąveikos galimybes. Guiness tekstą po logotipu padėjo dešinėje vietoje, o ne žemiau. Taip arfa turi daugiau vietos, o viršutinė navigacijos juosta nėra per didelė. Komercinio banko atveju smartfonų raiškoje paprasčiausiai išnyksta tekstas.

Atsakomųjų logotipų vaidmuo naudotojo patirčioje yra svarbus, nes jie padeda išlaikyti vizualinę nuoseklumą ir prekės ženklo tapatybę, nepriklausomai nuo to, kaip naudotojai pasiekia tinklalapį.

Jei logotipas nesureaguoja į kintančias raiškas, jis gali per stipriai atkreipti naudotojo dėmesį. Pavyzdžiui, Hypovereinsbank atveju labai pastebimas logotipas kovoja su patraukliu šaukimu veikti dešinėje pusėje, ypač smartfonų rodymo variantu. Vidutiniu pilku atspalviu navigacijos taškai yra lengvai nepastebimi stalinės raiškos variantu. Šiame tinklalapyje apskritai yra ir keletas kitų UX klaidų.

Dizaineriai, siekdami užtikrinti atsakomus logotipus, turi pateikti keletą logo adaptacijų. Logotipas turi gerai veikti skirtingose fone ir dydžiuose. Logotipas mažinant raišką turėtų būti sumažintas detalumas, tačiau negali prarasti prekės ženklo branduolio. Tai yra aukšto lygio meno praktika, naudojant atsakomus logotipus. Todėl, jei planuoji atnaujinti prekės ženklą, jau įsivaizduok šiuos reikalavimus, pasitelkiant būsimą savo logotipą.

Svetainės logotipo failo formatas

Atsakomi logotipai yra svarbūs, nes atitinkamai įsikrauna tinkama dydis pagal raišką. Mažesnėse raiškose, pvz., šimtalypioje, įsikraunama tik mažesnė grafika. Tai padeda sutaupyti įkrovimo laiką. Didžiausią poveikį įkrovimo laikui pasieksi, jei:

1. Įkeli logotipą teisingu raiškos dydžiu (nurodydamas plotį ir aukštį). Dažniausiai logotipai įkeliama per dideliu raiškos dydžiu ir tada yra sumažinami rodymui.
2. Įkeli logotipą SVG vektoriniu formatu, o ne PNG arba JPG.

Svetainės logotipą panaudoti kaip faviconą

Panaudokite savo logo sumažintą formą kaip faviconą. Tuomet atsisakykite tekstų ar kitų mažų elementų, kurie favikono mažoje raiškoje nėra matomi.

Guiness tinklalapis iš pirmiau pateikto pavyzdžio puikiai naudoja responsyvų logotipą, tačiau favicono atveju yra suboptimizuotas. Mažas baltas Guiness tekstas nėra aiškus ir favikono ribose sumažina bendrą įspūdį. Kontrastas yra žemas. Be teksto ir tik sutelkę dėmesį į logo arfą, įspūdis būtų gerokai geresnis. Šį problemą geriau išsprendžia kiti straipsnio pavyzdžiai, nei Guiness.

Jeigu ieškote agentūros, kuri įsiklauso į atsakomus logotipus, susisiekite su mumis. 4eck Media komanda yra vartotojų patirties profesionalai.

Jei jums svarbu profesionali pozicionavimas, galbūt jums bus įdomūs šie Piktogramų rinkiniai ir Bendrojo dizaino šablonai: