Разработка сайтов

Город.
(+375 17) 395-78-68

Velcom: (+375 29) 343-23-22

МТС:(+375 29) 566-23-22

E-mail:info@db.by

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

Город.
(+375 17) 395-87-29

Velcom: (+375 29) 363-23-22

МТС:(+375 33) 327-35-87

E-mail:seo@db.by

Бухгалтерия и офис-менеджер

Город.
(+375 17) 395-78-25

Полная контактная информация

Как разрабатывался интерфейс интернет-банка Белгазпромбанка

В начале лета 2011, одновременно с запуском интернет-сайта Белгазпромбанка, мы в закончили и разработку графического интерфейса интернет-банка.

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

Финальный результат

Финальный результат

Окно интернет-банка после авторизации

Ключевые экраны интерфейса:

Проведение платежа

Проведение платежа

Подписанные платежи (регулярные платежи)

Подписанные платежи (регулярные платежи)

Настройка регулярного платежа

Настройка регулярного платежа

История платежных операций

История платежных операций

Как шла работа над проектом

Небольшое отступление:

По сравнению с интернет-банковскими системами России, к примеру, Альфа-клик и Сбербанк-онлайн, фактически все белорусские интернет-банки представляют собой платежную систему (киоск). Инструментов для управления и контроля финансовых операций и продуктов клиенту фактически не предоставляется. Из известных банков таковым является, например, Приорбанк: в его системе можно посмотреть задолженность по кредиту и баланс на депозитных счетах.

В остальных случаях большинство интернет-банкингов представлено через API системы «Расчет» (АИС ЕРИП). ЕРИП обеспечивает универсальный доступ и функционирование всех субъектов платежной системы в единой методологической и технологической среде.

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

Процесс

Система ДБО, внедряемая банком, была рабочим продуктом разработчиков. Данная система уже была обкатана, однако приобреталась банком не столько в качестве готовой разработки, сколько для последующей кастомизацией под свои цели.

Банк оперативно завел нам карточки, которыми можно было пользоваться в тестовом доступе. Тестовый интернет банк представлял собой следующее:

Старая версия страницы платежей

Старая версия страницы платежей

Старая версия окна проведения платежа.

Старая версия окна проведения платежа.

Старая версия окна проведения платежа.

Старая версия окна проведения платежа.

Старая версия истории выполнения платежей.

Старая версия истории выполнения платежей.

Старая версия новостного раздела.

Старая версия новостного раздела

Видно, что есть на чем поработать :)

Уточнили планы и ожидания клиента:

Один из прототипов заказчика

Один из прототипов заказчика


Теперь задачу разработки можно было сформулировать так:

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

Входная страница после авторизации

Сделали набросок первой версии:

Первый эскиз входной страницы.

Первый эскиз входной страницы.


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

Дополнительные модули курсов обмена и калькуляторы представили в свернутом виде в том же стиле, который использовали на сайте Белгазпромбанка.

Более правильным было бы сразу отображать пользователю остаток на средств на каждом платежном средстве и счетах, как это было представлено в прототипах клиента и работает у многих российских интернет-банков. Однако на текущий момент взаимодействие ДБО и АБС требует подтверждение одноразовым СМС-паролем каждой операции. То есть требуется отдельный запрос для вывода баланса каждого продукта. Поэтому откладываем это хорошее решение на следующих этап.

Второй эскиз

Второй эскиз


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

После обсуждения решили, что видимость новостей не сильно актуальна: банк не часто присылает предложения и анонсы. А ответы также дублируются на e-mail отправителя.

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

Второй эскиз

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

Дальше мы упростили шапку сделав ее более компактной и информационно-емкой.

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

Финальный вид титульной страницы

Финальный вид титульной страницы

Проведение платежа

Следующий сложный момент, где мы столкнулись с ограничениями ЕРИП, было дерево платежей.

Начальное представление:


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

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

Что получилось в итоге: ЕРИП не позволяет никакого иного представления перечня услуг системы «Расчет», кроме такого дерева. Разработчики добавили в структуре вывода информации также и непосредственные услуги банка. Итоговое представление получилось следующим:

Дерево платежей и переводов

Дерево платежей и переводов

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

Однако, как видим, фильтрация оперирует иным отличным от дерева представлением и просто сокращает количество веток дерева. К тому же «поиск» работает только по полному совпадению слова.

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

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

Первое представление:

Первый вариант окна платежа

Первый вариант окна платежа

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

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

Однако оказалось что в ЕРИП все работает по другому: клиент-терминал отправляет на сервер запрос с идентификатором платежа сервер возвращает в ответ HTML-текст, либо набор полей и подписей к ним без каких-либо дополнительных атрибутов (за исключением количества символов). Вся проверка корректности типа и полноты данных проводится на стороне сервера (

Одним из аспектов ЕРИП является изначально заложенная универсальность системы: в ней должна быть установлена возможность функционирования так называемых «тонких клиентов» клиентских и терминальных машин отвечающих исключительно за вывод информации. Фактически функциональные возможности любого устройства системы приравнены к возможностями самого слабого устройства.

Итоговое представление:


История платежных операций

Выписка визуально упростилась исключительно за счет упорядочивания информации, форматирования текста и редактуры:

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

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

Расписания платежей

Для российских банков такой функционал как расписание платежей уже давно не новость, то в белорусских этот функционал есть далеко не у всех.

Первая версия Расписания платежей:

В первом варианте платежи формировались в группы: пользователь мог создать группу оплаты за квартиру добавить туда необходимые платежи и установить время срабатывания например 20-го числа каждого месяца.

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

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

Подписанные платежи (регулярные платежи)

Подписанные платежи (регулярные платежи)

Настройка регулярного платежа

В финальной версии иконку автооплаты заменили более строгим вариантом.

Довесок

Всего для системы интернет-банка мы нарисовали 28 экранов.

Окно выбора платежей для оплаты «одной кнопкой»

Окно подтверждения оплаты «одной кнопкой»

Окно подтверждения оплаты «одной кнопкой»

Список карточек

Переписка с банком

Окно редактирования профиля

Выводы

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

Мы заложили в интерфейсе системы хороший фундамент для масштабирования. Некоторые полезные моменты, не реализованные в первой версии, мы отложили на будущее.

© 2003—2017, Студия Борового.
Электронная почта: info@db.by .
 
Пресс центр / О студии - Наши награды - Почему мы? - Вакансии / Услуги - Создание сайтов - Создание сайтов на 1С-Битрикс - Создание интернет-магазинов - Создание логотипов и фирменного стиля - Продвижение сайтов - Создание баннеров - Создание презентаций - Поддержка, обновление и обслуживание веб-сайтов - Программирование на ASP и PHP - Графический дизайн (каталоги, буклеты, упаковка, этикетки, календари) - Создание сайтов в Москве - Сделать запрос / Работы - Веб сайты - Логотипы и фирменный стиль - Печатная продукция - Мультимедиа - Баннеры / Контакт - Форма обратной связи