(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93857963, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93857963, 'hit', window.location.href);

«Лавандовый банк, пожалуйста!». Зачем в «СберБанк Онлайн» цветные стены и какой оттенок выбирают чаще всего

Недавно мы добавили в «СберБанк Онлайн» новые цвета, и после первой итерации в отзывах нам написали, что розовый оказался «недостаточно розовым». В следующем релизе мы добавили ещё один оттенок — «Больше чем розовый».

Теперь клиентам доступен целый набор цветов: лунный, лаймовый, графитовый и другие. Меня зовут Ярослав Сизов и я расскажу, почему мы выбрали именно эти цвета и зачем вообще красить стены в банковском приложении.

Ярослав Сизов

лидер дизайн-кластера, СберБанк Онлайн

Эмоциональный банкинг — зачем это нам и нашим клиентам

Люди постоянно взаимодействуют с финансовыми сервисами. Многие не меняют банк годами, а кто-то пользуется услугами одной организации всю жизнь. Среднестатистический клиент СберБанк Онлайн заходит в приложение более 30 раз в месяц, примерно раз в сутки, и эта цифра растёт из года в год. Неудивительно, что со временем между банком и клиентом возникает эмоциональная связь.

Банковская сфера в целом довольно консервативна. Если смотреть на неё через призму продуктового дизайна, функциональность обычно имеет больший вес, чем эстетика. Поэтому за новые цвета и заставки меня уже много кто в публичном пространстве ткнул. Популярная позиция: «Лучше бы комиссию отменили, чем добавляли заставки или фон перекрашивали». Это подтверждает, что для большинства клиентов намного важнее возможность закрыть сервисную потребность, например перевести деньги или оплатить мобильную связь. И мы с этим согласны. Но это не значит, что цвет фона и другие эмоциональные фичи вообще никому не нужны. Более того, цифры, о которых мы поговорим чуть позже, доказывают обратное.

Ещё совсем недавно у клиентов было не очень хорошее отношение к банкам в целом. К сожалению, так сложилось исторически. Обязательные походы в офис, подписание договоров, канцеляризмы, юридические тонкости: всё это никак не упрощало взаимодействие. Стало очевидно, что нужны изменения. Причём не только в приложении, но и в процессах внутри банка. В первую очередь нужно было облегчить коммуникацию с клиентом хотя бы на уровне формулировок — начать общаться простым языком. Где-то на этом этапе родились рекомендации по написанию текстов в интерфейсах, начала расти дизайн-система для iOS и Android, добавился иллюстративный язык в онбордингах, появились сами онбординги (как принцип рассказа о новых фичах). И только потом — кастомные заставки на вход в СберБанк Онлайн и смена цвета фона.

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

Можно выбрать разные темы заставок на вход в СберБанк Онлайн

Больше чем украшательство

В случае с летним обновлением добавление новых цветов — это ещё и решение технологической задачи по расширению визуальной гибкости приложения. Грубо говоря, раньше был монолитный кусок UI, а теперь можно и так и этак. Кроме того, эти точечные наработки в перспективе приведут нас к полноценным цветовым схемам и тематическому оформлению. Для примера расскажу о прошлом кирпичике из этой серии: около года назад мы делали тёмную тему в приложениях на iOS и Android. Под эгидой этого нововведения мы перенесли на дизайн-систему тонну UI-компонентов.

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

Так мы осовременили «кнопку-огурец»

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

Суть задачи — научиться инвертировать элементы шапки, то есть сделать так, чтобы у пользователя появилась тёмная типографика в момент, когда он ставит светлый фон. И наоборот.

Лирическое отступление о важности WCAG


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

Цветовая растяжка с индексом контрастности

Итак, необходимые доработки мы сделали и разобрались с типографикой: теперь она могла быть как светлой, так и тёмной. После этого мы добавили светлые фоны и подгадали так, чтобы это обновление вышло одновременно с другими важными изменениями на главном экране. В итоге клиенты получили другое общее впечатление от приложения. О нововведении мы рассказали в промо на главном экране и в канале «Что нового», который живёт внутри СберБанк Онлайн — он как раз для тех, кто следит за обновлениями. Кстати, эта одна из тех функций, благодаря которым мы в прошлом году взяли премию Red Dot Design Award, но об этом как-нибудь в следующий раз.

Так вот, мы добавили новые цвета — и приложение посвежело и похорошело. Хотя, повторюсь, для дизайна в широком смысле слова это эффект именно косметический. Но набившие некоторым оскомину стандартные цвета теперь можно поменять на что-то новое.

Больше чем розовый

