Страницы категорий: показывайте дополнительную информацию при наведении курсора (76% этого не делают)

29 декабря 2015

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

Наши недавние юзабилити-тесты и сравнительный анализ показывают, что 46 % топовых американских интернет-магазинов отображают слишком мало информации на странице с карточками товара. Это не позволяет посетителям достоверно оценить, достоин ли какой-нибудь товар подробного изучения. 64 % выдают информацию настолько разнородно, что даже простейшее сравнение одного объекта с другим становится невозможным. А 32 % сайтов, продающих товары, которые должны привлекать своим внешним видом, используют миниатюры, недостаточные по размеру для большинства пользователей.

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

Демонстрация дополнительных характеристик товара уменьшает время, потраченное на бесполезные товары, и увеличивает время, проведенное за изучением подходящих товаров. В результате это дает больше успешных сделок в интернет-магазинах, где был внедрен такой дизайн. Очевидно, что это выгодно и для пользователей, и для бизнеса. Тем не менее, наши сравнительные юзабилити-тесты показывают, что всего 6 % коммерческих сайтов отображают дополнительную текстовую информацию, и лишь 18 % предоставляют дополнительные изображения. Другими словами, 76 % коммерческих сайтов не используют этот мощный прием.

В данной статье мы поделимся результатами юзабилити-тестов из нашего исследования о страницах категории. Мы рассмотрим некоторые проблемы юзабилити, которые, как оказалось, помогает решить вывод дополнительной информации при наведении, выделим пять вариантов реализации, которые хорошо зарекомендовали себя во время тестов и, наконец, обсудим, что стоит делать с мобильными телефонами и планшетами, ведь состояние «при наведении курсора» на них отсутствует.

Дизайн списка продукции — это компромисс

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

Недостаточное количество информации повышает вероятность того, что пользователь пропустит релевантный товар, а ее избыточное количество усложнит быстрый просмотр и может сделать страницу устрашающей. Здесь применим принцип не столько «лучше меньше, да лучше», сколько «в самый раз — то, что надо».

Это снимок экрана, сделанный во время сеанса тестирования сайта Macy’s: респондент пришла в замешательство, поскольку не могла увидеть только одежду (т.е. без моделей). Она чувствовала, что модели отвлекают ее от самой одежды и мешают изучать товары. Ей пришлось многократно открывать карточки товаров, которые она тут же отбраковывала, как только видела изображения, на которых был представлен только сам товар.

И во время юзабилити-тестов, и во время сравнительного анализа мы видим, что большинство сайтов придерживается «опрятного» дизайна товаров в списке. Беда в том, что это часто приводит к слишком малому количеству доступной информации. Это классический случай ложной простоты, так как на самом деле пользователю становится сложнее решить, какой товар стоит изучить.

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

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

Эта страница продукции сайта Rakuten содержит чрезмерно увеличенные блоки товаров с огромным количеством деталей и повторяющейся информацией, что усложняет беглый просмотр.

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

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

Показывайте дополнительные изображения и информацию при наведении курсора

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

Заметьте, как ИКЕА открывает дополнительные характеристики и фотографии, обеспечивая пользователя информацией и не перегружая витрину товаров (т.е. все блоки по умолчанию выглядят очень просто, содержат только превью, цену и название или тип товара).

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

Мы можем угодить обеим сторонам. Сперва покупатель видит удобный и совсем не устрашающий список товаров. И, поскольку дополнительные характеристики доступны сразу в списке, ему не нужно перескакивать туда и обратно между витриной товаров и бесчисленными карточками просто для того, чтобы понять какие из объектов соответствуют его потребностям.

Но какую информацию и изображения стоит разместить в изначальном состоянии, а что стоит показывать при наведении курсора?

Пять типов информации, которую стоит показать при наведении курсора

1Визуально привлекательные товары

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

«Это здорово. Иногда сложно представить, как все будет выглядеть на человеке» — так респондент прокомментировала страницу сайта H&M, на которой куртки по умолчанию показаны на белом фоне, но при наведении курсора появляется «контекстная» фотография, где модель демонстрирует куртку.

