UX-разбор формы на подбор кредитной карты на сайте sravni.ru

В разборе использовал обозначения 👍 — для хороших UX-решений, 👎 — для негативных примеров. Сначала выделил общие моменты, а ниже детальные по некоторым конкретным полям. Ссылка на страницу с формой, которую анализировал https://www. sravni. ru/kredity/promo/karty/.

👍 Поля выделяются на общем фоне

Из-за того, что поля имеют цвет, отличный от цвета фона формы, они проще воспринимаются на экране

👎 На странице Совкомбанка цвет полей и цвет фона одинаковый

👍 При перезагрузке страницы информация в полях сохраняется

👍 Есть реакция на наведение

Но не везде. При наведении курсора на input в заполненном и не заполненном состоянии, есть визуальный отклик. Это дает понять пользователю, что с эти элементом можно взаимодействовать

👎 Для поля textarea и для полей с ошибками, реакции на наведение нет

Меняется только внешний вид курсора

👍 После фокуса, название поля остается видимым

Так пользователь видит название поля, которое заполняет. Если пользователь отвлекся, он после может вернуться к заполнению поля. Название поля всегда будет перед глазами

👍 Поле в фокусе подсвечивается

Поле в фокусе подсвечивается. Так поле привлекает больше внимания. Клиенту проще определить с каким полем он сейчас работает

👍 Нет преждевременного отображения сообщения об ошибке

Это есть например у Совкомбанка, при заполнении формы на кредит наличными. Я даже не успел заполнить поле до конца, а уже получаю ошибку. Может сложиться впечатление, что номера на 8 (933) —… . не поддерживаются. Но если ввести номер до конца, ошибка пропадает

У sravni.ru такой проблемы нет. Ошибка появляется, если убрать фокус с поля. Вместо «Некорректное значение» можно написать — «Введите номер до конца», если такой тип ошибки сервис может определить

👍 Если в поле исправить ошибку, текст ошибки и красное выделение быстро пропадают

Антипример можно увидеть на сайте ООО МФК «вэббанкир» webbankir. com после исправления ошибки в поле ввода, красное выделение и сам текст ошибки еще какое-то время остается видимым. В это время (~ 2 сек.) пользователь может подумать, что заполнил поле c ошибкой, хотя это не так

👍 Есть выпадающий список с подсказкой, который ускоряет процесс заполнения поля

Не нужно вбивать данные целиком. Хорошо экономит время. Пример на основе поля с ФИО, но и у других полей это есть

Почему-то у Сбера нет этой фичи

👎 Не работает скролл в выпадающем списке

Сколл работает, если скролить колесиком мыши.

👎 Поле теряет фокус, когда вписываешь несколько слов в одно поле

На примере поля с ФИО, где требуется указать фамилию, имя и отчество в одном поле. Если я указал фамилию, то следующее что я буду указывать — это имя. Но когда я выбрал фамилию из выпадающего списка, поле теряет фокус. Чтобы продолжить заполнение, нужно опять кликнуть на поле ввода

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

👎 Нет автоматического перехода к следующему полю

Фокус не переходит на следующее поле, когда предыдущее заполнено. Пользователю нужно делать дополнительный клик

Тинькофф автоматически переводит фокус на следующее поле, если предыдущее заполнено

А если следующее по счету заполнено, фокус перейдет далее

👍 Указано общее количество шагов, которое нужно заполнить, чтобы оформить заявку

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

Форма увеличивается по высоте при появлении текста ошибки

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

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

👍 Автоматическое определение пола

Если ввести женскую фамилию «Иванова», тогда в подсказке будут женские имена. Это сокращает один вопрос в анкете. Пол клиента не требуется спрашивать в отдельном вопросе.

Забавный момент. Допустил ошибку и написал имя «Ивано» вместо «Иван». Sravni. ru уверен, что «Ивано» — мужское имя

«Тинькофф» в этом не уверен. Предлагает также отчество «Ивановна»

👍 Большая база населенных пунктов России. В выпадающем списке можно выбрать нужный вариант.

Если вы живете в самой маленькой деревне в России (по версии сайта tochka-na-karte. ru),

то вы все равно можете выбрать название своего населенного пункта из выпадающего списка:

Нельзя указать свое название населенного пункта

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

Но если ли в этой базе прямо все населенные пункты России? Тут мне кажется нужно дать возможность пользователю также указать свой вариант. И после уточнить детали по телефону. Пользователь может ошибиться в названии или указать место, куда карту не доставить. Но клиент заполнит это поле и пойдет дальше. А не закончит оформление и уйдет с сайта.

👎 Изменить название поля «Город получения карты»

Все таки есть деревни, села, хутора и тд. Название «Город» тут не очень подходит.

👎 В выпадающем списке нет подсказки с адресом домена

После ввода @ можно выводить список популярных доменом почты, чтобы не заставлять пользователя писать их вручную

Тинькофф подсказывает популярные домены почтовых сервисов в выпадающем списке

👎 Нельзя изменить номер телефона, после запроса СМС

Нет ни кнопки, ничего. Как изменить номер телефон, если пользователь ошибся

👍При копировании и вставке номера телефона, номер вставляется в поле корректно

