ВТБ24

пользовательский интерфейс банкомата

Разработать дизайн банкоматного меню. Улучшить эргономические характеристики интерфейса, решить вопрос стилистической преемственности сайта и банкомата. Любой экран банкоматного меню должен прямо ассоциироваться у пользователей с ВТБ24. Избавиться от ощущения схожести с "синим экраном смерти" в Windows.

Было
Стало
Виды банкоматов
Существует три типа банкоматов: сенсорные, кнопочные и комбинированные.
Сенсорный

Взаимодействие происходит путём нажатия на активные области экрана банкомата

Кнопочный

Пользователь пользуется кнопками расположенными по бокам экрана

Комбинированный

Совмещение двух механик. Возможность пользоваться экраном и кнопками

Экран не является полностью интерактивным, в нем есть набор областей, где могут располагаться управляющие элементы. За основу была взята сетка с активными областями, в которые могут быть вписаны управляющие элементы. Так как они меняются в зависимости от экрана или действия, важно, чтобы интерфейс корректно работал на всех видах банкоматов.
Концепции
Было представлено 3 концепции, из которых заказчик выбрал стилистику, максимально близкую к сайту.
Выбранная
заказчиком версия
Доработки по выбранной концепции шли в соответствии с гайдлайном компании и здравым смыслом. На макетах выстроена четкая иерархия информации, использованы фирменные цвета и шрифты.
Логика управляющих элементов
Кнопка важного действия залита цветом полностью, второстепенные действия представлены контурными кнопками с иконками. Подтверждающее действие включает в кнопку текстовую часть.

Самое главное
действие на экране

Дополнительное
действие

Подтверждающее
действие

Тиражирование на 50 экранов
Проработав утвержденную концепцию на примере пяти основных и самых популярных пользовательских действиях, дизайн был растиражирован на все остальные экраны услуг, которые предоставляет пользователю банкоматное меню.
Иконки выбора сценария работы более детальны и иллюстративны, чем иконки управляющих действий.
Guideline
Разработано руководство, которое включает в себя основные принципы применения визуального оформления на различных типах экранов.
В результате разработана стилистика экранов, преемственная с текущим дизайном сайта ВТБ24, решены логические проблемы старого интерфейса, придуман и описан в руководстве графический язык интерфейсных элементов банкомата.
Встречайте на всех банкоматах страны.