Hover vs Click: наш выбор и его подробное обоснование с примерами

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

Но что если меню имеет вложенность? Такую:

Или такую:

Собственно, основных реализаций две:

1. Использовать событие hover
2. Использовать событие click

Здесь и возникает проблема: а как правильно? Проблема далеко не такая простая, как кажется на первый взгляд, и далеко не однозначная. Тем не менее, рациональное решение у нее есть. Но не будем спойлерить и перечислим все по порядку.

Click vs Hover: юзабилити

Прежде всего, событие mouse hover неприменимо к сенсорным дисплеям. Это означает, что мы должны четко понимать, когда используем hover, а когда click. Смартфоны и планшеты для кликов, настольные системы для всего остального, т.е. для ховеров. Пороги (thresholds), конечно, помогут, но с другой стороны, не надо забывать про нетбуки с тачскринами и про любителей подключать мышь к айпаду. Как быть с ними?

Следующий момент: наведение мыши не всегда означает намерение открыть подменю. Это может быть и случайное действие. А если вы используете анимацию для реализации вложенности? Конечно, можно подключить Hover Intent или аналогичный ему скрипт, но последствий будет не меньше, чем преимуществ. Так что в этом плане ваши посетители помучаются. Особенно самые нетерпеливые из них. А может предпочтут не мучаться, а уйти на сайт конкурента.

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

Click vs Hover: привычки и психология

Как минимум две трети пользователей считают более естественным клик, а не “ховер”. Оставшаяся же треть совсем не категорична. Мы опросили 22 пользователя, из которых 18 сказали, что скорее кликнут по меню, чем наведут на него мышь в ожидании раскрытия.

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

Если при использовании наведения вы убираете мышь из зоны ссылки, сложно обеспечить возврат на один шаг – необходимо переместить мышь на предыдущее меню. При использовании клика это реализуется проще:

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

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

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

Можно ли обойтись без Hover и Click?

Конечно можно! Например, подменю можно поместить в боковой “сайдбар” и сделать контекстнозависимым. Другими словами, вы кликаете по ссылке “Наша компания” и дальнейшую навигацию по сайту осуществляете через подменю, расположенное в боковой колонке. 

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

Заключение

Не стоит делать табу из события Hover. Оно прекрасно работает и оправдывает себя в массе ситуаций. Но для реализации многоуровневых навигаций с множественными вложенными подменю или так называемых “мегаменю”, когда при активации одного из пунктов верхней навигации раскрывается блок на всю ширину экрана с навигацией виджетами и изображениями, все же лучше подходит событие Click.

А что вы думаете об этом? Расскажите нам в комментариях или на наших форумах.

Ранее мы обсуждали как правильно выбирать доменное имя.