Сервис для перевода денег между картами

Сервис для перевода денег между картами

В первой части совета я прокомментировал интерфейс Бориса, затем собрал свою версию и разобрал её недостатки:

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

Предлагаю исходить из того, что наш сервис работает только с картами, выпущенными в России. Для локальных переводов имя владельца не требуется, поэтому уберём это поле.

Для большей информативности добавим логотипы банков, которые появляются после автоматической проверки номера карты.

У меня получился такой интерфейс перевода с карты на карту:

Обратите внимание, что для большей понятности лейбл поля «Куда перевести» меняется после ввода номера

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

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

Перевод с телефона на карту я не рассматриваю, потому что не видел такого. Если я ошибся, напишите об этом в комментариях.

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

Приглашаю уважаемых советчиков предлагать свои варианты макета. Мой макет можно забрать в Фигме:

Чтобы сделать копию макета для редактирования, кликните по его названию в левом нижнем углу, войдите в аккаунт, нажмите на стрелочку возле названия документа и выберите Duplicate to your Drafts

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

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

Комментарии

Меня смущает знак рубля в поле ввода: он выглядит как часть введённого текста, хотя, очевидно, ею не является. Учитывая, что это интерфейс для мобильного, могут возникнуть нежелательные побочные эффекты. Скажем, при длинном тапе по знаку рубля на нём может сработать выделение текста, когда пользователь ожидал выделения в поле ввода. Это, конечно, легко решаемо (user-select: none), но не каждый разработчик об этом подумает.

25 фев 2020

Когда вводишь данные в «Куда перевести», то меняется заголовок поля? Для меня это непривычно и лишние шевеления на экране. Возможно, лучше надписи «На карту» и «По номеру» ставить под поле, чтобы они были подсказкой, а не целым заголовком. Как, например, иконка банка ненавязчиво ставится в качестве подсказки, а не превращается в заголовок «С карты ВТБ». Или убрать вообще, потому что введённый номер — это и есть ответ на вопрос «Куда?». Хотя, конечно, заголовок «На карту» — классный сам по себе.

P. S. Ещё в бюрошной книге «Пользовательский интерфейс» на 63 странице нашла критику такого приёма.

25 фев 2020

Не понимаю, почему мы пытаемся запихнуть всё на одну страницу.

А ещё я почему‑то сначала ввожу данные своей карты и только потом выбираю, кому и что отправить. Обычно наоборот :‑)

4 мар 2020

Рекомендуем другие советы