При разглеждане на отделните елементи на уебсайт, които също така допринасят положително за потребителския опит, логото е ключово за идентичността на марката и заслужава собствено внимание. В тази статия бих искал да споделя няколко съвета от агентурната ни практика, как да осигуриш висок потребителски опит за твоите потребители на уебсайта, когато става въпрос за логото на твоя уебсайт.

Логото на уебсайта замества бутона за начало

Логото често се намира в навигационната лента и ВИНАГИ трябва да бъде свързано с началната страница. Потребителите днес се очаква дори да кликнат върху логото и да бъдат върнати към началната страница. Логото по този начин замества и бутона за начало "Home", който все още може да се наблюдава по днешни време на уебсайтове, за да връща към началната страница. Навигацията за начало като отделен елемент е излишна. Това също позволява да бъде пестено стойностно пространство.

Град Варен (Мюритц) в Северна Германия, където нашата компания е базирана, е решил да предостави на потребителя подкрепа с икона на къща като възможност за връщане на началната страница. Предполагаемо е използвано поради две причини: от една страна, освен логото е поставено още едно лого, което може да намали склонността към кликване върху логото. От друга страна, може да се предположи, че потребителите на този уебсайт не са много запознати с интернет. Честно казано, тази икона на къща увеличава потребителския опит само до известна степен, тъй като този уебсайт има много забележими недостатъци по отношение на информационната архитектура, потребителския интерфейс и бариерната достъпност (особено контрастите за четене на връзки и текстове). Уебсайтът на град Варен (Мюритц) остава в този смисъл негативен пример.

Адаптивно лого: Приспособяване на логото според резолюцията на устройството

Докато в гледките за настолен компютър има много пространство и затова името на компанията или лозунгът могат да бъдат включени в логото, в мобилния изглед, поради причини свързани с пространството и вниманието, логото трябва да бъде поставено в по-редуциран вид.

Както и в случая с уебсайтовете, от години се наблюдава тенденция за адаптация към размера, средата и контекста. Тук се говори за Адаптивно лого, което означава, че логото се приспособява към условията и се представя перфектно и на по-малки устройства, като може да се наложи да бъде представено по различен начин в някои случаи. За разлика от статичните лога, които изглеждат еднакво на всички устройства и екрани, адаптивните лога се приспособяват към конкретните изисквания и предоставят консистентен и оптимизиран потребителски опит по различните устройства. При това логото се преформатира само във формата си, но не и в своето съобщение за марката.

Положителен пример представлява швейцарската компания Victorinox. Настройката по подразбиране представя голямата икона на потребителя. Единствен минус: логото е включено като файл PNG, вместо SVG.

При превъртане по-надолу се вижда само елементът с изображение. В заднината се вижда един планина, която подчертава швейцарското произход. Така че в първия преглед, марката е важна. Потребителят трябва да разбере "Ти си точно тук при Victorinox". Ако потребителят прегърне екрана, съдържанието започва да бъде важно. Логото се редуцира във визуализацията и дава повече място на главните съдържания. Навигацията е закачена най-отгоре, което е много разумно от гледна точка на употребимост.

Друг подход се използва от уебсайта на Guinness: Логото е съчетано с името на компанията. При преместване нагоре логото става по-малко, но навигацията продължава да бъде видима. Когато потребител започне да превърта нагоре, логото и навигацията отново стават по-големи, тъй като се предполага, че потребителят желае да посети други страници.

Commerzbank не го е решила оптимално със своя уебсайт. Логото е видимо с името на компанията и е включено като SVG, което е добре решение. Въпреки това то много конкурира със съседните точки за навигация. При скролиране навигацията изчезва напълно и потребителят трябва отново да прокарва нагоре, за да види навигацията. По-добро би било, ако навигацията се показва веднага с началото на скролирането, както е решено от zeit.de.

От гледна точка на оптимизацията за конверсии Commerzbank се справя много добре с голямото изображение и водещите две лица. Те гледат към бутона, което автоматично насочва погледа на посетителя към бутона. Такова насочване на вниманието към Call-to-Action е много ефективно. Добре направено, Commerzbank!

Интересно става, когато разгледаме примерите в мобилната версия.

В мобилната версия логото на Victorinox се показва още по-малко и е центрирано, за да се структурират по-добре възможностите за взаимодействие на потребителя. Guiness е позиционирал текста отдясно на логото вместо под него. Така арфата има повече място, а горната навигационна линия не става твърде голяма. Commerzbank просто скрива текста във смартфон резолюцията.

Ролята на респонзивните лога в потребителския опит е важна, тъй като помагат да се запази визуалната консистентност и марковата идентичност, независимо от това как потребителите достъпват уебсайта.

Ако логото не реагира адекватно на променящите се резолюции, то може да привлече твърде много внимание на потребителя. В следващия пример на Hypovereinsbank, много изразителното лого конкурира твърде много с поставения отдясно Call-to-Action – особено в изгледа за смартфон. Навигационните точки в среден сив цвят лесно се пропускат в изгледа за настолен компютър. Общо взето и този уебсайт има някои други грешки в потребителския опит.

За да осигурят респонзивни лога, дизайнерите трябва да предоставят няколко адаптации на логата. Логото също трябва да функционира добре на различни фонове и в различни размери. Логото ще бъде намалявано в детайлност по-силно с нарастване на резолюцията. Въпреки това то не трябва да загуби марковия си център. Това е високото изкуство в употребата на респонзивни лога. Така че ако възлагате редизайн на марката си, мислете предварително за това изискване при използването на следващото си лого.

Форматът на файла на логото на уебсайта

Използването на респонзивни лога има смисъл, защото в зависимост от резолюцията се зарежда правилния размер. При по-малки резолюции, като например на смартфона, се зарежда само по-малката графика. Това спестява време за зареждане. Най-голям ефект върху времето за зареждане ще постигнете обаче, когато:

1. вградите логото в правилната резолюция (с указания и за височина и ширина). Често логата се вграждат в твърде висока резолюция и след това се намаляват за прегледа.
2. вградите логото във формат SVG вместо PNG или JPG.

Използване на логото на уебсайта като фавикон

Използвайте също съкратения вариант на вашето лого, за да го използвате като фавикон. При това се откажете и от текстове или други малки елементи, които не са разпознаваеми в малката резолюция на фавиконите.

Докато уебсайтът на Guinness от горния пример използва логото респонзивно много добре за уебсайта, то като фавикон не е оптимално. Малкият бял текст на Guinness не е разпознаваем и намалява общото впечатление от фавиконите. Контрастът е нисък. Впечатлението би било по-добро без текста и само намалено до арфата на логото. Това са решението, които другите примери от тази статия са уредили по-добре от Guiness.

Ако търсите агенция, която слага фокус върху респонзивните лога, не се колебайте да се свържете с нас. Ние от 4eck Media сме професионалисти в потребителския опит.

Ако ви е важно професионалното позициониране, може би ще ви заинтересува следното иконни пакети и шаблони за корпоративен дизайн: