Закрыть
E-mail:
Пароль:
Забыли пароль?
В каталоге проекта: 12 678 веб-студий, 947 CMS, 228 586 сайтов.
РегистрацияCMS MagazineВход
CMS Magazine CMS Magazine

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

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

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

Начнем с негативного примера и улучшим его.

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

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

— объясняет пользователю что это за экран;
— как его наполнить;
— и дает возможность перейти к наполнению.

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

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

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

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

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

Ошибки и загрузка

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

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

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

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

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

Примеры

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

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

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

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

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

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

И напоследок — котики.

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

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

Еще по теме

Автор: Анатолий Ларин, Touch Instinct (Менеджер по развитию бизнеса)

Оригинал: http://touchin.ru/letters/proektiruem-pustye-ekrany/

Комментарии участников рынка

Алексей Бородкин

Компания: Notamedia
Должность: Руководитель отдела аналитики и проектирования

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

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

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

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


CMS Magazine CMS Magazine
RSS-подписка
CMS Magazine CMS Magazine
CMS Magazine