Поля ввода и их валидация

Илья Страйков как-то написал:

Технологи изобрели маски, проверку на количество символов, домены и ещё чёрти что. На самом деле всё намного проще. Поле с номером телефона можно пропускать, если в нём есть хоть что-то, а почту — если есть собака, точка и текст вокруг них. Это всё.

Все так. Если только от этих данных особо ничего не зависит. Или если заранее знать, что те люди, которые будут заполнять поля — трезвые, здравомыслящие «грамотные пользователи ПК», которые никогда и ни в чем не ошибаются.

Нет, я серьезно. Вот вполне обычные примеры заполнения полей Депо рано утром, поздно ночью и вечером в пятницу:

Владимир.ivanov@yandex.ru. Так пишут ребята под градусом или не очень компьютерные люди, которым диктуют почту по телефону («владимир, точка, да, латиницей, иванов, вэ как галочка…»). Они не получат подтверждение брони и останутся без билета в почте.

+7 495 555-55-55, доб. 1912. Возможно, закрутились, и по привычке написали так, как обычно пишут коллегам. Или скопировали из подписи своего письма и не заметили лишнего. Или просто не понимают, в чем может быть потенциальная проблема. Таким людям не отправится смска об отмене или переносе рейса.

Vladimir Ivanov вместо Ivanov Vladimir (перепутали поля имени и фамилии). Просто невнимательные. Их вообще не посадят на рейс.

Чтобы избежать всей этой фигни, нужно идти двумя путями: автоматически исправлять то, что можно исправить, а там, где это нельзя сделать самим, ненавязчиво подсказывать людям возможную ошибку. И еще упрощать сам процесс ввода. А чтобы все это работало, нужны проверки посложнее.

Теперь подробнее и с примерами правил.

Почта

Что вводить:

Латиницу независимо от раскладки. Просто не обращаем внимания на текущую раскладку: обычный человек этого не заметит, а Владимир.ivanov поймет, что кириллица тут не пройдет.

Все цифры.

Символы: ! # $ % & * + / = ? ^ _ ` { | } ~

Точку, если она не в начале или в конце. Еще советуют не воспринимать больше одной точки, но гуглопочте на это, например, все равно: напишите мне на k.a.p.a.n.a.g.a@gmail.com, и я вам отвечу.

Бонус: yandex.com → yandex.ru. С почтой Гугла не пройдет, потому что у gmail.ru есть пара десятков пользователей, один из которых может когда-нибудь захотеть заполнить вашу форму.

Телефон

Главный формат номера: +X XXX XXX–XX–XX или X XXX XXX–XX–XX.

Мобильный +7 9XX XXX-XX-XX, 8 9XX XXX-XX-XX

Московский +7 495 XXX-XX-XX, 8 495 XXX-XX-XX, +7 499 XXX-XX-XX, 8 499 XXX-XX-XX

Питерский +7 812 XXX-XX-XX, 8 812 XXX-XX-XX

(7|8)(9[0–9]{2}|495|499|812)([0–9]{3})([0–9]{2})([0–9]{2})

Когда введенный номер, начинающийся с 8, подходит под главный формат, можно его поменять на +7 после потери фокуса.

Если большинство клиентов из России, можно сэкономить на вводе кода страны, написав его сразу. Код должен быть стираемый. Плохо код убирать в отдельную выпадалку — тыкать в нее сложнее, чем переписать в общем инпуте (плюс выпадалку часто не замечают, и пишут в это поле полный номер вместе с кодом).

«+7 » в плейсхолдере, это же вставляется при клике на поле (стирать «+7 » можно)

Что можно вводить в поле и как:

Цифры. ≤22 штук; если формат подходит под наш, то 11.

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

Плюс + только в начале.

Дефис ‑ для разделителей.

Короткое тире –, минус − и тире — форматируем автоматом в дефис.

Скобки ( ) после потери фокуса затирать.

Пробелы и дефисы должны подставляться по ходу набора номера.
После +7 и 8 подставлять пробел.

Карта

Номер карты. Обычно 16 цифр, пробел после каждой 4-й подставляется автоматом. Это сокращает ошибки, а не только для красоты. Второй формат по частоте — 18 цифр. Тогда пробел после восьмой цифры. По первым шести цифрам можно опознать банк, выпустивший карту (см., например, как это использует Рокетбанк).

Владелец карты. Минимум 2 буквы (одна для имени, одна для фамилии) и пробел, допускается ввод точки (K. PETROV) и дефиса (K. PETROV-VODKIN). Независимо от раскладки и регистра вводить прописной латиницей, можно сделать разрядку букв.

Valid thru. От 3 до 4 цифр: 2/18 (слеш введен вручную), 02/18 (слеш подставлен автоматом после двух введенных цифр). Кстати, советую писать прямо на английском, потому что на карте так написано (соотв., найти проще).

CVC и CVV. 3 цифры (для AmEx — 4), поле необязательно для заполнения (бывают карты без этого кода).

Дата

Обычное состояние
Поставили в поле курсор (рамка посинела)
Вводим дату (точки подставляются сами)

Условия ввода:

Дата вводится в формате дд.мм.гггг, максимум 8 цифр (допускается формат дд.мм.гг, который форматируется после потери фокуса: 12.12.8012.12.1980). Хорошо, если после потери фокуса меняется формат на 12 дек 1980 (при фокусе возвращается в дд.мм.гггг).

Точки подставляются сразу по ходу набора (см. выше).

Если пользователь (не смотря на монитор, например) вводит дату, указывая разделитель «., , / — символы не дублируются (вводятся только цифры и подставляются автоматом точки).

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

В поле должны работать стандартные операции:

— выделение всего Ctlr/Cmd + A,

— вставка Ctrl/Cmd + V,

— выделение текста с клавиатуры шифт + стрелки вправо/влево,

— выделенный текст должен стираться при наборе

— отмена Ctlr/Cmd + Z и отмена отмены Ctrl/Cmd + Shift + Z

— перемещение стрелками

Tab (+ Shift), Home, End

Правка бэкспейсом и делитом:

Синий курсор стирает точку влево и перескакивает ее вправо

Почти все из этих правил работают на Депо при вводе паспортных данных.

UPD: с января 2016 развитием сайта Депо занимается его команда

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
михаил капанага

михаил капанага

подписывайтесь на канал, ставьте лайки, нажимайте на колокольчик. ссылки в описании ниже.

More from Medium

UX in an Interactive Exhibition

Designing Platform and Design System of Traveloka — Arie Aulia Nugraha 🇮🇩

Designing Difficulty the Right Way

Recycling App Design Sprint