Спроектировать разные состояния интерфейса и не запутать пользователя

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

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

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

Внешний вид экрана, когда контент отображается лучше некуда, а у системы есть все нужные данные. К сожалению, многие дизайнеры работают лишь над ним.

Пример идеального состояния приложения для коллекционеров искусства

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

Несколько вопросов, которые стоит задать себе, чтобы хорошо спроектировать пустое состояние:

Как выглядит экран, когда пользователь просматривает его впервые?
Как выглядит экран, когда поиск не даёт результатов, и как экран сообщает об этом пользователю?
Как выглядит экран после удаления пользователем всего содержимого?

Указывает на загрузку или выполнение какого-то действия.

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

Понятно ли пользователю, что идёт загрузка?
Не создаёт ли индикатор загрузки ощущение, что система тормозит?

Пример состояния загрузки

Может возникнуть, когда пользователь только начал взаимодействовать с продуктом. Чтобы помочь пользователю перейти к идеальному состоянию, нужно поработать над оформлением интерфейса.

Несколько вопросов, которые помогут оформить состояние частичной наполненности:

Как выглядит экран, когда пользователь только начал взаимодействие?
Как выглядит экран после того, как пользователь добавил всего один элемент?
Как мы можем побудить пользователя к большему взаимодействию?

Пример состояния частичной заполненности

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

Это состояние может возникнуть из-за слишком длинного или короткого текста, слишком больших или маленьких изображений или данных в неподходящем формате. Даже если такой контент появился на странице, его восприятие должно быть лёгким.

Вопросы, которые помогут спроектировать это состояние:

Как отображается слишком короткий или длинный текстовый блок?
Как выглядит экран, когда на нём нет изображений, хотя они должны быть?
Как выглядит экран, когда часть содержимого отсутствует?
Понятно ли пользователю, что он видит «несовершенный» контент? Или же он думает, что система сбоит?