Как обрабатывать ошибки и особые режимы работы в интерфейсах

Никита Жеребцов
ProfsoUX 2020

Доклад предназначен для дизайнеров интерфейсов, проджект-менеджеров, системных аналитиков.

Ошибки бывают во всех сервисах: при отсутствии интернета, валидации данных, ошибке сервера или какой-то нештатной ситуации. А если что-то не так, и пользователь ничего не понимает, он жалуется в соцсетях. Чтобы избежать негатива, дизайнер должен заранее позаботиться о том, что делать пользователю в такие моменты.

Например, если в мобильном приложении банка «Точка» ведутся технические работы, клиент видит не заглушку ошибки, а таймер обратного отсчета до планового окончания работ. Когда случается какая-то катастрофа, приложение Facebook предлагает сообщить друзьям, что с вами всё в порядке. Приложение Яндекс.Драйв подсказывает, что «уже Ташкент», если в салоне автомобиля слишком сильно топит печь.

Я поделюсь этими и другими кейсами обработки ошибок и особых режимов работы мобильных приложений. Расскажу, какие бывают типы ошибок, и при каких условиях они могут возникать, как работать с ожиданиями и как обрабатывать негатив с помощью интерфейса. Поделюсь своим алгоритмом работы с разными типами ошибок и расскажу, как создать подобные решения.

Transcript

1. Как обрабатывать ошибки и особые режимы работы в интерфейсах Никита Жеребцов 29 февраля 2020. Санкт-Петербург
2. Почему об ошибках нужно думать Ломаются абсолютно все сервисы Не существует пользователей, которые не ошибаются Негативные эмоции сильнее позитивных
3. Ошибки серверного взаимодействия, пустые состояния, запросы на доступ к системным функциям, валидация форм Особые режимы работы в мобильных приложениях
4. Типы ошибок Блокирующие Неблокирующие
5. Блокирующие Неблокирующие
6. Блокирующие Неблокирующие
7. Блокирующие Неблокирующие
8. Сетевое взаимодействие Отсутствует интернет / истечение таймаута ожидания ответа на запрос Общая ошибка сервера Требуется авторизация Сервер не может найти запрашиваемый ресурс Ошибка бизнес логики 5
9. Сетевое взаимодействие
10. Ситуации возникновения Переход на экран, нет данных из кэша или кэширование не предусмотрено Есть данные из кэша Ошибка при нахождении на экране Отправка формы/запроса
11. Способ отображения Я скроллил ленту новостей, пролистал все, при попытке загрузки следующей группы — ошибка из-за отсутствия интернета Отсутствует интернет Ошибка при нахождении на экране Ранее загруженный контент. Всплывающее сообщение + способ продолжить взаимодействие
12. Способ отображения
15. Способ отображения
16. Другие распространенные состояния
17. Пустые состояния Полноэкранная заглушка + CTA (опционально)
18. Запрос к системным функциям Полноэкранная заглушка + CTA, вызывающий системный диалог, либо переход в настройки
19. Сообщение об успехе Полноэкранная заглушка + CTA (опционально) Или неблокирующее уведомление
20. Hard и soft update Полноэкранная заглушка + CTA для hard update Неблокирующее уведомление для soft update
21. Валидация форм Для всех типов полей визуальное выделение проблемного элемента + сопроводительный текст То, что можем проверить на клиенте без отправки запроса: проверяем превентивно по нажатию на кнопку отправки или при снятии фокуса Ошибка валидации данных, не относящаяся к конкретному полю — всплывающее сообщение
22. Общие принципы Выбор способа отображения ошибки всегда зависит от контекста. Внедрите типизацию ошибок и выбирайте из списка Для пользователя должно быть очевидно, что ему предпринять для решения проблемы Если ошибка не зависит от пользователя, дайте ему максимальную информацию о том, что произошло и когда ожидать решения
23. Хорошие примеры
24. Как понять, какие ошибки могут возникнуть Общаться с аналитиками / разработчиками / тестировщиками и бизнесом Договоритесь, как и какие состояния вы будете обрабатывать, без каких данных приложение не может работать Заглядывайте в спецификации
25. Ошибки серверного взаимодействия, пустые состояния, запросы на доступ к системным функциям, валидация форм Особые режимы работы в мобильных приложениях
26. Ошибки серверного взаимодействия, пустые состояния, запросы на доступ к системным функциям, валидация форм Особые режимы работы в мобильных приложениях
33. Почему дизайнеры?
34. Спасибо fb.com/nikita.zherebtsov.1 Telegram: Anomalec zherebtsov.com/profsoux2020.html