UX Рефакторинг на примере формы подписки
Мы начинаем публиковать посты, связанные не только с бизнес-моделями, но и с UX. Начнем с рефакторинга UX хорошо всем знакомой формы подписки.
Наверняка многие сталкивались на проектах с проблемой, когда надо решить бизнес-задачу в существующей системе, но при этом ничего не порушить и не проектировать с нуля. В подавляющем большинстве случаев, все попытки (особенно в больших компаниях) разбиваются об этапы согласования, разработку, безопасность и прочие смежные системы.
Так вот, рефакторингом UX мы будем называть процесс, когда вы меняете только свою часть в интерфейсе. Изолированно. Не трогая даже API и тем более внутренности основной системы.
Рефакторинг и перепроектирование — разные вещи. Не путайте.
Так вот, вернемся к форме подписки. Дело было осенним мокрым вечером. Мы взяли стандартную формочку из двух элементов (поля ввода и кнопки) и, применяя концепцию признаков и свойств, отрисовали какие переходы могут быть у пользователя между состояниями.
Получилось, что может быть шесть экранов, из которых два являются следствием ошибки пользователя (дефектами):
- В самом начале, когда пользователь пытается подписаться с пустым полем, не введя адрес;
- Когда он подписался и хочет отписаться, при этом кликает не на кнопку “Отписаться”, а на поле ввода.
Поставив цель оставить элементы теми же, с тем же функционалом, чтобы не надо было менять ничего, кроме самого сайта (верстка максимум), мы задались целью изменить функционал, чтобы убрать эти два дефекта.
Еще раз обращаем внимание, это не перепроектирование формы подписки. Это рефакторинг, максимально изолированные изменения, касающиеся только UX.
Посмотреть прототип в Figma можно ниже:
Шесть экранов превратились в четыре. Плюс появились очень интересные эффекты.
Но, по порядку. Ниже привожу разбор по экранам, с комментариями как на изображении, так и в тексте.
I. Исходный экран оставлен без изменений. Считаем, что он есть, пользователи к нему привыкли, страница устоялась.
II. Экран ввода адреса радикально изменился.
Кнопка “Подписать”, вместо того, чтобы становиться неактивной (disable), становится частью поля ввода. Просто текстом, который нельзя нажать.
Нырнув на пробу во внутрь поля ввода, нашли еще замечательный способ подсказки пользователю: сразу за курсором помещаем символ, который ожидается в данный момент для успешной валидации. На картинке вы видите “собаку”, а после ее ввода должен быть хоть один символ (цифра-буква), затем можно выводить точку.
III. Экран со введенным адресом довольно стандартен. Когда пройдена валидация (её анализ мы оставили за рамками примера) кнопка “Подписать” снова становится кнопкой. Плюс меняется текст над полем ввода, побуждая к действию
IV. Обратный эффект проявился дальше — поле ввода стало частью кнопки “Отписать”, после факта подписки.
Кликнуть можно в любое место этой большой кнопки — как по адресу, так и по “Отписать”. Пользователь попадет на предыдущий экран. Единственное отличие — фокус будет на кнопке. При желании можно будет как подписаться заново, на тот же адрес, так и ввести новый. Если кликаем на поле ввода, то попадаем на второй экран.
Итог рефакторинга:
Убрана сама возможность попасть в состояние ошибки. Система сама “держит” путь пользователя, ведя его в нужном направлении.
В заключение хочу сказать: да, можно было сделать еще интереснее и лучше. Но это уже будет перепроектирование формы и там результат будет кардинально отличаться. И, возможно, как раз потребует изменения смежных систем.
Второй момент. В примере не рассмотрены вопросы валидации, микровзаимодействий, сопутствующих текстов и всего остального бизнес-процесса. Так что тут тоже достаточно обширное поле для улучшений.
А как вы отрезаете тупиковые пути пользователя и держите его на основной дороге?
Facebook: facebook.com/lessplusmore
Telegram: t.me/lessplusmore
VKontakte: vk.com/lessplusmore
Twitter: twitter.com/lessplusmore
Если вам понравилась статья — не стесняйтесь апплодировать!
Отдельное спасибо Wova Roodnyy за идеи, методику и консультации.