Новые цвета добавляли в два этапа. Здесь не было какой-то особой логики, просто в первом случае мы решили несколько технологических задач и поддержали главное обновление года. Именно в июньском обновлении пользователям стали доступны лавандовый, розовый, лунный и лаймовый. А в июле мы досыпали сверху ещё три: фиалковый, небесный и ещё один розовый — по просьбам клиентов. И заодно поправили пару микромоментов по отображению градиентов в тёмной теме.

Забавно, что когда мы впервые, ещё в прошлом году, добавили возможность сделать СберБанк Онлайн розовым, в отзывах нам написали, что он «недостаточно розовый». Мы тогда, конечно, поскромничали, выбрав более мягкий оттенок. Но вот прошло время, и мы решили, что розовых будет два: один понежнее, другой — фуксия. Его мы назвали «Больше чем розовый».

Лавандовый, розовый, лаймовый и лунный

Кстати, когда на одной из последних презентаций iPhone Тим Кук выходил из-за куста сирени, у нас в тестовой сборке уже лежал лавандовый. Во время презентации мы хихикали и обсуждали, переименовывать его в «Сирень» или нет.

Помните?

Любую из цветовых схем мы научили работать и в светлой, и в тёмной теме. Само собой, в тёмной теме цвета не такие акцентные и заметно приглушаются, если сравнивать со светлой.

Обещали цифры — делимся Нам очень интересно смотреть на клиентов и их привычки через призму приложения из топ-3 по аудиторным показателям в России. На конец августа MAU приложения СберБанк Онлайн — 70 млн. С момента релиза цветов мы могли наблюдать за тем, как пользователи применяют новую функцию и какие цвета выбирают. По итогам месяца первую строчку уверенно занял лавандовый (335 тысяч установок), вторую — розовый (265 тысяч). Сразу за ними идут лунный и лаймовый. Если смотреть и на те цвета, которые уже были в приложении, видно, что графит на 2-м месте (270 тысяч установок): дело явно в его нейтральности. Сейчас цвет в приложении меняют около 16 тысяч пользователей каждый день.

Ещё теперь нам известно, что среди пользователей фичи примерно в полтора раза больше женщин, чем мужчин: 678 тысяч против 463 тысяч. Гендерные стереотипы всё ещё сильны, и по самым популярным цветам картина выглядит так: почти каждый четвёртый мужчина ставит графит, а каждая четвёртая женщина — лавандовый. Это самые популярные цвета в своей демографической группе. Но при этом каждый 10-й мужчина выбирает розовый фон, а каждая 12-я женщина — графит. А вот клиентам старше 45 лет эта функция не особо нужна: их почти в 5 раз меньше, чем в других возрастных группах.

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

Школа ремонта и другие фичи

Как мы уже сказали, СберБанк Онлайн — как личный кабинет. И наше приложение клиент воспринимает как личное пространство, которое можно как-то обустраивать «под себя». Это не только про «перекрасить стены», а про перестановку мебели, например. Вы знали, что на главном экране можно менять разделы местами? Или скрывать те, которые вам кажутся ненужными? Если да — отлично, но многие клиенты не знают даже об опции смены заставок.

Начав развивать тему эмоционального банкинга с показа разных заставок для Москвы и Санкт-Петербурга, мы уже не могли остановиться. После набора фотографий природы появился Эрмитаж, потом коллаборация с Bang! Bang! Illustration, затем Третьяковская галерея, «Союзмультфильм», «Русские футуристы» и… Кажется, мы насытились на какое-то время темой искусства. Как выпускник художественного вуза (Строгановке привет), считаю свою социальную миссию хотя бы отчасти выполненной.

Каждый новый набор заставок заходил на ура, поэтому сомнений в том, что возможность изменять цвета интерфейса понравится клиентам, у нас не было. Кстати, сейчас суммарно у нас уже почти 5 млн клиентов, попробовавших альтернативный дефолтному набор. А пару недель назад вышел нереальный подводный пак, который мы собрали на базе фотографий проекта Aquatilis. Сам проект я не устану нахваливать — слишком уж крутое у него сочетание научно-популярной составляющей и эстетичности подводных существ, снятых Александром Семёновым и командой.

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

В среднем пользователи СберБанк Онлайн заходят в приложение 35 раз в месяц, а самые активные клиенты — намного чаще. Самая востребованная функция — перевод денег. Всё это медленно, но верно ведёт к тому, что банки в целом становятся более казуальными и постепенно обретают новую идентичность, где помимо хранения денег в сейфах люди переводят друг другу за обед, скидываются на день рождения и вместе копят на отпуск. В таком контексте смена цвета фона и кастомные заставки уже не кажутся чем-то чужеродным. А если учесть, что Сбер вокруг финансового ДНК развивает экосистему, отстраивая новые сервисы, связанные с развлечениями, доставкой продуктов и заботой о здоровье, базовая кастомизация и вовсе становится необходимостью.

