Дизайн интерфейса для платежного терминала компании «Самоплат»

Задача, которую поставил перед «Студией 38» наш партнёр — компания «Самоплат»: обновление пользовательской части интерфейса терминала по приёму платежей. Использовавшееся прежде решение заказчика уже не устраивало, так как не соответствовало современному облику компании, стремлению «Самоплата» всегда быть на волне прогресса.

Перед стартом работ была подробно отображена ключевая логика навигации. Результаты этого процесса в последствии позволили нам разбить весь массив информации на ключевые составляющие интерфейса и работать с логическими единицами. Условно, кнопки типа «Навигация» (4 штуки), кнопки типа «Раздел» (5 штук) и так далее.

Работы начали с «лица» терминала — главной страницы. Так она выглядела изначально:

Прежде всего необходимо было избавиться от множества откровенно лишних элементов. Выбор клиентом нужной кнопки должен отныне занимать минимум времени и быть максимально упрощённым. В поисках подходящего варианта мы ориентировались и на основную подзадачу, которую решает новый интерфейс. Она состоит в «прокачке» нового платёжного сервиса «Мой Самоплат», который позволяет пополнять баланс через любой терминал сети, а проводить платежи через специальный одноимённый интернет-сервис. «Мой Самоплат»: комиссия ниже, удобства больше!
Остановились на варианте «трехкнопочной» главной страницы. Далее последовала работа над графическим решением непосредственно.

В мозговом штурме родился вариант с участием корпоративного персонажа, выражающий слоган компании «Прикоснись к качеству». Так персонаж занял своё место на главной странице.
 Вариант «с мужиком» был одобрен, но мы пошли дальше — решили наделить нашего героя возможностью коммуникации с потребителем. Сделали это в виде диалогового облака, которое показывало нужную информацию. Если информационное сообщение чем-то привлекло клиента, то он может кликнуть по облаку (сообщению) и перейти на страницу, где данные содержаться уже в развёрнутом виде. Текст в облаке меняется каждые 10 секунд.

Внутренние страницы потребовали дополнительных усилий (кроме зарезервированных). Первоначальный вариант с красивыми иконками в виде 3D-коробок и категорий-папок с иллюстрациями подходил под наши требования: «красиво, просто, удобно и понятно». Правда, только в первом пункте.

А итог получился довольно неожиданным для всех: цвет папок был изменён на синий. И уже в таком облике баланс красоты и удобства был установлен на требуемый уровень.

  Появился постраничный просмотр, который показывал не только сведения о том, на какой странице находится пользователь, но и (на радость искушённым) позволял нажатием по номеру страницы перейти на неё.

Активное поле ввода приобрело рамки. Было:

Стало (зелёное — это активное!):

Понятнее на примере сложных платежей (страниц с несколькими полями):

Самое революционное решение касалось клавиатуры: меняем QWERTY-раскладку на АБВГДЕ. Причина в том, что множество полей действительно интуитивно гораздо проще заполнять через АВБГДЕ (как, например, в телефоне). Единственная аудитория, кому новшество не придётся по вкусу — гики, но для них предусмотрен переход на qwerty в один клик.

Страница для работы с платёжным сервисом «Мой Самоплат»:

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

Адреса платёжных терминалов компании «Самоплат» — www.samoplat.ru/points/
Один из крупнейших сайтов по терминальному оборудованию — http://kiosks.ru/content/rus/rubr0/rubr-6.asp
Фирменный стиль компании «Самоплат» — www.studio38.ru/portfolio/samoplat_firstil/