Ещё о новом сайте бюро
Я продолжаю рассказывать, какими принципами мы руководствовались и какие решения принимали в работе над новым сайтом бюро.
Ещё о новом сайте бюро
Сегодня только об одном элементе — меню сайта в мобильной версии.
Без гамбургеров
Веб‑дизайнеры так полюбили гамбургерное меню, что оно стало практически стандартом дизайна мобильных сайтов. Главное меню не влезает в экран телефона — не беда, заменим его на иконку с двумя или тремя полосками:
Иконка не занимает места, шапка получается аккуратной и лаконичной — это прекрасный дизайн для дизайнеров, которые его повсеместно и распространили.
В этом смысле «гамбургер» напоминает слайдер с переключалкой кружочками или другими маркерами, который по совпадению тоже есть на сайте Эпла.
Бесспорно, пользователи знают, как пользоваться гамбургерами и слайдерами,— но не хотят. Гамбургеры и слайдеры:
не используют прокрутку — заставляют целиться в маленькие иконки;
неинформативны — не сообщают ничего конкретного о своём содержании;
не мотивируют — не могут заинтересовать пользователя, пока тот не кликнет в них от скуки или безысходности;
используются как костыль при нехватке места и воображения;
из мира дизайнера, а не из мира пользователя.
Люк Вроблевски. Очевидное всегда побеждает
Спотифай отказывается от гамбургера. Техкранч
Джеймс Арчер. Гамбургерное меню не работает
Кстати, в стандартном интерфейсе Айфона и Айпада нет гамбургера.
В мобильных приложениях показатели использования падают после перехода от «табов» (обычной панели меню) к «гамбургерам» и возрастают при переходе обратно. «Гамбургеры» на сайтах понижают количество переходов к разделам — не помогают никакие подсказки и выделения.
Люк Вроблевски. Очевидное всегда побеждает
Спотифай отказывается от гамбургера. Техкранч
Джеймс Арчер. Гамбургерное меню не работает
Кстати, в стандартном интерфейсе Айфона и Айпада нет гамбургера.
Большие новостные сайты, для которых трафик — хлеб, нередко предпочитают обычные меню в мобильных версиях:
В мобильной версии сайта бюро тоже используется горизонтальное меню:
Вертикальное меню «в столбик» заняло бы неоправданно много места. Хотя в горизонтальном меню сначала видны только несколько самых важных пунктов, остальные доступны прокруткой. Прокрутка проще и удобнее прицельного нажатия, особенно на сенсорном экране, поэтому мы отказались от кнопки «ещё» или «всё».
Важный нюанс: расстояние между пунктами адаптируется так, чтобы последний влезающий пункт меню обязательно обрезался и при этом было видно не менее двух букв. Благодаря этому понятно, что меню не поместилось целиком на экране. В отличие от настольной версии, мобильное меню окружено лёгкими линейками, чтобы показать, что оно прокручивается независимо от других элементов страницы.