Интерактивные уведомления iOS и их визуальный аспект

В данной статье моя коллега Саша Шарина из отдела ARG_visual_design предлагает обсудить уведомления в iOS, сделав акцент именно на интерактивных баннерах.

Уведомления сообщают нам актуальную в данный момент информацию от наших приложений. iOS предполагает три вида уведомлений: звуки (sounds, слышимые сообщения), предупреждения и баннеры (alerts/banners, всплывающие сообщения на экране), значки (badges, картинки или цифры, появляющиеся на иконке приложения).

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

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

Более подробно рассмотрим оформление уведомлений приложений. В левом верхнем углу находится иконка приложения. Размер её достаточно маленький и составляет около 33,3% размера стандартной иконки на экране. Чтобы изображение с маленькой иконки было возможным для восприятия, оно должно быть достаточно простым, включать в себя ограниченное количество цветов (предположим, что не более трех), исключать декоративные неработающие элементы (тень, обводка, узоры на фоне и т.д.). Отметим, что новые модели iPhone, например, отличаются от предыдущих моделей увеличенным размером экрана. За счет этого и размер иконок несколько увеличивается, но незначительно. Даже если пользователь из-за мелкого размера иконки не считывает её смысл, он может прочесть сопутствующее иконке название приложения. Название расположено справа от иконки. Справа от названия приложения также отмечается время появления нового сообщения. Предполагаю, что смысл указывать время есть только в центре уведомлений, где пользователь видит целую ленту новых сообщений. Получая уведомления на экране непосредственно в момент появления новости, пользователь не требует подтверждения этому в виде надписи “now”. Восприятие этого отвлекает внимание на доли секунды, но они также важны при быстрых коротких коммуникациях через уведомления. Ниже расположено само текстовое сообщение. Оптимальным видится сообщение, которое не занимает более двух строк и укладывается в объем 70 символов (с учетом пробелов). Возможно и более длинное сообщение на три строчки. Можно отметить, что в текстовом сообщении уведомления также могут содержаться символы-смайлы. Визуальные символы помогают заменить длинное слово или словосочетания, также сокращая время коммуникации. Также можно открыть поле с кнопками для ответных действий. Это поле отделяется тонкой стильной полосой от основного содержаний. Предполагаю, что из оформления ее можно исключить и использовать высвободившееся место. Поле может содержать различные кнопки действия в зависимости от вида сообщения. Существуют интересные идеи относительно цвета кнопок и, возможно, уже воплощаются. Например, кнопка, которая предлагает сделать разрушительное действие (удаление), может отображаться красным. Действия об изменениях и ответах могут иметь синий или нейтральный цвет. В целом использование цвета видится интересным, поскольку с помощью визуального языка пользователь может быстро принять решение, возможно, даже до прочтения названия кнопки. С другой стороны, iPhone существует на глобальном рынке, им пользуются представители различных культур. Красный цвет не во всех культурах ассоциируется с негативным воздействием. Таким образом, подбор цветов для кнопок с таким посылом не может выбираться только на основании предположений дизайнеров и требует исследований восприятия различными группами пользователей. Кнопку также можно дополнить соответствующей иконкой, как это делают на Android. Например, приложение NiLS для Android предлагает варианты ответного действия в виде символов (крестик, гаечный ключ, символ шаринга) и некоторые дополняет словами. Это позволяет на одной строке расположить сразу несколько вариантов ответных действий. Вопрос состоит лишь в узнаваемости символов пользователями.

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

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

Полезные ссылки:

  1. https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/NotificationCenter.html

2. http://support.apple.com/en-us/HT201925

3.https://developer.apple.com/library/IOS/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Chapters/ApplePushService.html

4. http://www.iphonehacks.com/2014/09/use-interactive-notifications-ios-8.html

John Maeda: Overheard Prof Hermann at #RISD, As soon as you make something, conversation can happen. Summary: Don't wait -- make. +7 916 5405879 CEO@a-rg.com

John Maeda: Overheard Prof Hermann at #RISD, As soon as you make something, conversation can happen. Summary: Don't wait -- make. +7 916 5405879 CEO@a-rg.com