Проектируем пустые экраны
10.09.2014 | Автор: Анатолий Ларин, Touch Instinct (Менеджер по развитию бизнеса) 
Пустой экран в приложении это экран на котором нет данных. Обычно это экраны вроде избранного, корзины или моих покупок при первых запусках приложения.
Дизайнеры и продукт-менеджеры забывают о пустых экранах. Они рисуют макеты заполненные данными, тестируют приложение заполненное данными. И редко видят экраны пустыми. К сожалению, большинство пользователей видят пустые экраны, причем ДО заполненных. Они составляют впечатление о приложении именно по ним. Не уделять внимание пустым экранам серьезная ошибка, которая может стоить вам пользователя. Разберемся, как делать их правильно.
Начнем с негативного примера и улучшим его.
Экран пустой корзины. Точнее экрана нет, если попробовать попасть на корзину из бокового меню пользователь увидит стандартное оповещение «Корзина пуста». Хуже придумать сложно.
Первое улучшение — делаем отдельный экран.
Теперь мы на уровне большинства российских бизнес приложений, что все еще плохо. Хороший пустой экран:
— объясняет пользователю что это за экран; — как его наполнить; — и дает возможность перейти к наполнению.
Улучшим экран с учетом этих принципов.
Текст и подписи к кнопкам стоит переписать, но не считая этого, получилось идеально. Пользователь понимает что будет на экране, как его заполнить и может сразу перейти к наполнению.
Не перестарайтесь. Пустой экран должен выглядеть как пустой экран. Избегайте ярких цветов и иллюстраций, не добавляйте слишком много элементов.
И последний шаг — передайте эмоцию. Этот шаг необязательный, но приятная картинка порадует пользователей и сделает их лояльнее к приложению.
Несколько примеров, почувствуйте эмоцию, которую пытается передать приложение:
Ошибки и загрузка
Важно чтобы пользователь однозначно смог отличить пустой экран от экрана загрузки, для этого при получении данных покажите индикатор загрузки.
Уделите внимание экранам ошибок, дизайнеры обращают на них внимание еще реже чем на пустые.
Если ошибка критичная для всего приложения: нет интернета, не отвечает сервер — покажите неубираемый экран с описанием проблемы и способами ее решения.
Если частью приложения можно пользоваться без интернета — не блокируйте приложение и прочитайте про второй случай.
Если нельзя воспользоваться только одной функцией, покажите поясняющий экран или системное сообщение ПРИ доступе к этой функции. В системном сообщении обязательно добавьте кнопку «Отмена», иначе ошибка заблокирует приложение.
Попадаются приложения где экран загрузки, экран ошибки и пустой экран выглядят абсолютно одинаково. Не делайте так.
Примеры Несколько примеров пустых экранов в российских бизнес приложениях.
У МВидео и Ознона все плохо. Как поправить читайте выше. У Ламоды хорошо, но можно сверстать экран аккуратнее и добавить кнопки входа и перехода в каталог.
Хорошо сделано, но я бы убрал восклицательные знаки, переписал тексты и на экране пассажиров добавил стрелочку на кнопку добавления (как в шапке письма).
Прекрасно сделано. Хотя можно было бы дать больше информации и кнопка «Вернуться» смущает. Кажется, эту версию приложения писала внутренняя команда после неудачного эксперимента с iD East. Получилось гораздо лучше.
И напоследок — котики.
Команда приложения Avito, делает все на удивление хорошо, лучший пустой экран.
Примеры пустых экранов для вдохновения
Еще по теме
Полный текст статьи читайте на CMS Magazine
