Насколько идеальны лидеры рынка?
80 точек роста при вводе данных карты в приложениях маркетплейсов
Не раз встречал людей, убежденных, что, если компания – лидер рынка, на нее стоит равняться во всем, а ее клиентский путь и интерфейсы – брать в пример. Сравнивать можно, но, как показывает практика, все мы не идеальны.
Давайте проведем эксперимент: возьмем приложения Яндекс.Маркета, Озона, Wildberries и МегаМаркета, выделим из их customer journey небольшой шаг – ввод данных банковской карты и поищем точки роста: точно ли там все идеально?
Попробуйте сами, а в этой статье – 80 точек роста, которые удалось заметить мне.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами.
Давайте проведем эксперимент: возьмем приложения Яндекс.Маркета, Озона, Wildberries и МегаМаркета, выделим из их customer journey небольшой шаг – ввод данных банковской карты и поищем точки роста: точно ли там все идеально?
Попробуйте сами, а в этой статье – 80 точек роста, которые удалось заметить мне.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами.
Структура статьи
В этот раз контент я разбил не по этапам процесса взаимодействия с интерфейсом, а по компаниям. Внутри каждого из блоков хронология процесса соблюдается.
Кстати есть будет желание окунуться в процесс и гайдлайны, которыми я в том числе руководствовался, у меня для вас есть отдельная статья.
1. Яндекс.Маркет
Скорость загрузки интерфейса
Если клиент решил ввести данные карты, экран ввода данных загружается не моментально, а с заметной задержкой.
Локализация
Интерфейс ввода карты локализован на английский, в то время как весь остальной интерфейс всегда отображается на русском.
Ползунок в карточке
Карточку нельзя смахнуть или расширить. При этом в ней есть ползунок, свидетельствующий об обратном. Это может ввести клиента в заблуждение.
Типы принимаемых карт
Карты каких платежных систем принимаются к оплате, не понятно. Ожиданиями клиента на данном шаге не управляют.
Размер полей vs. значения
Хорошая практика при проектировании любых форм – это соответствие размера полей размеру вводимых значений. Здесь она не соблюдается.
Highlight поля при вводе
Поле ввода начинает подсвечиваться не при активации, а при вводе первого символа. Это ухудшает фокус внимания при переключении полей.
Placeholder при активации поля
При активации поля placeholder не уменьшается, из-за чего поля могут казаться визуально не выровненными.
Отображение платежной системы
Платежная система не подсвечивается автоматически при вводе номера карты. Это может повысить вероятность ошибочного ввода.
Отображение банка
Хоть банк и можно определить на основе вводимого номера карты, функция также не реализована. Возможность уберечь клиента от ошибок при вводе упускается.
Ограничение ввода месяца
Система позволяет вводить некорректные значения месяца, хотя могла бы ограничивать это прямо на этапе ввода.
Оптимизация ввода месяца
При вводе месяца 1 цифрой (например, 5), ноль можно подставлять автоматически, чтобы сэкономить клиенту 1 действие. Здесь эта возможность не используется.
Даты в прошлом
Поддерживается ввод карт со сроком действия не только до 2019 (что корректно), но и в более отдаленном прошлом (несколько лет назад).
Переключение полей с backspace
Если клиент решил ввести другую карту и стирает введенные значения, при нажатии на клавишу backspace в пустом поле предыдущее поле не активируется.
Название поля с кодом
В то время как формулировка CVV применима только для карт VISA, используется именно она – даже если введена карта MasterCard (у которой код называется CVC).
Подсказки по коду
Поле ввода CVC/CVV кода можно снабжать подсказкой в формате tooltip'а о том, где его найти. В интерфейсе приложения такие подсказки не используются.
Отработка некорректного ввода
Если в поле введены некорректные данные, авто-перехода к следующему полю не происходит. Но и факт ошибки не подсвечивается.
Нераспознанная система
Если платежная система не распознана, в отличие от известных платежных систем, приложение не подсвечивает ввод, как ошибочный.
Формулировка текстов ошибок
В то время как текст ошибки в поле с номером карты призывает ее исправить, тексты по дате и коду лишь констатируют факт ошибки.
Конкретизация ошибок
Хотя ключевые ошибки можно было бы распознавать и давать более релевантные советы по их исправлению, тексты гласят лишь о том, что данные некорректны.
Подтверждение корректного ввода
Если данные прошли валидацию, их корректность можно было бы дополнительно подсвечивать, но эта возможность упускается.
Защита вводимых данных
Хоть клиент и вводит в форме чувствительные данные, о методах их защиты не говорится ни слова. Потенциальные опасения клиента не отрабатываются.
Чекбокс запоминания карты
В блоке «запомнить карту» кликабелен только чекбокс, хотя это могла бы быть более широкая область, включая текст. Нажать на чекбокс относительно труднее.
Возможность отвязать карту
Хоть об этом в интерфейсе и не говорится, но если мы оставим чекбокс активным, отвязать потом карту через приложение Яндекс.Маркет уже не получится.
Консистентность дизайна кнопок
Кнопки на 2 смежных экранах не консистентны по дизайну и заметно отличаются друг от друга, хотя в идеале такого быть не должно.
Нажатие на неактивную кнопку
Система никак не реагирует на нажатие на кнопку оплаты, если она не активна. Хотя можно было бы пояснить, что требуется скорректировать.
Реакция кнопки на касание
Кнопка оплаты визуально не реагирует на событие касания, делая интерфейс относительно менее отзывчивым.
Смахивание карточки
Если клиент передумал вводить номер новой карты и выбрать другой способ, смахнуть карточку у него не получится, хотя данная реакция была бы ожидаемой.
Время ожидания ответа сервера
При нажатии на кнопку оплаты ответ от сервера клиенту приходится ждать достаточно долго.
Конкретизация ответа об ошибке
Если при оплате произошла ошибка, в интерфейсе приложения отображается лишь факт ошибки без какой-либо конкретизации ее причин.
2. Ozon
Авто-активация ввода
В интерфейсе привязки карты поле ввода номера не активируется по умолчанию, создавая дополнительную задачу для клиента.
Highlight первого поля ввода
В интерфейсе оплаты поле с номером по умолчанию выделено, как активное. При этом оно в этот момент по факту не активно.
Темная тема
Хоть приложение и поддерживает темную тему, экран ввода данных карты – исключение, которое может «резать глаз».
Highlight полей при нажатии
При нажатии на поля они кратковременно подсвечиваются серой заливкой – не совсем стандартная реакция, особенно для приложений.
Крайне вероятно, что это веб-интерфейс, и это системный highlight. Его можно убрать, вставив в стиль вот этот код:
html {
-webkit-tap-highlight-color: transparent;
}
html {
-webkit-tap-highlight-color: transparent;
}
Раскладка клавиатуры для кода
Хоть CVV/CVC код всегда состоит только из цифр, по умолчанию при его активации появляется буквенная клавиатура, и ее приходится переключать.
Зум интерфейса
В отличие от остального интерфейса приложения, интерфейс ввода данных карты можно приближать и удалять. Для чего – не совсем понятно.
Число полей для даты
Ввод срока действия разбит на 2 поля, что менее удобно по сравнению с единым полем. В частности при необходимости стереть значение даты.
Предложение ввести пароль
При вводе данных в поля года в сроке действия и кода клиенту предлагается вставить один из сохраненных паролей, что не совсем уместно.
Ограничение ввода месяца
Система позволяет вводить некорректные значения месяца, хотя могла бы ограничивать это прямо на этапе ввода.
Ввод месяца 1 цифрой
При вводе месяца 1 цифрой, если она больше единицы, ноль автоматически не подставляется и перехода к вводу года не происходит.
Даты в прошлом
При вводе данных клиент может ввести срок действия в отдаленном прошлом. При этом система не обрабатывает это, как ошибочный ввод.
Кнопка очистки номера карты
Хоть кнопка очистки ввода и предусмотрена, она настолько не контрастна к фону, что у многих клиентов могут возникнуть проблемы с ее восприятием.
Highlight ошибки в активном поле
Если ошибки допущены в нескольких полях, ошибка не всегда отображается именно по активному полю, которое клиент корректирует.
Переключение через backspace
Если клиент решил стереть данные карты, при нажатии на backspace в пустом поле предыдущее поле не активируется – приходится тянуться до него пальцем.
Отображение ошибки
Текст сообщения об ошибке продолжает отображаться даже тогда, когда клиент уже начал вносить корректировки.
Ссылка на условия
Ссылка на условия на экране привязки карты не кликабельна: ознакомиться с условиями клиент не может.
Переходы при ошибке от сервера
Если была получена ошибка от сервера, для возврата к методам оплаты переходит не в 1 касание, а через промежуточный экран.
3. Wildberries
Локализация
В приложении локализована лишь часть текстов – точно не лучшая практика. Экран ввода данных карты также попал в список не локализованных.
Авто-активация ввода
При переходе к форме ввода поле с номером карты не активируется по умолчанию, хотя это единственное целевое действие. Приходится активировать его вручную.
Расположение полей
Поля ввода расположены в самой верхней части экрана: хотя внизу есть большое пустое пространство. Тянуться до них пальцем относительно неудобно.
Размер полей
Размер полей значительно отличается от размера вводимых данных. В случае со сроком действия и кодом – в 2-3 раза.
Highlight активного поля
Активное поле никак дополнительно не подсвечивается, привлекая к себе относительно мало внимания.
Placeholder даты
Placeholder срока действия не дает нам подсказок о том, в каком формате ее нужно вводить: нужно ли вводить год из двух или четырех символов?
Даты в прошлом
При вводе данных клиент может ввести срок действия в отдаленном прошлом. При этом система не обрабатывает это, как ошибочный ввод.
Своевременность валидации
Сообщение о некорректном вводе номера карты начинает отображаться уже с первого символа, хотя клиент только начал вводить данные.
Текст ошибки при корректировке
Если данные в поле введены некорректно, текст ошибки продолжает отображаться уже в процессе ее корректировке. Это может ввести клиента в заблуждение.
Отображение банка
Хоть банк и можно определить по номеру карты, функция, в отличие от платежной системы, не реализована. Возможность уберечь клиента от ошибок упускается.
Авто-переход к следующему полю
При вводе номера карты, хоть система и определена, при вводе 16 цифр авто-перехода к вводу даты не происходит: приходится активировать его вручную.
Переключение полей с backspace
Если клиент решил ввести другую карту и стирает введенные значения, при нажатии на клавишу backspace в пустом поле предыдущее поле не активируется.
Быстрая очистка данных
Если клиент передумал и решил ввести другую карту, возможности быстрой очистки данных нет: придется всё стирать либо повторно заходить в интерфейс.
Число цифр в номере
Более того, несмотря то, что система и определилась автоматически, поле все равно дает клиенту вводить больше 16 символов, хотя не должна этого делать.
Подсказки по коду
Поле ввода CVC/CVV кода можно снабжать подсказкой в формате tooltip'а о том, где его найти. В интерфейсе приложения такие подсказки не используются.
Обработка ошибок в коде
В отличие от других полей, поле ввода CVC/CVV никак не реагирует ошибкой на то, что введены не все 3 символа.
Горизонтальная ориентация
Поддержка горизонтальной ориентации делает задачу ввода данных карты не такой уж и простой.
Защита вводимых данных
Хоть клиент и вводит в форме чувствительные данные, о методах их защиты не говорится ни слова. Потенциальные опасения клиента не отрабатываются.
Нажатие на неактивную кнопку
Если кнопка неактивна, на ее нажатие система никак не реагирует. Хотя могла бы активировать пустое поле, подсветить ошибку или призвать ввести данные.
Текст кнопки действия
При нажатии на кнопку клиент сразу же инициирует процесс оплаты. При этом текст кнопки может ввести в заблуждение, что это еще не финальный шаг.
Указание суммы к оплате
Несмотря на то, что это последний шаг перед оплатой, сумма заказа к оплате нигде на экране не указывается. Ожиданиями клиента управляют не идеально.
4. МегаМаркет
Доступные типы карт
Карты каких именно платежных систем принимаются к оплате, в интерфейсе не уточняется.
Авто-активация ввода
Как и в двух предыдущих примерах, поле с номером карты не активируется автоматически, и приходится активировать его вручную.
Highlight активного поля
Активное поле, кроме курсора, никак больше не подсвечивается и хуже концентрирует на себе фокус внимания.
Определение платежной системы
При вводе номера карты платежная система не определяется, хотя ее highlight мог бы позволить снизить вероятность ошибочного ввода.
Определение банка
Как и в случае с платежной системой, банк также не определяется, хотя клиент ввел все необходимые для этого данные.
Формулировка текста ошибок
Если введены некорректные данные, текст ошибки лишь констатирует ее факт, хотя мог бы в более позитивном ключе призывать клиента ее исправить.
Конкретизация ошибок
В отличие от поля ввода кода, тексты ошибок номера карты и даты не конкретны и не поясняют, в чем именно заключается ошибка.
Пояснения к коду
Особенно в случае с пожилыми клиентами может потребоваться пояснение, что такое CVC/CVV. Но его рядом с полем не приводится.
Переключение через backspace
Как и в остальных примерах, если клиент решил ввести данные другой карты, при очистке поля и нажатии на backspace переход к предыдущему полю не происходит.
Быстрая очистка полей
Возможность быстрой очистки данных также отсутствует: удалять придется данные во всех полях поочередно.
Формат ввода даты
Заголовок спроектирован так, что клиенту может быть не понятно, в каком именно формате вводить год: двумя или четырьмя цифрами.
Защита данных
Карту по умолчанию предлагается запомнить. При этом то, как эти чувствительные данные будут защищены, не говорится ни слова.
Обработка ошибки сервера
Если клиент ввел некорректные данные карты и попытался оплатить заказ... Его благодарят за покупку на 0 рублей.
To be continued...
Как видим, даже у топовых компаний с большим штатом и бюджетами есть потенциал для улучшения. Чтобы его замечать, нужно развивать насмотренность. Надеюсь, что мои статьи помогают вам на этом пути. А компаниям, которые мы обсудили сегодня, желаю максимальных успехов в дальнейшем развитии.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce