Центровані логотипи заважають навігації вашого сайту
Традиція розміщувати логотип компанії у верхньому лівому кутку сторінки (для країн, що використовують мови, слова в яких читаються зліва направо) в дизайні задовольняє кілька важливих потреб хорошого досвіду користувача:
- Відображає поточне розташування. Відображення логотипу компанії на кожній сторінці дозволяє відвідувачеві швидко зрозуміти, який ресурс він переглядає зараз.
- Посилює бренд. Що частіше користувачі бачать логотип, то більше шансів, що вони запам'ятають бренд. Більш широке визнання бренду означає, що люди воліють користуватися вашими послугами та купувати вашу продукцію.
- Полегшує перехід на головну сторінку. Логотипи завжди мають бути клікабельними та посилатися безпосередньо на головну сторінку. Особливо це корисно на великих інформаційних сайтах, де користувачі можуть дезорієнтуватися. Однак також часто зустрічається на лендингах, що містять кілька різних розділів (можливості, тарифи тощо). Навіть за наявності глобального меню навігації для перемикання завдань, користувачі часто вибирають перехід на головну.
Розміщення логотипів у лівому кутку хедера настільки звичне, що при відході від цієї моделі є ризик значно погіршити досвід користувача. Наприклад, вирівнювання логотипу з правого краю може знизити запам'ятовування бренду.
Центровані логотипи та чуйний дизайн
У наші дні центровані логотипи все частіше зустрічаються в дизайні, можливо, через збільшення переходів на чуйний дизайн і принцип «спочатку мобільні» (mobile first). У мобільному дизайні часто використовують верхній лівий кут для відображення кнопки меню і переміщують логотип в центр екрану. (На маленьких екранах відстань між верхнім лівим кутом і позицією вгорі поцентру, як правило, незначне).
Але коли цей шаблон дизайну використовується на десктопах або планшетах, відстань стає значною, як на сайті готелю The Library нижче.
Вплив центрованих логотипів на успіх навігації
Розміщення логотипу по центру сторінки як на мобільних пристроях, так і на десктопах може бути зручним для дизайнерів, але як це впливає на досвід користувача?
Щоб зрозуміти, як положення логотипу впливає на його юзабіліті як навігаційний елемент, Nielsen Norman Group порівняли 14 різних сайтів, що спеціалізуються на роздрібній торгівлі модним одягом: 8 з центрованим логотипом і 6 з логотипом, розташованим у лівому верхньому кутку. Логотипи всіх сайтів були клікабельні та надсилали на домашню сторінку — на жодному з ресурсів не було текстового посилання на головну.
У цьому дослідженні взяли участь 50 осіб; кожен із них виконував такі завдання:
- Вибрати подарунок для друга вартістю менше $100 та додати його до кошика. (Це завдання розпочиналося з відвідування головної сторінки).
- Перейти на домашню сторінку сайту. (Це завдання починалося зі сторінки, де користувач виконав перше завдання).
Перше завдання було необхідне, щоб підготувати ґрунт для другого, а в іншому не становило інтересу для дослідження.
Результати дослідження
Результати NNG показали, що на сайтах з логотипом, розташованому у лівому верхньому кутку, користувачі значно частіше переміщалися на головнусторінку в один клік, ніж на сайтах із центрованим логотипом (в середньому, ймовірність такого переходу була в 6 разів вищою).
Діаграма, представлена нижче, відображає відсоткове співвідношення користувачів, які НЕ змогли перейти на головну сторінку в один клік для сайтів із традиційним логотипом (ліворуч) та для сайтів із центрованим логотипом (праворуч):
Перехід на головну сторінку — найчастіше завдання, яке має вирішальне значення для користувачів, особливо для тих, хто загубився на сайті.
На більшості сайтів із центрованими логотипами принаймні кілька людей намагалися перейти на головну. Аналіз поведінки цих користувачів вказує на те, що саме розташування логотипу перешкоджало дії більшою мірою. Наприклад, на сайті Koshka, скріншот сторінки якого представлений нижче, багато користувачів клацнули по крайньому лівому навігаційному засланні замість логотипу.
Зелений колір на цій карті кліків показує, куди натискали користувачі, коли намагалися перейти на головну сторінку. Логотип Koshka розміщений по центру, але багато людей за звичкою натиснули на крайнє ліве посилання «Менш $29», щоб перейти на головне.
У деяких випадках користувачі таки змогли потрапити на головну сторінку, але тільки шляхом спроб і помилок. Порівняння кроків, зроблених користувачами на сайтах з логотипом з лівого боку та сайтах з центрованим логотипом, показує, наскільки болючим може бути цей процес.
На сайті StellaDot (логотип розміщено зліва) користувачі легко та просто переходили на домашню сторінку, як показано на малюнку нижче. Усі п'ять користувачів у цьому прикладі розпочинали з різних сторінок, але всі вони використовували інтерактивний логотип, щоб перейти на головну в один клік.
На StellaDot.com логотип розташований у верхньому лівому кутку, і всі користувачі успішно перейшли на головну сторінку просто клікнувши по логотипу.
У той же час на сайтах із центрованим логотипом у деяких користувачів перехід на головну сторінку зайняв набагато більше часу. Наприклад, на сайті Madewell деякі користувачі відразу клікнули на розташований по центру логотип, але одна людина натиснула ще чотири посилання, перш ніж перейшла на головну:
Madewell.com має центрований логотип. Більшість користувачів клацнули на логотип і перейшли на головну. Але одному користувачеві довелося зробити чотири додаткові кліки, перш ніж нарешті знайти домашню сторінку.
На підставі цих спостережень стало ясно, що вирівняні лівим краєм логотипи краще, ніж центровані для зручності навігації користувачів при переході на головну сторінку. Зверніть увагу, що сайти з логотипами, розташованими зліва, все ще стикаються з помилками користувачів при переході на стартову сторінку, але набагато рідше, ніж сайти з центрованими логотипами. Це тому, що деякі люди не розуміють, що логотипи інтерактивні, особливо коли вони виконані в естетиці плоского дизайну.
Розміщення логотипу ліворуч - гарне рішення, але ще краще було б запропонувати два в одному - розміщений ліворуч клікабельний логотип і фактичне посилання на головну сторінку.
Центровані логотипи та впізнаваність бренду
В іншому дослідженні Nielsen Norman Group також виміряли, якрозміщення логотипу по центру (порівняно з лівим верхнім кутом) впливає на ймовірність того, що користувачі запам'ятають назву бренду.
Вони розглянули 4 сайти бутік-готелів, і для кожного порівняли дві версії - з логотипом по лівому краю та з центрованим логотипом.
128 учасників дослідження виконували два типи завдань:
Результати дослідження
В рамках дослідження не було виявлено, що логотипи впливають на впізнаваність бренду (цей ефект не був статистично значущим). Деякі сайти краще запам'ятовувалися завдяки логотипу, вирівняному по лівому краю, інші завдяки центрованому.
На діаграмі представлено відсоткове співвідношення впізнаваності брендів, на сайтах з логотипами по лівому краю (лівий стовпець) та з центрованими (правий стовпець):
Порівняння впізнаваності сайтів чотирьох різних готелів не показало значного зниження запам'ятовування бренду для сайтів із центрованими логотипами.
Виявляється, що інші фактори (такі як контрастність, розмір та читання назви) впливають на впізнаваність бренду більше, ніж його розташування на сторінці. Наприклад, обидві версії сайту готелю Nolitan мали фонове зображення за логотипом, яке, можливо, привернуло більше уваги, ніж позиція логотипу: основне зображення симетричне щодо центральної осі та створює візуальний шлях, що веде до позиції логотипу по центру (як це було задумано в оригінальній версії сайту).
Реальний сайт готелю Nolitan (праворуч), який має центрований логотип з альтернативною версією, де логотип розташували у верхньому лівому кутку (ліворуч).
На сайтах трьох інших готелів, які були вивчені, розташування логотипу зліва, як правило, збільшувало впізнаваність бренду, але різницябула статистично значимої.
Порівнявши результати двох досліджень, Nielsen Norman Group виявили, що центровані логотипи погіршують юзабіліті сайтів, але не так сильно, як логотипи, розташовані праворуч. Іншими словами, логотипи краще розташовувати ліворуч. Можливо, причина в тому, що розташовані по лівому краю логотипи вважаються нормою і звичні для користувачів, а чим сильніше відхилення від норми - тим гірше для досвіду користувача (і конверсії).
Брендинг та юзабіліті — дві найважливіші функції сайтів, тому варто уникати всього, що може негативно вплинути на них. Розташуйте ваш логотип там, де ви будете впевнені, що користувачі знайдуть його, і ваш лендинг отримуватиме максимальну віддачу від цього елемента дизайну.