UX калькуляторов страхования ипотеки на сайтах российских страховых компаний

Привет, это Аня — UX-дизайнер студии Everest. Уже шесть лет мы разрабатываем крупные веб-сервисы и мобильные приложения с фокусом на UX для банков, ритейла, телекома и других отраслей. В 2022 году мы запустили собственный Исследовательский центр, который регулярно публикует экспертные обзоры популярных сайтов и сервисов с фокусом на UX-составляющую.

Это наше 16-е исследование. В нём мы рассмотрим UX калькуляторов страхования ипотеки на сайтах российских компаний. Покажем, как калькулятор реализован, какие решения удачные, а где есть точки роста. Материал полезен не только представителям данной отрасли: калькуляторы стоимости встречаются и на сайтах мобильных операторов, банков, логистических компаний.

Разработка удобного калькулятора имеет свои сложности. Он должен работать на ПК и мобильном устройстве. Разные виды полей и контролов не должны отпугивать своим количеством и должны быть понятны пользователям с разным бэкграундом. И наконец, форма должна быть гибкой. В случае со страхованием, например, в зависимости от банка/типа страховки набор полей, которые должен заполнить пользователь, будет меняться.

Для исследования мы выбрали сайты страховых компаний, входящих в 30 лучших по рейтингу платформы «Финуслуги». Среди них выбрали сайты, где калькулятор страхования ипотеки есть и используются разные подходы для его оформления.

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

Примечание

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

Быстро найти калькулятор на сайте компаний у нас получилось не всегда. Иногда на то, чтобы разобраться в навигации и перейти в нужный раздел, уходит некоторое время.

Например, на сайте компании Росгосстрах нужно выполнить несколько переходов в шапке сайта, чтобы обнаружить страницу ипотечного страхования, на которой находится калькулятор. Другой вариант — нажать кнопку «Страхование ипотеки» рядом со слайдером, которая работает неожиданным для пользователя образом. Она не ведёт на страницу страхования ипотеки, а только переключает баннер с кнопкой «Купить онлайн». Только нажав кнопку (если успеть до момента, пока баннер не переключится на следующий), пользователь попадёт на страницу с калькулятором.

В середине страницы тоже есть переход к нужному разделу сайта, но он спрятан внутри таба «Ипотека», при этом карточка внутри всего одна. Это не самый удачный вариант расположения информации об основных услугах компании. Согласно исследованию института Baymard, пользователи просматривают страницу сверху вниз в поисках интересующей информации и склонны не замечать горизонтальные вкладки, особенно если на странице много контента. Причём это происходит даже тогда, когда они заинтересованы и целенаправленно ищут эти разделы. Люди более привычны к тому, что вся важная информация видна на одной странице, и готовы скроллить длинные страницы, если контент на них представлен в удобном для восприятия виде.

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

Пользователю будет проще разобраться с навигацией по сайту, если она устроена привычным образом. Например, на сайтах «Абсолют Страхование» и «РЕСО-Гарантия» можно выполнить переход к странице ипотечного страхования тремя стандартными способами: через шапку сайта, где закреплены основные категории, кликнув на карточки видов страхования на главной странице или через футер сайта. При этом не требуется много переходов, калькулятор доступен в 1–2 клика.

На сайте «РЕСО-Гарантия» ещё есть возможность перейти в крупную категорию страховых продуктов «Имущество» или сразу выбрать более мелкую подкатегорию «Ипотека».

Правда в адаптивной версии сайта «РЕСО-Гарантия» на главной странице отсутствуют карточки основных видов страхования. Переход к странице ипотечного страхования возможен только через меню, поэтому поиск нужной категории может быть затруднителен.

Стоит отметить, что не только расположение элементов на странице может запутать пользователя, но и текст кнопок. Иногда он не соответствует выполняемому действию. Например, на сайте «Абсолют Страхование» кнопка «Рассчитать онлайн» не ведёт к калькулятору, а открывает форму отправки запроса на расчёт. А вот кнопка «Купить/продлить» ведёт к калькулятору и оформлению полиса. Но узнать об этом можно только опытным путём.

