Всем привет!

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





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


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


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

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



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



Внутренние страницы тоже потребовали дополнительных усилий. Первоначальный вариант с красивыми иконками в виде 3д-коробок и категорий-папок с иллюстрациями подходил под наше требования "красиво, просто, удобно и понятно", только в первом пункте.



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



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


Активное поле ввода приобрело рамки (зеленое - значит активное).
Было:

Стало:



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




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





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


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


Ссылки по теме:

• Адреса платежных терминалов компании «Самоплат» — www.samoplat.ru/points/


• Один из крупнейших сайтов по терминалам с возможностью посмотреть на различный софт - http://kiosks.ru/content/rus/rubr0/rubr-6.asp


• мы, Студия 38 - www.studio38.ru


• Фирменный стиль для компании «Самоплат» - www.studio38.ru/portfolio/samoplat_firstil/