Как оптимизировать используемые компоненты под новые задачи (наш пример с календарем)
Как часто вы сталкиваетесь с тем, что спроектированный функционал становится неактуальным еще до выпуска в прод? Если работаете с большими проектами без четких начальных требований, то, должно быть, нередко) Мы с командой собрали много таких, но сегодня хотим рассказать про календарь в CRM.
Изначально календарь был спроектирован под определенную задачу, но с появлением новых страниц стало понятно, что для дальнейшего удобного использования компонента этого недостаточно.
Первым делом собрали требования бизнеса
Новый функционал никогда не появляется просто так, он решает определенные проблемы. Так в этот раз у нас возникли сложности с выбором дат для создания отчетов на дашборде. Текущий календарь был способен или забирать одну дату или диапазон, в то время как:
- Отчеты могут быть как по конкретной дате, так и по диапазону
- Диапазон отчета может быть больше года и даже нескольких
В ходе тестирования текущего решения стало понятно, что выбирать дату или диапазон должно быть удобно непосредственно в календаре, а значит именно над ним нужно поработать.
Проблемы также обнаружились в длине пути пользователя до дальних дат: переключение с помощью стрелок оказалось нецелесообразно при поиске конкретной даты, если она дальше двух месяцев - многовато кликов, а значит и времени для такой простой и частой задачи.
Проанализировали, как другие решают подобные задачи
Провели анализ календарей в сервисах с аналитикой по времени (crm, метрики и банки): как выбираются текущие даты, как задаются диапазоны, как пользователи переключаются между месяцами и годами.
При анализе календарей следующие детали стали для нас ключевыми:
- Сколько кликов нужно, чтобы выбрать дату или диапазон
- Насколько интуитивно понятно, как переключиться с одной даты на диапазон, и наоборот
- Как применяются выбранные значения (по кнопке, по выбору даты, по закрытию календаря)
- Какие повторяющиеся паттерны встречаются в работе с календарями
Несколько интересных моментов:
- Кнопка для применения значений есть почти у всех календарей, и это удобно - всегда одинаковый сценарий применения как для одиночной даты, так и для диапазона дат, не нужно учиться пользоваться каждый раз
- При выборе дат они сразу отображаются либо в кнопке, либо в поле. Это важно, потому что пользователь сразу видит обратную связь и может проверить свой выбор
- Количество кликов для выбора даты оказалось практически одинаковым у всех систем.
Самое интересное решение мы нашли у Почта Банка: первый клик — выбирается дата, второй — диапазон, третий — сброс диапазона и возврат к конкретной дате. Минимум движений, максимум эффективности.
- У некоторых календарей есть кнопки быстрого действия, позволяющие выбрать месяц, квартал или год, не заморачиваясь с выбором конкретных дат диапазона (читай: не нужно считать месяцы на квартал или выбирать вторую дату для отображения года).
- Отдельное внимание мы уделили тому, как выбираются месяц и год:
В большинстве систем год выбирается через отдельное окно, которое перекрывает календарь. Это действительно удобно, так как не требует дополнительных действий типа скролла - лет вмещается сразу много.
Если выбор осуществляется через выпадающие списки или стрелки, то процесс становится затянутым и менее удобным.
Мы решили взять самое лучшее из этих решений и адаптировать под наши задачи:
- Добавили переключение по месяцам и годам через выпадающий список
Так как отчеты могут быть за несколько месяцев или лет, пользоваться стрелками для переключения стало неудобно - слишком много кликов до перехода к нужному значению.
- Сделали календарь универсальным
Это позволило пользователям выбирать диапазон или одну дату внутри календаря.
- Добавили быстрые диапазоны
В ходе обсуждения с клиентом и анализа реализации календарей для схожих целей стало понятно, что отчеты чаще всего просматриваются за конкретные промежутки, так появилась гипотеза, что добавив в календарь кнопки с популярными диапазонами можно упростить работу менеджеров.
- Добавили кнопку «Очистить», которая появляется после выбора первой даты и кнопку для применения дат по инициативе пользователя.
Это сделало использование календаря понятнее и более контролируемым, а также помогает избежать преждевременного закрытия календаря при выборе первой даты.
В результате работы у нас есть календарь, который адаптируется под конкретную задачу в CRM
- Можно установить диапазоны для выбора дат или единичные быстрые даты
- Можно выбирать диапазоны в ручную где это нужно
- А можно выбирать конкретную дату
P.S. Проектируя решение, стоит думать наперед, куда оно может начать расти
В больших системах часто переиспользуются компоненты и хорошо, если вы заранее будете располагать элементы так, чтобы в дальнейшем было удобно расширять функционал. А если с первого раза не получится, то всегда можно откатиться и попробовать по-другому.
Задачу с календарем решала Анна Борисова под руководством Евгении Шамрай (Дизайн-лид команды ВКУ на Госуслугах).
Приходите к нам за дизайном сложных интерфейсов, мобильных приложений, MVP или UX-аудитом:
С радостью создадим качественный продукт, который будет оправдывать ожидания бизнеса, отвечать нуждам пользователя и реализуем в разработке!
Написать нам в телеграме - @evgeniyashamray