Задача:
Заплатить за услуги интернет-провайдера СибСети через мобильное приложение.
Дано:
Мобильное приложение СибСети на Android смартфоне. Виртуальная карта Тинькофф для оплаты интернет услуг.
Ход работы:
1. Открываю приложение СибСети. Вижу задолженность по оплате:
Первое, что бы улучшил, это перенес кнопку «Пополнить» к остальным кнопкам на черном фоне. При открытии приложения искал эту кнопку глазами и несколько раз просмотрел кнопки на черном фоне и не находил, то что нужно. Получается, что самая важная кнопка сейчас синяя, на синем фоне:
2. Нажимаю «Пополнить». Не помню какая сумма стояла по умолчанию. Поменял на 390 ₽ с клавиатуры:
3. Открывается поле для ввода номера карты:
Мой процесс вода номера карты:
3.1 Сворачиваю приложение СибСети;
3.2 Открываю приложение Тинькофф Банка;
3.3 Открываю список своих карт, ищу ту с которой оплачиваю в интернете. Так как для интернет покупок у меня отдельная виртуальная карта;
3.4 Нахожу карту, копирую ее номер;
3.5 Открываю приложение СибСети;
3.6 Вставляю скопированный номер в поле с номером карты;
3.7 Нажимаю оплатить и получаю ошибку «Введены некорректные данные карты»
8. Оказывается нужно нажать на синюю стрелочку в поле с номером карты и откроется доп. поля которые нужно заполнить:
После указания номера карты нужно автоматически сворачивать поле с номером и показывать поля ММ/ГГ и CVC без нажатия на синюю стрелочку. Так и происходит, если ввести номер карты с клавиатуры. Но когда вставляешь скопированный номер, нужно дополнительное нажатие на синюю стрелочку. Команде банка Тинькофф нужно предусмотреть сценарий, когда номер карты вставляется в поле и следовательно автоматически показывать поля ММ/ГГ и CVC.
Ввожу недостающие данные, нажимаю «Оплатить» Получаю ошибку «Введен некорректный e-mail»
Обычно поле с имейлом необязательное в таких формах. Хочешь квитанцию — заполни поле, не хочешь — оставь пустым.
10. Ввожу почту, нажимаю оплатить. Успех:
В попапе необходимы неразрывные пробелы после «в» и «с». Для будущих оплат приложение сохраняет данные карты и вводить заново их не придется.
Вот, как бы я улучшил первый экраны приложения СибСети:
1. Кнопку «Пополнить» перенес на черную плашку, а кнопку «Детализация» убрал. Детализацию можно перенести в «Аккаунт», например. Сейчас на черной плашке остались все действия, которые связаны с текущим балансом:
- Пополнить
- Отсрочка
- Автоплатёж
Детализация немного про другое, про просмотр статистики. Детализация не влияет на баланс. В детализации ты можешь посмотреть историю своих платежей, но не повлиять на них.
2. Для кнопки «Пополнить» иконка, в виде плюса.
3. В существующей версии дизайна для отсрочки стоит иконка песочных часов. Песочные часы обычно заканчиваются очень быстро и кажется, что отсрочка у тебя на пару часов. Хотя это не так. Отсрочка дается на 5 дней. Добавил вместо нее иконку календаря. Может быть можно обыграть календарь с цифрой пять или убрать календарь и вместо него поставить пятерку, но пока не придумал как.
4. У автоплатежа в существующем дизайне кнопка секундомера. Кажется, что это связано со скоростью, ускорением, но никак не с повторяющимися регулярно действиями. Заменил на иконку со стрелочками.
Если у вас есть предложения, как улучшить этот дизайн, пишите в комментариях. Спасибо.