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

А. Г.

Я продолжаю рассказывать, какими принципами мы руководствовались и какие решения принимали в работе над новым сайтом бюро.

Сегодня только об одном элементе — меню сайта в мобильной версии.

Без гамбургеров

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

Сайт Эпла в мобильной версии

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

В этом смысле «гамбургер» напоминает слайдер с переключалкой кружочками или другими маркерами, который по совпадению тоже есть на сайте Эпла.

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

В мобильных приложениях показатели использования падают после перехода от «табов» (обычной панели меню) к «гамбургерам» и возрастают при переходе обратно. «Гамбургеры» на сайтах понижают количество переходов к разделам — не помогают никакие подсказки и выделения.

Большие новостные сайты, для которых трафик — хлеб, нередко предпочитают обычные меню в мобильных версиях:

В мобильной версии сайта бюро тоже используется горизонтальное меню:

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

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

Люк Вроблевски. Очевидное всегда побеждает
Спотифай отказывается от гамбургера. Техкранч
Луи А. Почему и как избегать гамбургерных меню
Джеймс Арчер. Гамбургерное меню не работает

Кстати, в стандартном интерфейсе Айфона и Айпада нет гамбургера.

Ваш комментарий		Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Без гамбургеров

Комментарии

Ваш комментарий

Недавно всплыло