{"id":10861,"title":"\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043f\u0438\u043b\u043e\u0442 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 PwC Venture Hub","url":"\/redirect?component=advertising&id=10861&url=https:\/\/vc.ru\/promo\/349044-korotko-zapustit-pilot-i-poluchit-novyh-klientov-s-pwc&placeBit=1&hash=4330fcc6373e035951e6ff64a3ae572ba5f30463fe8776204270bbc0bd091c81","isPaidAndBannersEnabled":false}
Дизайн
Ян Австрейх

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

От примера состояния загрузки испытал почти физическое удовольствие.

Ответить
9
Развернуть ветку
Дмитрий Новиков

Да, прям кайфанул от анимации :)

Ответить
1
Развернуть ветку
Читать все 2 комментария
Как мы сделали корпоративную культуру инструментом роста. Опыт региональной IT-компании
Как Яндекс Маркет забрал у меня товара на 600 тысяч и не хочет возвращать

Предыстория

Как пандемия изменила рынок онлайн-страхования

Выяснили и рассказываем, как изменился онлайн-спрос на услуги страхования с начала пандемии.

В Москве появился фонд, инвестирующий в перспективные транспортные проекты

Фонд развития московского транспорта будет поддерживать стартапы, разрабатывающие прорывные технологии.

«Холакратия, любимые мемчики и прозрачность»: программист о работе в Точке, моделинге и запуске треков на Spotify

Точка — это про людей. Про сотрудников, которые создают удобный банк для бизнеса. Мы запускаем серию интервью с нашей командой, чтобы рассказать, как у нас всё устроено.

Ты всё ещё доверяешь калькуляторам веб сервисов ?

При поиске жилья наткнулся на интересный калькулятор "Копить или купить" от ЦИАН.

«Инновации — это поле для сражений»

Как фуд-ритейл внедряет новые технологии.

Хоть кто-то был в курсе?

Российскую операционную систему «Фантом» довели до тестирования после 12 лет разработки с нуля Статьи редакции

Система использует необычную архитектуру, не похожую на Windows и Linux.

Система «Фантом» в виртуальной машине QEMU
РОССИЙСКИЙ РЫНОК БУДЕТ РАСТИ. Пора покупать российские акции. Аналитика и прогноз индекса РТС

В видеоролике дан подробный прогноз по индексу РТС и российскому рынку акций. Почему российский рынок будет неизбежно расти? Подробный фундаментальный и технический анализ по индексу РТС.

ИКЕА смогла предоставить самый худший клиентский сервис в моей жизни
null