Лучшие практики проектирования UX для предложений автозаполнения поисковой строки
Функция автозаполнения поисковой строки, или предиктивный поиск, стала неотъемлемой частью современных интерфейсов, особенно в сфере электронной коммерции. В этой статье мы рассмотрим лучшие UX-практики для проектирования автозаполнения, которые подходят для настольных компьютеров и мобильных устройств.
3 лучших практики UX-автозаполнения, не зависящие от платформы (применимо как к мобильным устройствам, так и к настольным компьютерам)
1. Сделайте список автозаполнения управляемым
Один из ключевых элементов удобного автозаполнения — это баланс между количеством предложений и их структурой.
Проблема:
- Множество элементов страницы, в том числе с акцентными цветами, конкурируют за внимание пользователя.
Удачные решения:
- Разделение подсказок по логическим блокам. Например, в результатах можно выделить разделы, бренды и конкретные товары. Это помогает пользователю быстро понять, в каком направлении двигаться.
- Навигация по категориям. Интуитивно понятная структура делает поиск более удобным.
- На мобильных устройствах также автозаполнение должно быть адаптировано: нельзя допускать отсутствие подсказок в компактной версии сайта.
- Если не сосредоточиться должным образом, конец списка поисковых подсказок может быть неочевиден — слишком яркое окружение отвлекает внимание пользователя.
Удачное решение:
- Цветовое выделение совпадающей части текста. Это улучшает читабельность и подчеркивает релевантность предложений.
Лучшие практики автозаполнения UX для настольных компьютеров
1. Уменьшите визуальный шум.
Рекламные блоки и другие элементы интерфейса не должны отвлекать внимание пользователя.
Проблема:
- Множество элементов страницы, в том числе с акцентными цветами, конкурируют за внимание пользователя.
- Если не сосредоточиться должным образом, конец списка поисковых подсказок может быть неочевиден — слишком яркое окружение отвлекает внимание пользователя.
Удачное решение:
- временное затемнение остальной части экрана при активации поисковой строки.
Лучшие практики автозаполнения UX для мобильных устройств
Подобно проблемам, характерным для настольных компьютеров, перечисленные ниже проблемы наблюдались в основном или исключительно во время тестирования мобильных устройств, хотя некоторые из них также могут возникнуть и на настольных компьютерах.
1. Уменьшите визуальную конкуренцию.
На маленьком экране важен каждый элемент. Необходимо минимизировать отвлекающие факторы и выделить подсказки.
Проблема:
- Слишком маленький кегль, слабое разделение по логическим блокам. В итоге пользователю сложно попасть куда он планировал.
Удачное решение:
- Наглядное разделение логических блоков поиска, а также подсветка части словоформы, выбранный пользователем.
При проектировании функции автозаполнения для настольных компьютеров и мобильных устройств необходимо учитывать множество нюансов. Это обусловлено интерактивной и кратковременной природой таких функций, которые часто создают сложные сценарии взаимодействия с пользователем.
Хотя дизайнеры имеют некоторую свободу в выборе эстетики автозаполнения, важно строго следовать передовым практикам. Поскольку даже незначительные отклонения могут запутать пользователей, особенно важно сделать взаимодействие максимально понятным и интуитивным.
Основные рекомендации для дизайна автозаполнения
Для всех платформ (настольных и мобильных):
- Сохраняйте список автозаполнения управляемым.
- Разделяйте предложения по категориям и запросам.
- Четко выделяйте текст предполагаемого запроса.
Для настольных компьютеров:
- Избегайте использования полос прокрутки в списке автозаполнения.
- Минимизируйте визуальный шум.
- Подсвечивайте активную подсказку и обеспечьте поддержку навигации с клавиатуры.
- Разработайте функцию автозаполнения так, чтобы она имела визуальную глубину.
Для мобильных устройств:
- Сведите к минимуму визуальную конкуренцию с окружающими элементами интерфейса.
- Обеспечьте достаточно пространства для отображения предложений.
Несмотря на эти четкие рекомендации, анализ показал, что лишь около 19 % сайтов полностью соответствуют этим стандартам. Это означает, что подавляющее большинство пользователей сталкиваются с неоптимальным опытом работы с функцией автозаполнения как на настольных устройствах, так и на мобильных.
https://baymard.com/blog/autocomplete-design
Остались вопросы?
Объясним, починим, создадим, наладим
и научим
пользоваться
-
15 лет
директор
по маркетингу -
Член совета директоров "Гильдия маркетологов"
-
58
запущенных
проектов -
Член Жюри Silver Mercury
-
Регулярный спикер конференции
-
Преподаватель MBA курсов по Digital marketing

Игорь Краснощек