Как нарисовать загрузку, пустой экран, ошибку и успех

Макет обычно рисуют в одном состоянии: данные есть, всё загрузилось, всё получилось. В остальных экран бывает не реже.

Посмотрите на «Мои заказы» глазами покупателя:

• у нового покупателя заказов нет;
• при плохой связи список грузится несколько секунд;
• сервер иногда не отвечает;
• после нажатия «Повторить» в списке появляется новый заказ.

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

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

Чтобы не пропустить ни одно состояние, перечислите их до того, как рисовать. Помогают четыре вопроса:

Дизайнер Скотт Хёрфф в 2015 году назвал такой набор стеком интерфейса. В его списке пять состояний: идеальное, пустое, ошибка, частичное и загрузка. Частичное — когда данных мало, например один заказ вместо двадцати: экран не пустой, но выглядит не так, как в макете.

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

Пустота бывает трёх видов, и в каждом нужно сказать разное.

Пустой поиск

Частая пустота — в поиске. Например, покупатель ищет кофе без кофеина, а включённый раньше фильтр «Молотый» оставляет ноль товаров.

В Nielsen Norman Group советуют для пустых экранов три вещи:

• сообщить, что происходит;
• подсказать, как здесь всё устроено;
• дать прямой путь к главному действию.

Иллюстрация без текста ни одну из них не выполняет: она красивая, но не говорит, что делать.

Какими словами писать такой экран, разобрано в уроке «Тексты ошибок и пустых состояний», Junior.

Загрузку показывают там, где ожидание заметно. Где оно незаметно, индикатор только мелькает.

Ожидание человек замечает не сразу. Якоб Нильсен описал эти границы ещё в 1993 году:

• ответ быстрее 0,1 секунды кажется мгновенным;
• до секунды задержку уже видно, но мысль не прерывается;
• после 10 секунд внимание уходит на другое.

От этого и зависит, что показывать.

Скелет или крутилка

Скелет — это серые блоки на месте будущего содержимого. Он лучше крутилки там, где грузится целый экран или список.

Проверьте себя

Восемь случаев ожидания в приложении. Что показать, пока ждём?

Ошибку ввода человек исправляет сам, ошибку системы — нет. Поэтому показывают их по-разному.

Ошибка ввода — человек ввёл то, что нельзя принять: в телефоне не хватает цифры, не указан дом. Причина в поле, и исправить её можно в этом же поле.

Ошибка системы — не получилось по причине, которую в поле не исправить: пропала связь, не ответил сервер, не ответил платёжный сервис.

Когда проверять поле, большие системы решают по-разному. В Nielsen Norman Group советуют показывать ошибку сразу, как человек закончил с полем. GOV.UK проверяет только по кнопке «Продолжить»: так человек не видит ошибок, пока заполняет форму. Оба способа лучше, чем проверка на каждой букве. Подробно этот спор разобран в уроке «Формы», Middle.

То же с кодами и общими словами. «Ошибка 500» ничего не говорит покупателю, а «Что-то пошло не так» не говорит, что делать дальше.

Проверьте себя

Восемь ситуаций в приложении. Чья это ошибка?

После действия человек должен знать, что оно удалось. Насколько заметным сделать подтверждение, зависит от важности действия.

Листы состояний четырёх экранов, которые команда магазина отдала в разработку. Пять мест в них недоделаны.

Нажимайте на куски экранов, которые вы бы переделали. Под каждым куском написано, когда он появляется. В разборе будет, что с ним не так.

Возьмите свой экран и нарисуйте все его состояния. Выпишите, какого из них раньше не было в макете.

Часть 1 · Составить список, 15 минут

1. Выберите экран с данными: список, поиск, форму, корзину. Экран, где ничего не грузится и ничего не вводят, для задания не подойдёт.
2. Ответьте на четыре вопроса из начала урока: что видно, пока данные идут; что, если их нет; что, если не получилось; что после действия.
3. Разберите пустоту по видам: бывает ли здесь «ещё ничего нет», «ничего не нашлось», «всё сделано».
4. Разберите ошибки: по каждому полю — что можно ввести не так, и отдельно — что может не получиться у системы.

ЭКРАН: ______________________        Дата: __.__.____

ОБЫЧНОЕ: что видно, когда всё есть: ______________________

ЗАГРУЗКА
сколько обычно ждать: ___ с   в худшем случае: ___ с
что показать: ничего / индикатор на месте / скелет / прогресс с долей

ПУСТО
ещё ничего нет:     текст ______________   действие ______________
ничего не нашлось:  текст ______________   действие ______________
всё сделано:        текст ______________

ОШИБКА ВВОДА (по полям)
поле ______________: что не так ______________   текст у поля ______________
поле ______________: что не так ______________   текст у поля ______________

