Ak sa pozriete na jednotlivé časti webstránky, ktoré prispievajú k pozitívnej užívateľskej skúsenosti, logo má značkový charakter a zaslúži si vlastnú pozornosť. V tomto článku chcem s vami zdieľať niekoľko tipov z nášho agentúrneho príbehu, ako zabezpečiť vysokú užívateľskú skúsenosť pre návštevníkov vašej stránky pri manipulácii s logom vašej webstránky.

Logo webstránky nahrádza položku v hlavnom menu

Logo je často umiestnené v navigačnej lište a MUSÍ byť vždy spojené so začiatočnou stránkou. Používatelia dnes očakávajú, že kliknutím na logo sa vrátia na domovskú stránku. Logo tým pádom znemožňuje prelinkovanie „Domov“, ktoré je niekedy stále viditeľné na webstránkach, aby vás priviedli na začiatočnú stránku. Prelinkovanie „Domov“ ako samostatný odkaz v navigácii je zbytočné. Tým sa zároveň šetrí cenný priestor.

Mesto Waren (Müritz) v Severnom Nemecku, kde je náš podnik založený, sa rozhodlo poskytnúť používateľovi pomocou ikony domu usmerňujúcu informáciu ako možnosť interakcie naspäť na domovskú stránku. Existujú pravdepodobne dva dôvody, prečo sa tu používa: Po prvé, okrem loga je tu umiestnené ďalšie logo, čo môže viesť k zníženiu ochoty kliknúť na logo. Po druhé, možno sa predpokladá, že používatelia tejto webstránky nie sú veľmi zbehlí na internete. Úprimne povedané, táto ikona domu len mierne zvyšuje užívateľskú skúsenosť, pretože na tejto webstránke existuje veľa výrazných nedostatkov pokiaľ ide o informačnú architektúru, užívateľské rozhranie a aj prístupnosť (predovšetkým kontrast pre čítanie odkazov a textov). Webstránka mesta Waren (Müritz) tak zostáva príkladom negatívneho príkladu.

Responzívne logo: Prispôsobenie loga podľa rozlíšenia zariadenia

Vo veľkých pohľadoch na plochu je dostatok miesta a preto názov spoločnosti alebo slogan môžu byť zahrnuté do loga, zatiaľ čo v mobilnom zobrazení by malo byť logo umiestnené v zmenšenej forme z dôvodu obmedzeného miesta a pozornosti.

Ako aj pri webstránkach, aj u log sa už niekoľko rokov presadzuje trend prispôsobovania veľkosti, média a prostredia. Hovorí sa o tom ako o Responsive Logo , čo znamená, že logo zohľadňuje podmienky svojho prostredia a perfektne sa predstavuje aj na menších médiách, kvôli čomu sa môže navrhnúť aj v niektorých aspektoch odlišne. Na rozdiel od pevných log, ktoré vyzerajú rovnako na všetkých zariadeniach a veľkostiach obrazoviek, responzívne logá sa prispôsobia daným požiadavkám a tak poskytujú konzistentnú a optimalizovanú užívateľskú skúsenosť cez rôzne zariadenia. Logo sa tým zmenšuje iba vo svojom tvare, ale nie v svojej značkovej správe.

Výborným príkladom je švajčiarska spoločnosť Victorinox. Pri prvom pohľade dostane používateľ zobrazené veľké logo. Jediná nevýhoda: Logo je vložené ako PNG súbor namiesto SVG.

Pri posúvaní sa zobrazí len obrázkový prvok. Na pozadí je vidieť horu, ktorá zdôrazňuje švajčiarske pôvody. V prvom pohľade je dôležité budovanie značky. Používateľ by mal pochopiť. Ste na správnom mieste u Victorinoxu. Ak používateľ posúva hore, obsah je dôležitý. Logo sa zmenšuje v zobrazení a poskytuje viac miesta hlavným obsahom. Navigácia zostáva navrchu a je to veľmi užitočné z hľadiska použiteľnosti.

Ďalší prístup sleduje webstránka Guinness: Logo je umiestnené spolu s názvom spoločnosti. Po posúvaní sa logo zmenší, pri zachovaní viditeľnej navigácie. Ak sa používateľ začne posúvať hore, logo a navigácia sa zväčší, pretože sa predpokladá, že používateľ chce navštýviť ďalšie stránky.

Commerzbank to nevyriešila optimálne so svojou webstránkou. Logo je viditeľné s názvom spoločnosti a je umiestnené ako SVG, čo je dobre spravené. Avšak veľmi súperia s vedľajšími navigačnými bodmi. Po posúvaní sa navigácia úplne vytratí a používateľ sa musí posunúť až hore, aby videl navigáciu. Bolo by lepšie, ak by sa navigácia zobrazila ihneď na začiatku posunu, ako to má napríklad stránka zeit.de.

Commerzbank má veľký obrázok s očami dvoch osôb a sledovaním pohľadu na tlačidlo, čo automaticky smeruje pohľad návštevníka na tlačidlo. Takéto usmernenia pohľadu na volanie k akcii sú veľmi účinné z hľadiska optimalizácie konverzie. Dobre spravené, Commerzbank!

Je zaujímavé, keď sa pozrieme na príklady vo verzii pre mobilné zariadenia.

V mobilnej verzii je logo od spoločnosti Victorinox zobrazené ešte menšie a stredovo, aby sa lepšie štruktúrovali interakčné možnosti pre používateľa. Guiness umiestnil text napravo od loga namiesto pod ním. Tak má harfa viac miesta a horný navigačný riadok nie je príliš veľký. Naopak Commerzbank jednoducho vymaže text vo formáte smartfónu.

Rola responzívnych log v užívateľskej skúsenosti je dôležitá, pretože pomáhajú udržať vizuálnu konzistenciu a identitu značky, nezávisle na tom, ako používatelia pristupujú na webovú stránku.

Ak logo nereaguje na meniace sa rozlíšenia, môže tiež príliš priťahovať pozornosť používateľa. V nasledujúcom príklade Hypovereinsbank sa veľmi prítomné logo príliš konkuruje s call-to-action umiestneným napravo, najmä v pohľade na smartfón. Navigačné body vo stredne sivej farbe sa ľahko prehliadajú v pohľade na pracovnej ploche. Celkovo aj táto stránka obsahuje niekoľko ďalších chýb UX.

Dizajnéri musia pre zabezpečenie responzívnych logov poskytnúť viacero adaptácií loga. Logo musí dobre fungovať aj na rôznych pozadích a aj v rôznych veľkostiach. Čím menšie je rozlíšenie, tým je logo redukované v jeho detailoch. Pri tom však nesmie stratiť jadro značky. To je vysoké umenie pri používaní responzívnych log. Ak teda zadáte revitalizáciu značky, uvedomte si už teraz túto požiadavku pri použití vášho nasledujúceho loga.

Formát loga webovej stránky

Použitie responzívnych logov dáva zmysel, pretože v závislosti na rozlíšení sa načíta správna veľkosť. Pri menších rozlíšeniach, ako napríklad na smartfóne, sa načíta len menší obrázok. To šetrí čas na načítanie. Najväčší efekt na váš čas načítania dosiahnete však vtedy, ak:

1. Logo vložíte vo správnom rozlíšení (aj s údajmi o výške a šírke). Často sú logá vložené s príliš vysokým rozlíšením a potom sú pre zobrazenie zmenšené.
2. Logo vložíte vo formáte SVG (vektorový formát) namiesto PNG alebo JPG.

Logo webovej stránky ako favicon

Využite aj zjednodušenú formu vášho loga na jeho využitie ako favicon. Pri tom upustite aj od textov alebo iných malých prvkov, ktoré by v malom rozlíšení faviconu neboli rozpoznateľné.

Zatiaľ čo webová stránka Guinness z predchádzajúceho príkladu logo veľmi dobre využíva responzívne, ako favicon nie je optimálna. Malý biely text Guinnessu nie je rozpoznateľný a redukuje dojem v rámci faviconu. Kontrast je nízky. Dojem by bol jasnejší bez textu a čisto redukovaný len na harfu loga. To majú ostatné príklady z tohto článku vyriešené lepšie ako Guinness.

Ak hľadáte agentúru, ktorá sa špecializuje na responzívne logá, neváhajte nás kontaktovať. My v spoločnosti 4eck Media sme profesionáli v oblasti užívateľské skúsenosti.

Ak vám profesionálne postavenie záleží, možno vás zaujímajú aj nasledujúce ikonové balíčky a podklady k firemnému dizajnu: