Проектируем пустые экраны Как правильно показать то, чего нет
Как правильно показать то чего нет

Проектируем пустые экраны

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

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

Начнем с негативного примера и улучшим его. Экран пустой корзины. Точнее экрана нет, если попробовать попасть на корзину из бокового меню пользователь увидит стандартное оповещение «Корзина пуста».


Хуже придумать сложно. Первое улучшение — делаем отдельный экран.


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

Улучшим экран с учетом этих принципов.


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

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

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

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

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

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


Если нельзя воспользоваться только одной функцией, покажите поясняющий экран или системное сообщение ПРИ доступе к этой функции. В системном сообщении обязательно добавьте кнопку «Отмена», иначе ошибка заблокирует приложение.


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

Корзины МВидео,Озона и Ламоды:


У МВидео и Ознона все плохо. Как поправить читайте выше. У Ламоды хорошо, но можно сверстать экран аккуратнее и добавить кнопки входа и перехода в каталог.

Пустые экраны AviaSales

Хорошо сделано, но я бы убрал восклицательные знаки, переписал тексты и на экране пассажиров добавил стрелочку на кнопку добавления (как в шапке письма)

Пустые экраны Head Hunter.

Прекрасно сделано. Хотя можно было бы дать больше информации и кнопка «Вернуться» смущает. Кажется, эту версию приложения писала внутренняя команда после неудачного эксперимента с iD East. Получилось гораздо лучше.

И напоследок — котики. Команда приложения Avito, делает все на удивление хорошо, лучший пустой экран.

Примеры пустых экранов для вдохновенияЕще по теме

От редактора


Я задумался, а помогает ли кому-нибудь рассылка? 
Сделали ли вы лучше свои приложения после прочтения очередного письма? 
Если да — расскажите на al@touchin.ru

Продуктивной недели!
 

Все выпуски рассылки touchin.ru/letters
Рекомендуйте друзьям.
 
ООО «Тач Инстинкт» 18 линия В.О. 29 Санкт-Петербург 199034 Russia 



Дополнения к письму

Руководитель мобильных проектов в HeadHunter Илья Молтянинов рассказал как они переделывали iOS приложение после внешнего подрядчика.

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

×