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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

Константин Барышников
25 февраля 2020

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

Дарья Иванова
25 февраля 2020

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

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

Константин Константинопольский
4 марта 2020

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

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


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

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

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

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

Плагины для Фигмы. Часть 2 Плагины для Фигмы. Часть 1 5




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

Об издании мыслей в виде книги 2 5 Типовые решения в вёрстке. Как сверстать простую шапку страницы с меню 4 Как написать аккуратный код? Часть вторая: связность 1