UX мобильных приложений. Семь шагов до правильного экрана оплаты

Юзабилити

UX мобильных приложений. Семь шагов до правильного экрана оплаты

Как на практике использовать принцип "дать, чтобы потом взять"

Поделиться
Запинить
Отправить

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

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

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

#1. Начните краш-тесты и охоту на баги

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

Когда нужно проверять такие вещи?

  1. До запуска приложения.
  2. Всегда.

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

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

#2. Обеспечьте безопасность данных

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

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

#3. Дайте полную видимость безопасности

Задумайтесь на секунду: концепция раздачи своих кредитных карт через интернет немного безумна. Всего один талантливый хакер может обчистить любой банковский счет! Именно поэтому обеспечение безопасности и конфиденциальности вашего платежного пакета — это всего лишь первый шаг.

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

#4. Побудьте в шкуре пользователя

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

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

#5. Тестируйте на разных устройствах и экранах

С сегодняшним разнообразием устройств и размеров на рынке расцветают и проблемы с UX. Иногда разница в размерах экрана заставляет кнопку или текстовое поле уходить за пределы экрана. Иногда ломается прокрутка.


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

#6. Упрощайте

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

  1. Убедитесь, что экран оплаты автоматически форматирует номер банковской карты (проставляет пробелы или тире между каждыми четырьмя цифрами) и его срок действия (мм/гг или мм/ггг?).
  2. Убедитесь, что на экране пользователя всплывает правильная клавиатура для каждого поля: цифровая для номеров карт, выбор колесика прокрутки для дат и полная клавиатура для имен владельцев карт.
  3. Рекомендуется, чтобы курсор автоматически перемещался из одного поля в другое, как только пользователь заканчивает заполнять каждое из них. Это позволит избежать дополнительных нажатий.

#7. Отображайте разбивку счета на всех этапах заказа

Глупейшие ошибки в оплате часто связаны с неверной суммой. Возможно, пользователь случайно бросил в корзину два одинаковых продукта. Или не посмотрел стоимость доставки и удивился, увидев значительную сумму, на которую он не рассчитывал. Человеческий фактор неумолим.

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

Оригинал.

UXUIдизайнмобильный маркетинг
Поделиться
Запинить
Отправить
Facebook YouTube Telegram