Мы понимаем, что сердцем банковского приложения остаются финансовые сервисы. Но про них уже очень многое сказано, и они плюс-минус одинаковые у всех банков. А вот оформительские решения, которые так или иначе влияют на идентичность, разные, и здесь нам точно есть что рассказать. А о том, как дизайн влияет на банковские функции и трансформирует достаточно консервативные продукты от потребности клиента, надеюсь, ещё будет возможность рассказать.

Кстати, выбор цвета фона и новые заставки стали немного ближе к людям и теперь доступны через три точки на главном экране.

0
34 комментария
Написать комментарий...
Margo Lepski

Как легко хейтить чужую работу) Такие решения в продуктах принимаются и делаются долго, а потом все орут в комментах «видели и лучше». Сходите в аппу втб, например. Тот ещё экспириенс) А фичи действительно милые

Ответить
Развернуть ветку
Igor Igorevich

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

Ответить
Развернуть ветку
Максим

Никто не хейтит.
Все лишь говорят: вот если бы Сбер работал лучше и качественнее (исполнял бы свои собственные Стандарты обслуживания клиентов и другие внутренние документы), то и подобные обновления воспринимались бы позитивно.
А так... Посмотрите, пожалуйста, отклики. И ответы СММ-отдела. И вы увидите, какое реальное отношение к людям (клиентам).

Ответить
Развернуть ветку
Margo Lepski

Это статья про дизайн со стороны дизайн-команды. Там решаются совсем другие задачи и они не занимаются проблемами, о которых говорится в комментариях. Не решаются элементарно потому, что за нижеперечисленные моменты отвечают совсем другие подразделения и люди в сбере) а написано тут про то, чтобы вам было и удобно и красиво

Ответить
Развернуть ветку
Максим

Угу.
"Они говорят:
- У нас узкая специализация. Один пришивает карман, один - проймочку, я лично пришиваю пуговицы. К пуговицам претензии есть?
- Нет! Пришиты насмерть, не оторвёшь! Кто сшил костюм? Кто вместо штанов мне рукава пришил? Кто вместо рукавов мне штаны пришпандорил? Кто это сделал?
Они говорят:
- Скажите спасибо, что мы к гульфику рукав не пришили.
Представляете? Их – сто, а я – один. И все стоят, как пуговицы: насмерть. И я сказал:
- Привет, ребята! Вы хорошо устроились!" (Аркадий Райкин)

Ответить
Развернуть ветку
Евгений Востров

Давай сейчас дизайнеры будут как поддержка работать, а разработчики штукатурить стены в новых офисах

Ответить
Развернуть ветку
Максим

Лучше так: дизайнеры, программеры (разрабы), поддержка должны работать в связке, выдавая качественный продукт. Если две части работают плохо, то и итоговый результат будет не очень.
Сейчас Сбер и напоминает тот костюмчик Райкина: пуговицы пришиты накрепко, но вид всегда не очень.

Ответить
Развернуть ветку
Евгений Востров

Работать в связке и выполнять чужую работу это разные вещи

Ответить
Развернуть ветку
Максим

Ну да. Нарисовать новую кнопочку или поменять фон - это круто. Как раз можно порадовать клиентов обновлением дизайна! А все остальное: это не наша работа, мы отвечаем только за одну пуговицу (вон ту, с пятого ряда).

Ответить
Развернуть ветку
Евгений Востров

нет, скорее мы отвечаем за то как пальто выглядит, а за материал отвечает производитель ткани. Если вам так нравится все с пугавицами сравнивать

Ответить
Развернуть ветку
Максим

Очень удобно и правильно. Каждый отвечает за свой фронт работ, а результат... Результат может кому-то и не нравиться... Всем же не угодишь... Ну да, согласен, приятная и правильная позиция!

P.s. Маленькая ремарка. Мне крайне нравится, что отдел дизайна отчитался о результатах своей работы: вот, мол, мы не зря существуем, получаем бюджеты!

Уважаемый @Сбер! Ждём такого же отчёта и от других отделов! Заодно прошу ответить: когда костюмчик будет готов ровно по фигуре?

Ответить
Развернуть ветку
Ein Stein

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

Ответить
Развернуть ветку
Bo.G

весьма полезно, кстати. периодически менять сферу деятельности. способствует приобретению новых навыков и изменению стиля мышления.

Ответить
Развернуть ветку
Денис Колокольцев

лучше бы прогрузку НУЖНЫХ данных при запуске аппса добавили, а то всякая срань грузится приоритетно, чем данные об остатке и возможность выполнить перевод, если соединение не LTE, ваше приложение практически бесполезно. даже если кажется что возможность доступа к СБП прогрузилась, это не так, на первом же экране сообщение об ошибке, и какое то всратое сообщение типа "ну штож". вы из банка превратились в какую то смесь бульдога с носорогом, и обе половины - не лучшие.

