Лучшие практики проектирования UX для предложений автозаполнения поисковой строки

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

3 лучших практики UX-автозаполнения, не зависящие от платформы (применимо как к мобильным устройствам, так и к настольным компьютерам)

1. Сделайте список автозаполнения управляемым

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

Проблема:

• Множество элементов страницы, в том числе с акцентными цветами, конкурируют за внимание пользователя.

Удачные решения:

• Разделение подсказок по логическим блокам. Например, в результатах можно выделить разделы, бренды и конкретные товары. Это помогает пользователю быстро понять, в каком направлении двигаться.
• Навигация по категориям. Интуитивно понятная структура делает поиск более удобным.
• На мобильных устройствах также автозаполнение должно быть адаптировано: нельзя допускать отсутствие подсказок в компактной версии сайта.

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

Удачное решение:

• Цветовое выделение совпадающей части текста. Это улучшает читабельность и подчеркивает релевантность предложений.

Лучшие практики автозаполнения UX для настольных компьютеров

1. Уменьшите визуальный шум.

Рекламные блоки и другие элементы интерфейса не должны отвлекать внимание пользователя.

Проблема:

• Множество элементов страницы, в том числе с акцентными цветами, конкурируют за внимание пользователя.

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

Удачное решение:

• временное затемнение остальной части экрана при активации поисковой строки.

Лучшие практики автозаполнения UX для мобильных устройств

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

1. Уменьшите визуальную конкуренцию.

На маленьком экране важен каждый элемент. Необходимо минимизировать отвлекающие факторы и выделить подсказки.

Проблема:

• Слишком маленький кегль, слабое разделение по логическим блокам. В итоге пользователю сложно попасть куда он планировал.

Удачное решение:

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

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

Хотя дизайнеры имеют некоторую свободу в выборе эстетики автозаполнения, важно строго следовать передовым практикам. Поскольку даже незначительные отклонения могут запутать пользователей, особенно важно сделать взаимодействие максимально понятным и интуитивным.

Основные рекомендации для дизайна автозаполнения

Для всех платформ (настольных и мобильных):

1. Сохраняйте список автозаполнения управляемым.
2. Разделяйте предложения по категориям и запросам.
3. Четко выделяйте текст предполагаемого запроса.

Для настольных компьютеров:

1. Избегайте использования полос прокрутки в списке автозаполнения.
2. Минимизируйте визуальный шум.
3. Подсвечивайте активную подсказку и обеспечьте поддержку навигации с клавиатуры.
4. Разработайте функцию автозаполнения так, чтобы она имела визуальную глубину.

Для мобильных устройств:

1. Сведите к минимуму визуальную конкуренцию с окружающими элементами интерфейса.
2. Обеспечьте достаточно пространства для отображения предложений.

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

Источник: https://baymard.com/blog/autocomplete-design