Автозаполнение

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

Ограничивайте количество выдаваемых результатов. Не более 10 пунктов на десктопе и от 4 до 8 — для мобильных устройств.

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

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

Никакой внутренней прокрутки. Смотрите пункт 1.

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

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

Не забывайте про состояния наведения для пунктов подсказок.

Когда автозаполнение активно, затемните весь сайт. Так вы сфокусируете внимание пользователя на поиске.

Обеспечьте удобство использования на мобильных устройствах. Текст должен быть не меньше 12 px, а область нажатия — от 42 до 72 px.

Если подсказки слишком длинные, то перенесите текст на новую строку. Не стоит отрезать их многоточием.

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