Вы знаете старую поговорку « краткость — душа ума »?
Кажется, что высказывание развивается, и краткость — также душа сети. Как UX-дизайнер, я всегда ищу способы упростить вещи и использовать сокращенные индикаторы, когда это имеет смысл.
Когда мобильный просмотр заставил нас задуматься над тем, как мы можем упростить взаимодействие с пользователем в рамках ограничений минимальных размеров экрана, значок «гамбургер» был протестирован. Независимо от того, считаете ли вы, что другая иконка, фигура или даже текст могли бы работать лучше, эти три маленькие горизонтальные линии, похоже, выиграли гонку вооружений на иконках меню.
Изначально икона гамбургера родилась по чистой необходимости. Фиксированная панель навигации в стиле рабочего стола не имела особого смысла на экране телефона. Итак, мы начали использовать скрытые меню и индикаторы вместе, чтобы скрытые стали видны. Все больше мобильных сайтов попали на борт со значком, еще до того, как он стал широко признанным универсальным символом «меню».
Сейчас практически все просматривают на мобильных устройствах. Практически все мобильные сайты используют значок гамбургера. Вуаля! Почти всемирное признание. Теперь мы попадаем в интересную загадку: если все повсеместно признают значение гамбургера, можем ли мы сделать джейлбрейк с мобильного телефона и установить его на наши рабочие столы? Или, что более важно , пользователи примут это?
Давайте рассмотрим аргументы за и против гамбургера на рабочем столе и в конечном итоге посмотрим, где он, скорее всего, будет работать лучше, а где вообще его избегать.
Хорошо
«Чистый фактор»
Для дизайнеров / разработчиков основным преимуществом использования значка гамбургера в настольном приложении является «чистый фактор». Минималистский дизайн продолжает набирать популярность, поэтому, конечно, побуждением было бы убрать все, кроме самых основных элементов.
Навигация традиционно является рабочей лошадкой веб-сайта, и в большинстве случаев она не добавляет визуального таланта. Если бы мы могли поменять что-то громоздкое и навязчивое на что-то минимальное, но все же узнаваемое, общий эффект, несомненно, был бы намного проще.
Но давайте будем осторожны, чтобы не спутать визуальную простоту с функциональной простотой. Подробнее об этом позже.
Пусть ваш СТА будет героем
Одна из самых больших задач, с которой сталкиваются профессионалы UX, — это создание иерархии, которая имеет смысл. Мы должны уделять больше внимания некоторым элементам, чтобы они выделялись. Но когда мы что-то увеличиваем, к сожалению, другие элементы должны быть сведены к минимуму.
Сокрытие элементов навигации за значком гамбургера — отличный способ привлечь больше внимания к тому, что вы хотите, чтобы конечный пользователь предпринял. Например, на простом сайте портфолио конечное действие, которое вы хотите от своих пользователей, — это нанять вас. Таким образом, если ваша целевая страница имеет достаточно информации, чтобы они могли ее продолжить, нереально ожидать, что они нажмут на ваш CTA непосредственно с этой страницы. Цель состоит в том, чтобы выделить вашу главную кнопку CTA, так как другие пункты меню, вероятно, второстепенные.
Используя гамбургер и скрытое меню, вы успешно расставили приоритеты в своей главной цели, уменьшив при этом отвлечение внимания от других вариантов.
Сила популярности
Конечно, одним из элементов, который делает иконку гамбургера пригодной для использования, является ее явная узнаваемость. Дело в том, что пользователи взаимодействуют с ним примерно с 2010 года, когда он начал распространяться в мобильных приложениях. A / B-тесты показывают устойчивое улучшение вовлеченности каждый год, что, скорее всего, можно объяснить увеличением воздействия.
Хотя гамбургер широко узнаваем, он еще не достиг полного насыщения, что приводит нас к …
Не очень хороший
Не общепризнано пользователями
Гамбургер хорошо известен, но у него все еще есть несколько слепых зон, что делает его более рискованным выбором, чем простое навигационное меню. Как ни странно, считается, что пользователи, которые меньше всего просматривают на мобильном телефоне, также менее всего знакомы со значком меню, каким мы его знаем. Вообще говоря, это особенно актуально для старых демо, особенно для людей старше 65 лет.
Еще один клик, еще один барьер
Возможно, самым большим недостатком использования значка гамбургера вместо более стандартного меню является дополнительное действие, которое пользователь должен предпринять, чтобы добраться туда, куда он хочет. Один из руководящих принципов хорошего UX гласит, что мы устраняем как можно больше барьеров между пользователями и контентом. Помните, когда я раньше поднимал функциональную простоту ? Это оно.
Когда мы заставляем кого-то щелкнуть значок, чтобы перейти к навигационным возможностям, содержащимся в нем, мы заставляем его пройти дополнительный шаг. Это может показаться не таким уж большим, но если кто-то собирается проводить много времени на вашем сайте, он, вероятно, не захочет делать этот дополнительный шаг снова и снова. Если вы собираетесь заставить своих пользователей сделать дополнительный шаг, это должно быть сделано по уважительной причине и только при правильных обстоятельствах.
С глаз долой, из сердца вон
Что если ваша скрытая навигация содержит что-то восхитительное и неожиданное? Что если из-за того, что он спрятан, его никто не увидит? Снижение возможности обнаружения может стать серьезной проблемой, если у вас есть интересный контент, который может привести к тому, что конверсия превысит допустимые.
Например, веб-сайт, на котором есть страница отзывов, может опираться на упомянутые отзывы для связи с потенциальными клиентами и убедить их перейти. Если это явно видимый выбор в навигации, пользователи с большей вероятностью «случайно» обнаружат эту страницу. Поскольку этот раздел не является явно очевидным для каждого веб-сайта, он, вероятно, будет непредвиденным и пропущен, если будет скрыт.
Лучшие использования
Не имея однозначного универсального ответа на вопрос о гамбургере, давайте рассмотрим различные случаи, когда вы захотите его использовать, а также то, как максимально использовать его.
Простые сайты с небольшим количеством страниц / небольшим содержанием
Если ваш сайт находится на маленьком конце, и вы действительно хотите эффективно использовать пустое пространство, вы можете скрыть главное меню за значком. Поскольку вы не ожидаете, что пользователи будут переходить по страницам за страницей, дополнительные клики, вероятно, будут стоить той эстетики, которую вы ищете.
Когда это явно кликабельно
Исследования и бесчисленные A / B-тесты пришли к выводу, что значки меню работают примерно на 20% лучше, если они находятся внутри кнопки. Поэтому, вам было бы разумно принять этот подход и поставить вокруг него границу.
Меню гамбургеров: если вам это нравится, вы должны надеть кольцо.
Традиционно, значки гамбургеров никогда не нуждались в состоянии наведения, так как они были предназначены только для мобильных приложений, но если вы собираетесь включить их в свой дизайн рабочего стола, обязательно предоставьте им некоторую визуальную обратную связь для пользователей, которые надевают на него курсор, чтобы они знали это действительно кликабельна.
Пока вы на нем, убедитесь, что он четко виден. Имейте в виду контраст, размер и расположение. Как правило, все, что находится на левой стороне экрана, получает больше действия, поэтому вы можете выбрать верхнюю левую сторону, а не правую. Также желательно, чтобы он оставался липким, чтобы он оставался привязанным к верхней части окна, когда ваши пользователи прокручивают страницу вниз.
В паре с CTA
Возможно, самый лучший аргумент в пользу использования скрытого меню заключается в том, что при использовании в тандеме с сильным CTA вы эффективно говорите пользователям именно то, что от них ожидается. Это делает акцент на вашем CTA, сводя к минимуму риск того, что ваши пользователи будут потеряны в постороннем контенте. Как правило, это работает лучше всего, если у вас есть целевые страницы, которые являются относительно автономными, и пользователям не нужно нажимать, чтобы получить нужную информацию.
Худшее использование
На другом конце спектра, вот несколько худших случаев для комбо гамбургер / скрытое меню.
На сайте, ориентированном на более старую демографию
Как указывалось ранее, демонстрация 65+ наименее знакома со значением, стоящим за значком гамбургера, и, следовательно, с наименьшей вероятностью взаимодействует с ним. Так что, если вы разрабатываете сайт, ориентированный на эту возрастную группу, вам было бы намного лучше держать всю навигацию открытой и открытой.
Сайты с неожиданным содержанием
Любой сайт, который полагается на самопроизвольное обнаружение, будет плохим кандидатом на значок гамбургера, просто потому, что эти элементы с гораздо меньшей вероятностью когда-либо будут обнаружены. Все забавное и / или неожиданное, что может добавить к общей конверсии сайта, должно быть явно отображено по умолчанию. Люди вряд ли обнаружат что-то, чего они даже не знают, существует.
Последние мысли
Как и в случае с самим веб-дизайном, не существует ответов «один размер подходит всем» для обсуждения настольных гамбургеров. В конечном счете, вам необходимо взвесить все факторы и определить, соответствует ли предоставляемая ими визуальная простота потенциальным рискам UX. Это, конечно, не рекомендуется во всех случаях, но я могу с уверенностью сказать, что со временем это будет становиться все менее и менее рискованным.
Как вы думаете? Целесообразно ли когда-либо использовать скрытое меню со значком гамбургера на настольных сайтах? Я упустил из виду хорошее использование или препятствие? Пожалуйста, поделитесь своими мыслями ниже и продолжайте разговор!