Новое приложение Сбербанка для Android – это про эмоции

Сегодня Сбербанк запускает новое приложение для Android в стиле Material Design. Дмитрий Щеглов, арт-директор цифровых продуктов подразделения «Банк XXI» Сбербанка, написал для FutureBanking колонку о том, на каких принципах оно создавалось и что в себе несет.

Почему мы решили разработать новую версию приложения для Android в стиле Material Design? Если спросить обычного банковского клиента, он скажет, что банк – это, черт подери, скучно! К счастью, нам в Сбербанке удалось прийти к соглашению, что банк не должен ассоциироваться с сухой таблицей списка продуктов. Приложения лучше делать более тактильными и персонализированными. И мы решили использовать язык Material – именно потому, что он содержит иллюстрации и эмоции. Мы даже не боимся немного отойти от принятой айдентики Сбербанка. Конечно, цвета остаются теми же – зеленый, оранжевый – но все это выглядит по-другому. Мы можем, например, использовать зеленый текст на белом фоне, что раньше было невозможно себе представить – только зеленый. В целом можно сказать, что такое эмоциональное приложение – нестандартный кейс не только для нас, но и для любого банка.

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

Мы вычистили все лишнее. Это новый подход к станку. Мы сформировали гайдлайны, оформили их в документ. Понятно, что писать какой-то жесткий регламент в цифровом мире смысла нет – он устареет в тот момент, когда мы нажмем кнопку «Сохранить». Но мы высветили самые базовые принципы, которые не будут быстро сдуваться ветром – то, на чем мы стоим, некие константы. Это помогает нам самим не ошибаться. Причем документ создан в тесном сотрудничестве с программистами. Таким образом мы решаем извечную проблему: «Как договорится программисту и дизайнеру?». Благодаря этому релизу выработана целая wiki для дизайнеров и программистов. Мы описали стили шрифтов. Если программисты знают, что стиль, например, header – им этого достаточно – они уже понимают, какой это шрифт, его начертание, цвет, размер и т.д. Теперь нам не нужно постоянно выверять, все ли правильно воспринято.

Дизайн-язык Google вообще очень вдохновил нас. Теперь мы создаем подобные гайдлайны не только для Android, но и в целом для всех наших цифровых продуктов – для iPhone, Windows Phone, web и устройств самообслуживания. Надо отдать должное Google: их гайдлайны – это прекрасно созданный документ, который охватывает все аспекты коммуникаций дизайнеров с разработчиками. Поэтому взяли эту идеологию и структуру за основу.

Мы и сами пришли к этому – наше приложение для iPhone, например, стало все больше подвижным, живым, менее банковским. И я очень удивился, когда макеты и идеи нашей команды были поддержаны в Сбербанке. Самое прекрасное, что даже не пришлось никого уговаривать – мы просто собрались с продуктологами, и поняли: это действительно то, что нужно. Сначала Android откровенно отставал, и флагманом был iPhone, но тестируя совершенно новую во всех отношениях версию для Android, уже пользователи iPhone стали интересоваться, когда они получат такую же красоту на iOS. Отныне мы будем развивать приложения для этих платформ параллельно.

Посмотрим, например, на цели. Здесь можно добавить фотографию. Да, это не rocket science, но в целом сервис становится более персонализированным. Здесь мы переходим на новую парадигму – динамический интерфейс. Он адаптируется под то, как его меняет клиент. Вся страница окрашивается в цвет загруженной пользователем фотографии. Если он захотел фиолетовый дом – все на странице будет фиолетовым. Так же динамически меняется интерфейс в зависимости от типа банковской карты клиента. Впервые мы попробовали это в сервисе P2P-переводов для iPhone, где весь интерфейс окрашивается в размытый аватар получателя. Здесь мы пошли дальше. При этом мы не даем клиенту инструмент кастомизации, потому что это выглядело бы как перекладывание забот на него: «Мы не хотим за тебя думать, дорогой клиент, сделай это сам». Нет, мы незаметно адаптируем интерфейс. Это ты, это твоя фотография, мы незаметно подложили под нее фон, чтобы она выглядела еще лучше. Хочешь накопить на цель – все графики окрашиваются соответственно.

Мы активно применяем анимацию, но ненавязчивую – мы не должны и не хотим мешать пользователю. Скорее, наоборот – хотим помочь и сориентировать. Наиграться с сомнительной ценности анимацией мы и на «Дрибле» можем (dribbble.com – сайт для UI дизайнеров). Появилось много фишек при прокрутке. Была полностью переработана иконографика, чтобы она смотрелась органично. Если вставить наши иконки из iPhone на Android «как есть», они будут смотреться чужеродно. Однако если сопоставить библиотеки из этих двух платформ, прослеживается явная преемственность и дань платформе. Для каждого поля в платежной форме мы разработали собственную сопроводительную иконку, призванную подсказать ее значение. Все метафоры максимально упрощены, чтобы клиент быстро уловил, о чем это – тут телефон, тут адрес, тут календарь и т.д. Везде определены маски, чтобы пользователю было легче вводить данные.

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

В части карт мы также переработали раздел – убрали все лишнее с самой карты, добавили функцию прокладки маршрута к ближайшему отделению или банкомату. Конечно, мы не делали своего навигатора – используются стандартные установленные средства – например, «Яндекс.Навигатор» или «Google Карты».

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

Мы не боимся оперировать какими-то нестандартными статусами. Например, если прошел платеж, мы отмечаем это не какой-то сухой галкой, а можем написать что-то вроде «Как здорово, что у тебя все получилось!».

И наш маленький, но важный штрих – приветствие. Приложение стало здороваться: «добрый день», «добрый вечер» – всего четыре разных статуса с соответствующими картинками. Мы уже испробовали это на iPhone и получили очень хорошие отзывы от клиентов. Это одна из маленьких деталей, которые мы так любим. Они не про банк, а про эмоции. Например, у нас есть идея, что вечером и ночью при входе в приложение иногда будет падать звезда. Но не всегда и в разных местах. Так что успейте загадать желание!

Да, можно спросить: «Зачем это все?». Но ведь из эмоций и складывается наше впечатление о приложении. Почему нам нравится входить в приложение Uber или Facebook? Потому что у нас есть близкое эмоциональное отношение с этим продуктом. И без эмоций передать клиенту это позитив невозможно. Деньги для людей обычно ассоциируются с чем-то сложным – надо посмотреть таблицу, посчитать дебет с кредитом. Мы хотим отойти от этого.

Мы действительно вдохновлены тем, что мы делаем, над нами не стоит каких-то KPI, и в итоге мы часто выполняем такую работу факультативно. Сюда вложена душа, и, надеюсь, это будет чувствоваться.

Эта статья была разослана 1020 людям, которые подписались на тему «Mobile»

Чтобы подписаться на «Mobile», просто введите Ваш электронный адрес.