«Вырезанные» фотографии удобны для сравнения товаров друг с другом, в то время как «контекстное» изображение продает эстетику и настроение объекта, стиль жизни, который с этим товар ассоциируется. Одновременное наличие этих типов фото на странице категории, как например на сайте Crate & Barrel, очень результативно проявило себя во время тестирования сайтов, продающих товары, которые должны цеплять глаз.

Однозначного лидера нет: тесты не дали нам однозначного доказательства в пользу одной из двух версий изображений. В зависимости от контекста (дизайна сайта, характеристик товара) стоит показывать в начальном состоянии либо строгую, либо контекстную фотографию. Так что позаботьтесь о том, чтобы все товары в списке на странице содержали либо «вырезанную», либо «контекстную» фотографию. Используйте второй тип фото для наведения курсора — но никогда не смешивайте типы фотографий на странице, так как непоследовательность вызывала сильное раздражение у респондентов.

2Текстовая информация о товаре

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

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

ИКЕА прекрасно проявила себя во время тестирования. Здесь одновременно показываются как дополнительные характеристики, например физические размеры, так и добавочные изображения вариантов товара.

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

3Варианты товара

Если в наличии есть несколько видов товара, например — разные цвета, материалы, рисунки, размеры или стили, мы настоятельно рекомендуем указать на это пользователю в изначальном состоянии страницы так, чтобы он понял, что может найти различные варианты объекта на карточке товара. Часто лучше всего указать информацию вроде «доступно в 6 размерах» или обозначить все возможные цвета маркерами. Но можно дополнительно использовать всплывающую подсказку о том, какие возможности существуют.

Если есть несколько вариантов внешнего вида, можно показать их на превью. Это даст пользователю гораздо лучшее понимание того, что из себя представляют альтернативы. Это может быть критичным для товаров с существенными различиями в вариантах в момент, когда покупатель оценивает товар как ненужный или наоборот — достойный дальнейшего изучения.

Если есть текстовая информация о различиях, то при наведении курсора стоит указывать ее: «Есть узкая, очень узкая, обычная, свободная посадка, с высокой талией, с низкой талией».

4Повторяющиеся элементы списка

Некоторые элементы страницы категории являются идеальными кандидатами для вынесения в состояние «при наведении». Сюда можно отнести такие повторяющиеся кнопки как «Добавить в корзину» и «Сравнить товары», ведь в конце концов, пользователь не может нажать на две кнопки одновременно. Показ подобных элементов при наведении курсор поможет снизить количество визуального шума без потерь в функциональности страницы.

Сайт компании Gilt показывает повторяющуюся кнопку «Добавить в корзину» только при наведении курсора. Постоянное отображение подобных элементов может значительно перегрузить интерфейс и сместить внимание с важной информации о продукте. Заметьте, например, как много места остается для превью, когда кнопка скрыта до наведения курсора.

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

5Подчеркивание совместимости

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

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

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

Испытуемый искал «сумку для ноутбука» на eBags. Однако он не сразу понял, почему данные товары были показаны как подходящие. Только при изучении карточки товара можно было увидеть отделение для ноутбука, что приводило к постоянному переключению по страницам. Такие изображения были бы идеальны в роли дополнительного превью. Более того, после завершения тестов eBags применил это на практике.

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

Не заходите слишком далеко

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

Иногда, особенно для визуально привлекательных товаров, так и хочется вынести практически весь текст в состояние «при наведении». Но тесты показали, что это может привести к серьезным проблемам в юзабилити. Если базовая информация о продуктах изначально скрыта, пользователям становится трудно окинуть взглядом страницу и оценить полезность каждого товара.

Сайт компании Ann Taylor пошел на крайние меры, спрятав всю текстовую информацию о товаре (включая цену!) из начального состояния страницы, и показывает ее только при наведении.

