Осенью прошлого года в Mad Devs поступил проект по разработке мобильного приложения для Межбанковского Процессингового Центра. Изначально задача заключалась в разработке iOS приложения, аналогичного уже существующему на тот момент Android приложению, но с добавлением нового функционала. Казалось бы, в этом проекте не так много работы для дизайнера: есть техническое задание, видение приложения и готовый пример под рукой. Однако все оказалось не так просто, учитывая новую для нас специфику индустрии — банковский сектор. В этой статье я расскажу о проблемах, с которыми мы столкнулись во время разработки, и решениями, которые применили.
К работе мы приступили с пониманием того, что основная функция платежного приложения — быстрая оплата или перевод денег, а также отслеживание баланса.
Помимо этого, приложение позволяет просмотреть информацию по устройствам обслуживающим карты ПС “ЭЛКАРТ”, провести фильтрацию и по геолакации найти устройство поблизости.
Через приложение можно проверить историю платежей, получить мини выписку по счету и узнать баланс карты.
В новой версии приложения требовалось реализовать несколько новых видов денежных переводов: с помощью QR кода и перевода денег между картами, привязанными к приложению.
Изменения во флоу авторизации и регистрации
Поскольку мы делали адаптацию приложения под iOS, весь флоу уже был готов. Помимо этого, ТЗ подробно расписывало процесс поведения пользователя. Проходя процесс регистрации и логина, мы столкнулись с некоторыми сложностями. Процесс регистрации и логина создает первое впечатление о приложении, и было необходимо сделать эти процессы максимально простыми и понятными. Поэтому мы предложили изменить сценарий поведения пользователя, убрав часть промежуточных экранов и добавив экран подвязки карты в заключительные этапы регистрации. Чтобы наглядно показать преимущества нового сценария пользовательского поведения, мы нарисовали флоу процессов авторизации и регистрации. Это помогло ускорить принятие изменений и макеты ушли в разработку!
Были и такие моменты, когда в процессе диалога клиент убеждал нас в необходимости тех или иных решений. Так получилось с экраном для ввода пин-кода.
Так как мы впервые разрабатывали приложение для банковского сектора, мы пытались убедить клиента что 1-го ввода пин кода достаточно, иначе это будет раздражать пользователя. Однако в процессе обсуждений стало понятно, что причина многократного ввода пин-кода — безопасность данных пользователя и в данном случае, решение оправдано.
Здесь хочу еще раз напомнить о ВАЖНОСТИ коммуникации с клиентом. Клиент лучше понимает свой бизнес и именно он может помочь вам понять, какую проблему решает продукт, над которым вы работаете.
Список услуг
Как было упомянуто выше, основной функцией платежного приложения является оплата. Большим преимуществом “Elcard Mobile” является впечатляющий список услуг, которые можно оплатить через приложение. Однако это визуально затрудняет пользователям поиск нужной услуги. Особенно если поставщик услуги — государственная компания, так как в таких случаях у сервисов чаще всего совпадают логотипы и большая часть названия. Чтобы решить эту проблему, мы объединили все филиалы поставщика под один общий заголовок. Таким образом, мы убрали повторяющиеся иконки на экране списка услуг. Да, это создало дополнительный экран и дополнительный клик при переходе на экран оплаты, но главное — мы упростили пользователю поиск услуги и минимизировали возможность ошибки выбора не того пункта.
Отображение карты
Необходимость быстрой оплаты может притупить внимательность пользователя и увеличить вероятность ошибки выбора не той карты. Причина заключается в том, что пользователи чаще всего не читают, а только пробегаются взглядом по интерфейсу. Если карты будут отличаться только последними четырьмя цифрами номера карты, пользователю потребуется время, чтобы выбрать нужную карту. Так было решено различать карты визуально.
Мы добавили визуализацию карты и сделали так, что каждой карте присваивается свой цвет. При этом, с какого бы устройства не вошел в приложение пользователь, цвет карты всегда остается одним и тем же. Возник вопрос: как это реализовать? По какому параметру присваивать цвет карте? Мы не знаем какому банку принадлежит карта, и из данных о карте у нас только её зашифрованный номер. Решение предложили ребята из отдела разработки. Очень простое и в то же время удобное: считать среднее арифметическое последних четырех цифр номера карты и в зависимости от цифры присваивать цвет. Почему последних четырех? Первые четыре одинаковые у всех, а средние в целях безопасности шифруются. Благодаря этому, пользователь всегда получает одинаковый набор карт, которые отличаются друг от друга цветом, что в разы снижает вероятность ошибки.
Мультиязычность
Приложение имеет два языка: русский и кыргызский. Весь дизайн продумывался на русском, но с учетом другой языковой версии, что упростило работу в дальнейшем.
Когда интерфейс имеет две языковые версии возникают сложности с некоторыми элементами интерфейса. Все языки имеют свои особенности, это не секрет. Одна из таких особенностей — количество символов в словах. Проектируя интерфейсы как минимум на трех языках, замечаешь, что английский самый «короткий» и лаконичный. Славянские языки длиннее, чем английский, а языки тюркской языковой группы, в среднем, имеют больше символов в слове, чем славянские. Это удлиняет части элементов интерфейса, что иногда приводит к проблемам. Решение — прорисовывать проблемные элементы на «длинном» языке.
Немаловажно и то, как интерфейс «говорит» с пользователем.
Нужно учитывать, что пользователь не финансист и не разработчик, поэтому интерфейс должен быть на понятном и простом языке. Для этого в процессе проектирования мы также переделывали тексты.
Выводы:
- Перед разработкой нужно тщательно изучить аудиторию и индустрию, для которой разрабатывается приложение. Это необходимо, чтобы понимать причины некоторых ограничений и правильно выстраивать флоу, даже если он не всегда удобен обычному пользователю.
- Коммуникация. Нужно коммуницировать с клиентом и выяснять все детали, которые позволяют лучше понять его бизнес и проблему, которую решает ваш продукт.
- Нужно всегда помнить о конечном пользователе, чтобы сделать приложение максимально удобным и понятным, начиная с флоу и заканчивая языком интерфейса.
А приложение можно скачать в AppStore