Якщо ви розглядаєте окремі елементи веб-сайту, які також позитивно впливають на користувацький досвід, лого веб-сайту має важливе брендове значення та заслуговує окремого розгляду. У цій статті я хочу поділитися з вами деякими порадами з практики нашого агентства, як забезпечити високий користувацький досвід для користувачів вашого веб-сайту під час взаємодії з лого.

Лого веб-сайту замінює пункт меню стартової сторінки

Лого часто розташоване в рядку навігації і завжди повинно бути посиланням на стартову сторінку. Сьогодні користувачі також очікують, що клік на лого поверне їх на стартову сторінку. Таким чином, лого також заміщує посилання меню "Головна", яке іноді все ще присутнє на веб-сайтах для посилання на головну сторінку. Посилання "Головна" як окремий пункт у навігації є непотрібним і таким чином зберігається цінне місце.

Місто Варен (Мюріц) в Північній Німеччині, де розташована наша компанія, вирішило надати користувачу напрямок з допомогою піктограми будинку як можливість повернутися на стартову сторінку. Тут це, швидше за все, було використано з двох причин: з одного боку, окрім лого, також було розміщено ще одне лого, що може зменшити бажання кліку на лого. З іншого боку, можливо, вважають, що користувачі цього веб-сайту менше знайомі з Інтернетом. Щиро кажучи, ця піктограма будинку незначно підвищує користувацький досвід, оскільки на цьому веб-сайті є багато помітних недоліків з точки зору інформаційної архітектури, інтерфейсу користувача, а також доступності (особливо контрасти для читання посилань та текстів). Веб-сайт міста Варен (Мюріц) лишається негативним прикладом.

Адаптивне лого: пристосування лого після роздільної здатності пристрою

У Desktop-переглядах доступно багато місця, тому назва компанії або промоція в лозунзі можуть бути враховані в лого, в мобільному вигляді, з огляду на простір та увагу, лого повинно бути розміщене у зменшеній формі.

Як і в веб-сайтах, в останні роки також прогресує тенденція адаптації логотипу до розміру, середовища та налаштувань. Ця тенденція звичайно відома як Responsive Logo, що означає, що логотип враховує середовище та відображається ідеально навіть на менших пристроях, що може вимагати його відображення з певними відмінностями. У відміну від жорсткості логотипів, які виглядають однаково на всіх пристроях і розмірах екранів, адаптивні логотипи пристосовуються до вимог і надають послідовний та оптимізований користувацький досвід на різних пристроях. При цьому лого зменшується лише у формі, але не в своєму брендовому повідомленні.

Позитивним прикладом є швейцарська компанія Victorinox. При перегляді на першому рівні користувач бачить велику піктограму. Єдиний недолік: лого вбудовано як файл PNG, а не SVG.

При прокручуванні відображується лише елемент зображення. На задньому плані видно гору, яка підтверджує швейцарське походження. У першому відображенні важлива брендова ідентифікація. Користувач повинен зрозуміти. Ти тут в компанії Victorinox в точності. Якщо користувач прокручує сторінку донизу, важливішими стають вміст, лого зменшується у відображенні і надає більше місця основному вмісту. Навігація залишається прикріпленою зверху, що також має сенс з точки зору користування.

Іншим підходом керується веб-сайт Guinness: лого розміщене з назвою компанії. Під час прокручування лого трохи зменшується, а навігація залишається видимою. Якщо користувач починає прогортати сторінку вгору, лого та навігація стають більшими, оскільки очікується, що користувач бажає перейти на інші сторінки.

Не дуже вдало вирішила це Комерцбанк з їхнім веб-сайтом. Лого з назвою компанії видно і розміщено як SVG, що досить добре. Але воно досить сильно конкурує з прилеглими навігаційними пунктами. Під час прокручування навігація повністю зникає, і користувач повинен знову прокрутити сторінку вгору, щоб побачити навігацію. Краще було б, якщо навігація б виявилася під час початку прокручування, як це зроблено, наприклад, на сайті zeit.de.

Дуже добре з точки зору оптимізації конверсії вирішено в Комерцбанку велике зображення з орієнтацією перегляду обох осіб. Вони дивляться в напрямку кнопки, що автоматично також привертає погляд відвідувача на кнопку. Такі орієнтації на виклик до дії мають дуже ефективний вплив. Гарно зроблено, Комерцбанк!

Цікавим стає, коли ми розглядаємо приклади у мобільній версії.

У мобільній версії логотип Victorinox відображається ще менше, і при цьому, в центрі, для кращої структуризації можливостей взаємодії для користувача. Guiness розмістив текст праворуч від логотипу замість розміщення знизу. Таким чином, арфа має більше місця, і верхній рядок навігації не стає занадто великим. Наприклад, Commerzbank просто приховує текст у роздільній здатності смартфону.

Роль адаптивних логотипів в користувацькому досвіді є важливою, оскільки вони допомагають зберігати візуальну послідовність та корпоративний ідентифікатор, незалежно від того, як користувачі звертаються до веб-сайту.

Якщо логотип не реагує адекватно на змінні роздільні здатності, він також може надмірно привертати увагу користувача. У випадку Hypovereinsbank, як показано в цьому прикладі, дуже присутній логотип конкурує з праворуч розташованим викликаної дії - особливо в перегляді на смартфоні. Точкова навігація в середньому сірому легко пропускається у режимі робочого столу. В цілому, цей веб-сайт містить також деякі інші недоліки UX.

Дизайнери повинні забезпечити декілька адаптацій логотипу для забезпечення адаптивності логотипів. Логотип також повинен добре працювати на різних фонах та в різних розмірах. Логотип зменшується у своїй деталізованості при зменшенні роздільної здатності. Проте він не повинен втрачати основу бренду. Це висока мистецтво використання адаптивних логотипів. Тому, якщо ви замовляєте реорганізацію бренду, подумайте про ці вимоги вже при використанні вашого майбутнього логотипу.

Формат файлу логотипу веб-сайту

Використання адаптивних логотипів логічне, оскільки у залежності від роздільної здатності завантажується правильний розмір. Для менших роздільностей, таких як на смартфонах, завантажується лише менший графічний зображення. Це зберігає час завантаження. Однак найбільший ефект на час завантаження буде досягнутий, якщо ви:

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

Використання веб-логотипу як фавікону

Використовуйте зменшену версію свого логотипу для використання його як фавікону. При цьому уникайте текстів або інших малих елементів, які не помітні у малому розмірі фавікона.

Хоча веб-сайт Guinness вищезгаданого прикладу добре використовує адаптивний логотип для веб-сайту, він не є оптимальним для фавікона. Малий білий текст Guinness не видно та знижує загальне враження у рамках фавікона. Контраст низький. Враження було б чіткіше без тексту та лише зменшеною версією арфи логотипу. Це рішення було вирішено краще, ніж в усіх інших прикладах цієї статті, які згадувались раніше, за винятком Guinness.

Якщо ви шукаєте агенцію, яка акцентує увагу на адаптивних логотипах, будь ласка, зв'яжіться з нами. Ми, 4eck Media, є професіоналами у галузі користувацького досвіду.

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