Самая узнаваемая вещь на планете

Исследование «гамбургера» по системе отслеживания взгляда на десктопных сайтах

Я понимаю, вы читаете это и уже думаете: «Да, это как раз то, что мне нужно, ещё одно мнение о гамбургере». В Apple говорят: «лучше бы вам избегать их...», руководства по Google material design советуют: «конечно, используйте их, но лучше нарисуйте их так...», Якоб Нильмен говорит «вместо гамбургеров возьмите пиццу», и так далее, и далее, и далее... Но не торопитесь, эта статья про другое, я обещаю. Она отвечает на конкретный точный вопрос, который навёл бы вас на интересные размышления о дизайне вашего сайта. С помощью айтрекинговых программ и 25 участников исследования, мы провели тест, чтобы разобраться в следующем вопросе:

Изменяется ли поведение пользователей, когда они видят гамбургер на десктопном сайте, в противовес традиционному меню?

Будем честными, результаты нас удивили.

Гамбургер становился всё более и более распространённой иконкой в недавних версиях адаптивных веб-приложений Facebook, Snapchat и всех Google приложений. Зачастую под гамбургером скрываются «все остальные» опции меню, которые менее важны на маленьких экранах гаджетов.

Однако, мы заметили что гамбургер всё больше и больше проникает в десктопные сайты. Новый почтовый сервис Google Inbox, многообещающий поисковик DuckDuckGo и сервис хостингов и дизайнов сайтов Squarespace, все они у себя на страницах используют гамбургер. Google в руководстве по Material Design пошли ещё дальше. Они рекомендуют использовать свой постоянный конструктор меню для десктопных сайтов. Нельзя отрицать, что гамбургер в UI-дизайне стал весьма распознаваемым символом. И не имеет значения, являетесь ли вы его сторонником или постоянно спорите о том, как им пользоваться.

С тех пор как просмотры большинства сайтов на девайсах превзошли просмотры на десктопах, правила мобильного веба постепенно перетекают в десктопные. Но так ли это хорошо? Не мешает ли это понятности сайтов? Меняет ли это наше поведение? Если да, то положительно или отрицательно?

Я создал этот символ много лет назад в качестве «контейнера» контекстных вариантов меню. Оно примерно было бы похоже на контекстное меню, которое мы используем при нажатии на правую кнопку мыши.... Я задумывал его (символ), как «дорожный указатель». Простой, функционально запоминающийся и имитирующий вид меню, появляющегося при нажатии правой кнопки мыши.

Норм Кокс, создатель гамбургера

Что мы делали

Используя айтрекинговые программы, мы попросили 25 человек пройти несколько серий заданий. Тестовым сайтом был Google Inbox, но мы создали две его разные версии, которые выпадали испытуемым случайным образом. Первая версия Inbox была настоящая, а вторая была создана нами с горизонтальным меню с теми же опциями, что скрыты в гамбургере первой версии. Мы просили пользователей выполнить следующие задания:

Открыть сообщение
Написать новое сообщение
Пройти в настройки (чтобы поменять расположение элементов)
Найти и зайти в историю сообщений (которая не была в зоне видимости)

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

Что обнаружилось

Оригинал сайта.

Вторая версия.

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

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

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

А в случае со статичным меню взгляд шёл в более горизонтальном направлении:

Есть ли какой-то скрытый смысл в подобном управлении взглядом? Пока мы в этом не уверены. Но что стало определённо ясно, так это то, что обнаружилась конкретная разница в направлении просмотра контента страницы.

Что мы думаем

Интересный факт: участники исследования почти всегда признавались, что с гамбургером они чаще всего сталкиваются в мобильных приложениях. Следом мы спрашивали их, в чём может быть причина такой тенденции. Участники почти всегда отвечали, что наиболее вероятная причина кроется в размерах экранов девайсов. Зачем же тогда ставить гамбургер на десктопах, где вопрос экономии пространства не стоит так остро?

Ответ, по-видимому, зависит от назначения сайта.

Каково назначение вашего сайта? Он продаёт продукт или сервис? Или вы предоставляете аудитории контент или инструмент, который нужен для решения конкретных задач?

Когда вы пользуетесь продуктом, скорее всего вы можете, двигаясь по сайту, назвать его цель. Возьмём сайт банка, например, «5/3 Bank». Допустим, вам нужен определённый сервис типа проверки баланса, перевода средств или оплаты счетов, и всё должно работать максимально быстро и эффективно. Обычно эти опции делают доступными на самом видном месте дизайна специально. Тем самым, пользователи легко их находят.

Примеры таких сайтов: CNN, 500px, 5/3 Bank, Facebook

Вот вам ещё пример. Представьте, что ваш сайт похож на Squarespace, и он продаёт ваш продукт. Вы хотите, чтобы люди покупали его. И лучший способ для этого — показать им убедительную историю, в которой они сами себя узнают, и совершат покупку. Что может быть лучше, чем подтолкнуть пользователей к поиску и изучению нужного контента? Лиза Гевелбер в своей статье ThinkWithGoogle делает ставку на микромоменты: «Потребитель знает, чего хочет, когда он этого хочет. Значит, важнее всего создать хорошее первое впечатление, особенно на девайсах.» Так что у вас есть уйма способов выдвинуть ваш контент на передний план и немного скрыть его одновременно, поэтому пользователи будут находиться на странице достаточное количество времени, найдут нужную в данной ситуации информацию и купят продукт. Тогда вам стоит задуматься об использовании гамбургера, чтобы естественным образом подтолкнуть человека к поиску.

Примеры таких сайтов: Squarespace, MTV, Leo Burnett, IGN

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

Пока интернет продолжает развиваться, веб-разработки движутся со скоростью света. Мы уже прошли тот момент, когда нам было нужно постоянно думать о необходимости использования гамбургера. Нам стоит больше задумываться о том, зачем использовать определённые инструменты и макеты, и меньше о следовании трендам. Продолжим же дискуссию и посмотрим, куда она нас приведёт.