Многофункциональная SEO-платформа
для профессионалов
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

Как улучшить юзабилити интернет-магазина с помощью MouseOver-эффекта

Россия +7 (495) 960-65-87
Шрифт:
1 8847

Использование MouseOver-эффекта (когда при наведении курсора мыши на изображение, оно меняется на другое) на ecommerce-сайтах в последнее время пользуется большой популярностью. И это не удивительно. Mouseover позволяет уменьшить количество кликов, которые покупатель должен сделать на пути к своей покупке, чтобы получить больше информации, и сокращает его путь до конверсии.

При этом у данного функционала есть недостатки:

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

Поэтому прежде чем запустить MouseOver-эффект на своем сайте, рекомендуется тщательно протестировать возможные варианты его исполнения.

Издание Econsultancy представило подборку 10 наиболее удачных примеров применения MouseOver-эффекта на сайтах крупных интернет-магазинов.

Выпадающие меню

Большие выпадающие меню, такие как у John Lewis часто активируются при наведении курсора мыши. Это облегчает клиентам возможность видеть различные предлагаемые подкатегории товаров, но для хорошего UX важно учитывать время и чувствительность данного меню. Например, слишком быстрое или медленное сворачивание меню при отводе курсора от него, может раздражать пользователей. Поэтому, например, выпадающее меню на сайте John Lewis достаточно большое, что позволяет пользователям легко перемещаться по нему:

Показ опции «добавить в корзину»

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

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

Прокрутка разных ракурсов товара

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

Показ цены

Бренд Annoushka показывает цену и некоторые дополнительные детали при наведении курсора на изображение продукта:

Вид сзади

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

Альтернативные цвета

На Land’s End вы можете быстро просмотреть имеющиеся варианты цвета объекта, перемещая курсор на нужное изображение:

Сообщения «нет на складе»

Если вы наведете курсор на конкретный размер и цвет товара, который не доступен на House of Fraser, вы увидите на изображении продукта соответствующее сообщение:

Увеличение изображения:

Перемещая курсор по изображению на сайте Lego, вам выводится увеличенное изображение интересующих деталей:

Содержимое корзины

При наведении курсора мыши на корзину House of Fraser, во всплывающем окне появляется краткая информация о ее содержимом и общей стоимости товаров:

Окно также легко исчезает, как только вы убираете курсор с корзины в другое место, поэтому данная функция не мешает работе пользователя. Очень удобно.

Раскрывающаяся дополнительная информация

На OfficeMax используется эффект mouseover при авторизации пользователей, позволяющий давать пользователю подсказку и уточняющую информацию здесь же, не уводя со страницы:

Что вы думаете по поводу использования функции mouseover на сайтах интернет-магазинов? Поделитесь в комментариях!


Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Андрей
    больше года назад
    Спасибо за список
    -
    1
    +
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как построить качественную ссылочную массу сайта
Айрат Рахимзянов
38
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
Анализ ссылок: сравнение многофункциональных платформ по размеру их баз
Андрей Ольшевский - Очень неточная статистика, объясню почему. Довольно часто делаю анализ сайтов на качество и объём ссылочной массы. Всегда делаю выгрузку из трех источников – Вебмастера Яндекса, сервиса Мегаиндекс, сервиса Линкпад. Потом с помощи алгоритмов и функции Excel отсеиваются много дублей, битых ссылок, несуществующих урл и тп. Как показала практика, вебмастера Яндекса вполне достаточно, там вся информация и она самая актуальная, в других сервисах куча мусора, а нового, чтоб было найдено и проиндексировано ПС - очень мало. Поэтому мирятся количеством в данном анализе не профессионально.
Как создать интернет-магазин: сколько стоит открытие?
Пришел посмеяться
1
комментарий
0
читателей
Полный профиль
Пришел посмеяться - Я просто посмеюсь :D Даже не хочу ничего особо говорить :D Смех, а не статья.
ТОП-10 автоматизированных сервисов контекстной рекламы
Гость - Действительно, очень плохая статья. А у редактора Блондинки видимо слишком много свободного времени.
Кому и зачем нужен маркетплейс от Яндекса
Дарья Калинская
212
комментария
0
читателей
Полный профиль
Дарья Калинская - Максим, спасибо, рада, что статья оказалась полезной )
Конкурс: угадай победителя рейтинга «Известность бренда SEO-компаний»
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Оптимизм Дэмис Кокос Ашманов и Партнеры Раш эдженси
Инструкция по применению: обзор сервиса обратного звонка Callbackhunter
Полина Ковальчук
1
комментарий
0
читателей
Полный профиль
Полина Ковальчук - Возможно, но не советую экономить на этом сервисе, функционал то тоже круче, чем у аналогов. Вы создаете сайт для получения денег и чем качественнее Вы выстроите продвижение, тем больше лидов Вы получите!
Тест: Какой ты интернет-маркетолог?
Петр - Мда уж, есть ряд очень и очень субъективных вопросов, например с картинками и ctr или с несколькими вариантами ответа, когда из 5 пунктов надо выбрать 4, что несерьезно. Поэтому, как минимум, к этому тесту нельзя относиться серьезно. Его надо очень серьезно дотягивать, а не вываливать отсебятину.
Чек-лист: SEO для B2B-бизнеса
Антон Зозуля
8
комментариев
0
читателей
Полный профиль
Антон Зозуля - Ваша цель вывести страницу, на которой будет только ваш товар (обычно это фильтр бренд/производитель в нужном каталоге) по СЧ запросам в ТОП. Например, вы продаете "велосипеды Елочка". В каталоге дилера велосипеды, вы выбираете Бренд - "Елочка" и должны получить страницу "велосипеды Елочка". Она должна быть на уникальном урл, иметь уникальные метатеги, лучше, чтобы был SEO-текст. После этого ваша задача получить на нее трафик по запросам: идеально: купить велосипед, цена велосипед хуже: велосипед дешево, китайский велосипед еще хуже (меньше трафика и ниже конверсия, но они есть): велосипед + [регион], велосипед + [фильтр другой]. Тут трудно без прямого влияния на содержимое страницы (метатеги и текст). ПС бренд елочка выдуман. :)
Комплексный аудит от А до Я: анализируем интернет-магазин напольных покрытий и межкомнатных дверей
Ivan Kutas
1
комментарий
0
читателей
Полный профиль
Ivan Kutas - Иногда сайты выгружают данные из GA в SimilarWeb. В Казахстане некоторые крупные новостники регулярно это делают.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
285
Комментариев
262
Комментариев
212
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
123
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
71
Комментариев
67
Комментариев
60
Комментариев
55
Комментариев
52
Комментариев
50
Комментариев
45
Комментариев
44

Отправьте отзыв!
Отправьте отзыв!