book-open 1 test
Блиц-курс «30 вопросов на старте карьеры UI/UX-дизайнера»

Как показывать подменю: при наведении, по щелчку или на следующей странице? | Урок 16

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

(Вы читаете перевод ускоренного курса UX. Курс включает 30 вопросов, которые встречаются на старте карьеры: UX Crash Course: 30 Std Questions. Если вы здесь впервые, то лучше начните сначала).

Как показывать подменю: при наведении, по щелчку или на следующей странице?

Представьте себе такой сценарий:

У вашего главного меню есть несколько опций. Для одной из опций существует подменю: несколько категорий на выбор.

Это может быть аккаунт: профиль, настройки и история.

Это может быть вкладка “Продукты” со списком продуктов.

Это может быть какой-то тематический обучающий раздел со списком отдельных уроков.

Да правда, что угодно!

Так как нам поступить? Показывать это подменю по наведению мыши на главное меню? Или по нажатию? Или эти опции лучше показать на самой странице в виде небольшого подменю?

Глупый ответ:

  1. Как делает Твиттер?
  2. Как делают конкуренты?
  3. Что бы сделал Иисус?

Настоящий ответ:

Все зависит от того, как пользователи используют ваш сайт и с каких устройств.

Если вы хотите, чтобы пользователь каждый раз выбирал нужную опцию из списка, то вам подойдет вариант открытия подменю по наведению или по нажатию. Но помните: на мобильных устройствах нет возможности наведения. Так что открытие по наведению превращается в два клика (первый — само наведение и второй — выбор). Поэтому не забудьте поработать над мобильной версией, чтобы убрать этот недостаток. Это бесит.

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

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

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

Вот почему этот вопрос совсем не глупый:

Эта маленькая деталь интерфейса может повлиять на доход вашей компании.

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

Если сайт большой, то недополученная прибыль может составить миллионы долларов.

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

Если подменю задействовано в процессе покупки, подумайте, какой способ больше подойдет для принятия решения о покупке и обязательно проведите A/B тест на полную!

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

Информационная архитектура определяет небольшие детали. НЕ наоборот.

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

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

И вся структура должна быть основала на ваших целях, включая бизнес-цели.

Если вы добавляете страницы только потому, что кнопки должны куда-то вести, то вы свернули не туда. Это все равно что строить еще одну комнату, потому что вам нужна еще одна дверь.

Внимательнее к деталям: они могут быть гораздо значительнее, чем кажется.

Завтра мы ответим на вопрос: “Email-подтверждение — это знак плохого UX?

Блиц-курс «30 вопросов на старте карьеры UI/UX-дизайнера»