x
 
Борис Женихов
11 февраля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


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

Проблемы

В макете про­ти­во­ре­чие между назва­нием и мас­кой поля ввода. Назва­ние гово­рит, что можно вво­дить и номер теле­фона, и номер карты, а маска наме­кает, что вво­дить нужно именно номер карты. Это сби­вает с толку.

Сму­щает гигант­ская кнопка «Очи­стить всё». Пред­ставьте, что кто‑то слу­чайно на неё нажмёт и сотрёт всё, что тща­тельно вво­дил. Подоб­ные эле­менты могут быть источ­ни­ком оши­бок, их нужно убирать.

Чтобы для начала не услож­нять интер­фейс, пред­ла­гаю убрать воз­мож­ность вво­дить номер карты и теле­фона в одно поле. Номер каж­дой карты уни­ка­лен, а к номеру теле­фона может быть при­вя­зано несколько карт. При пере­воде по номеру теле­фона пона­до­бится эле­мент интер­фейса для выбора одной из карт, кото­рый не при­го­дится при пере­воде по номеру карты. Неис­поль­зу­е­мый в поло­вине слу­чаев эле­мент будет услож­нять экран, а мы сей­час идём по про­стому пути. Поэтому пред­ла­гаю сде­лать радиокнопки в начале стра­ницы для выбора спо­соба пере­вода. В зави­си­мо­сти от выбора будет немного меняться интерфейс.

Первый вариант редизайна

Доба­вим радиокнопки и рас­ки­даем якор­ные объ­екты по раз­ным сто­ро­нам экрана:

К сожа­ле­нию, вы при­слали только ниж­нюю часть макета. Пред­по­ложу, что выше нари­со­ваны поля для ввода суммы и рек­ви­зи­тов карты отпра­ви­теля. Исходя из этого допол­ним макет:

Бывают карты с номерами, разделёнными на группы по другим принципам, например, Американ Экспресс. Будет идеально, если учесть все варианты в интерфейсе. Если бы я проектировал интерфейс, то изучил бы эту тему глубже

При запол­не­нии номера карты хорошо бы, чтобы интер­фейс делил его на группы по четыре цифры.

Бывают карты с номерами, разделёнными на группы по другим принципам, например, Американ Экспресс. Будет идеально, если учесть все варианты в интерфейсе. Если бы я проектировал интерфейс, то изучил бы эту тему глубже

Кажется, что в макете можно убрать под­за­го­ло­вок. Заодно при­ки­нем, как будет выгля­деть неза­пол­нен­ное состо­я­ние формы:

Не забу­дем доба­вить под­сказку в поле «CVC 2 / CVV 2» и напи­сать про комиссию:

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

Основа макета готова. Теперь нужно нари­со­вать состо­я­ние при пере­воде по номеру теле­фона и не забыть при­дать макету вид насто­я­щего сер­виса: доба­вить глав­ное меню, лого­тип сер­виса и пла­тёж­ных систем, согла­ше­ние с усло­ви­ями оферты и так далее.

После этого нач­нётся основ­ная работа дизай­нера интер­фей­сов. Нужно будет про­ду­мать все состо­я­ния и сце­на­рии исполь­зо­ва­ния интер­фейса, чтобы избе­жать кося­ков в неоче­вид­ных слу­чаях. Напри­мер, что будет:

  • если в полях «Карта отпра­ви­теля» и «Карта полу­ча­теля» вве­сти один и тот же номер?

  • у карты закон­чился срок действия?

  • напи­сать в полях какую‑нибудь ерунду?

  • вве­дён­ная сумма больше или меньше разрешённой?

  • вве­сти номер теле­фона, к кото­рому при­вя­зано несколько кар­то­чек или, нао­бо­рот, ни одной?

Недостатки первого варианта