ОШИБКА СИСТЕМЫ
что не получилось: ______________   что с данными: ______________
что предложить: повторить / подождать / другой путь: ______________

УСПЕХ
как подтвердить: видно на месте / плашка / экран с подробностями
текст: ______________________

РАНЬШЕ НЕ БЫЛО В МАКЕТЕ: ______________________

Часть 2 · Нарисовать, 45 минут

1. Скопируйте основной экран столько раз, сколько состояний в списке. Шапка и навигация общие, меняется середина.
2. Нарисуйте каждое состояние по списку: загрузку по длительности, пустоту по виду, ошибку ввода у поля, ошибку системы у действия.
3. Впишите настоящие тексты, а не «Текст ошибки». Пустое состояние без слов — недоделанный экран.
4. Положите состояния рядом и подпишите, когда какое появляется.

Часть 3 · Проверить, 10 минут

1. Пройдите каждое состояние двумя вопросами: понятно ли, что случилось; понятно ли, что делать.
2. Покажите лист разработчику или коллеге и спросите, чего не хватает. Каждое «а что здесь показывать?» — пропущенное состояние.

Что должно получиться

• Лист состояний экрана: обычное, загрузка, пусто, ошибки, успех.
• Заполненный шаблон с текстами для каждого состояния.
• Строка о том, какого состояния раньше не было в макете.

План работы: 15 минут на список, 45 на макеты, 10 на проверку. Всего — чуть больше часа.

Частые сложности

• «Пустое состояние бывает раз в жизни». Зато это первое, что видит новый человек. По нему он решает, понятно ли здесь хоть что-то.
• «Текст ошибки напишет разработка». Разработка напишет то, что знает: код и слово «Ошибка». Что человеку делать дальше, знает тот, кто проектировал сценарий.
• «Не знаю, сколько будет грузиться». Спросите разработку, сколько обычно и сколько в худшем случае. Нарисуйте состояние для худшего, а рядом допишите: показывать, только если ответа нет дольше секунды.
• «Состояний слишком много». Большинство отличаются только серединой экрана. Нарисуйте середину, остальное скопируйте.

Экран готов, если

• Состояния перечислены до макета: загрузка, пусто, ошибка, успех
• Пустое состояние говорит, что здесь будет и что сделать сейчас
• Загрузка показана там, где ждать дольше секунды
• Для ожидания дольше 10 секунд есть прогресс с долей
• Ошибка ввода стоит у поля и описана текстом
• Ошибка системы говорит, что не получилось, что с данными и что делать
• После ошибки введённое не пропадает
• Подтверждение называет результат, а не «Успешно»

Что мешает

• «Нарисую потом». Потом состояние рисует разработка — как успеет и без текста.
• Картинка вместо объяснения. Пустой экран красивый, но непонятно, что делать.
• Крутилка на всё. Даже там, где ответ приходит за долю секунды.
• «Что-то пошло не так». Человек не знает, что именно, и не знает, что делать.
• Ошибка одним цветом. Красную рамку видят не все, и непонятно, что исправить.

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

• Designing Empty States in Complex Applications: 3 GuidelinesNielsen Norman Group, Кейт Каплан · на английском · бесплатноТри правила для пустых экранов: сообщить, что происходит, подсказать, как здесь всё устроено, и дать путь к главному действию. Там же — почему нельзя показывать «Нет записей», пока данные ещё грузятся. Статья 2021 года, примеры из сложных рабочих приложений.
• Skeleton Screens 101Nielsen Norman Group, Самхита Танкала · на английском · бесплатноКогда показывать скелет, когда крутилку, а когда полосу прогресса: меньше секунды — ничего, до 10 секунд — скелет для целого экрана и крутилка для одного блока, дольше — прогресс. Там же — почему скелет из одной шапки и подвала не помогает.
• Error-Message GuidelinesNielsen Norman Group, Тим Нойзессер и Эван Санволл · на английском · бесплатноКак показать ошибку, чтобы её заметили, как написать, чтобы поняли, и как сберечь силы человека — в том числе не стирать то, что он ввёл. Уточнение к уроку: человек ушёл из пустого поля — это ещё не ошибка.
• Empty statesIBM Carbon Design System · на английском · бесплатноТри вида пустоты в дизайн-системе IBM: данных ещё нет, пусто после действия человека (поиск без результатов, всё сделано) и пусто из-за ошибки или прав, — что сказать и что предложить в каждом. Справка дизайн-системы для рабочих приложений.
• Refactoring UIАдам Уотан и Стив Шогер, 2018 · книга на английском · платнаяГлава «Don’t overlook empty states» из раздела «Finishing Touches»: пустой экран как место для первого действия. Три страницы, текст закрыт.