В прошлом посте я рассказывала про дизайн новых банкоматов. Они сильно поменялись по железу, в частности, их экраны стали куда больше, а процессоры позволяют показывать больше графики и анимации — без тормозов. Вы много спрашивали про изменения интерфейсов, поэтому я хочу рассказать о работе в этом направлении.
Новый главный экран. Здесь отображены наиболее часто используемые суммы и операции на основе истории и привычек клиента
Прежде чем я покажу конкретные примеры, хочу, чтобы вы обратили внимание на следующее:
И да, мы вынесли самые популярные услуги (снять, внести, оплатить) на экран приветствия, т. е. на тот экран, который пользователь видит в момент, когда ещё не приложил/не вставил карту. А кнопку баланса на главный экран — который появляется после авторизации человека в устройстве (приложил или вставил карту, ввёл ПИН-код).
С интерфейсами мы пережили ту же работу, что и с проектировкой устройства: сначала пытались адаптировать текущий вариант, но видели, что это вызывает минимальные сдвиги. После сменили парадигму и с нуля спроектировали новый банкомат, который работает так, как удобно пользователю, а потом уже обеспечили соответствующие интеграции. Команда абстрагировалась от каких-либо ограничений и сделала принципиально новый интерфейс.
Среди важных изменений — новые анимации. Мы проанализировали типичные ошибки пользователей банкоматов и добавили много микроанимаций, показывающих конкретные ожидаемые действия. Например, вот эта анимация призвана переучивать людей вставлять карты: вместо этого лучше их прикладывать. Кстати, у NFC-ридера появилось новое расположение: теперь на нём не получится забыть карту.
Под экраном посередине находится ридер.
Убрали объёмные руки, которые раньше показывали, как и что нужно делать (кроме экрана со вводом ПИН-кода, там прикрывать рукой клавиатуру важно).
Очень много переделок связано с уходом от преимущественно-клавиатурного интерфейса к сенсорному экрану. Мы старались сблизиться с мобильным приложением, чтобы была единая среда, в которой клиенту всё знакомо. Например, теперь используются те же иконки, что и в приложении. В ближайшие кварталы с точки зрения логики будут проработаны новые сценарии, чтобы сделать схожий с приложением клиентский опыт.
Сократили операцию на один шаг, а также добавили анимацию пересчёта денег.
Очень важно было сделать кнопку снятия и внесения до авторизации: было сложно менять системы так, чтобы сначала произошёл запрос действия, а потом авторизация. Это звучит достаточно просто, но с точки зрения ИБ это означало что-то вроде: «сломайте всё и постройте заново в стандартах».
Много работали с контрастом:
Из-за того, что экран банкомата сделан так, чтобы обеспечивать минимальный угол обзора (чтобы сзади из очереди не было видно), нужно довольно сильно повышать контраст элементов интерфейса. Кроме того, важно было повысить контраст для людей, которые плохо видят.
На главном экране внизу находится кнопка голосового ввода. Чтобы не искать операцию и не вводить что-то на сенсорной клавиатуре, можно просто сказать голосом. В связке с биометрической авторизацией это позволит сделать очень много в плане нового UX. Например, голосовой ввод и биометрическая идентификация позволят открыть сразу персональный экран, не вводить какие-либо реквизиты, быстро добираться до нужной услуги. Пока мы только в начале пути, но ожидаем, что получится обеспечить тот же опыт, который пользователь ждёт от голосового помощника дома. Это и быстрое распознавание речи, и NLP, и качественный синтез речи. Единственный момент — многие вещи помощник не проговаривает, а выводит на экран, как, например, тот же баланс.
Работать с голосом в интерфейсе банкоматов мы начали по факту давно. Ещё пять лет назад сделали первый сценарий для незрячих пользователей, где всё озвучено, чтобы можно было включить наушники в соответствующий слот и работать без помощи другого человека. В тот момент мы начали оборудовать все устройства аудиовыходом, всего из 70 тысяч банкоматов сети около 30 тысяч устройств с этой функцией. То есть новые банкоматы шли сразу с выходом, а действующие заменялись по адресной программе около тех мест, где учатся или работают слабовидящие или незрячие.
Новый движок голоса не связан со старым голосовым интерфейсом — он больше похож на наши домашние решения с NLP. Голосовой интерфейс предыдущей версии был ограничен, новый будет давать полный сервис, аналогичный GUI.
Мы заложили инструменты для удобного переключения языка интерфейса в зависимости от локации пользователя при авторизации. Технически уже можно сразу выводить интерфейс на родном языке, но для этого нужно проработать эти интерфейсы и бизнес-логику. Это в будущих фичах.
Коды ошибок были цифрами — как приходили, так и отображались. Сто лет назад поменяли.
Первая партия новых банкоматов появилась в новом офисе Сбера на Цветном бульваре, в Agile Home Сбера на Кутузовском проспекте, а также в офисе на Вавилова, 19. Недавно ещё несколько устройств установили в новых точках в Москве — в ТЦ «Европейский» и ТЦ «Авиапарк», а также в Санкт-Петербурге и Хабаровске в нескольких офисах Сбера. Скоро новые устройства появятся по всей стране. Новый банкомат выглядит так:
Соответственно, в полной мере наши задумки реализованы в его интерфейсе. Мы знаем про многие боли старых интерфейсов (на других устройствах) и где-то можем их решить, где-то уже нет, увы, из-за, например, восьмикнопочного интерфейса. Но что касается нового интерфейса — мы понимаем, что это не финал, и готовы быстро релизить улучшения. Конечно, мы открыты для обратной связи и предложений.
Новый главный экран. Здесь отображены наиболее часто используемые суммы и операции на основе истории и привычек клиента
Прежде чем я покажу конкретные примеры, хочу, чтобы вы обратили внимание на следующее:
- Речь про интерфейсы новых банкоматов, которые пока что введены в Москве, Санкт-Петербурге и Хабаровске в небольшом количестве, и мы будем их вводить в эксплуатацию по всей России в этом году. Важно помнить, что в нашей сети много предыдущих моделей устройств с прежней версией интерфейса. На всех устройствах мы обновили иллюстрации и анимации в новом бренде и сделали интерфейс чище, убрав основной шум. Но полностью новый интерфейс с обновлёнными сценариями и новым дизайном выкатили только на банкоматах нового поколения.
- Текущий интерфейс решает главную задачу — упрощение работы с банкоматом. Это означает уменьшение количества шагов внутри операций, более короткие и понятные тексты, реалистичные анимации, привязанные к расположению оборудования в банкомате и персонализацию под частые действия конкретного пользователя.
- Это не адаптация текущего интерфейса: мы с нуля разработали новый, проектируя от актуальных потребностей пользователя, то есть тех, что появляются с появлением запросов со стороны клиентов.
И да, мы вынесли самые популярные услуги (снять, внести, оплатить) на экран приветствия, т. е. на тот экран, который пользователь видит в момент, когда ещё не приложил/не вставил карту. А кнопку баланса на главный экран — который появляется после авторизации человека в устройстве (приложил или вставил карту, ввёл ПИН-код).
Как шла работа
С интерфейсами мы пережили ту же работу, что и с проектировкой устройства: сначала пытались адаптировать текущий вариант, но видели, что это вызывает минимальные сдвиги. После сменили парадигму и с нуля спроектировали новый банкомат, который работает так, как удобно пользователю, а потом уже обеспечили соответствующие интеграции. Команда абстрагировалась от каких-либо ограничений и сделала принципиально новый интерфейс.
Среди важных изменений — новые анимации. Мы проанализировали типичные ошибки пользователей банкоматов и добавили много микроанимаций, показывающих конкретные ожидаемые действия. Например, вот эта анимация призвана переучивать людей вставлять карты: вместо этого лучше их прикладывать. Кстати, у NFC-ридера появилось новое расположение: теперь на нём не получится забыть карту.
Под экраном посередине находится ридер.
Убрали объёмные руки, которые раньше показывали, как и что нужно делать (кроме экрана со вводом ПИН-кода, там прикрывать рукой клавиатуру важно).
Очень много переделок связано с уходом от преимущественно-клавиатурного интерфейса к сенсорному экрану. Мы старались сблизиться с мобильным приложением, чтобы была единая среда, в которой клиенту всё знакомо. Например, теперь используются те же иконки, что и в приложении. В ближайшие кварталы с точки зрения логики будут проработаны новые сценарии, чтобы сделать схожий с приложением клиентский опыт.
Примеры
Сократили операцию на один шаг, а также добавили анимацию пересчёта денег.
Очень важно было сделать кнопку снятия и внесения до авторизации: было сложно менять системы так, чтобы сначала произошёл запрос действия, а потом авторизация. Это звучит достаточно просто, но с точки зрения ИБ это означало что-то вроде: «сломайте всё и постройте заново в стандартах».
Много работали с контрастом:
Из-за того, что экран банкомата сделан так, чтобы обеспечивать минимальный угол обзора (чтобы сзади из очереди не было видно), нужно довольно сильно повышать контраст элементов интерфейса. Кроме того, важно было повысить контраст для людей, которые плохо видят.
Голос и биометрия
На главном экране внизу находится кнопка голосового ввода. Чтобы не искать операцию и не вводить что-то на сенсорной клавиатуре, можно просто сказать голосом. В связке с биометрической авторизацией это позволит сделать очень много в плане нового UX. Например, голосовой ввод и биометрическая идентификация позволят открыть сразу персональный экран, не вводить какие-либо реквизиты, быстро добираться до нужной услуги. Пока мы только в начале пути, но ожидаем, что получится обеспечить тот же опыт, который пользователь ждёт от голосового помощника дома. Это и быстрое распознавание речи, и NLP, и качественный синтез речи. Единственный момент — многие вещи помощник не проговаривает, а выводит на экран, как, например, тот же баланс.
Работать с голосом в интерфейсе банкоматов мы начали по факту давно. Ещё пять лет назад сделали первый сценарий для незрячих пользователей, где всё озвучено, чтобы можно было включить наушники в соответствующий слот и работать без помощи другого человека. В тот момент мы начали оборудовать все устройства аудиовыходом, всего из 70 тысяч банкоматов сети около 30 тысяч устройств с этой функцией. То есть новые банкоматы шли сразу с выходом, а действующие заменялись по адресной программе около тех мест, где учатся или работают слабовидящие или незрячие.
Новый движок голоса не связан со старым голосовым интерфейсом — он больше похож на наши домашние решения с NLP. Голосовой интерфейс предыдущей версии был ограничен, новый будет давать полный сервис, аналогичный GUI.
Другие языки
Мы заложили инструменты для удобного переключения языка интерфейса в зависимости от локации пользователя при авторизации. Технически уже можно сразу выводить интерфейс на родном языке, но для этого нужно проработать эти интерфейсы и бизнес-логику. Это в будущих фичах.
Коды ошибок были цифрами — как приходили, так и отображались. Сто лет назад поменяли.
Где смотреть
Первая партия новых банкоматов появилась в новом офисе Сбера на Цветном бульваре, в Agile Home Сбера на Кутузовском проспекте, а также в офисе на Вавилова, 19. Недавно ещё несколько устройств установили в новых точках в Москве — в ТЦ «Европейский» и ТЦ «Авиапарк», а также в Санкт-Петербурге и Хабаровске в нескольких офисах Сбера. Скоро новые устройства появятся по всей стране. Новый банкомат выглядит так:
Соответственно, в полной мере наши задумки реализованы в его интерфейсе. Мы знаем про многие боли старых интерфейсов (на других устройствах) и где-то можем их решить, где-то уже нет, увы, из-за, например, восьмикнопочного интерфейса. Но что касается нового интерфейса — мы понимаем, что это не финал, и готовы быстро релизить улучшения. Конечно, мы открыты для обратной связи и предложений.
