Показывать дополнительную информацию о товаре при наведении на него курсора в списке товаров – это свежее решение, которое только начинает обретать популярность. Почему это важно и как правильно его реализовать, рассказывают специалисты по UX из Baymard Institute.
Наше недавнее исследование «юзабилити» топовых интернет-магазинов показало:
- 46% показывают слишком мало информации в списке товаров. Ее недостаточно для того, чтобы посетители могли принять решение: следует ли более подробно изучить определенный товар или нет.
- 64% показывают настолько разрозненную информацию в списке товаров, что невозможно даже провести приблизительное сравнение товаров.
- 32% используют слишком маленькие изображения товаров, но при этом продают товары «визуального типа» — то есть такие, внешний вид которых является критическим фактором для принятия решения о покупке.
Решением этой проблемы могут стать так называемые всплывающие подсказки – небольшие всплывающие окна, которые появляются при наведении курсора на определенный товар и в которых содержится дополнительная информация о товаре.
Мы выяснили, что такое решение позволяет посетителям сайтов легче изучать товары и избежать ненужного «прыгания» между списком товаров и карточками отдельных товаров, сравнивая товары между собой.
Использование всплывающих подсказок для товаров приводит к сокращению времени, которое посетители проводят в поисках подходящего им товара. Это отличное решение в области «юзабилити», но лишь 6% исследованных нами интернет-магазинов используют всплывающие подсказки с дополнительной информацией в списке товаров, и только 18% показывают дополнительные изображения товаров в качестве всплывающей подсказки.
Проблема информации о товаре в списке товаров
Формирование списка товаров в интернет-магазине – это решение, определяемое балансом между достаточной информацией, которую нужно выдать по каждому товару, и тем количеством товаров, которые разместятся на одном экране.
Типичный пример из нашего исследования:
Респондент искала на сайте Macy’s куртку, но ей хотелось увидеть фото товара без модели, на которую эта куртка одета. Как следствие, она постоянно открывала карточки разных товаров и тут же закрывала их, как только видела изображение товара отдельно (без модели).
В целом, наши респонденты действительно предпочитали «минималистичные» списки товаров: когда на экране присутствуют фото товаров и небольшое количество сведений о товаре. Но для них было проблемой, когда сведений о товаре было слишком мало. В этом случае респонденты через несколько минут уставали от постоянного движения между списком товаров и отдельными карточками товара и уходили с сайта.
Используйте всплывающие подсказки
Решением проблемы балансировки между желанием показать больше информации о товаре и желанием показать больше товаров на странице являются всплывающие подсказки. Показывайте в списке товаров дополнительную информацию и дополнительные изображения товара при наведении на товар курсора.
Вот пример: на сайте IKEA в списке товаров показаны только фото товара, его название, тип и цена. Но при этом всплывающая подсказка содержит полезную дополнительную информацию, дополнительные фото товара и CTА-кнопку.
Такое решение приводит к двум важным моментам:
- Посетитель сайта видит относительно простой для понимания список товаров.
- Посетителю сайта не приходится открывать каждый раз карточку товара, чтобы увидеть дополнительную информацию о нем.
5 типов информации для всплывающей подсказки
Фото товара
В тех индустриях, где решение о покупке критически зависит от внешнего вида товара, например, в категории «одежда» или «домашний декор», лучше всего работает следующее сочетание дополнительных изображений. Необходимо показать фото товара «в контексте использования», то есть одежду на человеке, или предмет интерьера в комнате, но также важно показать и фото «только товар», на пустом фоне. Такое решение позволило нашим респондентом увидеть, как будет выглядеть продукт в реальной жизни, но в тоже время – изучить его внешний вид детально, без того, чтобы отвлекаться на внешний вид модели или интерьера вокруг.
Пример из нашего исследования:
«Вот это очень удобно!» — восклицает респондент, будучи на сайте H&M: «иногда сложно представить, как модель будет выглядеть на человеке, а тут это сразу видно». В списке товаров на этом сайте представлены изображения товаров на белом фоне, а при наведении курсора появляется более крупное изображение товара на модели.
Другой пример:
Изображения типа «только товар» на пустом фоне очень хорошо работают для сравнения товаров между собой. Дополнительные изображения товара в контексте использования помогают «продать» товар, как это сделано на сайте Crate & Barrel.
Данные исследования не показали, что лучше – показывать в списке товаров фото типа «только товар», а при наведении курсора показывать фото товара в контексте использования, либо же наоборот. Но необходимо придерживаться постоянства, то есть выбрать один из этих двух сценариев и следовать ему. В тех случаях, где этого постоянства не было, наши респонденты испытывали большие трудности в работе со списком товаров.
Текстовая информация
Практически у любого товара есть дополнительные характеристики, которые важны людям, чтобы принять решение о покупке. Их тоже стоит показывать во всплывающей подсказке (см. пример сайта IKEA выше).
Это еще более важно в тех случаях, когда решение о покупке в большой степени основывается на спецификации (размер, вес, мощность, объем памяти и т. д.).
Вариации продукта
Если у продукта существуют вариации (другой цвет, материал, размер или стиль), мы рекомендуем дать информацию об этом в списке товаров. Например, если у продукта есть несколько расцветок, это может быть сделано в виде маленьких квадратов соответствующих цветов.
Всплывающая подсказка в этом случае может использоваться для того, чтобы дать более подробную информацию пользователю о существующих вариациях – например, показать фото товара всех доступных расцветок или перечислить доступные размеры.
Посмотрите правильный пример с сайта Nike: в списке товаров у каждого товара указано в скольки разных цветах он представлен, а всплывающая подсказка показывает фото товара в разных цветах.
Повторяющиеся функциональные элементы
Во всплывающую подсказку можно поместить и функциональные элементы списка товаров, такие как кнопка «Положить в корзину» или «Сравнить товары». Это позволит избежать «захламления» списка товаров кучей одинаковых кнопок.
Например, на сайте Gilt кнопка «Положить в корзину» появляется только при наведении мышью:
Моменты, связанные с совместимостью товаров
Во многих случаях ключевой момент в приобретении товара – это то, подходит ли он к другому товару. В таких случаях подобная информация также должна размещаться на всплывающих подсказках.
Обратите также внимание, что не все покупатели могут быть в курсе, что значат разные специфические термины, например, что такое Mini-DisplayPort или micro-USB. Компания Apple понимает эту проблему и размещает на всплывающих подсказках крупное изображение разъемов устройства, чтобы пользователь мог визуально определить, подойдет это к его компьютеру или нет.
Не увлекайтесь!
Хотя всплывающие подсказки значительно помогают пользователям сайта в плане «юзабилити», может возникнуть желание убрать со страницы со списком товаров всю текстовую информацию и перенести ее во всплывающую подсказку. В процессе нашего исследования, мы увидели, что такие примеры вызывают у пользователей большие проблемы: они не могут быстро оценить по списку товаров, какие товары им подходят, а какие – нет.
Вот пример неудачного решения: на сайте Ann Taylor список товаров состоит только из их изображений, и посетитель сайта не видит даже цену, пока не наведет мышь на определенный товар, и таким образом не может определить, какие из представленных товаров соответствуют его бюджету.
Как быть со смартфонами и планшетами?
У планшетов и смартфонов нет возможности навести курсор куда-либо, поэтому возникает вопрос, как реализовать всплывающее окно на этих устройствах.
Мы считаем, что для таких устройств эта функциональность не подходит в принципе. Основная информация о товаре должна быть постоянно видна в списке товаров на смартфонах/планшетах. Вся вторичная информация должна быть представлена на карточке товара.
Если попытаться включить не самую важную информацию о товарах на странице списка товаров, это приведет к «захламлению» страницы и снижению количества показанных на странице товаров.
Если попытаться реализовать всплывающую подсказку по нажатию на товар – это будет противоречить ожиданию пользователей в части того, как функционирует страница. Пользователи привыкли, что клик по товару приводит к тому, что они переходят на карточку товара. Это та «ожидаемая функциональность», которую не надо разрушать.
Сейчас в мире появились новые технологии – ForceTouch и ей подобные для смартфонов и планшетов, и, возможно, с их использованием появится возможность для реализации всплывающих подсказок на таких устройствах. Но на обычных смартфонах/планшетах всплывающие подсказки надо исключить.
В заключение отметим основные моменты для правильной реализации всплывающих подсказок в списке товаров.
- Для товаров, решение о покупке которых определяется внешним видом: очень важно показывать дополнительные фото товара, чтобы у пользователей была возможность увидеть как «товар отдельно», так и товар в контексте использования
- Для товаров, где очень важны характеристики (объем, мощность и так далее): очень важно включить подобные параметры во всплывающую подсказку
- Вариации товаров: если товар предполагает вариации (цвет, размер и т. д.), показывайте доступные вариации во всплывающей подсказке, а в списке товаров покажите сам факт наличия вариаций товара через небольшие иконки
- Вопросы совместимости: если товар выбирается по совместимости с каким-то другим, укажите эту информацию во всплывающей подсказке
- Повторяющиеся функциональные элементы: вы можете использовать всплывающую подсказку для того, чтобы перенести туда повторяющиеся элементы списка товаров, такие как кнопка «Добавить в корзину».
- Не нужно пытаться реализовать всплывающие подсказки на мобильных устройствах: этот элемент интерфейса годится для настольных ПК и ноутбуков, но не подходит для смартфонов/планшетов.
По материалам Baymard Insititute
