UX Рефакторинг. Что это такое и чем отличается от редизайна
Рефакторинг меняет интерфейс напрямую, а редизайн — через изменение внутренней логики. Рефакторинг использует эвристические методы, а редизайн — эмпирические. Рефакторинг масштабируем через передачу методов и правил, а редизайн — через передачу опыта.
Мартин Фаулер в книге “Рефакторинг” дал определение:
“Рефакторинг представляет собой процесс такого изменения программной системы, при котором не меняется внешнее поведение кода, но улучшается его внутренняя структура”
Применительно к UX и интерфейсам — тут всё внешнее. Так что основной вопрос — определения того синонима “внешнее поведение кода”, которое будет ложиться на изменение структуры интерфейса.
Считая, что “внешняя работа кода” — это результат выполнения кода, результатом работы с интерфейсом будет достижение целей пользователя. Синонимом “внутренней структуры кода” будет сам интерфейс и логика работы с ним (UX).
Перефразируя Фаулера, “UX рефакторинг представляет собой процесс такого изменения интерфейса, при котором не меняются цели пользователя, но меняется сам интерфейс и логика работы с ним (UX)”. Давайте теперь рассмотрим вопрос более формально.
Термины и определения
Любой интерфейс можно рассматривать с той точки зрения, что пользователь хочет достичь своих целей, совершить “главное действие в интерфейсе”. А для этого на каждом шаге надо понимать какой результат он получит, делая то или иное действие. И чем понятнее этот результат на каждом этапе, тем интерфейс требует меньше усилий по достижению целей.
Эффективность — это способность выполнять работу и достигать необходимого или желаемого результата с наименьшей затратой времени и усилий.
В общем случае и количество нажатий кнопок, и само время работы с интерфейсом — это СЛЕДСТВИЯ из эффективности интерфейса. Пользователю недостаточно информации для принятия решения куда нажать и что будет после этого.
Если посмотреть еще более глубоко, то время работы с интерфейсом (time to task) также зависит от количества нажатий. Пользователь не понимает что надо сделать, совершает избыточные действия, ошибки, затем их исправляет и так до тех пор, пока не достигнет успеха.
Определим следующие термины:
“Недостаток” интерфейса — это те моменты, где пользователю недостаточно информации для принятия решения что делать.
Более общее утверждение: если у пользователя есть несколько вариантов действия, то это недостаток первого типа.
Обратная ситуация, когда пользователю мало вариантов действий. Не понятно какой из них хоть как-то подходит для достижения цели. В этом случае, требуется дополнить интерфейс. Это недостаток второго типа.
Надо стремиться к тому, чтобы на каждом этапе был только один вариант сделать шаг вперед. Не заставляйте пользователя думать над конкретным действием, или над тем стоит ли его вообще совершать (а может проще уйти с этого непонятного сайта?).
Джоэл Спольски, в книге “Руководство по UI дизайну для программистов” прав, говоря, что:
“Каждый раз, когда вы просите пользователя сделать выбор — заставляете принимать решение. Это не всегда плохо. Но точно плохо, если выбор не относится к задаче, которую решает человек. Лучше сделать выбор за пользователя везде, кроме его основной задачи”
Если разница между предложенными вариантами не до конца ясна — пользователь начнет либо задумываться (тратить время) и изучать информацию на экране, либо нажимать кнопки наугад, пытаясь продвинуться к цели (вот и клики появились).
Недостатки относятся к структуре интерфейса и определяются однозначно, в отличие от дефектов. Дефекты же появляются в результате разметки пути пользователя и отнесения того или иного эффекта (появление ошибки, в частности) к дефектам.
“Дефект” интерфейса — это тупиковые ветки пути
В частности, заблокированные (disable) кнопки — это индикаторы тупиковых ветвей, которые указывают на дефекты. Сообщения об ошибках, которые получает пользователь в интерфейсе — это дефекты. Тупик, куда он попал, делая что-то не так, как задумывали проектировщики интерфейса.
Путь пользователя — это дерево решений, где на каждом этапе пользователь должен понять что надо сделать, чтобы достичь своей цели. Да, это очень похоже на CJM (Customer Journey Map) с его барьерами.
В идеальном интерфейсе последовательность действий будет стремиться к цепочке, приближая пользователя к цели
Используя введенные термины, можно более формально определить UX рефакторинг:
“UX рефакторинг” — это устранение дефектов и недостатков интерфейса, без изменения остальной логики.
Не создание формы с нуля, которое потребует переделки сайта или приложения, а изменение UX, нацеленное на повышение его эффективности, при которой вся остальная логика за интерфейсом останется прежней.
Примеры
Давайте на конкретных примерах разберем где недостатки, а где дефекты.
Пример 1. Форма подписки
Плейсхолдер в поле ввода подсказывает пользователю что именно он должен ввести. Это email на латинице, плюс символы @ и точки в нём. Не будь этого плейсхолдера — неопытный пользователь задумается что и как надо вводить. Это недостаток информации, который может привести к дефекту — сообщению об ошибке, что адрес введен неверно.
Над полем текстовая метка — подсказывает что надо ввести. Не логин, телефон или еще что-то, а email. Она также косвенно убирает недостаток интерфейса.
Недостатком на картинке является активная кнопка “Подписать”. Если пользователь нажмет на неё, не введя адрес, то он получит дефект — сообщение об ошибке. Как минимум, ее стоит сделать неактивной. Идеально — убрать вообще, чтобы даже неактивная кнопка не была индикатором тупикового действия и не смущала пользователя.
Если же по шагам посмотреть как пользователь вводит адрес, то можно сделать подсказки, что ожидается символ ввода @, а затем точка.
Пример рефакторинга дефектов и недостатков этой формы приведен в статье “UX рефакторинг на примере формы подписки”
Аналогично, если пользователь набивает не в той раскладке — тоже можно подсказывать ему в процессе ввода. Это устранит дефект с ошибочно введенным адресом не в той раскладке.
А если делать рефакторинг не отдельной формы, а всего сайта, то единожды введенный email на сайте (при регистрации, в форме обратного звонка, при оформлении доставки, при подписке) — автоматически должен подставиться во всех местах сайта, где предполагается ввод электронной почты пользователя. Один раз ввели — используем везде.
Пример 2. Сообщение в Word
Что мешает, например, сохранять файл в Word автоматически? При закрытии останется выбор между двумя кнопками — “Не сохранять” / “Отмена”. Тем более, что он уже где-то сохранен, раз будет “временно доступен”. Кнопка “Сохранить” нужна только для того, чтоб задать корректный путь к папке, где будет храниться файл.
Кнопка “Отмена” фактически означает действие “Продолжить редактирование”. Чем “Отмена” отличается от “Не сохранять” из сообщения об ошибке не очевидно. Это недостаток первого типа.
Хорошо и плохо
Хороший интерфейс — невидимый интерфейс. Не всегда. Минималистичный интерфейс хорош тем, что устраняет дефекты и недостатки, убирая их как мусор. Плюс, если проектировщик дал себе труд подумать, то появляются эффективные решения, подталкивающие пользователя к нужному действию или вообще делая его за пользователя. Это тоже устранение недостатков.
Что же такое идеальный интерфейс? К чему стоит стремиться при рефакторинге? Как минимум, есть несколько следствий того, что интерфейс идеален или близок к нему:
- пользователь не может совершить ошибку. Интерфейс просто не даст ему такой возможности. Не выведет на этот путь. Сам будет держать пользователя в нужных рамках. Подсказки, микровзаимодействия, набор состояний системы — все будет стремиться направить пользователя в нужном направлении
- интерфейс отсекает все тупиковые ветви на пути работы пользователя. Если ветка работы не обязательна для достижения цели — ее не должно быть вообще.
Идеальный интерфейс вообще не содержит дефектов и недостатков.
Для устранения дефектов и недостатков в интерфейсе надо показать пользователю что случится в случае того или иного действия. Куда он попадет, в какое состояние? Что сделает конструкция, что изменится. Для этого надо вытащить признаки цели (со следующего или дальнейших шагов) на этап текущего шага. Более подробно про эту концепцию описано в статье “Признаки и свойства”.
Измеримость результатов
Используя все вышесказанное, теперь можно четко определить какой интерфейс хуже или лучше. Причем, двумя способами.
Первый — по количеству действий. Чем меньше действий, тем более эффективный интерфейс. Сравните количество необходимых кликов для достижения цели до рефакторинга и после.
Второй — по косвенным признакам, следствиям из количества действий. Дефектам и недостаткам. Тот, где меньше дефектов и недостатков — лучше.
Рефакторинг vs Редизайн
Давайте сравним чем же отличается привычный редизайн интерфейсов, от UX рефакторинга.
- Редизайн подразумевает изменение внутренней логики, которая влияет на интерфейс. Рефакторинг не изменяя внутренней логики, изменяет только взаимодействие с интерфейсом.
- Редизайн использует эмпирические методы: наблюдения, опрос, статистику, опыт, эксперимент, эмпатию и так далее. В основе рефакторинга эвристические методы, которые позволяют объединять, выделять и находить разницу между интерфейсами и оперирует четко формальными признаками: цифрами, количеством было-стало. В его основе лежит логика и последовательность действий, приводящих к требуемому результату.
- Для качественного редизайна один проектировщик должен по максимуму передать опыт другому. Для качественного рефакторинга достаточно передать методы и определения. Он более масштабируем.
В заключение можно сказать, что UX рефакторинг, как и UX дизайн можно начинать называть наукой, несмотря на продолжающиеся дискуссии по этому вопросу.
Facebook: facebook.com/lessplusmore
Telegram: t.me/lessplusmore
VKontakte: vk.com/lessplusmore
Twitter: twitter.com/lessplusmore
Если вам понравилась статья — не стесняйтесь апплодировать!
Отдельное спасибо Wova Roodnyy за идеи, методику и консультации.
English version available here
