Наши недавние юзабилити-тесты и сравнительный анализ показывают, что 46 % топовых американских интернет-магазинов отображают слишком мало информации на странице с карточками товара. Это не позволяет посетителям достоверно оценить, достоин ли какой-нибудь товар подробного изучения. 64 % выдают информацию настолько разнородно, что даже простейшее сравнение одного объекта с другим становится невозможным. А 32 % сайтов, продающих товары, которые должны привлекать своим внешним видом, используют миниатюры, недостаточные по размеру для большинства пользователей.
Лишь немногие сайты решают эти проблемы с помощью простого приема: появление нужной информации происходит при наведении курсора на конкретный товар. При проведении нашего исследования 19 ведущих интернет-магазинов мы заметили, что этот добавочный слой с текстом или изображениями значительно снижает перепрыгивание по сайту, когда пользователь переключается со страницы категории на карточку товаров и обратно только для того, чтобы исключить неподходящие товары.
Демонстрация дополнительных характеристик товара уменьшает время, потраченное на бесполезные товары, и увеличивает время, проведенное за изучением подходящих товаров. В результате это дает больше успешных сделок в интернет-магазинах, где был внедрен такой дизайн. Очевидно, что это выгодно и для пользователей, и для бизнеса. Тем не менее, наши сравнительные юзабилити-тесты показывают, что всего 6 % коммерческих сайтов отображают дополнительную текстовую информацию, и лишь 18 % предоставляют дополнительные изображения. Другими словами, 76 % коммерческих сайтов не используют этот мощный прием.
В данной статье мы поделимся результатами юзабилити-тестов из нашего исследования о страницах категории. Мы рассмотрим некоторые проблемы юзабилити, которые, как оказалось, помогает решить вывод дополнительной информации при наведении, выделим пять вариантов реализации, которые хорошо зарекомендовали себя во время тестов и, наконец, обсудим, что стоит делать с мобильными телефонами и планшетами, ведь состояние «при наведении курсора» на них отсутствует.
Результаты нашего юзабилити-тестирования показали, что список продукции — это, по существу, компромисс. Каждый товар должен отображать достаточное количество информации — чтобы пользователь смог должным образом просмотреть и сравнить товары (чтобы определить, какие товары ему подходят). В то же время страница не должна быть перегруженной, так как это будет мешать покупателям отбирать подходящие товары.
Недостаточное количество информации повышает вероятность того, что пользователь пропустит релевантный товар, а ее избыточное количество усложнит быстрый просмотр и может сделать страницу устрашающей. Здесь применим принцип не столько «лучше меньше, да лучше», сколько «в самый раз — то, что надо».
И во время юзабилити-тестов, и во время сравнительного анализа мы видим, что большинство сайтов придерживается «опрятного» дизайна товаров в списке. Беда в том, что это часто приводит к слишком малому количеству доступной информации. Это классический случай ложной простоты, так как на самом деле пользователю становится сложнее решить, какой товар стоит изучить.
Во время тестов мы заметили, что ограниченное количество визуальной или текстовой информации о продукции приводит к активному переключению по страницам. Пользователи перепрыгивали со страницы категории на карточку товара и обратно, чтобы узнать самую основную информацию о товаре (типы продукции, ключевые особенности или внешний вид). Во время этого утомительного процесса испытуемые часто задерживаются на странице товара несколько секунд, прежде чем осознают, что этот конкретный предмет совершенно не подходит.
На практике это приводит к тому, что пользователи тратят наибольшую часть времени на совершенно бесполезные товары и пропускают то, что нужно. Неудивительно, что после 3-15 минут поиска иголки в стоге сена наступало утомление, и многие из испытуемых просто сдавались и покидали сайт.
Проблема отображения избыточного количества информации на странице категории встречается намного реже, но также вызывает трудности. Чрезмерное количество деталей перегружает страницу, пользователям сложнее заметить подходящие варианты, потому что становится нелегко быстро просмотреть все содержимое.
В итоге: наличие слишком большого объема текста или изображений непосредственно в списке может загромождать страницу, но в то же время дополнительная информация предоставляет полезные данные о товаре, необходимые для того, чтобы найти нужное. Как мы упоминали в начале статьи — это компромисс. К счастью, показ дополнительной информации при наведении курсора помогает изящно достичь его.
Во время тестов испытуемым было намного легче просматривать и отбирать подходящие товары из списка, если сайты показывали альтернативные варианты при наведении.
Большое преимущество отображения дополнительной информации при наведении курсора в том, что оно позволяет делать состояние по умолчанию достаточно простым. Первоначальный вид страницы может быть спроектирован для оптимального быстрого просмотра (что позволит пользователю бегло пробежаться по списку), а состояние при наведении курсора поможет покупателям изучить и выделить нужные товары, которые показались подходящими при первом просмотре.
Мы можем угодить обеим сторонам. Сперва покупатель видит удобный и совсем не устрашающий список товаров. И, поскольку дополнительные характеристики доступны сразу в списке, ему не нужно перескакивать туда и обратно между витриной товаров и бесчисленными карточками просто для того, чтобы понять какие из объектов соответствуют его потребностям.
Но какую информацию и изображения стоит разместить в изначальном состоянии, а что стоит показывать при наведении курсора?
Читая эту статью, вы наверняка уже убедились, насколько специфична разработка конкретно интернет-магазинов. Хотите быть уверенными, что при реализации вашего проекта будут учтены все важные детали и нюансы – обратитесь к проверенным профессионалам. Где их найти? Например, в рейтинге разработчиков интернет-магазинов.
Здесь вы можете выбрать разработчика, учитывая не только его географическое месторасположение или уровень цен, но и опыт реализации интернет-магазинов по конкретной тематике.
В отраслях, где товар визуально привлекателен — таких как одежда и обустройство дома — лучше всего себя проявила комбинация из изображений товара «в контексте» и «вырезанной» версии, показывающей товар на пустом фоне. Эта комбинация позволила респондентам легко представить, как вещь будет выглядеть в реальности, и в то же время позволила без помех рассмотреть все детали.
Однозначного лидера нет: тесты не дали нам однозначного доказательства в пользу одной из двух версий изображений. В зависимости от контекста (дизайна сайта, характеристик товара) стоит показывать в начальном состоянии либо строгую, либо контекстную фотографию. Так что позаботьтесь о том, чтобы все товары в списке на странице содержали либо «вырезанную», либо «контекстную» фотографию. Используйте второй тип фото для наведения курсора — но никогда не смешивайте типы фотографий на странице, так как непоследовательность вызывала сильное раздражение у респондентов.
Использование вспомогательной текстовой информации при наведении курсора также значительно улучшало использование страницы категории. В частности, у товаров, для которых важнее характеристики, чем внешний вид, часто бывают длинные списки ключевых параметров и особенностей, которые можно показать во вторую очередь. Намного проще достигнуть относительно «чистого» изначального вида страницы, если второстепенная информация спрятана в состояние «при наведении».
Отображение второстепенной текстовой информации — это прекрасный способ достигнуть баланса между простым строгим дизайном и предоставлением пользователю большего количества информации, прежде чем принять решение о посещении карточки товара.
Если в наличии есть несколько видов товара, например — разные цвета, материалы, рисунки, размеры или стили, мы настоятельно рекомендуем указать на это пользователю в изначальном состоянии страницы так, чтобы он понял, что может найти различные варианты объекта на карточке товара. Часто лучше всего указать информацию вроде «доступно в 6 размерах» или обозначить все возможные цвета маркерами. Но можно дополнительно использовать всплывающую подсказку о том, какие возможности существуют.
Если есть несколько вариантов внешнего вида, можно показать их на превью. Это даст пользователю гораздо лучшее понимание того, что из себя представляют альтернативы. Это может быть критичным для товаров с существенными различиями в вариантах в момент, когда покупатель оценивает товар как ненужный или наоборот — достойный дальнейшего изучения.
Если есть текстовая информация о различиях, то при наведении курсора стоит указывать ее: «Есть узкая, очень узкая, обычная, свободная посадка, с высокой талией, с низкой талией».
Некоторые элементы страницы категории являются идеальными кандидатами для вынесения в состояние «при наведении». Сюда можно отнести такие повторяющиеся кнопки как «Добавить в корзину» и «Сравнить товары», ведь в конце концов, пользователь не может нажать на две кнопки одновременно. Показ подобных элементов при наведении курсор поможет снизить количество визуального шума без потерь в функциональности страницы.
Можно поспорить, что такой прием снижает понятность использования. Однако во время тестов мы такой проблемы не заметили. Более того, кажется логичными, что пользователь быстро замечает, как эти элементы появляются при наведении на каждый товар — все происходит естественно, когда пользователь открывает и изучает страницу категории.
Мы несколько удивились, когда обнаружили, что для определенных отраслей, где важны потребительские характеристики, добавление еще одного превью, подчеркивающего совместимость товара, может улучшить использование страницы категории. Например, во время тестирования испытуемые интересовались спальными мешками на основе того, насколько теплыми они выглядели, и изучали адаптеры для ноутбуков, которые выглядели так, как будто подошли бы к их ноутбуку.
Хорошим примером являются сумки для фотоаппаратов, для которых стоит показывать фотографии в закрытом виде (чтобы показать эстетику товара), и изображения открытой сумки, внутри которой лежит камера (то есть превью, подчеркивающие совместимость товара с каким-то другим товаром). Это дает пользователям представление о целевом использовании объекта.
Даже товары с ограниченной совместимостью могут выиграть от добавления дополнительного визуального слоя, так как пользователи часто пытаются определить возможность совместного использования, основываясь на внешнем виде. Крупные изображения разъемов, портов и соединений могут здорово помочь пользователям, которые не знают точных технических названий элементов, которые им нужны. Дополнительные превью могут убедить их в совместимости. Систематичное включение и маркировка превью совместимости может стать частью большой базы совместимости.
Не смотря на доказательства того, что подобные приемы существенно помогают пользователям, а страницы категории без такого функционала (сейчас по нашей оценке это 76 % сайтов) в целом приводят к излишнему количеству переходов по сайту туда и обратно, использовать этот функционал стоит обдуманно.
Иногда, особенно для визуально привлекательных товаров, так и хочется вынести практически весь текст в состояние «при наведении». Но тесты показали, что это может привести к серьезным проблемам в юзабилити. Если базовая информация о продуктах изначально скрыта, пользователям становится трудно окинуть взглядом страницу и оценить полезность каждого товара.
Если существенно важные свойства товара постоянно видны на странице, пользователь может бегло просмотреть ее и выполнить простейшие сравнения. А если скрыть, например, цену — как второстепенную информацию о товаре, пользователю придется наводить курсор на каждый товар в списке, чтобы узнать цены и запоминать местоположение всех объектов, которые вызвали хоть малейший интерес.
На сенсорных устройствах состоянии «при наведении» отсутствует. Так что же нам делать в этом случае?
Результаты наших тестов интернет-сайтов и страниц категории на мобильных устройствах наводят на мысль, что в данном случае дополнительную информацию просто не надо отображать в категории и показывать ее уже на карточке товара.
По сути это возвращает нас к принципу «не заходить слишком далеко». Но обязательно удостоверьтесь, что в состояние «при наведении» вы выносите именно вторичную информацию, а в списке на странице остаются основные сведения.
Базовые данные должны быть постоянно видны на странице списка, иначе прием с наведением причинит больше вреда, чем пользы. Следовательно, дополнительно появляющаяся информация должна быть «бонусом», который предоставит пользователю еще больше сведений о товаре, который будет существенной помощью для быстрого поиска.
Итак, возвращаясь к дизайну для мобильных устройств, попытка отображения этого бонусного контента приводит к двум проблемам:
· Показ всех сведений в начальном состоянии страницы. Это окончательно лишит пользователя возможности быстрого просмотра списка, что и так тяжело сделать на небольших экранах. Показ информации, которая «может пригодиться», серьезно увеличит блоки с товарами, и продуктов на экране поместится слишком мало. Тесты показали, что навигация по сайту затруднялась, если один блок с товаром занимал 50 и более процентов высоты экрана.
· Отображение при нажатии. Альтернативное решение, которое так же плохо работает, — это вызов состояния «при наведении» по первому нажатию. Это разрушает представление пользователя о том, как список продукции работает — покупатель ожидает, что при нажатии перейдет на карточку товара. По сути это вариант окна быстрого просмотра и он сталкивается с точно такими же проблемами: чрезмерное усложнение принципов взаимодействия со страницей и областями нажатия в блоках товаров.
Вторичная информация должна восприниматься как метод прогрессивного джипега по отношению к ячейке с товаром. На устройствах с доступным состоянием наведения курсора пользователи взаимодействуют с интерфейсом, который показывает дополнительную информацию. На устройствах, где это недоступно (нет состояния «при наведения» и экраны малы по размеру) мы удаляем дополнительный информационный слой — то есть нажатие на блок с продуктом перенесет нас на карточку товара.
Наличие дополнительного слоя с текстовой или визуальной информацией, доступной при наведении курсора, может значительно улучшить способность пользователя просматривать и оценивать товары в списке.
Во время тестирования этот слой помогал респондентам тратить меньше времени на переходы по страницам. Это время в свою очередь было потрачено на изучение страниц с подходящими товарами, и привело к повышению количества удачных сделок. Как ни прискорбно, наш сравнительный анализ показывает, что только 6 % интернет-магазинов отображают добавочную текстовую информацию при наведении курсора и 18 % показывают дополнительные изображения.
Второстепенная информация при наведении может быть особенно полезна для:
Визуально привлекательных товаров. Подумайте над
тем, чтобы использовать и «вырезанное» превью, и фото «в контексте», так как это поможет пользователю одновременно сравнить товары и получить визуальное впечатление от них. Но будьте внимательны: соблюдайте постоянство в том, какой из этих двух вариантов изображений вы используете для первоначального состояния.Товаров, для которых важны характеристики. Можно отображать дополнительную текстовую информацию, чтобы дать более полное представление о товаре. Как правило, это особенности товара, материалы и размеры, а не такая базовая информация как фирма-производитель, тип товара и цена, которые скорее всего уже будут в состоянии по умолчанию.
Вариантов товара. Если у объекта есть несколько вариаций, подумайте о том, чтобы показать их. Особенно важен различный внешний вид. Пользователи могут проигнорировать товар, если доступно будет только одно изображение.
Повторяющихся характеристик. В дополнительный слой стоит перенести элементы, которые повторяются для всех товаров, например «Добавить в корзину», «Сохранить в список желаний», «Сравнить товары» и так далее. Это может существенно улучшить взаимодействие со страницей категории.
Превью совместимости. Подумайте о том, чтобы добавить превью с крупным планом, отображающим возможности совместимости для товаров, зависимых от нее.
И еще раз: помните, что выносить в дополнительный слой нужно только вторичную информацию. Если зайти слишком далеко, это принесет больше вреда, чем пользы. И информация будет недоступна на мобильных устройствах. Воспринимайте это как бонус, прогрессивное улучшение для устройств, где это можно достойно внедрить.
Редактор: Катерина Ерошина.
Оригинал: http://baymard.com/blog/secondary-hover-information
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.