В разборе использовал обозначения 👍 — для хороших 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-999-222-33-44
- 8 (999)-222-33-44
- 8 (999)2223344
- +7(999)2223344
- (999)2223344
Пример плохого решения на сайте ОТП Банка. Скопировал номер «89992223344» и вставил его в поле с номером телефона. «8» также вставилась в поле и следовательно последняя цифра номера обрезается
Еще пример плохого решения. Скопировал номер «89992223344» и вставил его в поле с номером телефона. «8» и последняя цифра номера не вставились в поле
👍 Удобный формат СМС для подтверждения номера
- Четыре цифры — легко запомнить
- Цифры в самом начале сообщения. Ну нужно открывать сообщение полностью. Можно увидеть цифры через уведомление
- Текст смс на русском языке
Дата рождения
Нет календаря для выбора даты
Может это и к лучшему. И проще просто ввести цифры с клавиатуры, чем разбираться с календарем. Например таким, как на сайте Почта Банка:
- календарь большой и с трудом помещается в мой экран
- названия месяцев и дней недели на английском языке
- первый день недели в этом календаре Sunday (SU) — воскресенье. Хотя для нас привычно, что первый день недели — это понедельник
- кредит выдается с 18 лет. Но в календаре можно выбрать дату раньше 18 лет. В итоге сервис выдает ошибку
Ощущение, что взяли готовый плагин календаря и добавили на сайт. При этом не адаптировали его под целевую аудитория и требования банка
Существуют календари удобнее, чем этот. Но ввести числа с клавиатуры в данном случае, тоже хороший вариант.
👎 Нет проверки даты рождения
Если вы родились в 15 веке
или прилетели из будущего на машине времени
то для сервиса это норма. Вопрос у него не возникает.
Не знаю, что sravni.ru делает с данными, которые пользователь оставляет в этой заявке. Если рассылает в банки, чтобы узнать решения по кредитной карте, то зачем банкам подобные несуществующие данные — непонятно.
Место рождения
👍 Можно указать в любом формате
Так как у графы «Место рождения» в паспорте нет стандартной структуры. Где-то указан только город, где-то еще район и область. Поэтому дать возможность вписать данные произвольно и не требовать четкой структуры — хорошее решение
Первое фото — источник https://ru. wikipedia. org/wiki/Паспорт_гражданина_Российской_Федерации
Когда выдан
Есть проверка даты выдачи паспорта, которая видимо зависит от даты рождения. Но как именно проходит проверка, мне до конца не понятно:
- Дата рождения 1409 год, когда выдан 2414 год → ошибки нет
- Дата рождения 1409 год, когда выдан 1514 год → ошибка есть
- Дата рождения 2500, когда выдан 2514 год → ошибки нет. Но тут вроде логично. В 14 лет паспорт же получают
- В прошлом такая же математика не работает. Дата рождения 1500, когда выдан 1514 год → ошибка есть
- Дата рождения 2500, когда выдан 1514 год → ошибка есть
Код подразделения
👎 Слишком длинное поле
В коде подразделения всего 6 цифр. Нет необходимости делать такое длинное поле
Туда просто нечего будет написать. Видимо по структуре формы получилось сделать такое длинное поле.
Кем выдан
👍👍👍 Автоматически подставляется на основе серии паспорта и кода подразделения
Даже три пальца вверх поставлю. «Кем выдан» можно определить и заполнить автоматически. «Серия паспорта состоит из четырех цифр, где первые две — номер региона, выдавшего документ, а следующие — год, когда документ был получен.» (источник https://hi-tech. mail. ru/review/zifry_pasport/). И также «Код подразделения»: цифры имеют свое значение. (можно на https://hi-tech. mail. ru/review/zifry_pasport/ почитать).
В «Кем выдан» нужно вносить много информации, что неудобно. Гораздо удобнее, когда система сама помогает тебе заполнить поля
Адрес регистрации
👎 Непонятен формат ввода:
- достаточно указать только город?
- нужно указывать район?
- нужно указывать область?
Номер квартиры не требуется, что странно. Но может еще область требуется указать. Сервис ничего про это не говорит
👎 Неудобно заполнять поле с адресом регистрации
При вводе информации в поле появляются подсказки в выпадающем списке. Подсказка должна помочь заполнить поле. Но когда выбираешь предложенный вариант, сервис выдает ошибку, что поле заполнено не верно
Ошибка тоже не дает понимания, как исправить ситуацию. После выбора города, вместо «Укажите корректные данные» можно написать «Укажите еще улицу и номер дома». Или если выбрал город и улицу, то можно написать «Укажите еще номер дома».
Тинькофф банк запрашивает адрес регистрации через несколько полей. Заполнять на мой взгляд удобнее:
- По названию поля понятно, что нужно в поле указать
- Есть релевантные выпадающие подсказки для каждого поля
- Фокус автоматически переходит на следующее поле, не нужно дополнительных кликов
Дата регистрации
👎 Нет проверки по дате регистрации
Поле приняло 1520 год
Адрес фактического проживания
👎 Нужно указывать повторно, если живешь по месту прописки
Чекбокс, который активен по умолчанию на мой взгляд проще. Не нужно указывать одно и тоже два раза
Место работы
👍 При заполнении места работы автоматически подтягиваются данные о работодателе
Для РЖД рабочий адрес указан верно. Сфера деятельности и номер телефона тоже
Поле ищет по разным формам собственности, в том числе и по ИП. Но видимо не по всем. В качестве теста ввел ИП перевозчика такси из приложения Uber. Сервис его не нашел. Но для этого поля можно вписать собственный вариант в поле, а не выбирать из выпадающего списка.
👎 Поле слишком короткое
Само поле можно сделать на всю ширину формы, так как в него помещается мало информации, а название места работы может быть длинным
Месяц и год
👎 Не сразу понятно о чем речь
Видимо речь про старт работы на этом месте
Рабочий адрес
👎 Та же проблема, что и с полем «Адрес регистрации»
Владелец телефона
👎 Нелогичный порядок полей
- Владелец телефона?
- Какого телефона?
По логике сначала нужно запросить этот телефон и назвать поле «Дополнительный телефон» например, а после уточнить чей это номер. Сейчас же все наоборот.
Пример реализации подобного функционала на сайте Тинькофф Банка
СНИЛС
👍 Есть проверка на ввод неверного СНИЛС номера
Блок с процентами точности расчета
👎 Непонятное начисление процентов точности расчета
Полностью заполнил первый шаг
Шкала % не изменилась. То есть эти 30% были учтены в шкале точности расчета до того, как я заполнил первый шаг. Но это же не логично. Точность расчета логичнее повышать по мере заполнения полей. Каждое заполненное поле (или не каждое, тут уже на усмотрение) повышает вероятность.
Та же ситуация и со вторым шагом. Поля еще не заполнены, а процент к точности расчета уже добавлен
Странная ситуация получается на последнем, четвертом шаге:
- Точность расчета уже максимальная
- шкала с % заполнена на 100%
Так зачем мне заполнять последний шаг, когда точность расчета уже 100%?
Через консоль браузера показал, что до начала заполнения четвертого шага, уже 100% точность расчета
Более логичное решение с отображение прогресса заполнения предлагает Тинькофф Банк. Шкала процентов увеличивается по мере заполнения полей. 5% дается изначально
Антипример подобной шкалы с процентами можно у Райффайзенбанка посмотреть:
- У шкалы никаких обозначений — просто цветной прямоугольник справа от формы
- Сколько % дается за каждое поле неизвестно
- Процент добавляет после того, как нажал «Далее». Хотя, если поле заполнено верно, тогда нужно сразу увеличивать %, как заполнил поле
Ваши дополнения и предложения пишите в комментариях.
Каторжный труд о разборе, но информация бесполезная для всех. Трата времени. Напишите о чем-то реально полезном
ок, постараюсь в следующий раз.