![](https://habrastorage.org/getpro/habr/upload_files/d36/248/d9a/d36248d9ac6a1cc5c615e25d6447855b.png)
Зачем вообще в 2021 году заниматься банкоматами? Кажется, что уже все кто только можно перешли на безнал. Но на самом деле количество пользователей банкоматов Тинькофф растет, причем быстрее, чем количество клиентов. То есть людям все равно нужен нал: они платят за квартиру или получают зарплату на счет в другом банке и перекладывают ее в Тинькофф.
Сейчас в сети Тинькофф больше 2500 банкоматов, и около 27% аудитории банка регулярно ими пользуется.
Интерфейс банкоматов, который работал все это время, — довольно хороший. Он занимает призовые места в рейтингах, и пользователи им довольны.
Но мы решили его поменять.
![](https://habrastorage.org/getpro/habr/upload_files/eac/5db/14f/eac5db14f639ec780e1dcc63e3c2c0a3.png)
Основная задача редизайна: использовать на больших экранах всю область для интерфейса и построить интерфейс на дизайн-системе, чтобы проще было вносить новые фичи.
Отличия банкомата от веб-сервиса
Обычно дизайнеры продуктов работают над приложениями или веб-сервисами. Банкомат довольно сильно от них отличается. В банкоматах есть много технических ограничений, но главное — у них совсем другой контекст использования.
Мобильное приложение банка | Банкомат |
Пользователи заходят в среднем несколько раз в месяц | Большинство людей пользуются раз в квартал, хорошо, если не раз в год |
Приватное, в моем личном телефоне, никто не смотрит из-за плеча | Неприватный. Сзади стоят 5 человек, смотрят в экран и проклинают тебя |
В фокусе — только приложение | Нужно искать в сумке карточку, деньги, бумажку с реквизитами, нужна третья рука, сумка падает, все теряется |
Хороший интернет | Мобильный интернет — чаще плохой, чем хороший |
Хороший тач-экран | Тач, который не дотягивает до телефонного |
Можно померить все что угодно | Из-за безопасности и плохого интернета не можем собирать и передавать много данных об использовании |
То есть нам надо сделать интерфейс, которым человек пользуется раз в год, при этом дико нервничает и рискует деньгами.
На что опираться при дизайне банкоматов?
Здравый смысл
Есть большой соблазн использовать банкоматы в качестве рекламных щитов пополам с киосками самообслуживания. У них большой экран, на котором можно рассказать пользователю про все наши новые сервисы: заказ путешествий, симок, билетов на концерты и прочие экосистемные штуки. Но все это пользователь может сделать на своем личном устройстве.
А вот снять или положить нал можно только в банкомате. Чертовски обидно стоять в очереди с «котлетой» купюр, которая жжет руки, и ждать, пока кто-нибудь выбирает тур или билет на концерт. Поэтому мы приняли решение: банкомат — только для бумажных денег.
Но в банкоматах уже была функция, которая не отвечала этому требованию: перевод денег с карты на карту. Не то чтобы она пользовалась очень большой популярностью, но мы нашли почти 7 тысяч пользователей, которые переводили деньги с карты на карту через банкомат и при этом не пользовались ни мобильным банком, ни веб-кабинетом.
![Частота посещений мобильного и интернет-банка пользователями банкоматов Частота посещений мобильного и интернет-банка пользователями банкоматов](https://habrastorage.org/getpro/habr/upload_files/cd7/f98/9a9/cd7f989a9f6148d3712009cd29bc28d6.png)
Но если убрать кнопку сразу, пользователи могут начать искать переводы, звонить в техподдержку и нагружать колл-центр.
Поэтому мы решили работать в несколько шагов: оставить кнопку, чтобы пользователи ее не искали. Но внутри написать извиняшку и выпилить кнопку, когда все привыкнут.
Популярность операций
В банкоматах есть 4 функции — пополнить свой счет, пополнить счет по реквизитам, снять деньги, перевести их с карты на карту.
До начала работы я была уверена, что банкоматы нужны, чтобы снимать деньги. Но на самом деле самая популярная функция — это пополнение своего счета: на нее приходится около 70% операций, и процент постоянно растет. Скорее всего, люди снимают зарплату в других банках, переносят ее в Тинькофф и погашают кредиты. Поэтому первое, что мы сделали, — это вынесли кнопку пополнения на первое место.
Диспуты
Это случаи форс-мажора, когда у клиента что-то случилось: зажевало деньги, кто-то забрал его купюры, человеку позвонили мошенники и он перевел им все деньги.
Диспуты — очень чувствительная тема, потому что на них банк теряет деньги. И самая частая проблема, что люди не выходят из аккаунта. Конечно, у нас есть выход по тайм-ауту, но он не может быть слишком коротким, потому что тогда вас будет выкидывать, пока вы ищете купюры в рюкзаке.
Иногда пользователь оставляет свой аккаунт открытым и уходит от банкомата. Тогда человек, который стоит за ним, может начать пользоваться чужими данными. Причем без злого умысла. Если он снимает деньги, то приходит диспут от клиента, который не вышел из аккаунта. Если кладет, диспут летит от того, кто положил наличные не на свой счет.
![Неавторизованный и авторизованный экраны UI1.0 Неавторизованный и авторизованный экраны UI1.0](https://habrastorage.org/getpro/habr/upload_files/0f6/a1b/d82/0f6a1bd820b755b91c56c0855df8ef25.png)
Поэтому в дизайне нам важно было явно просигнализировать, чей это аккаунт. Чтоб с первого взгляда было заметно, что нужно выйти или что открыт чужой аккаунт.
![Неавторизованный и авторизованный экраны UI2.0 Неавторизованный и авторизованный экраны UI2.0](https://habrastorage.org/getpro/habr/upload_files/dfd/88d/1f7/dfd88d1f757fef28f3adba0f71a2f7c2.png)
Мы крупно написали имя пользователя, хотя некоторых пользователей это напрягает. Подозреваю, что на Хабре тех, кого это напрягает, будет даже больше, чем в среднем по популяции. Но на моделях банкоматов, которые использовались во время разработки интерфейса, приватность сохранялась — имя и баланс полностью закрываются телом человека, даже если он не очень высокого роста.
![](https://habrastorage.org/getpro/habr/upload_files/49d/7fc/be1/49d7fcbe1b6679d9f9e1d95f7b78effa.png)
На 2.0 еще ни одного диспута, связанного с перепутанными аккаунтами, не было.
Появилась другая проблема — новые модели банкоматов на 25 сантиметров выше, и в них часть интерфейса, которая была на уровне груди, переместилась выше головы.
![](https://habrastorage.org/getpro/habr/upload_files/26b/56a/8a0/26b56a8a0ae1600f88d33dbf3a40faf0.png)
Для этих моделей банкоматов мы сейчас разрабатываем отдельную версию интерфейса, в которой приватная информация будет ближе к нижней части экрана.
Время
Чем быстрее пользователь выполняет свои задачи и уходит от банкомата, тем лучше. Во-первых, очереди меньше, во-вторых, человек тратит меньше времени. Может ли на это как-то повлиять интерфейс?
Самые длинные операции в банкомате — это пересчет купюр и раскладывание их по кассетам. Другие операции тоже иногда затягиваются из-за мобильного интернета. Мы не можем сократить их реальное время, но можем уменьшить субъективно ощущаемое.
Поэтому, чтобы помочь пользователям ждать, мы добавили на экран загрузки рандомные сменяющиеся надписи (если у вас есть идеи, что еще можно там написать, сообщите в комментах: у нас фантазия закончилась). А для экранов пересчета нарендерили гипнотизирующее видео.
Работоспособность сети
Банкоматы — сложные устройства и периодически ломаются. Единственное, что в интерфейсе банкоматов влияло на жизнь инженеров, — это часы в верхнем углу. Их использовали, чтобы понять, завис банкомат или нет. Делали с разницей в несколько минут скриншоты и смотрели, ходят ли часы. Но сейчас часы — анахронизм. Пользователю они не нужны, а у службы технической поддержки появились более технологичные способы мониторинга.
Обратная связь от пользователей
К дизайнеру идут все обращения пользователей из колл-центра и чата. Основные проблемы пользователей — это:
«Верните бумажные чеки!»;
«Я не увидел комиссию, а с меня ее сняли».
Почти наверняка в комментариях кто-нибудь будет жаловаться на то же самое.
Бумажные чеки вернуть нельзя. Для этого нужно разобрать 2500 устройств по всей стране, добавить туда принтер и собрать обратно. Бумажные чеки выцветают, стираются, валяются вокруг банкоматов, тратят бумагу. Поэтому у нас в банкоматах есть только электронные чеки, которые можно отправить по номеру телефона.
Комиссию пользователи часто не видят, поэтому в новых банкоматах она стала чуть более заметной.
![](https://habrastorage.org/getpro/habr/upload_files/836/125/75c/83612575ca4bab05fcc1fb7794129aea.png)
Пользовательское тестирование
Чтобы протестировать приложение, нужно просто найти кого-то, кто проходит мимо, и выдать ему открытый на телефоне фигмовский прототип. Интерфейс банкомата тестировать на обычном экране невозможно: ощущения не те. Поэтому единственный вариант — пригласить сотрудника Тинькофф в секретную комнату, где стоят тестовые банкоматы.
![](https://habrastorage.org/getpro/habr/upload_files/71c/c75/f2a/71cc75f2ac08f971a86aac52393aae61.png)
Никого, кроме сотрудников, в комнату не пускают из-за соображений безопасности. Но во-первых, сотрудники Тинькофф не самая релевантная аудитория: они в целом довольно молодые, живут в большом городе и — внезапно — работают в сфере ИТ.
Во-вторых, сложно тестировать интерфейсы в Фигме, потому что Фигма не умеет открывать купюроприемник, пересчитывать купюры, выдавать и съедать деньги, а без этого ощущения недостаточно реалистичные. Если пользователь просто тыкает на кнопки, не держа в руках пачку купюр и без очереди за спиной, он принимает гораздо более разумные решения, чем при обычном использовании банкомата. Поэтому тестирование было возможно уже на последней стадии реализации интерфейса.
Стиль бренда
Наш основной продукт — карта «Блэк». Корпусы новых банкоматов — черные. Поэтому наш новый интерфейс — минималистичный и черный.
Он контрастный, чтобы были видны все контролы, а по краям служит большим зеркалом и позволяет понять, не заглядывают ли в экран мошенники или проходящие мимо граждане.
![](https://habrastorage.org/getpro/habr/upload_files/890/8cb/0ca/8908cb0ca6a021e0104517534464d024.png)
Итого
Мы выполнили главные задачи — начали задействовать всю область экрана для интерфейса и внедрили дизайн-систему, так что стало проще разрабатывать новые фичи и вносить доделки.
Мы убрали весь функционал, который не касается наличных. Это должно сократить очереди и позволить пользователям, которым надо снять деньги или пополнить счет, сделать это быстрее. Пользователи перестали уходить от банкомата, не завершив сессию, — это уменьшило количество ошибочных снятий и пополнений.
Среднее время самого популярного сценария — пополнения — для UI 2.0 стало на 4 секунды меньше, чем в UI 1.0. Остальные сценарии тоже стали чуть быстрее, кроме пополнения по реквизитам.