Код-ревью Middle Прототипы и микровзаимодействия обновлено
Ревью микровзаимодействий
Вопрос
Описаны микровзаимодействия в мобильной ленте. Найдите проблемы.
1. Лайк: сердце заливается цветом через 2 секунды, когда ответил сервер
2. Ошибка лайка: ничего не происходит, сердце остаётся пустым
3. Кнопка «Отправить комментарий»: при нажатии никакой реакции до ответа сервера, можно нажать много раз
4. Удаление поста: мгновенно, без подтверждения и без «Отменить»
5. Подгрузка ленты: экран мигает спиннером на 50 мс при каждом скролле
6. Новые посты появляются сверху и сдвигают ленту, пока пользователь читает
Коротко
Почти все проблемы тут про обратную связь: её нет там, где нужна, или она мешает. Хорошее микровзаимодействие отвечает сразу, честно сообщает об ошибке и даёт отменить необратимое.
Что должен найти ревьюер
- Производительностьстрока 1Две секунды без отклика на частое дешёвое действие. Здесь уместен оптимистичный UI: заливка сразу, откат при ошибке.
- Ошибкастрока 2Ошибка молчаливая: пользователь не узнает, что действие не прошло. Нужен откат и короткое сообщение.
- Ошибкастрока 3Нет состояния загрузки и защиты от повторного нажатия: появятся дубли комментариев.
- Ошибкастрока 4Необратимое действие без подтверждения или отмены. Нужен «Отменить» в тосте или корзина.
- Стильстрока 5Индикатор на 50 мс воспринимается как мигание. Короткие загрузки не индицируют или показывают с задержкой.
- Ошибкастрока 6Сдвиг контента под пальцем: человек теряет место и может нажать не туда. Лучше плашка «Новые посты» по нажатию.
Разбор
Почти все проблемы тут про обратную связь: её нет там, где нужна, или она мешает. Хорошее микровзаимодействие отвечает сразу, честно сообщает об ошибке и даёт отменить необратимое.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Ещё по теме «Прототипы и микровзаимодействия»
- Кейс: долгое формирование отчёта
- Порог Доэрти
- Длительность анимации
- Кривая для появления
- Обратная связь
- Уровень детализации прототипа
- Паттерн ожидания
- Зачем анимация