2learn

Состояния и обратная связь

Что это такое

Любой интерактивный элемент существует в нескольких состояниях: idle, hovered или focused, pressed, loading, successful, failed, disabled, empty. Обратной связью интерфейс заполняет промежуток между действием и результатом: человек видит, что нажатие зарегистрировано, и отличает работу от зависания.

Почему это важно

Ничто так быстро не разрушает доверие, как неуверенность в том, услышала ли вас машина: десятая доля секунды без обратной связи, и люди нажимают снова, а отсюда берутся дублированный заказ, двойная подписка и два обращения в поддержку. Ломаются при этом всегда именно те состояния, которые никто не проектировал: если error не нарисовали, ошибка отрисовывается как есть; если пустой список не нарисовали, новый пользователь видит пустую область и решает, что это баг.

Ключевые идеи

Перечислите состояния, прежде чем проектировать хоть одно

Выпишите список для каждого элемента и проверьте его по пунктам. Девять состояний покрывают большинство элементов управления, а обычно пропускают три: loading, error и disabled с причиной.

Кнопка:  idle | hover | focus | pressed | loading | success | error | disabled
Список:  loading | empty | one item | many items | error | stale
Поле:    idle | focus | valid | invalid | disabled | read-only

Подтверждайте нажатие сразу

Примерно до 100 миллисекунд пользователь воспринимает отклик как мгновенный. Однако за этим порогом нужно показать состояние занятости, и никогда не оставлять нажатый элемент без изменений, пока идёт работа.

0-100ms      индикатор не нужен
100ms-1s     встроенное состояние занятости на самом элементе, элемент заблокирован
1-10s        индикатор прогресса плюс то, что происходит
более 10s    уберите в фон, скажите, что работа продолжится, и как человек узнает

Говорите, что сломалось, и сохраняйте ввод

Состояние ошибки сохраняет всё, что пользователь ввёл, называет проблему словами самого интерфейса и предлагает выход, потому что форма, которая очищается при сбое, стоит пользователю всей задачи.

disabled с причиной лучше, чем disabled молча

Серая кнопка без объяснения ставит пользователя в тупик: он не понимает, не хватает ли ему прав, пропустил ли он поле или нарвался на баг. Добавьте причину в одну строку либо разрешите нажатие и покажите проверку.

Проектируйте пустое состояние и состояние ошибки первыми

Их видит новый или неудачливый пользователь, на пиксель здесь приходится больше всего информации, и именно их обычно оставляют на конец. Нарисуйте их раньше заполненного состояния.

Практика

Напишите матрицу состояний для одного экрана

Перечислите слева все интерактивные элементы экрана, сверху — девять состояний, и заполните, что пользователь видит в каждой ячейке. Пустых ячеек остаться не должно.

Готово, когда: каждая ячейка заполнена, и у каждого из состояний loading, error, empty и disabled с причиной есть описанный вид.

Замерьте одно медленное действие

Возьмите самое медленное действие в вашем продукте и замерьте его. Затем опишите, что пользователь видит через 200 миллисекунд, через три секунды и через тридцать секунд.

Готово, когда: пользователь может отличить прогресс от зависания в каждый из этих трёх моментов, и никакое состояние не оставляет элемент без изменений.

Частые ошибки

  • Нет состояния loading — пользователь нажимает снова и создаёт дубликат; исправить: покажите состояние занятости на элементе и заблокируйте его, пока идёт работа.
  • Ввод отбрасывается при ошибке — вся задача потеряна, и пользователь уходит; исправить: сохраните каждое поле и отметьте только то, что сломалось.
  • Молча заблокированные элементы — пользователь не может понять, почему действие недоступно; исправить: прикрепите причину в одну строку или проверяйте при нажатии.
  • Непроектированные пустое состояние и ошибка — первое впечатление — пустая область или сырая строка ошибки; исправить: спроектируйте оба раньше заполненного состояния.
  • Обратная связь, которая не говорит, что происходит — универсальный индикатор для тридцатисекундной работы; исправить: скажите, что делает система и как пользователь узнает результат.

Что читать дальше

Разобранные примеры

Файлы cookie аналитики ставятся только с вашего согласия. До вашего выбора ничего не загружается и никуда не отправляется.