Меню, оформленное в виде небольшой по размеру иконки «гамбургер», можно любить, можно ненавидеть, можно использовать на своих веб-сайтах/приложениях или нет. Но, с точки зрения веб-дизайна, оно все реже встречается и реже применяется веб-мастерами, и для этого есть ряд причин. Речь даже не о том, что тенденции меняются и, возможно, иконка стала немодной. Есть и другие многочисленные факторы, которые повлияли в разной степени на то, что не все веб-дизайнеры полагают правильным её постоянное применение во всех проектах.
Крошечная иконка вызывает много противоречий и заставляет невольно думать, будет ли функционально работать проект, будет ли смотреться все красиво или создастся беспорядок в понимании. И такие дебаты и размышления существуют с того самого момента, когда значок еще только обрел популярность и не прекращаются даже тогда, когда, казалось бы, тенденция уже не нова.
Меню-гамбургер удобно, оно создает чистоту холста, на котором можно размещать важные и не очень элементы, контент, CTA и прочее. Между тем есть некоторые проблемы, скрывающиеся в юзабилити, которые способны ввергнуть практически любого веб-дизайнера в уныние и тоску. Вот и рассмотрим в этом материале именно такие моменты, способные вызывать и ненависть, и любовь.
Чистый холст
Дополнительное чистое пространство, что обеспечивается за счет использования в дизайне меню-гамбургера, позволяет создавать более чистый, открытый и, своего рода, светлый (не в смысле колористики), современный вид дизайна. Минималистический дизайн без помех и множества слоев из элементов, что буквально находят друг на друга, образуя на странице некоторое подобие захламленности и «кучи бумажек».
Такой элемент дизайна на самом деле способен стимулировать и веб-дизайнера, и команду к обдумыванию и изменению содержания, к поиску решения удобства пользования сайтом. Поскольку значок «гамбургер» не требует пространства для расширения, аналогично тому, что собой представляют мега-меню, которые не столь популярны сейчас, но используются и оправдывают свое наличие в дизайне, веб-мастерам важно все же определить реальную необходимость в такой скрытой навигации.
Но если пространства на странице мало, то меню-гамбургер становится отличным решением для создания фокуса на контенте. Более того, пользователям и самим становится удобнее, они явно и четко видят и осознают ту информацию, что представлена на сайте. В результате меню-гамбургер должны любить все и всегда, а популярность не может уменьшаться.
Посмотрим на ascendlearning, mlgr, gyrotonic, natedentondesign. Все они разные, но вот в чем загвоздка. Если на некоторых сайтах использование мини-меню оправдано, тем более, что оно появляется сбоку в отдельной панельке, не мешая при этом изучать основной контент, то в иных вариантах оно полностью разворачивается на весь экран. И пусть бы разворачивалось, но пункты меню дублируются с аналогичными на самой странице, что появляются буквально после одного оборота колесиком мышки. Одного. Того самого, которое совершает большинство пользователей, даже не придавая особого значения. Привычка порой такая – покрутить колесико. И создается банальное ощущение, что меню-гамбургер было добавлено на сайт только в угоду трендам и моде. Оно нужно, а смысл не важен.
Отсутствие скрытого интереса
Что собой представляет иконка гамбургер? Крошечный, миниатюрный значок в виде трех горизонтальных линий, параллельных друг другу. Три линии… и все. Специфика и особенность тематик сайта определяет возраст аудитории, которая и будет посещать данный проект. Если такой проект создается для аудитории старшего возраста или людей, не слишком хорошо подкованными в мобильной индустрии, то такой значок (из трех горизонтальных полосочек) может привести в заблуждение. Это только нам, веб-дизайнерам, поначалу кажется, что все всё вокруг давно знают и умеют. Нет, не все и не всё, не знают и не умеют. Человеку вообще не свойственно уметь и знать ВСЁ. Это нереально.
И такой контингент пользователей может совершенно не смекнуть, что на три полосочки нужно нажать. Они просто уйдут с сайта. Им это проще.
Но если аудитория более «технологична» (нет, они не фанаты всего передового, но знакомы с некоторыми нюансами), тогда им меню-гамбургер придется по душе. Кроме того, если дизайн создается исключительно или преимущественно в десктопном варианте, то тогда совершенно точно стоит пересмотреть идею использования такого значка. Она просто может быть неуместной.
Наглядный и простой пример – интернет-магазины. Те же Ozon, 1c-interes, Л'Этуаль (постоянные читатели нашего блога должны заметить, что они изменили дизайн сайта) и прочие. Если в мобильном варианте этих сайтов еще допустимо использовать такой значок, то в настольной версии он более чем неуместен. Нам, как покупателям, удобнее сразу видеть основные категории товаров данного магазина. А потому скрывать все и сразу – не есть хороший вариант. Хотя у Ozon использовано редкое решение: значок «гамбургера» есть, но он еще и подписан, и общее меню разделов есть. Становится более наглядно. Аналогично и с сайтами туристического направления.
Мобильность на высоте
Всегда интересно наблюдать за тем, как перед нашими глазами что-то изменяется, трансформируется и превращается. Когда несколько лет назад иконка «гамбургер» только начала появляться на сайтах и в приложениях, не все думали, что она станет популярной и особенно на мобильных устройствах.
Но случилось как раз обратное.
В мобильных приложениях и версиях сайтов использование иконки «гамбургер» стало общепринятым, увидеть её можно практически везде и большинство пользователей смартфоном/планшетом уже к такому значку привыкли.
Соответственно, меню-гамбургер становится отличным вариантом мобильной навигации, способствуя очищению холста для размещения разных элементов на странице. «Выезжающие» слои или выпадающие, но места на холсте экономится в разы больше, да и отпадает необходимость в мелком шрифте, который на смартфоне прочитать трудноватенько. Кроме того, появляется шанс разработать отдельные дополнительные ссылки навигации, кнопки, оформить переход по разделам – идей, действительно, становится много.
Посмотрите на десктопные варианты проектов iconvillas, legalanchor, carleton, und и сравните их с мобильными вариантами выше. Практически везде основное меню спряталось за иконкой. Но есть варианты, когда глобальное меню на домашней странице осталось (стало только вертикальным) и к тому же повторяется в скрытом варианте. По-разному реализована идея, но этот стандарт, наверное, не изживет себя еще долго в отличие от настольного.
Быстрый доступ к необходимому
Элементы гамбургер-навигации обеспечивают прямой доступ к содержимому. И хорошо, если это всегда так. Nielsen Norman Group поясняли данное понятие тем, что прямой доступ позволяет коснуться иконки и перейти сразу к нужной информации, нажав на соответствующий пункт меню без необходимости пролистывать всю страницу или использовать поиск. Такой прямой доступ является альтернативой для тех же меню-«каруселей» или мега-меню, пункты которого «все раскрываешь, и раскрываешь, и раскрываешь…о, нашел, наконец-то нужное!».
Прямой доступ важен потому, что позволяет быстро и легко пользователям попасть туда, куда они хотят во всей структуре сайта. Раньше для реализации этого использовали «карту сайта», где на одной странице просто прописывали иерархично все ссылки на все страницы. Но ведь открывать постоянно такую страничку не слишком удобно, поэтому меню-гамбургер было призвано отчасти заменить эту идею. Как результат: меньшее количество кликов для получения доступа к информации является хорошей вещью.
Но есть особенность. Прямой доступ должен предоставляться действительно к особо важным разделам сайта. И это важно тогда, когда сайт большой и информации самой разной много. Но если трудно выделить необходимое, почему не включить в это меню поиск или небольшую многоуровневость? Тогда пользователям будет гораздо проще разобраться, что и где.
И вот о чем речь: solcocina, stickybandits, stphilips, allianceplus. Веб-дизайнеры использовали разные подходы к реализации идеи прямого доступа к содержимому сайта. Некоторые включили поиск в меню, некоторые – адреса и телефоны компании, позволяя избежать открытия страницы с контактами, другие – предоставили возможность выбора языковой версии и так далее. Таким образом, нажимая на иконку «гамбургер», пользователь попадает в своеобразное пространство, отдельное от сайта, но позволяющее взаимодействовать с ним более просто и быстро. Зачем долго прокручивать страницу, когда можно сразу перейти в нужную секцию? Для пользователей это удобнее.
Концентрация внимания
И этот момент плавно появляется и следует из всего, что было сказано выше. Внимание пользователей может очень быстро рассеиваться во время поиска нужного. И тут речь не о том, что монитор большой и глазами приходится много «водить» по экрану, чтобы найти на странице сайта, где находится нужный раздел.
Теперь представим, что мы ищем раздел «о компании» или информацию о доставке товаров и так далее. То есть очень узконаправленно. Зачастую приходит на ум самое простое: перекликать по ссылкам в поиске нужного. И это если используется дизайн, когда в четырёх углах страницы располагаются ссылки, а при прокрутке информация движется по горизонтали.
И вот что занятно. Значок меню-гамбургер бывает скрыт или немного видоизменен, и потому найти его становится трудоёмко. Иногда сами элементы управления скрывают, чтобы пространства и информации с красотой было больше, тогда и тем более не сразу вникаешь, куда крутить колесико или кликать, чтобы вообще появились элементы интерфейса.
Это утомляет. Такие дизайны редки и в большинстве они встречаются в авторских проектах, но они есть, и они попадаются в интернете. Но все равно это утомляет, внимание концентрируется уже не на содержании, ибо пользователь поглощен идеей найти управление.
Посмотрим на примеры: mathieulevesque, essentiallookscollection, espn, bornikirken (меню всегда на виду, но тот момент, когда хорошо, если оно было бы чуть-чуть скрыто). Меню есть везде, но иногда найти его сразу непросто или наоборот, уж лучше бы его и не было вовсе.
Выводы
Так любим мы или ненавидим меню-гамбургер? И то, и другое. Его роль и значение для мобильного сектора неоспоримы, использование в настольных вариантах дизайна уместно. Но в любом случае нужно очень тщательно его прорабатывать в обоих случаях. Лучшего решения пока нет и не будет, вероятно, еще долгое время, но зато уже сейчас можно увидеть, как веб-дизайнеры находят интересные решения для реализации. Добавляют поиск, иерархию, кнопки соцсетей, контактную информацию, формы подписок и прочее, и прочее. Это позволяет значительно сократить место на сайте, на страницах и избавить сайт от излишне-сложной навигации в целом. Но также необходимо понимать, что поколения сменяются, поколения все разные, пользуются интернетом люди всех возрастов и их познания в разных сферах тоже разные. Лояльность и тактичность, вариативность и простота в целом должны всегда присутствовать и играть свою роль.
Казалось бы, что популярность иконки «гамбургер» сходит на «нет», но в реалии она просто стала реже использоваться в настольных вариантах сайтов. Достаточно сузить окно браузера, и вот она, тутоньки. И согласитесь, в целом её наличие и функционал удобен многим. Но это если над ней работали.
И снова «золотая серединка»…
Таким образом, любовь к скрытому меню появляется тогда, когда его наличие уместно, а информация доступна и понятна. Ненавидим мы этот «гамбургер» тогда, когда не понимаем, зачем он вообще нужен в данном конкретном случае, когда его не найти или когда он слишком навязчив.