Разработчику на заметку: как оформить чистый экран приложения

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

На днях я наткнулся на весьма интересную статью дизайнера Крейга Денниса, в которой он по полочкам разложил правила оформления «чистого» экрана приложения для iOS. Технически это называется «Empty state» — когда программа по какой-то причине не может ничего показать пользователю. Как пишет Крейг, многие начинающие дизайнеры не уделяют этому аспекту приложения достаточного внимания, а ведь зачастую грамотно сообщить пользователю об отсутствии контента так же важно, как и само отображение контента. Мне его статья показалась весьма любопытной, поэтому предлагаю ознакомиться с кратким переводом основных мыслей.

«Чистые» экраны можно разделить на три основных типа — первое использование приложения, отсутствие контента и техническая ошибка (сбой подключения к Интернету, например).

1. Первое использование

Первые впечатления всегда остаются в памяти, особенно плохие. Именно поэтому дизайнеру очень важно оформить интерфейс таким образом, чтобы при первом запуске программы пользователя встречал не нейтрально-холодный белый экран, а нечто эстетическое и функциональное. Лучше всего нарисовать какую-нибудь наглядную картинку и добавить пару советов по использованию приложения (только не стоит перегружать интерфейс нудной инструкцией в духе Капитана Очевидности). Отличными примерами замечательной реализации такой задумки являются программы Buffer, Timehop и Dropbox (скриншоты вы можете видеть выше).

2. Отсутствие контента

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

Вот так эта проблема решается в Sparrow, Gmail и стандартной программе Mail в iOS: Sparrow демонстрирует пользователю традиционную иконку почтового ящика и надпись «Inbox Zero». Этот экран интуитивно понятен, минималистичен и оформлен довольно стильно. У пользователя вряд ли возникнут какие-то вопросы.

Разработчики Gmail пошли еще дальше и добавили нотку эмоциональности в свое приложение — когда у пользователя нет непрочитанных писем, перед ним красуется веселая иконка солнца с подписью «Наслаждайтесь днем!». Такого рода чувства как бы намекают человеку о том, плохо или хорошо это (приведенный пример очевиден, но бывают и более сложные случаи).

Системное приложение Mail.app не имеет особого дизайна «чистой» страницы, поэтому пользователю остается лишь догадываться, почему перед ним нет списка писем — либо просто нет новых сообщений, либо произошла ошибка синхронизации, либо сбой подключения к Интернету. Подобного рода сомнения всегда оставляют неприятное ощущение от использования программы, поэтому при проектировании интерфейса старайтесь понятно сообщать пользователю о том, почему перед ним не отображается ожидаемое содержимое.

3. Технические ошибки

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

Давайте посмотрим, как экран с ошибкой реализован в программах Chrome, Opera Mini и Safari.

Chrome буквально «выплевывает» на пользователя длинный текст со скучной технической информацией. Opera Mini «отделывается» парой предложений, которые не дают пользователю четкого представления о том, почему браузер не может открыть тот или иной сайт. Наиболее удачную реализацию, на мой взгляд, предлагает стандартная программа Safari, где четко написано, что iPhone не подключен к Интернету.

Выводы

Как нам удалось убедиться, правильный дизайн «чистого» экрана очень важен для современных интерфейсов — и не только для iOS-программ. Перед тем, как отправлять программу на обзор в App Store или оформлять финальный релиз, задумайтесь на минутку, кто будет пользоваться вашим приложением и для чего. Постарайтесь обратить внимание на самые мельчайшие детали, которые помогут вашему продукту выделиться из серой массы конкурентов. Если вам удастся понравиться пользователям и оставить хорошее о себе впечатление, в дальнейшем они будут готовы прощать вам какие-то недочеты и ошибки.

P.S. Что вы думаете о дизайне «чистых» экранов? Есть ли какие-то субъективные пожелания или общие советы? Стоит ли редакции MacRadar писать о подобных тонкостях в разработке и проектировании интерфейсов для iOS? Пишите свое мнение в комментариях, было бы интересно обсудить тему с читателями.