UX Notes
23.2K subscribers
56 photos
3 videos
1 file
1.05K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Download Telegram
В Everest написали о формах поиска билетов на сайтах авиакомпаний.

— Поиск билетов — один из самых частотных сценариев на сайте авиакомпании. Форму поиска лучше располагать по центру и не совмещать с рекламными каруселями, чтобы те не отвлекали;
— Рядом можно расположить ссылки на следующие по популярности функции: регистрация, управление заказом, статус рейса;
— Полезно определять город вылета по локации пользователя. Если вылетов из его города нет, можно показывать ближайший. Если аэропорт временно не работает, показывать его недоступным и пояснением;
— Пользователи могут вводить неофициальные топонимы (Питер), хорошо бы это учитывать и находить искомые города;
— В списке городов можно показывать сначала популярные, а потом все остальные в алфавитном порядке;
— Только Utair понятно подсказывает, что в полях «Откуда» и «Куда» нельзя указать один и тот же город: «Укажите разные города»;
— Лучше не заполнять по умолчанию поле с датой вылета. Пользователи обычно фокусируются на заполнении пустых полей и могут его пропустить;
— Чтобы искать билет в один конец, на сайте Аэрофлота надо оставить пустым поле с датой возвращения. Возможность явно это указать пользователям привычнее: переключатель «Только туда — Туда и обратно» или кнопка «Обратный билет не нужен»;
— Если пользователь выбрал вариант «Туда и обратно», но дату возвращения не указал, можно искать билеты в один конец;
— Можно добавить крестик для быстрого сброса даты «Обратно»;
— Люди могут искать билеты сильно заранее, удобно иметь возможность выбрать год и месяц в календаре, а не пролистывать его помесячно. Используйте календарь, показывающий сразу 2 месяца;
— В календаре стоит выделять дни, когда рейсы есть. Удобно, если там будет примерная стоимость доступных билетов;
— Ни одна авиакомпания не разрешает выбрать больше билетов для младенцев (без отдельного места), чем выбрано билетов для взрослых, но только Уральские авиалинии отображают подсказку: «Младенцев не может быть больше, чем взрослых»;
— Полезно объяснять, что «младенцы» располагаются на руках у взрослых, без отдельного места.

#form #search
Таня из Everest написала о формах поиска на сайтах клиник.

— Поле поиска заметнее просто иконки;
— Если по нажатию отображать модальное окно поиска, внимание пользователя будет сосредоточено на ключевом действии и появится место для популярных запросов и плейсхолдера, который подскажет, что именно можно искать («Ищите врачей, услуги, статьи и другие материалы»);
— Популярные запросы лучше разделить на категории: анализы, процедуры, приём врача;
— Стоит отображать кнопку «Найти», так как многие привыкли на неё нажимать. Но и нажатие на Enter тоже должно работать;
— После ввода символов в поле стоит показывать подсказки. Удобен переключатель с разделами (врачи, услуги, новости), в которых найдены подходящие страницы, — можно конкретизировать список подсказок;
— Или хотя бы указать категорию конкретной подсказки;
— Стоит выделять, в чём конкретная подсказка совпадает с запросом, чтобы было понятно, почему она отображается;
— На странице с результатами поиска количество найденного помогает решить, готов ли пользователь к такому объёму информации или стоит уточнить запрос;
— Результаты поиска надо группировать по категориям;
— С помощью списка подходящих под запрос категорий можно фильтровать результаты поиска (по умолчанию стоит выбрать категорию, которую выбрал пользователь в модальном окне поиска) или быстро перемещаться между блоками на странице с результатами;
— Полезны способы уточнить запрос: чекбокс «По полису ДМС», по расположению отделения или врача.

#form #search #health
Эдвард Скотт написал о подсказках к поисковым запросам.

