Проектирование кошелька платежной системы Onpay

Описание проекта

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

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

Onpay wallet old interface

Задача

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

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

Требования к проектированию

Приоритетными были указаны следующие:

  • Интерфейс должен быть максимально простым и не загруженным деталями;
  • Формы оплаты должны состоять только из необходимых полей и сохранять видимость того, к какому разделу они принадлежат;
  • Минимальная глубина в навигации по разделам;
  • Сохранения по возможности на виду постоянно входов во все разделы, даже на небольших мобильных экранах.
  • Главная страница (дашборд) должна представлять собой квадратные панели — плашки с краткой информацией о всех последних операциях. При нажатии каждая панели должна открыть поверх интерфейса страницы и содержать подробную запись операции и инструменты действий.
  • Проектировать необходимо веб-приложение с адаптивным дизайном.
  • Инструменты оставлены на усмотрение проектировщика.

Было согласовано, что:

  • Это будут адаптивные прототипы для трех 4-х ширин экранов: 320, 480, 768 и 1200 px, разработанные в Axure.
  • Уровень детализации высокий, с четкой прорисовкой всех контролов.
  • Страницы должны содержать близкие к реальным демо-данные.

В прототипах должны быть отрисованы:

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

Процесс и решения

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

Возникали вопросы о том:

  1. Должны ли панели открываться как модальные, или при открытии нужно оставить работоспособность элементов за пределами панели.
  2. Должны ли панели занимать всю площадь страниц на больших размерах экранов также как на маленьких мобильных экранах.
  3. Должны ли формы иметь кнопки специальные кнопку “Отмена” или пользователь и так поймет, что сворачивание панели — это и есть отмена.
  4. Будет ли достаточно ясным символ минуса для действия сворачивания панели.
  5. Очевидно ли, что кнопка с символ “крестик в круге” удалит панель из ленты дашборд, а не просто закроет (свернет) ее.
  6. Не растеряется ли пользователь, когда форма операции состоит из нескольких шагов с анимированным перемещением по горизонтали и отсутствием кнопки возврата к предыдущему шагу, если этот шаг уже пройден и валидирован.
  7. Нужна ли анимация для открытия панели, при перемещения по шагам форм.

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

Onpay Wallet - Responsive Site View – Axure Prototypes

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

Во второй версии панели также открывались в теле страницы, но по при этом остальные скрывались, таким образом открытая панель занимала всю ширину контентной области страницы

Onpay Wallet - Responsive Site View – Axure Prototypes

Получившиеся интерфейсы были хорошо проработаны для мобильных экранов по методу mobile first

Onpay Wallet - Mobile site view  Axure Prototypes

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

Решили, что:

  1. на широких экранах слишком много места отдавалось на небольшие по составу форму, так все они были сведены к минимуму полей;
  2. осталась нерешенной задача о большой вероятности ухода пользователя от заполнения формы (не туда нажал случайно или отвлекся на другую информацию) велика, потому что все элементы главной и нижнего меню оставались доступны;
  3. на дашборд панели увеличивались при наводе, что проводило к нарушению сетки и сложным перестроениям на мобильных экранах, что добавляло несерьезности, мало подходящей интерфейсу финансового сервиса.
  4. формы в остальных разделах отличались по механике открытия и виду от форм в панелях на дашборд, что было логически неверно, так как формы на остальных страницах создавали те же операции, только новые, и должны были сохранять интерфейс такой же как в панелях на дашборд.

На последнем этапе:

  • открываемые панели стали модальными, при открытии весь остальной интерфейс страницы блокировался, пользователь имел меньше шансов отвлечься от платежной операции;
Onpay Wallet - Responsive site view  Axure Prototypes
  • формы в панелях и в остальных разделах одинакового поведения, конфигурации и величины;
  • плашки стали плотно сдвинутыми друг к другу, что уменьшило количество шума и лишних линий;
  • ширина панелей на всех размерах экранов не превышала 480 px, сохраняя геометрию полей форм практически неизменяемой на всех размерах экранов;
  • каждый шаг заполняемых форм имел не более трех строк полей;
Onpay Wallet - Responsive Site View – Axure Prototypes
  • лишние кнопки “отмена” в формах убрали;
  • контрол удаления панели из дашборд разместили в нижней части панели, в целью, сначала просмотра содержимого панели пользователя, а зачем уже принятия решения об удалении ее, удаление из дашборд не вело к полной потере информации об операции в панели, она просто не отображалась больше на дашборд, но данные можно было найти в истории платежей и списке отправленных счетов;
  • панели имели только три вида значков-маркеров об успешной, неуспешной или ожидаемой операции, но в подробном виде просмотра эти маркеры получали у разных типов операций разную расшифровку;
  • маркеры давали быструю первоначальную информацию о статусе платежа, что в большинстве случаев использования сервиса было достаточной для пользователя информацией, поэтому маркеры крупные и самый заметный элемент квадратной плашки на дашборд;
  • гибкий мобильный список из карточек в истории операций с двумя рядами лейблов на карточку превращался в стандартный табличный вид на desktop.
  • навигация остается максимально доступной на всех разрешениях экрана, сначала избирательно скрываются лейблы надписей у элементов, которые можно узнаваемо обозначить иконкой, в выпадающее меню скрываются функционально близкие группы действий, так чтобы название группы подходило ко всем элементам, скрытым за ним
  • плашки сохраняют свою геометрию и подстраиваются по ширину мобильных экранов в вертикальной и горизонтальной ориентации
Onpay Wallet - Responsive Site View – Axure Prototypes

Результаты работы:

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

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

Далее был разработан дизайн интерфейса на основе этих прототипов