Если существенно важные свойства товара постоянно видны на странице, пользователь может бегло просмотреть ее и выполнить простейшие сравнения. А если скрыть, например, цену — как второстепенную информацию о товаре, пользователю придется наводить курсор на каждый товар в списке, чтобы узнать цены и запоминать местоположение всех объектов, которые вызвали хоть малейший интерес.

Так что насчет сенсорных устройств (смартфонов, планшетов и так далее)?

На сенсорных устройствах состоянии «при наведении» отсутствует. Так что же нам делать в этом случае?

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

По сути это возвращает нас к принципу «не заходить слишком далеко». Но обязательно удостоверьтесь, что в состояние «при наведении» вы выносите именно вторичную информацию, а в списке на странице остаются основные сведения.

Базовые данные должны быть постоянно видны на странице списка, иначе прием с наведением причинит больше вреда, чем пользы. Следовательно, дополнительно появляющаяся информация должна быть «бонусом», который предоставит пользователю еще больше сведений о товаре, который будет существенной помощью для быстрого поиска.

Итак, возвращаясь к дизайну для мобильных устройств, попытка отображения этого бонусного контента приводит к двум проблемам:

· Показ всех сведений в начальном состоянии страницы. Это окончательно лишит пользователя возможности быстрого просмотра списка, что и так тяжело сделать на небольших экранах. Показ информации, которая «может пригодиться», серьезно увеличит блоки с товарами, и продуктов на экране поместится слишком мало. Тесты показали, что навигация по сайту затруднялась, если один блок с товаром занимал 50 и более процентов высоты экрана.

· Отображение при нажатии. Альтернативное решение, которое так же плохо работает, — это вызов состояния «при наведении» по первому нажатию. Это разрушает представление пользователя о том, как список продукции работает — покупатель ожидает, что при нажатии перейдет на карточку товара. По сути это вариант окна быстрого просмотра и он сталкивается с точно такими же проблемами: чрезмерное усложнение принципов взаимодействия со страницей и областями нажатия в блоках товаров.

Вторичная информация должна восприниматься как метод прогрессивного джипега по отношению к ячейке с товаром. На устройствах с доступным состоянием наведения курсора пользователи взаимодействуют с интерфейсом, который показывает дополнительную информацию. На устройствах, где это недоступно (нет состояния «при наведения» и экраны малы по размеру) мы удаляем дополнительный информационный слой — то есть нажатие на блок с продуктом перенесет нас на карточку товара.

Вывод: отображайте дополнительную информацию при наведении курсора

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

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

Второстепенная информация при наведении может быть особенно полезна для:

  1. Визуально привлекательных товаров. Подумайте над
  2. тем, чтобы использовать и «вырезанное» превью, и фото «в контексте», так как это поможет пользователю одновременно сравнить товары и получить визуальное впечатление от них. Но будьте внимательны: соблюдайте постоянство в том, какой из этих двух вариантов изображений вы используете для первоначального состояния.Товаров, для которых важны характеристики. Можно отображать дополнительную текстовую информацию, чтобы дать более полное представление о товаре. Как правило, это особенности товара, материалы и размеры, а не такая базовая информация как фирма-производитель, тип товара и цена, которые скорее всего уже будут в состоянии по умолчанию.
  3. Вариантов товара. Если у объекта есть несколько вариаций, подумайте о том, чтобы показать их. Особенно важен различный внешний вид. Пользователи могут проигнорировать товар, если доступно будет только одно изображение.
  4. Повторяющихся характеристик. В дополнительный слой стоит перенести элементы, которые повторяются для всех товаров, например «Добавить в корзину», «Сохранить в список желаний», «Сравнить товары» и так далее. Это может существенно улучшить взаимодействие со страницей категории.
  5. Превью совместимости. Подумайте о том, чтобы добавить превью с крупным планом, отображающим возможности совместимости для товаров, зависимых от нее.

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

Редактор: Катерина Ерошина.

Автор: Кристиан Холст (Christian Holst), перевод: Astra Media Group

Оригинал: http://baymard.com/blog/secondary-hover-information