Как создать пустые страницы состояния для веб-сайтов и мобильных приложений

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

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

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

Значение пустых состояний

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

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

Пустые состояния также дают ощущение “свежесть” с новыми учетными записями, у которых нет существующих данных.

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

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

Но пустые страницы состояния по-прежнему имеют значение, даже если никаких действий не требуется. Эти проекты в основном предназначены для предоставления информации.

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

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

Жизненно важные элементы страницы

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

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

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

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

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

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

Поощрение активности пользователей

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

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

Это пустое состояние от ModSpot - блестящий пример качественного дизайна и привлекательного контента.

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

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

Другие ссылки на странице ведут к справочным руководствам и контактным данным. Все невероятно обтекаемо и красиво соединяется.

Веб против мобильных приложений

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

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

Это можно решить в том же стиле, что и Nusii на странице своих предложений. Там, где нет предложений, пользователь руководствуется “добавить предложения” кнопка в верхней панели навигации.

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

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

Пустой State Design Примеры

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

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

DigitalOcean Плавающие IP