![](https://habrastorage.org/getpro/habr/upload_files/775/2d6/600/7752d6600c5c734170f1049f3b81768c.png)
Сегодня многие пользуются календарем на мобильном устройстве: приложение своевременно напоминает о рабочих встречах, походах к врачу, днях рождения друзей и в целом помогает чётче следовать своему расписанию.
Некоторые события в календарной сетке являются регулярными, то есть повторяются с определённой периодичностью. Например, можно отметить в календаре день рождения бабушки, чтобы вовремя её поздравить. Бывают повторы посложнее — скажем, для тренировок в фитнес-клубе, которые проходят каждую среду и пятницу в 19:00. Чтобы не вносить в календарь каждую тренировку по отдельности, есть возможность настроить повторяющееся событие.
В ходе создания мобильного календаря для одного из наших продуктов нам требовалось проработать настройки сложного повтора — и сделать их понятными и удобными для пользователя. Под катом рассказываем о том, с какими проблемами мы столкнулись при проработке настроек сложного повтора, как проверили гипотезу с помощью исследования и выбрали в итоге оптимальное решение.
Привет, Хабр! Меня зовут Вика Шаханина, в МойОфис я работаю UX-архитектором: проектирую интерфейсы для приложений и стараюсь сделать пользовательский опыт максимально комфортным. Лучше понять пользователя мне помогают исследования, и сегодня я расскажу о том, как одно из них серьёзно пригодилось мне в работе — для реализации сложного повтора в календаре нашего мобильного приложения.
Зачем изобретать велосипед
В ходе выполнения задачи я быстро поняла, что большинство людей пользуется нативными мобильными календарями на своих iOS- и Android-устройствах. Так зачем ломать их привычные паттерны поведения и изобретать велосипед? Мы же можем взять готовое решение у конкурентов.
Тогда я начала смотреть, как реализованы настройки сложного повтора событий в Google-календаре на Android и нативном календаре на iOS.
![Слева — Google-календарь, справа — нативный календарь iOS Слева — Google-календарь, справа — нативный календарь iOS](https://habrastorage.org/getpro/habr/upload_files/bcb/753/b8c/bcb753b8cc3c5140b135916cc2232c75.png)
На иллюстрации выше показаны интерфейсы календарей Google и iOS. В Google используются компоненты Textfield и Menus: в первом поле нужно ввести число, а во втором — выбрать временной промежуток, например, неделю.
В iOS используется компонент Datapicker (в статье я буду называть его «барабан»). Сначала нужно выбрать, насколько часто повторяется событие — по дням, неделям, месяцам или годам. Затем нужно настроить повтор более детально — например, каждые 3 дня или каждую неделю по четвергам и пятницам.
Другое отличие в том, что в интерфейсе iOS склоняется текст — «1 день», «2 дня» и так далее. В Google-календаре окончания слов не изменяются. Небольшой спойлер: моё исследование показало, что это важный момент для понимания интерфейса пользователем.
Обсуждаем решение
Несмотря на то что в календаре iOS пользователю приходится совершать больше действий, я решила взять за основу их «барабан» и немного усовершенствовать его. А именно, упростить путь пользователя и позволить сразу выбирать частоту и периодичность: одним барабаном крутить цифры, а вторым — дни, недели, месяца, года.
![](https://habrastorage.org/getpro/habr/upload_files/c6d/df6/0b6/c6ddf60b683ab548942ba177014800c1.png)
Когда я презентовала макеты владельцу продукта (product owner), тот засомневался. Он выдвинул гипотезу: пользователь не сможет установить характер повтора в барабане, так как не поймет, что его нужно крутить с двух сторон.
Мы сошлись на том, что я проведу исследование — и на основании результатов мы решим, какой компонент использовать.
![](https://habrastorage.org/getpro/habr/upload_files/293/780/ef9/293780ef93f3d1dde95ee8c2d9c1a7fb.png)
Так что исследовать?
Сначала я сделала прототип в Figma. Это было сложно, я потратила на него три дня и ресурсы своего коллеги.
Затем я решила обсудить мое будущее исследование с лидом. Мы пришли к выводу, что лучше протестировать не прототип, а сами приложения на устройствах iOS и Android. Иногда можно протестировать готовые сценарии конкурентов, чтобы выяснить, понятны ли они пользователю. Это мы и решили сделать. Такое тестирование должно было помочь нам выяснить, какие действия в других известных приложениях даются пользователям легко, а какие вызывают непонимание или другие трудности.
Как проходило исследование
Я решила провести коридорное тестирование. Этой простой, быстрый и «дешёвый» тип исследования.
В качестве респондентов нашла 7 пользователей Android и 6 пользователей iOS. Каждую группу поделила между исследуемыми компонентами: например, 3 пользователя айфона тестировали Google-календарь, а другие 3 — привычный им календарь iOS.
6 пользователей iOS | 7 пользователей Android | ||
3 пользователя тестируют iOS | 3 пользователя тестируют Android | 3 пользователя тестируют iOS | 4 пользователя тестируют Android |
Тестируют iOS | 3 пользователя iOS |
3 пользователя Android | |
Тестируют Google-календарь | 3 пользователя iOS |
4 пользователя Android |
Задание для участников исследования звучало так: создать событие, которое будет повторяться каждые 3 месяца.
Смотрим на результаты
Все опрошенные пользователи используют мобильный календарь преимущественно для личных целей. Они заносят туда предстоящие события и дела — в общем, планируют свою повседневную жизнь. Некоторые даже синхронизируют личные календари с расписанием супругов.
Гипотеза о том, что пользователи не смогут установить сложный повтор из-за двойного барабана, не подтвердилась. А вот с Google-календарем у респондентов возникли трудности.
Так, чтобы задать характер повтора, пользователю нужно было нажать на поле «Не повторяется». Двое участников подумали, что это иконка для обновления страницы. Остальные пятеро решили, что если они нажмут на это поле, то событие, наоборот, НЕ будет повторятся. Стоит отметить, что замешательство было недолгим, хотя одному пользователю все же пришлось дать небольшую подсказку, чтобы он перешел на следующий экран.
![](https://habrastorage.org/getpro/habr/upload_files/cfd/9c2/695/cfd9c26957ee304ee08da2696b1695c3.png)
Задать повтор на каждые 3 месяца в Google-календаре не смогли 2 пользователя, а у остальных 5 возникли сложности. Основная проблема — пользователи не понимали, что значит поле ввода с цифрой.
![](https://habrastorage.org/getpro/habr/upload_files/cc5/e38/88f/cc5e3888f7b585130869195d8cce7b9f.png)
Один участник поставил повтор на каждые 4 года, думая, что повтор будет 4 раза в год (ведь это то же самое, что раз в 3 месяца). Возможно, дело в том, что пользователи не читают, а «сканируют» экран, иногда пропуская часть текста — поэтому респонденты не замечали подзаголовок «Повторяется раз в». Кстати, после окончания тестирования некоторые участники говорили, что не изменяющиеся слова «день/неделя/месяц/год» затрудняли понимание интерфейса.
Мне запомнилось высказывание одного из участников. При оценке интерфейса календаря на Android он сказал, что не хочет вводить цифры — мол, это удел кнопочных телефонов, а смартфон создан, чтобы управлять им жестами.
С заданием в нативном календаре iOS справились все респонденты.
Календарь | Респондент |
iOS | Справился с заданием |
Справился с заданием | |
Справился с заданием | |
Справился с заданием | |
Справился с заданием | |
Возникли сложности | |
Android | Возникли сложности |
Возникли сложности | |
Возникли сложности | |
Возникли сложности | |
Возникли сложности | |
Не справился | |
Не справился |
Итоговый вариант экрана
![](https://habrastorage.org/getpro/habr/upload_files/6ba/19b/9a7/6ba19b9a726db4e9ba14d8f0a8f32ab8.png)
Дня настроек повтора в нашем мобильном календаре я выбрала вариант с двумя барабанами, поскольку все респонденты справились с заданием на iOS. Сверху мы добавили текст подсказки, слова в которой склоняются: «каждые 2 недели», «каждые 5 месяцев» и т.д.
При изменении периода повтора со дня на неделю, месяц или год, меняется и интерфейс. Пользователь может настроить удобный повтор, не переключаясь при этом между экранами. Вот как будет выглядеть настройка события, которое повторяется каждые 2 месяца:
![](https://habrastorage.org/getpro/habr/upload_files/731/0be/d50/7310bed500142f1b080aa9374e2730ee.png)
А вот так можно настроить повтор для событий, который происходят с периодичностью в несколько лет:
![](https://habrastorage.org/getpro/habr/upload_files/74e/1fc/1d1/74e1fc1d179e878d339d30ffe29bbb0d.png)
Выводы
Что я поняла, работая над задачей:
Решение конкурента, даже очень популярного — не повод для слепого копирования.
Иногда легче не делать прототип, а протестировать реализованные решения конкурента.
Люди не вчитываются в текст, но он бывает очень важен для понимания интерфейса.
Всегда лучше проверить фичу на этапе проектирования. Это будет дешевле, чем разработать её и только потом понять, что она работает не так, как надо.
Если вы занимаетесь UX, советуем ознакомиться с другими нашими тематическими текстами. Например, мы уже рассказали, как избежать ошибок в немодерируемых тестах, опубликовали подробный гайд по проектированию базы данных регулярного исследования и поделились опытом проведения исследования среди администраторов ПО. Пожалуйста, дайте нам знать, если вам интересно узнать о других аспектах и нюансах деятельности UX — возможно, в будущем мы посвятим им отдельные статьи в блоге МойОфис.