Hover vs Click: наш выбор и его подробное обоснование с примерами
- 611 просмотров
- 27 апреля, 2024
- Обновлено: 23 июня, 2024
- admin
- Время чтения: 3 минуты
- 4 (Подробно)
![](pics/thumbs/120/img-120-966x644-crop.jpg)
Создание навигации для сайта – это этап важный как с точки зрения юзабилити, так и с точки зрения поисковой оптимизации. Другими словами, мы должны предоставить и пользователю и поисковой системе удобный и понятный инструмент для перемещения по всем разделам нашего проекта. В самом простом варианте никаких сложностей эта задача не вызывает:
![Одноуровневое меню](https://sed.by/pics/thumbs/121/img-121-966x644-width.jpg)
Но что если меню имеет вложенность? Такую:
![Двухуровневое меню](https://sed.by/pics/thumbs/124/img-124-966x644-width.jpg)
Или такую:
![Трехуровневое меню](https://sed.by/pics/thumbs/125/img-125-966x644-width.jpg)
Собственно, основных реализаций две:
- Использовать событие hover
- Использовать событие click
Здесь и возникает проблема: а как правильно? Проблема далеко не такая простая, как кажется на первый взгляд, и далеко не однозначная. Тем не менее, рациональное решение у нее есть. Но не будем спойлерить и перечислим все по порядку.
Click vs Hover: юзабилити
Прежде всего, событие mouse hover неприменимо к сенсорным дисплеям. Это означает, что мы должны четко понимать, когда используем hover, а когда click. Смартфоны и планшеты для кликов, настольные системы для всего остального, т.е. для ховеров. Пороги (thresholds), конечно, помогут, но с другой стороны, не надо забывать про нетбуки с тачскринами и про любителей подключать мышь к айпаду. Как быть с ними?
Следующий момент: наведение мыши не всегда означает намерение открыть подменю. Это может быть и случайное действие. А если вы используете анимацию для реализации вложенности? Конечно, можно подключить Hover Intent или аналогичный ему скрипт, но последствий будет не меньше, чем преимуществ. Так что в этом плане ваши посетители помучаются. Особенно самые нетерпеливые из них. А может предпочтут не мучаться, а уйти на сайт конкурента.
Дальше больше: если мышь случайно покинет зону наведения, меню “схлопнется”, и все придется начинать сначала. Так что операция, которая на первый взгляд может показаться быстрой, станет раздражающе долгой.
Click vs Hover: привычки и психология
Как минимум две трети пользователей считают более естественным клик, а не “ховер”. Оставшаяся же треть совсем не категорична. Мы опросили 22 пользователя, из которых 18 сказали, что скорее кликнут по меню, чем наведут на него мышь в ожидании раскрытия.
В общем и целом, клик это естественное действие, чем наведение, и по нашим наблюдениям, даже если при наведении происходит анимация и ожидаемое действие, пользователь часто все равно кликает.
Если при использовании наведения вы убираете мышь из зоны ссылки, сложно обеспечить возврат на один шаг – необходимо переместить мышь на предыдущее меню. При использовании клика это реализуется проще:
- повторный клик закрывает последнее открытое подменю,
- нажатие Esc на клавиатуре закрывает последнее открытое подменю,
- клик по свободному пространству полностью закрывает все открытое подменю.
Как говорится, варианты возможны, но именно с кликом. Ховер целиком и полностью зависит от того, куда пользователь перемещает мышь. Ошибешься – начинай сначала.
А если уж выгребать все до последней крошки, давайте подумаем о пользователях с плохим зрением или, например, с тремором. Наводить мышь трясущейся рукой то еще удовольствие.
Можно ли обойтись без Hover и Click?
Конечно можно! Например, подменю можно поместить в боковой “сайдбар” и сделать контекстнозависимым. Другими словами, вы кликаете по ссылке “Наша компания” и дальнейшую навигацию по сайту осуществляете через подменю, расположенное в боковой колонке.
Вроде все неплохо, но мы забыли об адаптивности: на узких экранах колонки располагаются друг над другом, и подменю либо будет далеко внизу, либо заслонит собой главный контент. Так что полноценное многоуровневое меню никакими эрзацами не заменишь.
Заключение
Не стоит делать табу из события Hover. Оно прекрасно работает и оправдывает себя в массе ситуаций. Но для реализации многоуровневых навигаций с множественными вложенными подменю или так называемых “мегаменю”, когда при активации одного из пунктов верхней навигации раскрывается блок на всю ширину экрана с навигацией виджетами и изображениями, все же лучше подходит событие Click.
А что вы думаете об этом? Расскажите нам в комментариях или на наших форумах.
Ранее мы обсуждали как правильно выбирать доменное имя.
А можно подробно про ESC и обработку кликов по свободному пространству?
Новый комментарий