MouseOver-эффект на коммерческих сайтах становится все популярнее. Заключается он в том, что изображение изменяется, если навести на него курсор. Добавление такой интересной функции уменьшает количество кликов, необходимых посетителю для совершения покупки, получения информации и других важных действий.
Функция имеет не только плюсы, но и минусы, например:
- раздражающее действие всплывающих окон на пользователя;
- возможные трудности при посещении ресурса с телефона или планшета;
- замедление работы сайта и его утяжеление.
Прежде чем воспользоваться всеми преимуществами MouseOver-эффекта, тщательно протестируйте все возможные варианты реализации этой функции.
В данной статье мы познакомим вас с самыми удачными примерами MouseOver-эффекта на сайтах крупных компаний.
- Выпадающее меню
Такой элемент MouseOver, как выпадающее меню, активирующееся при наведении курсора, облегчает клиентам изучение подкатегорий товаров. Однако позитивным пользовательский опыт может быть только при подборе оптимальной чувствительности и времени этого меню. Если оно будет сворачиваться слишком быстро или слишком медленно после того, как от него отвели курсор, будет вызывать недовольство посетителей вашего ресурса. Меню должно быть достаточно большим, чтобы по нему можно было легко перемещаться. Так, например, оно выглядит на сайте John Lewis:
- Опция «добавить в корзину»
На некоторых сайтах MouseOver-эффект представлен возможностью выбирать количество, цвет и размер товара, не заходя на страницу продукта. Для выбора нужно просто навести на модель курсор и товар сразу можно добавлять в корзину.
У такого варианта функции MouseOver есть свои недостатки: она делает доступ к странице товара более сложным. На нее нельзя будет перейти, кликнув по модели, нужно будет нажать на название продукта.
- Просмотр ракурсов товара
Сайт Bottica предлагает пользователю слайд-шоу из изображений продукта, которое запускается автоматически при наведении на картинку курсора. Таким образом, пользователь получает больше информации о модели, не затрачивая на это дополнительных усилий.
- Показ цены
Некоторые бренды используют на своих сайтах опции показа цены и дополнительных деталей при наведении курсора на картинку с продуктом.
- Вид сзади
Эта функция очень полезна для интернет-магазинов одежды. Например, на сайте lillypulitzer.com можно сразу увидеть заднюю часть наряда, просто наведя курсор на картинку:
- Альтернативные цвета
Еще одна удобная опция – просмотр вариантов цвета. Посмотреть все цвета можно, просто наводя курсор на соответствующее изображение.
- Информация о наличии товара
Надпись «нет на складе» также может возникать при наведении курсора на конкретную модификацию товара. Это позволяет оперативно получать данные о наличии или отсутствии необходимой вещи.
- Увеличение изображения
Очень популярна версия MouseOver-эффекта, позволяющая рассмотреть детали товара более подробно. Подойдет для многих категорий товаров: одежда, обувь, игрушки, мебель и т.д.
- Содержимое корзины
Информативная функция, отображающая содержимое корзины при наведении курсора. Пользователь мгновенно может увидеть перечень выбранных им товаров и общую стоимость покупки. Стоит убрать курсор, как окно исчезает. Это удобно и не мешает дальнейшей работе с сайтом.
- Дополнительная информация
Популярный вариант реализации MouseOver-эффекта, дающий подсказку, к примеру, при заполнении формы. Позволяет пользователю получить дополнительную информацию, не уходя со страницы.
|
(Голосов: 1, Рейтинг: 5)
|
||||
Вы можете узнать подробности о наших услугах, задав интересующий вопрос менеджеру по телефону +7 (495) 104-86-69, или направить заявку на продвижение сайта.
Похожие статьи