Теперь рас­смот­рим недо­статки полу­чив­ше­гося реше­ния с радиокнопками:

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

  2. Лиш­ний тап, чтобы попасть в нуж­ный режим. Он уве­ли­чи­вает сред­нее время, за кото­рое поль­зо­ва­тели пере­во­дят деньги. А для людей пере­воды — еже­днев­ная задача. В них важен интер­фейс с мини­му­мом жестов.

  3. Пред­ста­вим, что чело­веку нужно пере­ве­сти деньги по номеру теле­фона, а мы ему по умол­ча­нию пока­зы­ваем поля для ввода рек­ви­зи­тов карты. Выхо­дит, что поло­вина людей гаран­ти­ро­ванно уви­дит не тот интерфейс.

  4. Нет воз­мож­но­сти пере­ве­сти деньги с карты на теле­фон или с теле­фона на карту.

В сле­ду­ю­щей части совета мы попро­буем изба­виться от этих недостатков.

При­гла­шаю ува­жа­е­мых совет­чи­ков пред­ла­гать свои вари­анты макета в ком­мен­та­риях. Мой макет можно забрать в Фигме. Чтобы сде­лать копию макета и редак­ти­ро­вать её, создайте акка­унт, нажмите на стре­лочку возле назва­ния доку­мента и выбе­рите Duplicate to your Drafts.

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

Поделиться
Отправить

Комментарии

Александр Шешотов
11 февраля 2020

По стандартам платёжных систем имя владельца карты — необязательное поле. Если его убрать, форма станет компактнее.

Алексей Львов
11 февраля 2020

1. Как уже написал Александр, имя владельца — необязательное поле для локальных переводов. С другой стороны, для международных переводов должны быть Имя, Город и Адрес получателя (при переводе за границу) или отправителя (при переводы из-за границы). Страна подтянется автоматически платежной системой. Интерфейс станет более громоздким. Добро пожаловать в длинные банковские формы :-)

2. Сумму и номер карты получателя лучше поменять местами, т. к. при международном переводе комиссия будет больше, чем при переводах внутри страны. Она будет пересчитана, а пользователь этого может не заметить. Кроме того, если сервис не допускает международные переводы, то лучше об этом сообщить на этапе ввода номера карты и не просить ввести сумму. А ещё есть вариант, когда введён номер карты страны, куда переводы запрещены.

3. Комиссия может отличаться от направления переводов: между картами одного банка, внутри страны, международные. Кроме того, есть лимиты на количество транзакций в день/месяц и лимиты на сумму в день/месяц. Тарифы пользователи хотят увидеть сами и ищут их на экране. А о лимитах просто неплохо бы где-то сказать. Да, это тоже нагружает интерфейс.

Юрий Ширяев
11 февраля 2020

Поле для ввода реквизитов карты отправителя можно собрать в одно. У Тинькова можно подсмотреть пример.

Я думал, как решить модальность предложенного решения:
Можно научить бекенд проверять поле ввода номера карты и телефона на длину символов. Длина номера карточки может быть от 14 до 19 цифр, а длина мобильного номера — до 11 цифр. Но, к сожалению, велика вероятность, что клиент введёт номер карты, а система посчитает её за номер телефона. И использовать алгоритм, который по первым цифрам определит принадлежность карты, в этом случае не получится: коды мобильных в некоторых странах совпадают с началом номеров карт.

Один из вариантов — это два пункта меню ещё до попадания на текущий экран. Например:
Переводы → Банковский перевод / С карты на карту / По номеру телефона / …

Серёжа Копылов
12 февраля 2020

Юрий, карта это или нет, поможет узнать контрольный алгоритм Луна:
https://ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%9B%D1%83%D0%BD%D0%B0

Сергей Попов
22 февраля 2020

ФИ на картах обычно написаны прописными буквами.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

1 Где хранить скриншоты интерфейсных решений, чтобы было удобно искать референс? 9 Каким должно быть ресторанное меню на сайте? 1 Насколько оправдан звук в веб интерфейсах? Например: клик по ссылке, добавление товара в корзину, удаление из корзины и т. д. 2




Недавно всплыло

Как снимали Феррари для обложки книги «Фотосъёмка автомобилей»? 2 Трудно найти вдохновение на текст 2 Как улучшить запись автоответчика? 4 Насколько уместно использование ЦСС-стилей cursor: default и user-select: none 2