Material Design на русском. Часть 41 — Коммуникация: Пустые состояния

Published in

Дизайн-кабак

3 min readMar 10, 2021

--

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Контент

Пустые состояния могут отображать широкий спект контента. Например, пустое состояние какого-нибудь списка данных или результатов поиска. Хотя эти состояния не являются обычными в работе с приложениями, они должны быть спроектированы, чтобы избежать ситуаций белого листа.

Отображение экрана пустого состояния

Самое «базовое» пустое состояние состоит из статичной картинки и текста.

Используй изображение, которое:

Имеет нейтральное или юмористическое настроение
Соответствует бренду

Напиши заголовок, который:

Имеет полезный текст
Соответствует бренду
Передает цель экрана

**Правильно**: если что-то соответствует бренду, то ты можешь использовать юмор при дизайне пустых состояний, чтобы передать цель экрана и немного сгладить углы.

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

Альтернатива

Стартовый экран

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

Рекомендации:

Контент стартового экрана лучше всего подходит для приложений, которые хранят контент на устройстве (например, книги или музыку) или создают шаблонный контент (например, заметки или документы).
Используй контент, который демонстрирует основные функции.
Дай пользователям возможность не показывать и/или заменять стартовый контент чем-то другим.
Если возможно, то персонализируй под пользователя контент.

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

Обучающий контент

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

Рекомендации:

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

Хотя у пользователя еще нет фильмов, но вместо того, чтобы показывать пустое состояние, карточка объясняет особенности и преимущества сервиса (карточку при этом можно закрыть смахнув).

Лучший результат

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