Разбивая входные данные кредитных карт на атомы - почему так важен идеальный дизайн UX?

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

Данные: статистика Европейского центрального банка

В настоящее время у нас есть сотни, если не тысячи, способов оплаты - это зависит от региона и его развития. Однако, по данным Европейского центрального банка, в 2017 году 51,6% платежей было осуществлено с использованием платежных карт. Это дает нам 135 карточных платежей на душу населения. На электронные платежи приходилось всего 2,6%, но, что более важно, их доля выросла на 20,3% по сравнению с предыдущим годом. Вывод из этой статистики довольно ясен - платежные карты на самом высоком уровне - они надежны, просты в использовании, доступны по всему миру и, что самое важное, прочно внедрены в нашу повседневную жизнь.

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

Огромное развитие технологий

Современные смартфоны упакованы данными, поэтому у них есть различные методы ввода. У нас есть экранные клавиатуры, камеры и микрофоны. Все это развивается и совершенствуется, и благодаря постоянному прогрессу в отрасли аппаратных средств, с каждым годом они становятся все более совершенными.

Клавиатуры становятся все ближе и ближе к идеалу - в основном благодаря более точным сенсорным датчикам и лучшему выбору дизайна, например контекстные подсказки, отображение конкретного случая использования (например, цифровые клавиатуры) и т. д. Фотографии с камер, которые можно найти на каждом современном устройстве, теперь невероятно четкие. Как мы можем использовать всю эту замечательную технологию?

Сканирование, форма с несколькими входами и форма с одним входом

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

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

Форма с одним входом: идея состоит в том, чтобы объединить всю необходимую информацию в одном входе. К счастью, это относительно необычный паттерн, поскольку он только усложняет процесс, который в первую очередь непрост. Но почему это происходит? Из-за скеоморфизма!

«Скейоморфизм - это термин, наиболее часто используемый в дизайне графического пользовательского интерфейса для описания объектов интерфейса, которые имитируют их реальных аналогов в том, как они выглядят и / или как пользователь может взаимодействовать с ними. Хорошо известным примером является значок корзины, используемый для удаления файлов. Skeuomorphism делает объекты интерфейса знакомыми пользователям, используя понятия, которые они распознают ».

Но разве он уже не мертв? И да и нет. Что касается визуального аспекта, он действительно был в основном похоронен с выпуском iOS 7 и OS X Yosemite, но, согласно приведенному выше определению, скейоморфизм - это не только то, как вещи выглядят, но и то, как они работают.

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

Сканирование как самый надежный, безопасный и быстрый метод

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

Идеальная форма - 7 золотых правил

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

  1. Правильный и логичный порядок и форма
    Как я уже упоминал ранее, очень важно поддерживать порядок, аналогичный физической карте. Это помогает пользователям быстрее сканировать форму. Они читают информацию по порядку и заполняют ее соответственно. Кроме того, избегайте использования сборщиков даты - просто посмотрите на карту. Это не январь 2020 года, но 20.01. То же самое относится и к номеру карты, который обычно делится на 4-значные куски. Не забудьте представить его таким же образом.
  2. Запросите только необходимую информацию
    Запрос полного имени и адреса держателя карты может быть дополнительной мерой безопасности, но вам не всегда нужно это делать. Например, если ваше приложение выполняет KYC (процесс проверки личности на основе документа и фотографии) заранее, вы уже знаете полное имя. Обязательно используйте информацию, указанную ранее. Номер карты включает в себя гораздо больше информации, чем вы можете ожидать. Например, вам не нужно спрашивать о типе карты, так как это можно легко расшифровать по номеру.
  3. Пользователь правильный тип клавиатуры
    Это правило легко реализовать, но очень часто забывают. Наши смартфоны имеют несколько типов клавиатур в зависимости от контекста. У нас есть специальная версия для ввода нашего адреса электронной почты, номера телефона или адреса веб-страницы. Используйте цифровую клавиатуру, чтобы сделать ввод номера CVV простым для клиента.
  4. Визуальное представление является хорошим дополнением
    Если у вас есть необходимые ресурсы, покажите визуальное представление карты, которая обновляется по мере ввода пользователем данных. Таким образом, проверка правильности данных будет намного быстрее.
  5. Минимизируйте ошибки, четко информируйте о них
    Обязательно следуйте основным правилам доступности, таким как правильный контраст, размер шрифта и т. Д. Это, скорее всего, сведет к минимуму количество ошибок, потому что ваша форма будет легко читать и сканировать. Однако, если возникают какие-либо ошибки, обязательно поместите подсказку рядом с местом, где пользователь должен исправить некоторую информацию.
  6. Включите сторонние сервисы, которые уже имеют данные (например, Apple Pay)
    Если возможно, включите сторонние сервисы, которые ваш пользователь уже использует. Это может быть так же просто, как включить Apple Pay или внедрить PayPal в качестве способа оплаты. Следование этому простому правилу может значительно улучшить ваши показатели конверсии!
  7. Безопасность - обеспечить надежное решение
    Убедитесь, что личные данные пользователей в безопасности на вашей стороне. Другим шагом будет информирование ваших пользователей о мерах предосторожности. Это может быть что угодно - тонкий значок, небольшой намек или просто чистый дизайн. Заверение ваших пользователей в их конфиденциальности сделает ваш продукт более надежным. Не усложняйте, не добавляйте больших подробностей о безопасности в этом месте - небольшого намека будет более чем достаточно.

Подвести итог…

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

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

Каково твое мнение? Сталкивались ли вы с подобными проблемами при разработке для fintech? Поделитесь своим мнением в разделе комментариев, и если вы нашли эту информацию полезной - оставьте аплодисменты.

Посетите блог Netguru, где вы найдете более интересные статьи о дизайне и пример Swap Behance, который послужил основой для этой статьи.

Спасибо всем, кто участвовал в чтении корректуры и обратной связи: Патриция Пачковска, Матеуш Пшитула, Люк Пахител, Тото Кастильоне, Наталья Хшановская