{"id":7683,"title":"\u041a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u0441\u043b\u0430\u0431\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0432 \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438","url":"\/redirect?component=advertising&id=7683&url=https:\/\/vc.ru\/promo\/303922-korotko-servis-dlya-analiza-investicionnogo-portfelya&placeBit=1&hash=9949277ba20bce980299ffc9707868bf0a4e8244a0a0603096cd0d81905cdd42","isPaidAndBannersEnabled":false}
Дизайн
Сбер

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

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

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

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

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

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

Люди постоянно взаимодействуют с финансовыми сервисами. Многие не меняют банк годами, а кто-то пользуется услугами одной организации всю жизнь. Среднестатистический клиент СберБанк Онлайн заходит в приложение более 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
29 комментариев
Популярные
По порядку
Написать комментарий...

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

10

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

4

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

0

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

0

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

1

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

0

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

0

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

0

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

0

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

0

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

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

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

0

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

8

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

1

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

5

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

3

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

4

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

2

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

0

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

1

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

0

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

0

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

0

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

1
Вторичный пистолет

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

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

8

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

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

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

3
Вторичный пистолет

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

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

0
Вторичный пистолет

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

0

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

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

0

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

0
Читать все 29 комментариев
Linkedin запустил маркетплейс для поиска и заказа услуг фрилансеров — за время тестов он собрал 2 млн пользователей Статьи редакции

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

SHAREit объявляет о партнерстве с Httpool для расширения присутствия в России и СНГ

SHAREit Group анонсировала выход на российский рынок цифровой рекламы. Глобальная компания в сфере интернет-технологий, выбрала Httpool, входящую в Aleph Group, своим стратегическим партнером по продажам рекламы. Будучи официальным представителем SHAREit, Httpool займется продвижением рекламных возможностей приложения для брендов и агентств из…

Почему приглашая опытного разработчика вы должны себя вести не как покупатель, а как продавец?
Цифровой госпиталь и медицина на 360°: как мы обновили сайт частной клиники №1 в России

Иногда больницы у русского человека вызывают недоумение и страх: процедурный кабинет, где пахнет лекарствами и не только, представили? Но зачастую это наши страхи из детства и юношества суровых 90-х, потому что сейчас всё иначе.

Сайт для АО «Европейский Медицинский Центр» (ЕМС)
Чем занимается BIM-менеджер и как им стать?

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

«Делимобиль» выпускает в город заведомо неисправные автомобили

Всем привет! Это снова главный хейтер Делимобиля всея VC.
Не так давно я публиковал пост с обзором сервиса Делимобиль в Ростове-на-Дону, где описывал состояние автомобилей, зоны завершения, тарифы и всё прочее. Вот он:

Первые владельцы новых MacBook Pro рассказали, что «чёлка» иногда закрывает часть меню в приложениях Статьи редакции

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

Релиз Checkaso 2.5 на Product Hunt. Новые инструменты и дизайн

Друзья, всем привет! Сегодня у нас релиз на Product Hunt. Будем рады вашей активности: поддержке и обратной связи. Важная и приятная новость: в честь обновления дарим -30% на любую подписку.

История одного издательства: как я, будучи инженером-нефтяником, начал выпускать трогательные книги для детей

Всем привет! Меня зовут Александр Шмаков, я исполнительный директор типографии «НП-ПРИНТ» и основатель санкт-петербургского книжного издательства «Гудвин».

«Повышение ключевой ставки не оказало измеримого эффекта на динамику российского рынка акций»

Виталий Исаков, директор по инвестициям УК «Открытие»

null