Экспресс UX-аудит формы потребительского кредита
29.10.2018
Проблема
Для перехода к заявке нужно нажать на кнопку «Оставить заявку». Цепочка действий: пользователь видит кнопку, принимает решение, переходит на страницу заявки. Потенциал к увеличению конверсии имеют решения, при которых пользователю не надо совершать отдельное действие для начала заполнения заявки
Решение
Разместить первый шаг анкеты непосредственно в теле продуктовых страниц. Такое решение позволит плавно и естественно подвести пользователя к анкете без необходимости совершать отдельное действие. После изучения параметров и преимуществ продукта пользователь сразу переходит к заполнению анкеты. Первый шаг заявки в теле страницы — распространенное на российском рынке решение. Удачно это реализовано на сайте Тинькофф Банк
Пример проблемы
Пример решения (Тинькофф Банк)
Проблема
На странице заявки присутствуют элементы навигации (хедер и футер), которые не относятся напрямую к процессу оформления заявки. Это повышает вероятность ухода с заявки. Пользователь может случайно нажать на ссылку или кнопку, либо специально — для уточнения какой-либо информации. Это может отрицательно сказаться на итоговой конверсии.
Футер занимает много экранного пространства и визуально выделяется на фоне других элементов страницы. Клиенты вынуждены пролистывать страницу до конца, чтобы убедиться, что заполнили все необходимые поля
Решение
Убрать из заявки элементы, которые не релевантны процессу заполнения анкеты. В качестве примера можно привести заявку Почта Банк. Отсутствует стандартная верхняя навигация, которая присутствует на других страницах сайта.
Из навигации присутствует только навигация по шагам формы. Футер же максимально сокращён
Пример проблемы
Пример решения (Почта Банк)
Проблема
Поля формы сильно растянуты. Из-за избыточной ширины большинства полей, становится сложно ориентироваться на странице. Из-за этого на определённых разрешениях плавающие элементы (чат) при скролле перекрывают поля и мешают заполнению
Решение
Сократить область формы по ширине, что даст возможность более рационально использовать пространство страницы. Благодаря этому, в десктопной версии появится возможность добавить дополнительные элементы. Например, боковую панель навигации по шагам формы. Узкая форма в комбинации с боковой панелью шагов реализована на сайте ВТБ. Также более узкую форму будет легче встраивать в лендинги. Другие крупные банки также используют узкие формы
Пример проблемы
Пример решения (ВТБ)
Проблема
Одномоментно в окне браузера пользователь может видеть определённое количество элементов заявки. Каждый шаг может содержать различное количество обязательных к заполнению полей. Чтобы составить представление об объеме работы по заполнению полей нужно: в рамках шага, скроллить верх/вниз, а в рамках всей заявки, закончить заполнения одного шага, чтобы перейти на следующий. Непонятно сколько ещё осталось заполнять полей. Данная механика вызывает дискомфорт при взаимодействии с формой
Решение
Чтобы увеличить вовлечённость пользователя в процесс заполнения заявки, можно интегрировать в панель навигации по шагам процентный индикатор заполнения. Данный механизм реализован на сайте Тинькофф Банк и Альфа-Банк на формах заявки на кредитную карту. Данное решение добавляет элемент геймификации в скучный процесс передачи банку личных данных. Также возникает иллюзия общения, когда форма вступает в диалог с пользователем
Пример проблемы
Пример решения (ВТБ)
Пример решения (ВТБ)
Проблема
Заполнив поле пользователь не получает какой-либо мотивирующей обратной связи от формы. Обратная связь в виде подсказок и красной подсветки появляется только при ошибках
Решение
При правильном заполнении можно добавлять небольшие графические индикаторы (например иконки с галкой), которые будут работать как вознаграждение, повыщать удовлетворение от заполнения и мотвировать двигаться дальше по форме
Пример решения (Тинькофф Банк)
Пример решения (Альфа-Банк)
Проблема
Иногда пользователи забывают переключать раскладку с английской на русскую и при первом контакте с формой сразу получают ошибку валидации поля с именем, которое расположено в самом начале формы. Это формирует негативный опыт взаимодействия с сервисом
Решение
Можно задать более интеллектуальное поведение системы и страховать пользователя от мелких оплошностей. Если в поле не разрешено вводить латинские символы, то можно автоматически переводить латиницу в кирилицу. Данный функционал реализован на сайте Альфа-Банк. В примере слева вместо «Антон» было введено «Fynjy» при активированной английской раскладке. Такое поведение может снижать число исправлений, увеличивая скорость заполнения формы
Пример решения (Альфа-Банк)
Проблема
Пользователь тратит дополнительное время, думая следует ли ему давать согласие с условиями подачи онлайн-заявки. Описание к чекбоксу заставляет пользователя более внимательно принимать решение и может заставит его перейти по ссылке и прервать заполнение заявки или отложить продолжение заполнения на другое время
Решение
Объединить действие согласия с условиями подачи заявки и перехода на следующий шаг, но оставить возможность ознакомления с условиями по отдельной ссылке. Вместо двух действий пользователь совершает одно. Такое улучшение экономит время пользователя и увеличивает конверсию. Данный функционал реализован на сайте Альфа-банк
Пример решения (Альфа-Банк)
Пример решения (Альфа-Банк)
Проблема
В рамках одного шага поля следуют друг за другом без разделения и группировки. Такая сплошная компоновка полей зрительно утомляет и снижает скорость заполнения
Решение
Объединить поля по смыслу и добавить заголовки к группам полей. Это позволит легче ориентироваться в форме. При такой компоновке появится логическая структура и визуальная иерархия у блоков информации
Пример проблемы
Пример решения (ВТБ)
Проблема
Поле «Дата начала» работы вынуждает пользователя вводить дату в полном формате — ДД.ММ.ГГ. Пользователь может не помнить дату с точностью до дня. Для уточнения ему нужно будет прервать заполнение формы, чтобы уточненить информацию
Решение
Переформулировать или добавить к компоненту кнопку вызывающую подсказку
Пример проблемы
Пример решения
Проблема
В описаниях и заголовках формы встречаются термины, которые вызывают затруднения с пониманием у пользователя. Например термин «иждивенец»
Решение
Переформулировать или добавить к компоненту кнопку вызывающую подсказку
Пример проблемы
Пример решения
Проблема
Не используются возможности экрана успеха после заполнения: именно на этом шаге имеет смысл предложить пользователю дополнительные услуги, например возможность страхования кредита
Решение
Разместить на странице благодарности предложение ознакомиться с релевантными продуктами или акциями. Данное изменение повысить вероятность оформления дополнительных услуг
Пример решения
Проблема
Большинство пользователей не смотрят на экран, когда печатают — после ввода номера телефона не замечают изменение состояния кнопки «Выслать код» (становится желтой и активной), вследствие чего переходят к следующему полю ввода данных (email) не совершая действия
Решение
Отправлять смс с кодом автоматически после ввода номера и валидировать поле как правильно заполненное
Пример проблемы
Пример решения
