Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Решаем проблемы иконки-гамбургера

19 июля 2014 | Опубликовано в статьюшечки | 9 Комментариев »

Иконка-гамбургер — три полоски друг над другом, обозначающие меню — один из самых спорных символов в веб-дизайне. Дизайнеры говорят, что ненавидят его, клиенты говорят то же. Так почему же он везде?

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

По поводу таких иконок было множество дискуссий, проводились A/B тестирования, исследования, но все они почти всегда всегда были посвящены разработке приложений. Когда же речь идет о веб-дизайне, вопросов и проблем с иконками-гамбургерами куда больше. 

Проблема с иконкой-гамбургером

Многие дизайнеры подвергают сомнению саму ценность иконки-гамбургера. Часто ее воспринимают как символ для стиля iOS, хотя ее использовали еще до Apple.

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

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

futureinsights

 

Еще больше проблем с иконкой-гамбургером

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

Во-первых, и пожалуй это главный минус, иконка-гамбургер добавляет лишнее действие в навигацию. Вместо того, чтобы просто кликнуть по пункту меню, пользователь должен сначала открыть меню, кликнув по иконке. Одно из правил веб-дизайна гласит, что действие должно происходить максимум в три клика (конечно где это возможно). Таким образом, решая одну проблему навигации, иконка-гамбургер просто меняет ее на другую. Конечно, это проблема не только данной иконки, но и любой навигации, построенный подобным образом. Вы можете использовать слово «Меню» и получить ту же проблему. Разница лишь в том, что иконку-гамбургер можно использовать только таким образом.

hobbit
jam3

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

И в завершении, такая навигация скрывает текущее положение на сайте и место нахождения пользователя на нем.

london-se

 

Что хорошего в иконке-гамбургере?

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

Судя по опыту автора статьи, среди определенной аудитории значок-гамбургер в последнее время стал значительно более узнаваемым. Ведь за последнее время он был использован в огромном количестве проектов, что до сих пор влияет на рост узнаваемости.

olympicstory

Самая большая польза от иконки-гамбургера — экономия огромного количества места на экране. Если клиент составляет миллион пунктов, которые нужно добавить в меню, это отличный (хоть и грубый) способ выполнить требования и не захламить пространство.

Хотелось бы сказать, что такой метод решения проблем слишком объемного меню идеален, но это не так. Скорее это наименьшее зло. 

Корень проблем

Иконка-гамбургер становится все популярнее, потому что дизайнеры — а чаще клиенты — не ставят на первое место дизайн для мобильных устройств. Они хотят обычный сайт, но так чтобы он помещался и на экране телефонов их внуков.

Противники иконки-гамбургера заменяют ее словом «Меню» и делают еще хуже. Значок-гамбургер, нравится нам это или нет, все же приобрел свой смысл и значение. Пользователи понимают что именно там скрывается навигация.

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

pono
mccollcenter

 

Лучшее решение

Чтобы решить вышеизложенные проблемы, нам нужно понять что веб-пространство теперь работает иначе. Рост популярности мобильных устройств означает не только сокращение количества колонок, которые мы используем и отказ от тяжелых графических файлов.

Мобильный Интернет используется совсем иным образом. В нем правят приложения и пользователь ждет, что и сайты будут работать в той же манере.

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

Хорошие приложения имеют очень узкую направленность, и UX-тестов они прошли намного больше чем обычные сайты. Чтобы создать для пользователя опыт, который будет схож с использованием приложений, нам нужно упростить сайт, потом упростить его снова и в конце упростить еще немного. При необходимости, ломайте архитектуру сайта, делите ее на части необходимо маленького размера. Если предоставить пользователю простой набор опций, проблема перегруженного меню просто не возникнет.

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

Автор статьи Paddi MacDonnell

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Ant
    Thumb up Thumb down -2

    Никогда ее не использую. И не буду.

    MutDiz Ответ:

    Thumb up Thumb down 0

    Поделитесь опытом, что используете в мобильных приложениях вместо этой иконки?

    Ant Ответ:

    Thumb up Thumb down 0

    Приложения не разрабатываю, но верстаю сайты. Для мобильных показываю все меню.

    MutDiz Ответ:

    Thumb up Thumb down 0

    Понятно. А если в мобильной адаптации сайта меню не много больше чем может влезть? Или же на много больше?

    Vad Ответ:

    Thumb up Thumb down 0

    MutDiz, Господи, сколько ошибок в одном предложении. Вы пишите хуже, чем школьник девятого класса.

    А если по делу, то эта кнопка уже интуитивно у всех воспринимается. Немалому её росту поспособствовали также и игры (на смартфоны) в которых идёт постоянное миксование этого символа меню.

    MutDiz Ответ:

    Thumb up Thumb down 0

    Спасибо конечно за такое обращение, но я совсем не Господи) Я у Вас интересовался совсем не грамматическими вопросами, а задал вопрос по теме на странице. Если уж Вы обиделись, не знаете, как ответить, то лучше промолчите) Я пишу быстро и интуитивно понятно. По вопросу Вы совершенно ничего не ответили.

    Перефразирую вопрос, если в меню мобильного приложения или в адаптивной версии сайта под мобильники будет 12 пунктов, как Вы собираетесь их туда влепить? Хотя, я так понял, что Вы программист, либо верстальщик. Так что, вопрос видимо не к Вам.

    Ant Ответ:

    Thumb up Thumb down 0

    Если заметили, отвечал совсем не я, а Vad.

    Все 12 столбиком и покажу.

    Захар Ответ:

    Thumb up Thumb down +1

    Пф. За своей орфографией вы предпочитаете не следить, а за чужой — совершенно не стесняетесь в выражениях.

    Вот вам под нос ваше же:

    > Вы пишЕте хуже

    > игры (на смартфоны) (пропущена запятая) в которых

    П.С. Претензия была не ко мне, но манера общения гражданина задела.

  2. SharkD
    Thumb up Thumb down +7

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