Лучше, когда по тексту кнопки пользователь может однозначно понять, что произойдёт после нажатия. К примеру, на баннере «РЕСО-Гарантия» текст кнопки «Рассчитать» отражает суть действия, которое произойдёт после нажатия, — она действительно ведёт к калькулятору.

Бывает, что в карточке одной услуги содержится сразу несколько кликабельных элементов. Например, нестандартным образом оформлены кнопки на сайте «Зетта Страхование». В зависимости от того, в какую область карточки кликнет пользователь, он попадает на разные страницы сайта. По клику на заголовок происходит переход на страницу ипотечного страхования. А обе кнопки ведут на страницу калькулятора, при этом неважно, какую из них нажимать, — на открывшейся странице будет выбран полис страхования имущества. Из-за этого карточка выглядит перегруженной.

Мы попробовали изменить карточку. Предлагаем отказаться от изображения. Его сложно разглядеть на заднем плане, поэтому оно только затрудняет считывание информации. Карточку и заголовок мы сделали некликабельными, типы полисов страхования вынесли в текст карточки, а действия оформили в виде кнопок. Кнопку, ведущую к расчёту и оформлению полиса, назвали «Рассчитать и оформить полис», а кнопка «Об ипотечном страховании» будет открывать страницу ипотечного страхования. При этом приоритетное действие мы выделили визуально при помощи цвета. Это поможет направить пользователя к покупке полиса по более короткому сценарию.

У большинства компаний формы калькулятора содержат много полей. Вопрос разделения формы на этапы они решили по-разному.

Встречается, что часть формы скрывается от пользователя. Например,«Зетта Страхование» разделили процесс оформления на шаги, но внутри одного этапа «Рассчитать стоимость» «спрятали» ещё два шага: заполнение информации об объекте страхования и информации о заёмщике. Таким образом, оценить количество полей, которые придётся заполнить, пользователь не может. Кроме того, горизонтальное расположение полей затрудняет сканирование информации.

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

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

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

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

Распространённая проблема в оформлении сайтов, которые мы рассматривали, — это низкая контрастность текстов по сравнению с фоном и мелкий и тонкий шрифт в мобильной версии. Они заставляют напрягать глаза и могут вызывать чувство дискомфорта. Доступность интерфейсов «Абсолют Страхование», «Зетта Страхование» и «Росгосстрах» для пользователей с ослабленным зрением иногда сводится к минимуму.

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

✦ Поиск города/региона

Распространённый паттерн при вводе поискового запроса — показать в выпадающем списке наиболее подходящие варианты. Но иногда они работают нестандартным образом. Например, на сайте ВСК при вводе запроса наиболее подходящий и, вероятно, самый популярный вариант (Москва) попадает в середину списка предлагаемых вариантов.

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

✦ Выбор города/региона из списка

При заполнении формы пользователи обычно стараются сэкономить время и фокусируют внимание только на пустых полях. Поэтому жители других городов могут случайно пропустить предзаполненное поле в форме «Зетта Страхование» и получить некорректный расчёт. Там по умолчанию выбран город Москва. Хоть это, вероятно, и самый популярный вариант, но заранее вписывать данные за пользователя не стоит.

По умолчанию в полях лучше разместить плейсхолдер (подсказка внутри пустого поля). Он даст пользователю понять, что именно нужно ввести. Самые популярные города можно закреплять над полем. Хороший пример мы нашли на сайте компании «Ингосстрах».

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

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

Лучше скорректировать высоту выпадающего списка. Когда пользователь раскрывает список, поле должно прокрутиться вверх экрана, чтобы выпадающий список был виден полностью. Например, как это выглядит на сайте «Альфа Страхование».

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

Если вам нужно исследование с упором на UX и юзабилити интерфейса, пишите на почту [email protected]

Исследовательский центр работает на базе студии Everest. Мы проектируем интерфейсы и логику для крупных сервисов, личных кабинетов, автоматизированных рабочих мест сотрудников.

→ Шоурил 2022 с нарезкой работ
→ Телеграм-канал студии
→ Телеграм-канал Исследовательского центра

Предыдущее исследование:
— UX форм поиска на сайтах российских клиник

#ux #исследование #сайты #поиск #uxresearch #юзабилити #пользовательскийопыт #пользователи #uxисследования #страхование_ипотеки #страхование #калькуляторы_страхования