Школа
Интерфейс

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

Хай, в целях прокачки своего скила переделываю одну страницу под мобильные девайсы. Это сервис для перевода денег между картами. Имеется возможность перевода на карту или по номеру телефона. Как мне лучше это отобразить в строке инпута? Правильно ли я делаю? А как моя подсказка работает? Как сделать форму ещё более доступной? Спасибо!

Борис Женихов
25 фев 2020
👁 6779   🗩3
Интерфейс

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

Хай, в целях прокачки своего скила переделываю одну страницу под мобильные девайсы. Это сервис для перевода денег между картами. Имеется возможность перевода на карту или по номеру телефона. Как мне лучше это отобразить в строке инпута? Правильно ли я делаю? А как моя подсказка работает? Как сделать форму ещё более доступной? Спасибо!

Борис Женихов
25 фев 2020
👁 6779   🗩3
Константин Мозговой
Дизайнер бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интерфейс
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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