Пустые состояния — самый недооцененный аспект UX

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

Что такое пустое состояние?

У UX-дизайнеров есть много возможностей для создания приятного и значимого опыта. Одной из таких возможностей, которую часто игнорируют, является «пустое состояние» или пустой экран. Пустые состояния — это моменты взаимодействия пользователя с продуктом, когда нечего отображать.

Вот несколько примеров распространенных ситуаций с пустым состоянием:

• Новый экран Dropbox, на котором не было создано ни одного файла или папки.
• Получившийся экран после выполнения всех задач в менеджере списков дел.
• Получение экрана ошибки в Slack, когда команда не поддерживается.
• Запускаю новую учетную запись в социальной сети, а связей нет.
• Что-то ищу в Gmail и не получаю результатов.

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

Полезное пустое состояние позволит пользователю узнать, что происходит, почему это происходит и что с этим делать. Вот два примера хорошего дизайна UX с пустым состоянием:

Вот несколько примеров дизайна пустого состояния с упущенными возможностями:

Типы пустых состояний

Вот четыре типа часто встречающихся пустых состояний:

• Первое использование — происходит с новым продуктом или услугой, когда еще нечего показать, например, новый аккаунт Evernote или Dropbox.
• Пользователь очищен — происходит, когда пользователи выполняют такие действия, как очистка своего почтового ящика или списка задач, и результатом является пустой экран.
• Ошибки . Они возникают, когда что-то идет не так или возникают такие проблемы, как выход мобильного телефона из сети из-за проблем с сетью.
• Нет результатов/нет данных — возникает, когда нечего показывать. Это может произойти, если кто-то выполняет поиск, а запрос пуст или нет доступных данных для отображения (например, при фильтрации диапазона дат, в котором нет данных).

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

Пользователи пробуют множество приложений, но решают, какие из них они хотят «прекратить использовать» в течение первых 3-7 дней. Для «приличных» приложений большинство пользователей, удержанных на 7 дней, задерживаются гораздо дольше. Ключ к успеху — заинтересовать пользователей в течение первых 3-7 дней. — Анкит Джейн

Преимущества использования хорошо спроектированных пустых состояний

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

В своей книге « Чего на самом деле хотят клиенты» Скотт Маккейн излагает шесть основных принципов качественного обслуживания клиентов.

Он пишет, что клиенты хотят:

1. Убедительный опыт
2. Личный фокус
3. Взаимная лояльность
4. Дифференциация
5. Координация
6. Инновации

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

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

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

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

Избегание: забытые экраны UX-дизайна

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

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

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

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

Что происходит, когда пустые состояния игнорируются?

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

К счастью, ситуация начинает меняться, поскольку преимущества и возможности проектирования хороших пустых экранов становятся более важной и приоритетной частью процесса проектирования UX.

Как заполнить пустой экран целью

Вот несколько лучших UX-практик, которые помогут сделать пустые экраны полезными, полезными и информативными.

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

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

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

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

Вот пример экрана пустого состояния с начальным содержимым:

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

Однако лучше свести действия к минимуму. Закон Хика гласит, что «время, необходимое для принятия решения, увеличивается с увеличением количества и сложности вариантов». Таким образом, пользователи, скорее всего, будут действовать быстрее, если количество призывов к действию будет не более одного или двух. Вот отличный пример:

Еще один хороший пример — Instagram. Когда люди впервые знакомятся с платформой, они еще ни на кого не подписаны (и никто не подписан на них). Было бы легко сосредоточиться на всех замечательных функциях Instagram, но, например, хороший экран с пустым состоянием может дать им возможность «добавить людей, чтобы подписаться».

Рекомендации по пользовательскому опыту с пустым состоянием — с места

В Toptal работают первоклассные внештатные специалисты во всех областях дизайна. Вот что пара UX-дизайнеров Toptal рассказала о своем опыте разработки экранов пустого состояния.

Toptal Designer: Тамара Олсон

Дисциплина дизайна: UX-дизайн

Над какими хорошими пустыми состояниями вы работали или видели?

Хорошие современные конструкции с пустым состоянием, которые я наблюдал, обычно состоят из двух частей: инструкций и одной части удовольствия. Если пользовательский интерфейс пуст, задача UX-дизайнера — помочь пользователям понять, что будет в пространстве, когда оно будет заполнено. Если задача пользователя заключается в его заполнении, сообщение должно содержать инструкции о том, как это сделать. (Например, пустая таблица «Классы» в продукте edtech может содержать копию, информирующую учителей о том, как создать свой первый класс.)

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

Вы когда-нибудь пропускали пустые состояния, и если да, то почему?

Конечно, это легкая ловушка. Когда мы дальновидны, мы представляем себе приложения и продукты, когда они находятся в самом разгаре, наполнены контентом и пользователями. Когда я работал в Google, вице-президент по продукту сказал, что продукты похожи на полеты на самолете; большинство проблем возникает во время взлета и посадки.

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

Вы видели успех клиента с использованием пустых состояний? Если так, то каким образом?

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

Какое наиболее успешное использование пустого состояния вы испытали?

Как «нулевой почтовый ящик», я постоянно восхищаюсь иллюстрацией пустой папки «Входящие» в приложении Gmail: человек под зонтиком, читающий книгу под солнечным светом, с подписью «Вы все сделали!» Технически это нарушает правило, которое я упомянул о пустых состояниях, требующих призыва к действию, и все же это не так, потому что подсознательный призыв к действию звучит так: «Откажись от электронной почты и иди, наслаждайся жизнью». Я люблю это.

Лучший дизайнер: Майкл Клингерман

Дисциплина дизайна: Дизайн продуктов SaaS

Если вы разработали пустые состояния, какие типы вы видите чаще всего?

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

Вы видели успех клиента с использованием пустых состояний? Если так, то каким образом?

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

Какое наиболее успешное использование пустого состояния вы испытали?

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

Заключение

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

• • •

Дальнейшее чтение в блоге Toptal Design

• Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки
• Мобильный UX-дизайн — лучшие практики, ограничения и работа с разработчиками
• Эвристические принципы для мобильных интерфейсов
• Влияние с помощью дизайна — Путеводитель по цвету и эмоциям
• Принципы дизайна и их важность