Специалисты из Baymard University изучили разные реализации автозаполнения поиска на ecommerce-проектах и выявили среди них те паттерны, которые работают лучше всего:
-
ограниченное число предложений;
-
отсутствие полос прокрутки;
-
различные уточняющие метки;
-
перенос текста;
-
наглядная разница в вариантах;
-
акцент на том, что интересует пользователя;
-
визуальная глубина;
-
минимум внешних элементов.
1. Ограниченное число предложений
Список предложений должен быть ограниченным. Иначе плашка с вариантами закрывает всю область просмотра — из-за этого неудобно пользоваться сайтом и управлять поиском в целом. Специалисты Baymard University отмечают, что оптимальное количество — 10 предложений. Если их больше, покупатель либо игнорирует все, либо тратит слишком много времени на то, чтобы их изучить. В мобильных версиях интернет-магазинов стоит предлагать еще меньше вариантов, чем на десктопах — от четырех до восьми.
На примере ниже при поиске отображается три варианта, у которых больше всего отзывов. Так пользователь видит сайт, а поле автозаполнения не закрывает важные элементы интерфейса. Если нажать на значок лупы, можно увидеть все остальные доступные варианты по запросу.
Здесь предложения автозаполнения закрывают всю карточку товара — пользователь не видит ничего, кроме выпадающего поля. К тому же, вариантов слишком много, и все они различаются лишь по цвету модели.
2. Никаких полос прокрутки
Вместо полос прокрутки лучше просто ограничить само поле с вариантами автозаполнения, как сказано в предыдущем пункте. Встроенные скроллбары могут вызывать у пользователей трудности при работе с сайтом — особенно, если при прокрутке скролл происходит по самому сайту, а не только по области поиска.
На Wildberries ограничено число предложений автозаполнения, и все они структурированы по разделам, к которым относятся. Сначала отображаются популярные запросы, а за ними — категории, которые визуально оформлены иначе.
При поиске товара на Ozon выдача предлагает слишком много предложений, и есть полоса прокрутки. В поле собраны и популярные запросы, и категории товаров, и конкретные бренды и товары. Все это усложняет поиск — пользователь может запутаться.
3. Больше уточняющих меток
Хотя большинство людей уже интуитивно знают, как пользоваться поиском, ваша аудитория может включать и менее опытных веб-пользователей. Для них стоит добавить метки, которые помогут отличать одно от другого: например, предлагаемые варианты от категорий товаров и страниц конкретных брендов.
На сайте IKEA разработана система уточняющих меток. Популярные запросы на сайте отмечены значком лупы, категории товаров — отдельным символом в виде квадрата, а конкретные предложения товаров сразу отображаются с фотографиями.
На сайте Всеинструменты.ру нет никаких уточняющих меток в поле поиска. Категории товаров, отдельные продукты и даже цены оформлены в едином стиле. Это неудобно для покупателя — он просто не поймет, в чем разница, потому что визуально все предложения идентичны.
На сайте М.Видео та же проблема — хотя здесь запрос пользователя и предложения сайта отличаются жирным шрифтом. Тем не менее, для пользователя неочевидно, куда он попадет, если кликнет на любой вариант.
4. Перенос текста
Когда варианты автозаполнения обрезаются на мобильных устройствах (например, в виде многоточия), пользователи не могут просмотреть их целиком. Вместо этого можно использовать перенос, чтобы пользователь прочел весь текст и понял, что ему предлагают.
На этих сайтах длинные запросы переносятся на следующую строку — читать их удобно, и пользователь может полностью посмотреть название товара.
В мобильной версии сайта Ситилинк нет переноса по словам, из-за чего покупатель не видит половину запроса и не может узнать, что ему предлагают.
5. Наглядная разница в вариантах
Стилизируйте автозаполнение в поиске на сайте так, чтобы по внешнему виду вариантов было понятно, что предлагает сайт, а что пользователь уже ввел сам. Самый простой и удобный вариант — жирным шрифтом обозначить ту часть, которую предлагает сайт, а обычным оставить то, что напечатал покупатель (или наоборот).
На сайте DNS автозаполнение выделено жирным шрифтом — так пользователь понимает, что ввел он, а что ему предлагает сайт.
Яндекс Маркет никак не выделяет то, что предлагает сайт, из-за чего пользователь может не сразу понять, в чем разница между вариантами, поскольку все они похожи между собой визуально.
6. Акцент на том, что интересует пользователя
Когда предложение, на которое пользователь навел курсор, выделяется визуально, это упрощает взаимодействие с сайтом. Кроме этого, многие операционные системы и крупные сайты приучили людей к тому, что автозаполнением можно управлять с помощью клавиатуры. Поэтому важно поддерживать и такую навигацию — стрелки вверх и вниз должны перемещать по вариантам, а клавиша Enter перенаправлять на страницу предложения, на котором курсор стоит в данный момент. В идеале список еще «возвращается» к началу, когда пользователь доходит до конца.
Предложение, выделенное голубым цветом, — то, на котором пользователь остановился. Перемещаться по всему полю можно с помощью клавиш на клавиатуре.
На сайте IKEA вариант, на который наведен курсор, подчеркивается еле заметной линией снизу. Это может быть не очень удобно для пользователя, когда он выбирает вариант.
7. Визуальная глубина
Визуальные элементы на веб-странице постоянно конкурируют за внимание пользователя. Когда пользователь ищет товар, остальную область лучше затемнять, заостряя внимание именно на поиске. Это минимизирует риск, что пользователь отвлечется.
Яндекс Маркет слегка затемняет главную страницу, когда пользователь вводит запрос. Это создает акцент на поле ввода и предлагаемых вариантах.
На сайте бренда косметики Mi&ko затемняется вся область сайта, кроме поиска. Так пользователь концентрируется только на товаре и не отвлекается на другие элементы сайта.
На сайте Офисмаг затемнения нет — поле предлагаемых вариантов никак не отделяется от всего сайта, из-за чего возникает визуальный шум.
8. Минимум внешних элементов
Если автозаполнение предлагает множество элементов из разных разделов, это может немного сбить с толку. Отвлекающие элементы лучше свести к минимуму, чтобы пользователь мог сосредоточиться на автозаполнении и изучить товар. Особенно это важно для мобильных версий сайтов, где место итак сильно ограничено размерами устройств.
У DNS очень простой поиск — все варианты автозаполнения текстовые, выделяются только цветом и жирным шрифтом, но можно было бы добавить уточняющие метки.
На сайте Ситилинк автозаполнение предлагает и текстовые варианты, и предложения конкретных товаров с фотографиями. При этом текстовые варианты практически не представлены. Пользователю может быть не сразу понятно, в чем разница между этими разделами.
Кстати, еще по теме: эксперты из Baymard University проводили юзабилити-тестирование самых крупных ecommerce-площадок и на основе этого представили отчет о том, как пользователи строят поисковые запросы, когда ищут товар. Мы перевели эту работу и адаптировали ее под российский ecommerce-рынок.