Это шестая из восьми статей в серии, где собраны выводы исследования юзабилити платёжных форм, проведённого нами в 2011 году, и сравнительного анализа сайтов ста крупнейших интернет-магазинов 2012 года.

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

40 из 100 крупнейших интернет-магазинов США предлагают посетителям указывать срок действия карты отлично от того, как он отпечатан на самих картах. К счастью, это также означает, что 60 сайтов используют один из двух приемлемых способов оформления указанных полей.

Как не следует оформлять поля со сроком действия карты

Поскольку наша цель — единообразие оформления срока действия на физической карте и в онлайн-форме, не следует использовать названия месяцев (за исключением одного случая, описанного ниже); год надо указывать двумя цифрами — вместо четырёх. Это связано с тем, что на большинстве карт, как того требует стандарт ISO7813, срок действия карты указывается как последовательность цифр. Использование только полей с числами снижает вероятность ошибки при вводе, так как пользователь может легко сверить цифры на экране с цифрами на пластиковой карте.

Во время тестирования платёжных форм некоторые участники при виде ниспадающего списка с названиями месяцев начинали считать их по пальцам, чтобы убедиться, что, например, «09» на карте соответствует «Сентябрю» в списке. То же поведение мы наблюдали при тестировании форм оплаты в мобильных приложениях.

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

Для месяца, когда истекает срок действия карты, должно быть предусмотрено поле с двумя цифрами (с нулём для первых девяти месяцев). Так их указывают на самих кредитный картах, например, «03» обозначает «Март». Год обозначают с помощью двух последних цифр, например, «14» — 2014 год.

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

Стандарт ISO7813 определяет свойства «Карт для финансовых транзакций». В разделе 6.2 указано, что корректно выдавливать на карте дату окончания срока действия в формате MM/ГГ и MM-ГГ. Поэтому, проектируя поля ввода в соответствии с этим форматом, вы позволяете пользователям легко и без ошибок вводить данные своих карт. Вы освобождаете их от необходимости переводить цифры на карте в название месяца или искать поля, где нужно продублировать всё цифрами.

Во время тестирования мы обнаружили другой удобный способ оформления полей: можно дублировать номер месяца его названием, главное — чтобы в начале шли цифры. Участники теста быстро заполняли поля, где данные были представлены таким образом: «03 — март». В то же время формат типа «Март — 03» казался им неудобным (он мешает быстро просматривать введённые данные). Когда название предваряют цифры, их легко сравнить с выдавленными на карте — это облегчает покупателям ввод и проверку данных.

Дьявол кроется в деталях

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

Первое, что стоит сделать — добавить под ячейками подписи, чётко определяющие значение вводимых цифр. На некоторых картах под цифрами ставят мелкие подписи «Месяц» и «Год», хотя такое оформление встречается гораздо реже, чем указанный в ISO формат «MM/ГГ».

Так пользователи уже не смогут перепутать цифры месяца и года — хотя, начиная с 2013, ещё 80 лет этот вопрос не будет актуален. (Помните: при использовании формата месяца «02 — февраль» необходимость подписывать поля отпадает).

Добиться идеального оформления можно, добавив между полями слеш или дефис (в ISO7813 оба варианта указаны как допустимые, хотя нам чаще встречались карты со слешем). Этот приём также поможет усилить сходство оформления данных не карте и на экране.

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

Выводы

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

Плохо. Как не следует оформлять поля с данными о сроке действия карты (и как поступают 40% онлайн-ритейлеров):

• Март / 2012
  Совершенно исключено. Цифры сложно перевести в название месяца, а год должен быть указан двумя цифрами вместо четырёх.

• Март — 03 / 2012
  Сложно проверять введённые данные, так как глаз «спотыкается» на названии месяца. Названия, к тому же, будут разной длины.

• 3 — март / 2012
  Не хватает нуля перед номером месяца.

• 3 / 2012
  Не хватает нуля перед номером месяца.

Хорошо. Два лучших способа оформления полей со сроком действия карты.

• 03 / 12
  Так дата указана на большинстве карт, использование этого формата обеспечивает полное соответствие отображения данных на экране и на пластиковой карте. Не забудьте подписать, какое из полей относится к месяцу, а какое — к году.

• 03 — март / 12
  Словесная расшифровка месяца снижает вероятность того, что цифры примут за обозначение года, но в результате снижается сходство оформления карты и онлайн-формы.

Не забывайте обновлять диапазон лет в выпадающем списке — иначе может оказаться, что в 2012 году срок действия всех карт будет оканчиваться не позже 2008 года.

Оригинал: http://baymard.com/blog/how-to-format-expiration-date-fields