— Показывайте в списке не более 10 подсказок на десктопе и 8 на телефоне. В противном случае люди будут их игнорировать или тратить слишком много времени на изучение;
— Подсказки по категориям («красные коврики в категории Ванная комната») повышают вероятность найти нужную вещь. Выделяйте их в списке;
— В тексте подсказок выделяйте (например, жирным шрифтом) то, что не совпадает с введённым в поле поиска текстом. Так пользователь быстрее всё прочитает, пропуская повторяющиеся слова;
— Советы для десктопа: избегайте полос прокрутки;
— Не загромождайте список подсказок лишними функциями и содержимым, чтобы меньше отвлекать пользователей от подсказок;
— Отображайте состояние Hover для подсказок;
— Дайте возможность взаимодействовать с подсказками с помощью клавиатуры: стрелки вверх и вниз для перемещения по списку (список лучше закольцевать), нажатие на Enter для отправки запроса с выбранной подсказкой;
— Дополняйте текст в поле поиска текстом подсказки, оказавшейся в фокусе (например, как в поиске Яндекса и Гугла). Так можно дополнительно объяснить концепцию подсказки и дать возможность дополнения выбранной подсказки;
— Помогайте пользователю не отвлекаться на другие элементы страницы при просмотре подсказок. Можно затемнять всё остальное;
— На телефоне проверьте, что другие элементы страницы не мешают подсказкам: закреплённый хедер, баннер «Установите приложение», кнопка чата.

In English. #search
Станислав Хрусталёв написал о строке поиска в мобильных интернет-магазинах.

— Чаще всего она находится в верхней части экрана или фиксируется там при скроле;
— Поиск — хороший кандидат в список быстрых действий приложения;
— Если каталог не сложный, строку поиска можно показывать после нажатия на кнопку. Общепринятая метафора — лупа;
— В поле поиска стоит разместить плейсхолдер, чтобы облегчить понимание его функции. Например, можно перечислить типы запросов, задать вопрос («Что вы ищете?»), упомянуть название компании («Найти в СберМаркете»), подсветить широту ассортимента, показать примеры конкретных запросов (в этом случае их стоит динамически менять);
— Плейсхолдер должен полностью умещаться в поле;
— При активации строки поиска избегайте сильного изменения её дизайна;
— Активированный поиск отображайте в полноэкранном формате с подсказками в виде актуальных (последних, популярных) запросов, уточнений текущего запроса, категорий, брендов, товаров;
— Также там могут быть непродуктовые подсказки вроде ссылок «Наши магазины», «Оплата»;
— Подсказки разных типов лучше не смешивать. Сгруппировать их можно заголовками, иконками, подписями (текст «Бренд», название вышестоящей категории), вкладками;
— Избегайте ложной персонализации, когда пользователь только зарегистрировался, а магазин уже показывает товары, «рекомендованные для вас»;
— При поиске учитывайте связи. Например, при поиске «джинсы» показывайте бренды, в ассортименте которых есть это слово. Можно показывать подходящие товары («адаптеры для iphone»). В аптеках — искать по симптомам;
— Показывайте количество найденных товаров: вообще и в категориях;
— В статье ещё много рекомендаций по взаимодействию со списком подсказок, истории поиска, пустым состояниям и так далее.

#search #ecommerce
Ксения Толокнова и Марина Сапожникова написали о поиске в мобильных приложениях.

— Точкой входа в поиск может быть поле поиска (в верхней, нижней части экрана и ближе к середине; поиск в этом случае — ключевая функция или основной способ взаимодействия с контентом), иконка лупы в нижней навигации (важность функции меньше), иконка лупы в навбаре (важность ещё меньше). Точка входа может быть спрятана, например, в раскрывающемся меню;
— Поиск может быть глобальным (по всему приложению) и локальным (по экрану или разделу), открываться на новом или на том же экране (для локального поиска и фильтрации контента);
— Поисковая выдача может быть простой (однородной), с категориями и фильтрами, с секциями (если хочется разделить контент и не вводить навигацию в виде категорий и фильтров);
— Мультипоиск позволяет обрабатывать несколько запросов одновременно. Например, искать недвижимость в нескольких районах (Zillow) или по фото и тексту одновременно (Google);
— Продумайте, как пользователь будет очищать ввод в поле (скорее всего крестиком в поле) и выходить из режима поиска («Отменить» в iOS, стрелка «Назад» в MD3);
— Результаты лучше выводить после ввода 1–3 символов. Запрос лучше отправлять, когда возникает пауза во вводе;
— Рекомендации до ввода поискового запроса крайне полезны. Кроме повышения удобства (сохранённые, недавние, популярные запросы) они могут стать инструментом дополнительных продаж;
— Не забывайте о подсказках внутри нативной клавиатуры. Их немного, но больше, чем можно разместить в поле поиска.

#search #mobile