Иконка-гамбургер — эксперименты и дискуссии

Книги и материалы

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

Иконка-гамбургер_1

Препирательства в последнее время о действенном эффекте логотипа гамбургера перешли уже в иную плоскость, А ссылаясь на публикации заслуженных дизайнеров и содержание отдельных веб-ресурсов, включая и популярные The Atlantic, Tech Crunch, The Next Web и Nielsen Norman Group можно заключить, что это своеобразная ловушка. Картинка эффектна, проста в использовании, но это регресс от простых аналогов, только более наполненных содержанием.

И неважно антипатерн ли это, нет ли, логотип «прописан» постоянно на большинстве веб-страниц в сети.

Мне, как дизайнеру в команде m.booking.com, применение этого логотипа для отображения в выдвигающемся меню дали проанализировать объект. Приступил же я к этому с поиска сведений о происхождении иконки, чтобы понять суть обстоятельств такого незавидного её положения.

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

Gizmodo

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

Вероятно, такое не совсем верное её применение и объясняет существующие критические замечания по отношению к иконке, как к значку меню.

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

Все это поставило вопросы — в какой степени, возможно, мы неправы, и правы ли, все остальные? Удобно ли пользователю? И существуют ли люди, в действительности, чем в их понимании есть иконка, изображенная на нашем ресурсе тремя характерными отрезками линий?

Чтобы получить ответ, было принято решение провести тест, используя для этого форму A/B.

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

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

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

Иконка-гамбургер_2

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

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

Основной вариант:

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

Иконка-гамбургер_3

Альтернативный вариант:

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

Иконка-гамбургер_4

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

В результате слово перед фастфудом стало победителем, что явилось красноречивым подтверждением эксперимента Джеймса Фостера, о возможности в победе над котлетой внутри булочки.

Итог

Эксперимент показал, что при замене иконки со значком на термин меню не сказалось на поведенческом факторе пользователей сайта. При поддержке огромной базы клиентов, мы с достаточно высокой степенью уверенности получили основание, чтобы утверждать что в общем, для посещающих Booking.com пользователей, значок в виде иконки с гамбургером успешно заменяет вариант описания текстом.

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

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

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

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

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

Только бы не заплутать в собственных рассуждениях, что применительно к рецепту отличного гамбургера. Если даже вам удалось в подробностях запомнить упомянутый мной состав ингредиентов, вам не удастся приготовить такой же гамбургер. Для этого существует масса причин, и основная — качество доступных продуктов.

Эффективный совет

Стремиться всегда, тестировать собственные идеи и анализировать данные. Какие возникают вопросы, а для ответа — откусите и посмотрите что произойдёт.

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