Интерфейс банкоматов сети СБС

Спроектировали удобное и лаконичное визуальное решение

Особенности разработки интерфейсов для банкоматов

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

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

Варианты управления интерфейсом банкоматов

Сенсорный

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

Кнопочный

Управление происходит при нажатии на физические кнопки, которые находятся по обе стороны экрана.

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

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

Влияние среды взаимодействия на восприятие интерфейса

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

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

Редизайн интерфейса

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

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

Эмуляция макета на устройстве

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

Универсальная цветовая гамма

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

После тестирования цветовой схемы на устройстве был выбран визуально приятный и нейтральный вариант.

Дополнительно адаптировали цветовую гамму под GIF-формат, который используется на устройстве.

    Цветовая схема получилась универсальной и визуально не привязана к фирменным цветам банков-партнеров.

    Высокая степень доступности

    Размер шрифтов и контрастность управляющих элементов соответствуют наивысшему уровню контрастности AAA согласно руководству по обеспечению доступности Web-контента (WCAG 2.0).

    Основная палитра соответствует требованиям технического кодекса установившейся практики ТКП 064-2012 (07040) — это документ Национального банка Республики Беларусь с описанием всех требований, возможностей и ограничений проектирования интерфейса.

    Цветовая гамма оптимизирована для людей с нарушением цветового восприятия и ослабленным зрением

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

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

    • У человека в центральной части сетчатки расположены цветочувствительные рецепторы — нервные клетки, которые называются колбочками. Люди с нормальным цветным зрением имеют в колбочках все три пигмента (красный, зелёный и синий) в необходимом количестве.

    • Форма нарушения цветового зрения, которая характеризуется слабостью восприятия зеленого цвета. Является наиболее часто встречающимся нарушением цветового восприятия (у 2,7% людей).

    • Форма аномальной трихромазии, характеризуется преимущественно слабостью восприятия красного цвета. Встречается у 0,66% людей.

    Перевод на иностранные языки

    Помимо разработки 177 макетов на русском языке, перед нами встала задача перевести все макеты на 5 языков. Поскольку устройство работает таким образом, что в нем используются статические экраны с текстом, то после перевода у нас получилось 885 макетов.

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

    Клиент

    Дата

    Июль 16, 2018

    Команда

    Паша Павлов, Леша Захаревич, Александр Ревяко

    Дальше

    Интерфейс кабинета партнеров Тинькофф Недвижимость

    Кастанули платформу для застройщиков, риэлторов, банков и простых людей

    Right

    +375 29 263−56–13ПЧТ ФБ ИГ ТЛГ О компании