Hi-Tech

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

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

Написать

Уведомлений пока нет

Пишите хорошие статьи, комментируйте,
и здесь станет не так пусто

Войти

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

В закладки

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

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

Идеальное состояние

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

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

Пустое состояние

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

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

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

Пример пустого состояния

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

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

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

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

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

Состояние частичной наполненности

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

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

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

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

Несовершенное состояние

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

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

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

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

Пример несовершенного состояния

Интерактивное состояние

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

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

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

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

Состояние ошибки

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

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

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

Пример состояния ошибки

Состояние успешно выполненного действия

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

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

Пример состояния успеха

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

Блоги компаний

Показать еще

Push-уведомления

{ "page_type": "article" }

["\u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043e\u0442\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043e\u0442 email
\u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u043c\u043e\u0432","\u041d\u0435\u0439\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0435\u0442\u044c \u043d\u0430\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0438\u0445\u0438
\u0433\u043e\u043b\u043e\u0441\u043e\u043c \u041f\u0430\u0441\u0442\u0435\u0440\u043d\u0430\u043a\u0430 \u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043e\u043a\u043d\u043e \u043d\u0430 \u043e\u0441\u0435\u043d\u044c","\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u043b\u0430\u0446\u0435\u0431\u043e \u0441\u043a\u0430\u0447\u0430\u043b\u0438
\u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0440\u0430\u0437","\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043a\u0430\u043b\u0438\u0444\u043e\u0440\u043d\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043d\u0435\u0439\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0435\u0442\u044c\u044e","\u0413\u043e\u043b\u043e\u0441\u043e\u0432\u043e\u0439 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a \u0432\u044b\u043a\u0443\u043f\u0438\u043b
\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e-\u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f","\u0425\u0430\u043a\u0435\u0440\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438 \u0434\u0432\u0443\u0445\u0444\u0430\u043a\u0442\u043e\u0440\u043d\u0443\u044e
\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u0433\u043e\u0432\u043e\u0440\u043e\u0432"]

Компания отказалась от email
в пользу общения при помощи мемов

Подписаться на push-уведомления

Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть