x
 
Максим Семенов
27 февраля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Артём, давно слежу за работами бюро, читаю советы.

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

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

(Часть четвёртая)


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

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

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

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

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

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

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

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

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

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


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


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

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

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


Поделиться
Отправить

Комментарии

Ваня Звягин
1 марта 2017

Что делать, если на десктопной версии сайта очень много пунктов меню, и они не влезают в одну строчку?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

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

Поделитесь соображениями, как работать, путешествуя 8 2 Расскажите о клише и устойчивых выражениях 13 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5