Главное Свежее Вакансии Образование
Выбор редакции:
8 185 2 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Последние тренды расположения логотипа: по центру vs. слева

Решили разобраться в последних трендах расположения логотипа на сайте. Перевели исследования ведущего эксперта цифровой стратегии группы Nielsen Norman Group Kathryn Whitenton (@kwhitenton). Также расскажем, где и почему размещен лого на нашем сайте MayBeCat :)

Конечно, нельзя утверждать, что юзабилити зависит только от местоположения лого, это не единственная причина на пути к высокой конверсии. Существуют и другие важные факторы, о которых нельзя забывать. Однако, положение логотипа на странице - один из главных критериев, не учитывать который просто неразумно. Чтобы не быть голословными, приводим перевод исследований ведущего эксперта цифровой стратегии группы Nielsen Norman Group Kathryn Whitenton (@kwhitenton). На счету Кэтрин множество юзабилити-исследований, в т.ч. технологии слежения за глазами пользователей в США, Европе, Азии и Австралии. Также расскажем, почему создатели сайта MayBeCat отошли от всех канонов и разместили логотип по центру страницы. Давайте посмотрим, как положение логотипа влияет на юзабилити сайта.

Давайте начнем с критически важных принципов качественного юзабилити:

  1. Сообщает о текущей локации: размещение логотипа в шапке сайта позволяет пользователю быстро определить, на каком сайте он находится. Сообщать пользователю о его точной локации обязательно для сайтов, где всего одним кликом он может перейти на сайт другой компании.
  1. Легкая навигация: логотип сайта является кликабельным элементом, который возвращает пользователя на Главную страницу. Если выполняется это условие, пользователь может вернуться на Главную страницу, чтобы “начать все сначала”, где бы он ни находился. Возвращаться к Главной странице удобно на сложных сайтах, разделенных на множество подразделов, где пользователь может “потеряться”. Если пользователь выполняет на сайте несколько разных задач, новую активность также удобно начать, вернувшись сначала на Главную страницу (даже при наличии постоянной глобальной навигации для переключения между задачами пользователям удобней сначала вернуться на Главную страницу).
  1. Укрепляет позиции бренда: чем чаще пользователь встречает логотип бренда, тем быстрее он его запоминает (это один из законов человеческой памяти). Высокая узнаваемость бренда означает, что ваш продукт или услугу покупает большое количество людей. И при прочих равных условиях потенциальный покупатель скорее выберет продукт знакомой компании, чем товар не знакомого ему бренда.

Расположение логотипа в левой верхней части экрана настолько знакомо посетителям сайтов, что отклонение от этой модели может нанести сильный вред юзабилити сайта.

Влияние расположения логотипа в центре страницы на юзабилити сайта

Чтобы определить, влияет ли расположение логотипа на пользовательское поведение, было проведено исследование:

Участники: 14 fashion-сайтов, 8 из них содержат логотип в центральной верхней части страницы, 6 - в левом верхнем углу экрана. По клику каждый логотип ведет на Главную страницу сайта.

Количество человек: 50; каждый работал с одним сайтом и выполнял две задачи.

Основной вопрос исследования: сможет ли пользователь в один клик добраться до Главной страницы?

Задачи:

  • Выбрать продукт на сумму до 100$ и добавить его в корзину (старт с Главной страницы);
  • Вернуться на Главную страницу (старт со страницы завершения первой задачи).

Инструмент: каждое действие участников анализировалось с помощью инструмента usability-тестирования для веб-сайтов UserZoom.

Для подсчета результатов использовали данные только второго этапа.

Результат: На сайтах с “левым” расположением логотипа пользователь в 6 раз чаще достигал Главной страницы в один клик (при значении хи-квадрата p<0.05).

Ниже на графике представлен процент участников, которые не смогли добраться до Главной страницы в 1 клик. Пользователи в 6 раз чаще ошибались, когда логотип располагался по центру.

f_WWF_V-UNNmpblsQAPcfuqTBwWmd-5aQyxcOumA

Процент проваливших задание “Добраться до Главной страницы в 1 клик”

Как было сказано выше, возможность вернуться на Главную страницу критически важна для пользователей. Даже если на каждой странице сайта представлено развернутое меню навигации, большинство пользователей возвращаются прежде на Главную страницу.

Анализ поведения посетителей сайта показывает, что расположение логотипа в центре - большая проблема для многих пользователей. Например, на сайте Koshka многие пользователя кликали на иконку Under $29, расположенную в левом углу, чаще, чем на логотип в центре.

RmqFm5AE-2ywNFJ4hcNJGAHM3QnjYH-rp_XEtJlj

Зеленым подсвечены части страницы, на которые кликали пользователи, чтобы попасть на Главную страницу.

Данные исследований показали, что возвращаться на Главную страницу удобнее с кликабельным логотипом бренда в верхнем левом углу. Но стоит заметить, что и при таком расположении случались ошибки - когда пользователи не понимали, что логотип кликабелен, особенно при плоском дизайне (минималистичный подход к дизайну логотипа, подчеркивает удобство использования и в большей степени ориентирован на конечного пользователя). Выходом в данном случае будет создание кликабельного логотипа вместе с действительной ссылкой (Home link).

Логотип в центре и запоминаемость бренда

Ниже представлено исследование влияния расположения логотипа в центре на запоминаемость бренда.

Участники: сайты 4-х бутик-отелей (The Library, Refinery, The James, The Nolitan); для каждого сайта анализировали 2 способа расположения логотипа (слева и по центру).

Количество человек: 128; каждому предлагали 2 задачи.

Основной вопрос: влияет ли расположение логотипа (слева или по центру) на запоминаемость бренда?

Задачи:

  • Поделиться мнением: каждому участнику в рандомном порядке показывали 5 разных сайтов (4 участвующих в эксперименте и 1 сайт с логотипом в правом верхнем углу). Каждый сайт был показан с разным расположением логотипа (слева и по центру);
  • Пройти тест на узнаваемость бренда: участникам предлагали распознать бренды отелей из первого задания среди 10 разных сайтов.

Результат: расположение логотипа не влияет на узнаваемость бренда. Процент узнавания брендов четырех разных отелей при разном расположении логотипа примерно одинаковый.

o6JEujtGB-H5aQr9e_2rg-SoTG8ZNbz-yPDDDqi9

Это означает, что на узнаваемость бренда влияют такие факторы, как цвет, стиль написания и видимость символа логотипа, а не его расположение. В случае с сайтом отеля The Nolitan фоновое изображение сайта симметрично. И визуально, центр - самое удачное место для расположения логотипа.

_92d8Zu5LhmtOnCIg9Guiob0FyCYN4oFwBRHYGwi

В качестве еще одного удачного примера расположения логотипа по центру приводим сайт http://maybecat.ru. Почему логотип занял центральное положение рассказывает генеральный директор MayBeCat Галина Светлова:

“На нашем сайте выбрали такое расположение, потому что это красиво. Мы отошли от всех канонов и разместили логотип по центру страницы. Основными задачами сайта являются присутствие в интернете и информирование о наших услугах. Основная часть заказов нашей компании поступает через другие каналы продаж, мы просто хотели чтобы сайт нам нравился. Конечно, наиболее выгодное расположение логотипа - слева. Особенно для носителей языков, чья письменность устроена слева направо: что бы там ни было нарисовано, пользователь поймет, что это логотип бренда, все остальное уже дизайнерские фишки. Но иногда дизайн сайта такой, что расположение по центру или даже в правом углу действительно оправдано

b_57c820e702991.jpg

b_57c81ead439d5.jpg

Заключение:

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

По мотивам материала https://www.nngroup.com/articles/centered-logos/

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Churchill and Schwartz
Подбираем недвижимость для инвестиций с ROI в 300%.
Фатеев Сергей
Сапожник без сапог?

С телефона отображается именно так :(

Странно для компании предлагающей разработки сайтов и прочего с ценами на некоторые услуги от 500.000 рублей.
Ответить
Witget
Witget - это сервис для повышения конверсии и продаж сайта.
Svetlana Smaglii
Сергей, вы правы, сапожник без сапог :) наверное, как и многие вэб-студии тут. Обещаем исправиться в самое ближайшее время. Просто все силы разработчиков уходят на проекты заказчиков, еще и я отвлекают их внутренними нашими проектами :( Стоимость на системы упр. бизнес-процессами вполне оправданна.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.