Ответить
Развернуть ветку
Vlad

два чая жтому господину!

Ответить
Развернуть ветку
Панда Ву

Удалил в 2016-м. Пофиг какого цвета сейчас.

Ответить
Развернуть ветку
Ein Stein

А я и не ставил эту мегадыру.

Ответить
Развернуть ветку
Андрей

Картинки это конечно хорошо. Но лучше бесплатные пуш-уведомления сделайте. 

Ответить
Развернуть ветку
Максим

Сбер работает исключительно для себя. 
Вот, например, разработка всей этой фигни. Сколько все это стоит? Миллион, десять миллионов, сто, двести? И все при деле. Чем занимается толпа программеров? Картинки улучшает, кнопочки перерисовывает. 
А теперь представим бесплатные пуш-уведомления. И кому выгодно от введения этого? Клиентам? Сбер не работает для клиентов, а самим себе в ногу стрелять не будет (ведь каждая дополнительная копеечка от граждан - это ещё один способ рисовать новые обои). 

Ответить
Развернуть ветку
Панда Ву

А они что? Платные???? 🙀

Ответить
Развернуть ветку
Андрей

Да. Одним "пакетом" идут уведомления по смс и через пуши. Перестаешь платить - перестаешь получать уведомления о расходах и поступлениях в любом виде. 
При этом если отключить платные уведомления - перестает работать даже виджет на рабочем столе, отображающий последние операции 👍🏻

Ответить
Развернуть ветку
Панда Ву

Мудаки, че тут говорить. Как и всё в нашей стране - пыль в глаза. Чуть приподнимешь верхний слой - а там наебалово на каждом шагу

Ответить
Развернуть ветку
Иван Миронов

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

Ответить
Развернуть ветку
Панда Ву

То есть всё таки можно получать пуши бесплатно?

Ответить
Развернуть ветку
Иван Миронов

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

Ответить
Развернуть ветку
Ольга Федченко

Да, можно. Если у вас кредитка или зарплатная карта, где смс уже включены бесплатно. Просто курсор перевести на пуши и вместо смс будут приходить пуш уведомления.

Ответить
Развернуть ветку
evgeny fortniter

Второстепенное выдают за основное( Это позор.

На мой взгляд говорить и рекламировать вы должны свой основной функционал. А то что делает его более приятным - должно быть само собой. Без разговоров.

К сожалению это глобальная тенденция.
"Мама, мы все сошли с ума."

Ответить
Развернуть ветку
useless uS

Есть тут те, кто кастомизировал у себя приложение Сбера?

Ответить
Развернуть ветку
Anastasia Pankina

Вот после прочтения статьи)

Денег от этого больше не стало, да и Сбер в отличный банк не трансформировался...

Ответить
Развернуть ветку
Mark Khil

Сейчас бы жаловаться на сбер онлайн, когда он успешно конкурирует в топ 2 банков находясь в изначально супертяжёлых условиях для диджитализации))

Вам на месте скотомогильника сделали диснейденд, а вы жалуетесь, что там газировка не той фирмы продаётся)

Ответить
Развернуть ветку
Максим

Супертяжелые условия? У Сбера кончилась ликвидность? Или доходность подкосилась?

Ответить
Развернуть ветку
Огурец Молодец
 Дизайнеры с прошлым из мира графического дизайна (типа меня) часто ходят по некой грани, доверяя своему субъективному представлению о достаточной контрастности.

Ерунда какая то. Всегда были тех.требования и ограничения носителя, каталоги Пантона, диапазоны ргб и смика. Откуда там субъективизм??
Да и тот же wcag уж 20 лет существует. Поздравляю с открытием стандартов , мистер Лидер Дизайн-кластера хех 

Ответить
Развернуть ветку
Огурец Молодец

Лавандовые, лунные и прочие оттенки - хрень какая то в контекста использования аппа - в метро или на светлой улице 80% девайсов не передадут цвет.
Подсмотрели бы вон у Гугловского Материала палитру, например.

Ответить
Развернуть ветку
Ein Stein

Добавьте полный запрет восстановления логина-пароля по номеру карты.
Добавьте полный запрет входа по QR-коду.
Добавьте возможность включить дополнительное подтверждение транзакций по каждому из счетов по электронной почте.
Добавьте возможность включить полный запрет взятия новых кредитов со снятием только при визит в офис.

Вот это - нужные доработки.
А не ваши розовые попочные цвета.

Ответить
Развернуть ветку
31 комментарий
Раскрывать всегда