Состояния компонентов: что забывают нарисовать

Загрузка, ошибка, пустота, отключено, фокус с клавиатуры. Разбираем полный набор состояний и то, почему интерфейс разваливается именно на них.

Идеальный макет — редкое состояние

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

Реальность состоит из ожидания, ошибок, пустых списков, длинных имён и отсутствующих изображений. Именно там интерфейсы и ломаются.

Полный список

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

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

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

Отдельно стоит различать «пусто, потому что вы ещё ничего не создали» и «пусто, потому что фильтр ничего не нашёл» — это разные экраны с разными действиями.

Загрузка

Спиннер по центру пустого экрана — худший вариант: он не сообщает, сколько ждать, и вёрстка прыгает при появлении контента. Скелетоны, повторяющие форму будущего содержимого, решают обе проблемы.

Для действий короче 300 мс индикатор вообще не нужен: он только добавляет мельтешение.

Длинный контент

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

Простое правило: рисуйте компоненты сразу в трёх вариантах — минимальный контент, типичный и максимальный.

Почему состояний всегда больше, чем нарисовано

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

Самое пропускаемое — фокус с клавиатуры. Его убирают, потому что «некрасивая рамка», и вместе с ней убирают единственный способ понять, где ты находишься, для того, кто не пользуется мышью. Второе по частоте — пустота: список без единого элемента показывает белый экран, хотя именно здесь новый пользователь оказывается чаще всего.

Как состояния описывают, чтобы их не теряли

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

Загрузку стоит разделять на две: короткую, где достаточно погасить кнопку, и длинную, где нужен скелет содержимого. Граница проходит примерно на секунде — дольше этого пустое место читается как поломка.

Элементы, которые рисуют каждый день

Список состояний относится к любому элементу, но у ходовых элементов есть и собственные правила, о которых спорят реже, чем стоило бы. Аккордеон сворачивает разделы и потому прячет содержимое от поиска по странице: он уместен там, где читатель ищет один раздел из многих, и вреден там, где нужно прочесть всё. Табы решают ту же задачу иначе — показывают один срез из нескольких равноправных, — и ломаются, когда срезов больше пяти или когда их названия не помещаются в строку.

Тултип — подсказка по наведению, и это делает его недоступным для касания: на телефоне наведения нет. Если в подсказке лежит что-то нужное, она должна быть либо подписью, либо раскрывающимся блоком по нажатию. Тост — короткое уведомление у края экрана; его беда в том, что он исчезает сам, поэтому в тосте не бывает важного: только подтверждение того, что человек и так сделал.

Выбор между похожими элементами

Что в итоге

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

Рисуйте каждый компонент в трёх объёмах контента и не забывайте focus-visible — это половина доступности.