Дизайн
Ян Австрейх
2681

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Достаточно ли ясно система показывает, что действие завершено успешно?
  • Как выполнение действия влияет на содержимое экрана?
  • Позволяет ли экран выполнить следующую задачу?
Пример состояния успеха
{ "author_name": "Ян Австрейх", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","ui"], "comments": 2, "likes": 25, "favorites": 128, "is_advertisement": false, "subsite_label": "design", "id": 80724, "is_wide": true, "is_ugc": true, "date": "Thu, 29 Aug 2019 11:07:05 +0300", "is_special": false }
0
{ "id": 80724, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/80724\/get","add":"\/comments\/80724\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/80724"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
2 комментария
Популярные
По порядку
9

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

Ответить
1

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }