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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При разработке интерактивного состояния учтите:

• Что произойдёт, когда пользователь нажмёт на элемент?
• Что произойдёт, когда пользователь сфокусируется на элементе?
• Что произойдёт, когда пользователь скроет или откроет элемент?
• Понятно ли пользователю, что элемент изменился при взаимодействии с ним?

Ошибка может произойти из-за действий пользователя или из-за неполадок системы (например, обрыва соединения с интернетом).

При проектировании состояния ошибки стоит задуматься:

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

Интерфейс должен ясно показывать, получилось ли у пользователя завершить действие.

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

#ui #интерфейсы