Последняя цифра не удаляется, «8», «+7» не учитываются. Копировал и вставлял номер в форматах:

Пример плохого решения на сайте ОТП Банка. Скопировал номер «89992223344» и вставил его в поле с номером телефона. «8» также вставилась в поле и следовательно последняя цифра номера обрезается

Еще пример плохого решения. Скопировал номер «89992223344» и вставил его в поле с номером телефона. «8» и последняя цифра номера не вставились в поле

👍 Удобный формат СМС для подтверждения номера

Нет календаря для выбора даты

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

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

Существуют календари удобнее, чем этот. Но ввести числа с клавиатуры в данном случае, тоже хороший вариант.

👎 Нет проверки даты рождения

Если вы родились в 15 веке

или прилетели из будущего на машине времени

то для сервиса это норма. Вопрос у него не возникает.

Не знаю, что sravni.ru делает с данными, которые пользователь оставляет в этой заявке. Если рассылает в банки, чтобы узнать решения по кредитной карте, то зачем банкам подобные несуществующие данные — непонятно.

👍 Можно указать в любом формате

Так как у графы «Место рождения» в паспорте нет стандартной структуры. Где-то указан только город, где-то еще район и область. Поэтому дать возможность вписать данные произвольно и не требовать четкой структуры — хорошее решение

Первое фото — источник https://ru. wikipedia. org/wiki/Паспорт_гражданина_Российской_Федерации

Есть проверка даты выдачи паспорта, которая видимо зависит от даты рождения. Но как именно проходит проверка, мне до конца не понятно:

👎 Слишком длинное поле

В коде подразделения всего 6 цифр. Нет необходимости делать такое длинное поле

Туда просто нечего будет написать. Видимо по структуре формы получилось сделать такое длинное поле.

👍👍👍 Автоматически подставляется на основе серии паспорта и кода подразделения

Даже три пальца вверх поставлю. «Кем выдан» можно определить и заполнить автоматически. «Серия паспорта состоит из четырех цифр, где первые две — номер региона, выдавшего документ, а следующие — год, когда документ был получен.» (источник https://hi-tech. mail. ru/review/zifry_pasport/). И также «Код подразделения»: цифры имеют свое значение. (можно на https://hi-tech. mail. ru/review/zifry_pasport/ почитать).

В «Кем выдан» нужно вносить много информации, что неудобно. Гораздо удобнее, когда система сама помогает тебе заполнить поля

👎 Непонятен формат ввода:

Номер квартиры не требуется, что странно. Но может еще область требуется указать. Сервис ничего про это не говорит

👎 Неудобно заполнять поле с адресом регистрации

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

Ошибка тоже не дает понимания, как исправить ситуацию. После выбора города, вместо «Укажите корректные данные» можно написать «Укажите еще улицу и номер дома». Или если выбрал город и улицу, то можно написать «Укажите еще номер дома».

Тинькофф банк запрашивает адрес регистрации через несколько полей. Заполнять на мой взгляд удобнее:

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

Поле приняло 1520 год

👎 Нужно указывать повторно, если живешь по месту прописки

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

👍 При заполнении места работы автоматически подтягиваются данные о работодателе

Для РЖД рабочий адрес указан верно. Сфера деятельности и номер телефона тоже

Поле ищет по разным формам собственности, в том числе и по ИП. Но видимо не по всем. В качестве теста ввел ИП перевозчика такси из приложения Uber. Сервис его не нашел. Но для этого поля можно вписать собственный вариант в поле, а не выбирать из выпадающего списка.

👎 Поле слишком короткое

Само поле можно сделать на всю ширину формы, так как в него помещается мало информации, а название места работы может быть длинным

👎 Не сразу понятно о чем речь

Видимо речь про старт работы на этом месте

👎 Та же проблема, что и с полем «Адрес регистрации»

👎 Нелогичный порядок полей

По логике сначала нужно запросить этот телефон и назвать поле «Дополнительный телефон» например, а после уточнить чей это номер. Сейчас же все наоборот.

Пример реализации подобного функционала на сайте Тинькофф Банка

👍 Есть проверка на ввод неверного СНИЛС номера

👎 Непонятное начисление процентов точности расчета

Полностью заполнил первый шаг

Шкала % не изменилась. То есть эти 30% были учтены в шкале точности расчета до того, как я заполнил первый шаг. Но это же не логично. Точность расчета логичнее повышать по мере заполнения полей. Каждое заполненное поле (или не каждое, тут уже на усмотрение) повышает вероятность.

Та же ситуация и со вторым шагом. Поля еще не заполнены, а процент к точности расчета уже добавлен

Странная ситуация получается на последнем, четвертом шаге:

Так зачем мне заполнять последний шаг, когда точность расчета уже 100%?

Через консоль браузера показал, что до начала заполнения четвертого шага, уже 100% точность расчета

Более логичное решение с отображение прогресса заполнения предлагает Тинькофф Банк. Шкала процентов увеличивается по мере заполнения полей. 5% дается изначально

Антипример подобной шкалы с процентами можно у Райффайзенбанка посмотреть:

Ваши дополнения и предложения пишите в комментариях.