Фича Поиск и Календарь на сайта ТАСС
Проектирование поиска и его адаптивных сценариев для Desktop, Tablet и Mobile
Роль:
Product Designer
Платформа:
Desktope /Tablet /Mobile
Контекст
ТАСС — новостной продукт с большим объёмом регулярно обновляемого контента. Для пользователя поиск — один из ключевых способов быстро найти конкретный материал или публикации по теме.
В рамках обновления интерфейса я проектировала сценарий поиска с учётом разных размеров экрана, фильтрации по дате и другим параметрам, а также различных состояний интерфейса.
В рамках обновления интерфейса я проектировала сценарий поиска с учётом разных размеров экрана, фильтрации по дате и другим параметрам, а также различных состояний интерфейса.
Моя зона ответственности
- проектирование UX-сценариев
- структура поиска и фильтров
- responsive-версии
- состояния интерфейса
- мобильный сценарий
- UI и компоненты
- подготовка макетов к разработке
Задача
Спроектировать единый сценарий поиска, который будет одинаково понятен пользователю на разных устройствах и при этом позволит работать с большим количеством результатов.
Проработать сценарии для работы с календарем.
Проработать сценарии для работы с календарем.
Исследование
Изучила, как устроены поиск и работа с датой в других продуктах
Перед проектированием я провела конкурентный анализ основных новостных площадок и отдельно изучила паттерны работы с календарём в сервисах, где пользователю нужно выбрать дату или период.
Новостные продукты
- РИА Новости
- РБК
- Коммерсантъ
- другие новостные сайты
Сервисы с календарными сценариями
- Яндекс Афиша
- сайты концертов и мероприятий
- другие сервисы, где пользователь выбирает дату события
Анализ конкурентов
Сравнивала структуру поисковой строки, отображение результатов, фильтрацию и способы уточнения поискового запроса.
Для сценария выбора даты я изучала не только новостные сайты. Дополнительно посмотрела сервисы, где календарь является частью основного пользовательского сценария: афиши мероприятий, концертные площадки и сервисы поиска событий.
Для сценария выбора даты я изучала не только новостные сайты. Дополнительно посмотрела сервисы, где календарь является частью основного пользовательского сценария: афиши мероприятий, концертные площадки и сервисы поиска событий.
Что показало исследование
Поиск
пользователь должен иметь простой и понятный вход в сценарий.
Календарь
важно дать пользователю понятный способ выбрать конкретную дату или период. Проработать сценарии календаря, чтобы у пользователя была возможность выбрать прошедшие мероприятия и будущие мероприятия (для раздела пресс-центр).
Фильтрация
дополнительные параметры не должны перегружать основной экран.
Mobile
для мобильного экрана фильтры и календарь требуют отдельного сценария взаимодействия.
Mobile First
На основе анализа я начала проектирование с мобильной версии — самого ограниченного по пространству сценария. После этого решение масштабировалось на Tablet и Desktop.
От Mobile First к Desktop
После проработки мобильного сценария я масштабировала решение на планшет и desktop. При этом задача заключалась не в простом увеличении мобильного интерфейса, а в перераспределении элементов с учётом доступного пространства.
Для поиска я проработала различные состояния интерфейса, чтобы сценарий был предсказуемым на каждом этапе взаимодействия.
Для поиска я проработала различные состояния интерфейса, чтобы сценарий был предсказуемым на каждом этапе взаимодействия.
Компонентный подход
Повторяющиеся элементы поиска я собирала в переиспользуемые компоненты с различными состояниями и вариантами для разных разрешений.
Адаптация визуальной системы
Компоненты поиска также были адаптированы для тёмной темы с сохранением контраста и визуальной иерархии.
