Улучшаем UX приложения для подписки на брокера

Vasily Belenok
Дизайн-кабак
3 min readNov 28, 2020

--

Что за приложение

Представьте «Убер» в мире форекса, только вместо водителей профессиональные трейдеры, а вместо пассажиров — форекс-любознательные ребята, которые зарабатывают, автоматически копируя сделки трейдеров в режиме реального времени с помощью веб и мобильных приложений.

Флоу пользователя и проблема
Аналитика показывает, что 15% новых пользователей android-приложения выводят деньги, так и не начав пользоваться сервисом. т. е. так и не подписавшись ни одного Трейдера.

Флоу пользователя

Как это выглядит в приложении сейчас

Какие тут проблемы:

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

Но в дальнейшем стоит подумать над увеличением кнопки “Start coping”(есть ощущение что она слишком маленькая) и провести АВ-тестирование или интервью с группой пользователей. Так же стоит подумать над формулировкой кнопки, что бы из лейбла было понятно что будет происходить дальше

Страница оформления подписки
Исходя из задачи, пользователь не понимает “какие настройки выставить при начале копирования.”
Поэтому следует сделать следующее:
1. Из заголовка не понятен контекст действия (Сделать заголовки, по которым станет понятно какое действие должен сделать пользователь.)
2. Не понятно к чему относятся заголовки. (Выровнять заголовки, что бы визуально их прикрепить к полям.)
2. Много действий для выбора плана. (Упростить выбор типа копирования, можно уменьшить количество кликов(тапов) по экрану, отказавшись от выпадающего селектора.)
3. В поле в неактивном состоянии стоит показать минимальную сумму, это позволит уменьшить количество ошибок, а рекомендуемую цену сразу сделать кликабельной, что бы упростить процесс ввода.
4. Такое ощущения, когда попал на экран ты уже сделал ошибку. (Стоит отказаться от красного цвета в подсказке, потому что это похоже на ошибку и отпугивает пользователя.)
5. Маленькая кнопка и непонятный контекст. (Стоит проработать кнопку сделать ее заметнее* и ввести состояния кнопок, сделать ее не активной пока поля не заполнены правильно. А при тапе на неактивную кнопку выводить toast с подсказкой.)
*По исследованию гугла кнопку стоит делать высотой 56dp, так на нее будет нажимать пальце и она будет удобнее.

Что получилось

Мне кажется стало понятнее и круче, решение конечно же требует тестирования.
Я провел локальное тестирование, на моем уровне задача решена. (Выбрал несколько человек объяснил задачу и проблему, показал оба макета, что бы было объективное не раскрывал где мое решение )

Если есть замечания или предложения пишите, обсудим…

Если что-то понравилось, можете похлопать:)

--

--