2 марта 2023

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

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

В 2022 году мы запустили собственный Исследовательский центр, который регулярно публикует экспертные обзоры популярных сайтов и сервисов с фокусом на UX-составляющую. Это наш 16-й материал.
Сегодня рассмотрим UX калькуляторов страхования ипотеки на сайтах российских компаний. Покажем, как калькулятор реализован, какие решения удачные, а где есть точки роста. Материал полезен не только представителям данной отрасли: калькуляторы стоимости встречаются и на сайтах мобильных операторов, банков, логистических компаний.
Разработка удобного калькулятора имеет свои сложности. Он должен работать на ПК и мобильном устройстве. Разные виды полей и контролов не должны отпугивать своим количеством и должны быть понятны пользователям с разным бэкграундом. И наконец, форма должна быть гибкой. В случае со страхованием, например, в зависимости от банка/типа страховки набор полей, которые должен заполнить пользователь, будет меняться.

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

Навигация

Расположение на сайте

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

Например, на сайте компании Росгосстрах нужно выполнить несколько переходов в шапке сайта, чтобы обнаружить страницу ипотечного страхования, на которой находится калькулятор. Другой вариант — нажать кнопку «Страхование ипотеки» рядом со слайдером, которая работает неожиданным для пользователя образом. Она не ведёт на страницу страхования ипотеки, а только переключает баннер с кнопкой «Купить онлайн». Только нажав кнопку (если успеть до момента, пока баннер не переключится на следующий), пользователь попадёт на страницу с калькулятором.
Росгосстрах
В середине страницы тоже есть переход к нужному разделу сайта, но он спрятан внутри таба «Ипотека», при этом карточка внутри всего одна. Это не самый удачный вариант расположения информации об основных услугах компании. Согласно исследованию института Baymard, пользователи просматривают страницу сверху вниз в поисках интересующей информации и склонны не замечать горизонтальные вкладки, особенно если на странице много контента. Причём это происходит даже тогда, когда они заинтересованы и целенаправленно ищут эти разделы. Люди более привычны к тому, что вся важная информация видна на одной странице, и готовы скроллить длинные страницы, если контент на них представлен в удобном для восприятия виде.
Росгосстрах
Для сравнения, в адаптивной версии этого сайта такой проблемы нет. Табы здесь не используются, и все карточки популярных видов страхования видны на главной странице.
Росгосстрах, адаптив
Пользователю будет проще разобраться с навигацией по сайту, если она устроена привычным образом. Например, на сайтах «Абсолют Страхование» и «РЕСО-Гарантия» можно выполнить переход к странице ипотечного страхования тремя стандартными способами: через шапку сайта, где закреплены основные категории, кликнув на карточки видов страхования на главной странице или через футер сайта. При этом не требуется много переходов, калькулятор доступен в 1–2 клика.
Шапка сайта, Абсолют Страхование
Карточки на главной, Абсолют Страхование
На сайте «РЕСО-Гарантия» ещё есть возможность перейти в крупную категорию страховых продуктов «Имущество» или сразу выбрать более мелкую подкатегорию «Ипотека».
РЕСО-Гарантия
Футер, РЕСО-Гарантия
Правда в адаптивной версии сайта «РЕСО-Гарантия» на главной странице отсутствуют карточки основных видов страхования. Переход к странице ипотечного страхования возможен только через меню, поэтому поиск нужной категории может быть затруднителен.
РЕСО-Гарантия, адаптив

Оформление кнопок

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

Этапы заполнения

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

Контрастность

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

Юзабилити полей

Город/регион

Учитывая, что список городов и регионов может быть достаточно длинным, очевидным решением для поля выбора города является выпадающий список с возможностью поиска. Рассмотрим отдельно работу поиска и выбор из списка.
✦ Поиск города/региона
Распространённый паттерн при вводе поискового запроса — показать в выпадающем списке наиболее подходящие варианты. Но иногда они работают нестандартным образом. Например, на сайте ВСК при вводе запроса наиболее подходящий и, вероятно, самый популярный вариант (Москва) попадает в середину списка предлагаемых вариантов.
ВСК
Чтобы облегчить процесс поиска, лучше использовать подход команды «Альфа Страхование». В их варианте предлагаемые результаты отсортированы по величине города, а также выделены совпадающие с поисковым запросом символы. В таком списке ориентироваться проще.
Альфа Страхование
✦ Выбор города/региона из списка
При заполнении формы пользователи обычно стараются сэкономить время и фокусируют внимание только на пустых полях. Поэтому жители других городов могут случайно пропустить предзаполненное поле в форме «Зетта Страхование» и получить некорректный расчёт. Там по умолчанию выбран город Москва. Хоть это, вероятно, и самый популярный вариант, но заранее вписывать данные за пользователя не стоит.
Зетта Страхование
По умолчанию в полях лучше разместить плейсхолдер (подсказка внутри пустого поля). Он даст пользователю понять, что именно нужно ввести. Самые популярные города можно закреплять над полем. Хороший пример мы нашли на сайте компании «Ингосстрах».
Ингосстрах
Другой вариант расположения наиболее популярных вариантов — закрепить их сверху выпадающего списка, а остальные города расположить по алфавиту. Такой пример обнаружился на сайте «Совкомбанк Страхование».
Совкомбанк Страхование
Ещё один важный момент для адаптивных версий. Когда поле предполагает ввод данных, на экран выводится клавиатура, которая занимает значительную часть экрана. Об этом нужно помнить при разработке. К примеру, в адаптивной версии сайта ВСК выпадающий список перекрывается клавиатурой. Пользователь не видит окончания списка.
ВСК, адаптив
Лучше скорректировать высоту выпадающего списка. Когда пользователь раскрывает список, поле должно прокрутиться вверх экрана, чтобы выпадающий список был виден полностью. Например, как это выглядит на сайте «Альфа Страхование».
Альфа Страхование, адаптив

Банк

✦ Банк недоступен для выбора
В 2023 году оформление ипотечного страхования онлайн доступно для клиентов не каждого банка. Мы решили рассмотреть сценарий, при котором калькулятором хочет воспользоваться клиент банка, который недоступен для выбора. Рассмотрим, как компании доносят эту информацию.

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

Дата рождения

✦ Формат поля
Мы уже упоминали, что не стоит по умолчанию заполнять поля какими-либо данными. Ещё больше пользователя может запутать поле, которое по умолчанию оформлено как верно заполненное.
Например, поля в калькуляторе «РЕСО-Гарантия» предзаполнены по умолчанию и обведены зелёным цветом, внутри поля расположена зелёная галка. Пользователи, привыкшие, что так выглядят поля, которые заполнены и проверены, могут не понять, что поле всё ещё можно редактировать.

Кроме того, в форме «РЕСО-Гарантия» используется нестандартный формат ввода данных. Пользователя просят ввести не дату рождения, а возраст. Это может провоцировать ошибки, если для расчёта необходимо ввести точный возраст на определённую дату (например, дату начала действия полиса или дату заключения договора).
РЕСО-Гарантия
Лишней путаницы удастся избежать, если пользователь будет вводить дату своего рождения. Она однозначна, её не нужно вспоминать и высчитывать, в отличие от возраста. Хороший пример нашли в форме «Абсолют Страхование». В ней плейсхолдер указывает формат ввода, можно ввести дату в поле или выбрать в календаре.
Текст подписи
Хорошо, когда в процессе ввода даты интерфейс помогает пользователю. В форме «Зетта Страхование» интерфейс скорее мешает: календарь перекрывает поле ввода, а точки — разделители между датой, месяцем и годом отсутствуют, из-за этого при вводе дата выглядит как набор цифр «09091990».
Зетта Страхование
В адаптивной версии плейсхолдер «Выберите дату» сообщает, что дату нужно выбрать. В поле даже есть иконка календаря, в которой стоит текущее число. Это интересный элемент оформления, но он никак не помогает пользователю — на самом деле ввод даты доступен только вручную.
Зетта Страхование, адаптив
Намного проще взаимодействовать с полем, когда плейсхолдер показывает формат ввода даты, разделители подставляются во время ввода даты, а календарь раскрывается под полем. Например, как в форме ВСК.
ВСК
При разработке адаптивной версии также стоит обратить внимание, совпадает ли формат клавиатуры, которая выводится на мобильном устройстве, с форматом данных. Например, в форме «Альфа Страхование» для ввода даты раскрывается алфавитная клавиатура, пользователю придется её переключать
Альфа Страхование, адаптив
Правильнее было бы по клику на поле сразу выводить цифровую клавиатуру, как в форме «Росгосстрах».
Росгосстрах, адаптив
✦ Диапазон дат
Для оформления страхового полиса возраст клиента должен попадать в определённый диапазон. Мы решили проверить, как отреагируют калькуляторы на ввод даты рождения, которая не входит в допустимый диапазон. Обнаружилось сразу несколько моментов, которые стоит доработать.

В форме ВСК 2006 год рождения система сама исправляет на 2004 в процессе ввода даты. Пользователь может даже не заметить этого, так как сообщение об ошибке не появляется.
ВСК
В форме «Абсолют Страхование» диапазон выбора дат неограничен. Можно выбрать любой год, даже до нашей эры, и ошибка не появится.
Абсолют Страхование
В форме «Альфа Страхование» при вводе некорректной даты появляется ошибка «Некорректная дата», но такой текст не поясняет, почему дата некорректна.
Альфа Страхование, адаптив
Хорошим решением было бы проводить проверку сразу после заполнения поля, выводя текст ошибки, который даёт понимание о доступном возрасте, как в форме «Росгосстрах».
Росгосстрах
Другой вариант — ограничить диапазон дат, доступных для выбора, как в форме ВСК.
ВСК
Но эвристика юзабилити «Предотвращение ошибок» гласит, что помимо сообщений об ошибках хороший дизайн должен предотвращать ошибки до того, как пользователь совершил неверное действие. Поэтому лучше добавить к полю пояснение о допустимом возрасте страхователя. Так ему будет понятно, почему некоторые даты недоступны для выбора. Среди участников исследования мы не нашли подходящего примера, поэтому доработали поле в форме ВСК.
Как можно улучшить

Пол

✦ Формат поля
К оформлению поля, которое предполагает выбор одного из двух вариантов (как выбор пола), компании тоже подошли по-разному.

Иногда два варианта спрятаны в выпадающем списке — например, в форме «РЕСО-Гарантия». Это не лучший вариант, так как требует совершения лишних кликов.
РЕСО-Гарантия
Если для выбора предоставляется меньше пяти опций, то лучше не прятать их в выпадающий список, а показать на экране сразу, используя переключатели (пример «Россгострах») или радиокнопки.
Россгострах
Уралсиб
✦ Вариант по умолчанию
Но снова обратим внимание, что пользователь может пропустить заполнение поля и получить неактуальный расчёт, если по умолчанию выбран один из вариантов. Такой недочёт заметили в форме ВСК.
ВСК
В качестве хорошего примера, можно привести переключатель «Росгосстрах» — здесь оба варианта видны, но по умолчанию ничего не выбрано.
Росгосстрах

Объект страхования

Ипотечное страхование предполагает несколько типов полисов: страхование жизни, страхование имущества, страхование титула. Они могут оформляться как вместе, так и по отдельности, поэтому в калькуляторе должен быть предусмотрен выбор типа полиса. Сравним подходы, которые используют компании.
✦ Выбор типа полиса
Нестандартный вариант оформления нашли на сайте компании «Росгосстрах». Выбор вида страхования там выглядит как переключатель, но на самом деле это две разные формы, которые расположены в табах. При заполнении данных в одной вкладке они автоматически обновляются в другой.
Росгосстрах, десктоп
Особенно проблема заметна в адаптивной версии. Здесь выбор вида страхования «Жизнь и здоровье»/«Имущество» и пола «Мужской»/«Женский» выглядят одинаково, хотя работают по-разному. Понять принцип работы элементов в этой форме может быть затруднительно. Пользователь может не заметить, что расчёт производится по двум видам страхования одновременно. Как выбрать какой-то один тип полиса — неизвестно.
Текст подписи
В начале исследования мы упоминали, что пользователи склонны не замечать горизонтальные табы, поэтому рекомендуем отказаться от их использования в пользу более простого варианта — на одной странице. Так, например, сделали в «Альфа Страхование». Выбор типа полиса оформлен в виде чекбоксов — можно выбрать один или оба варианта. При этом набор полей изменяется в зависимости от типа полиса.
Альфа Страхование
Другой пример оформления элементов непривычным для пользователя образом мы нашли на сайте «Абсолют Страхование». Здесь взаимосвязь и принцип работы двух пар радиокнопок может ввести пользователя в замешательство, потому что под заголовком «Объект страхования» смешаны две сущности: выбор объекта страхования и выбор типа полиса. Также неясно, как рассчитать стоимость страхования имущества и жизни вместе.
Абсолют Страхование
В этом примере нарушена эвристика юзабилити «Согласованность и стандарты». Она означает, что пользовательский опыт, полученный при использовании других сайтов и систем, где пользователь проводит большую часть времени, формирует их ожидания от новой системы.
Соответственно, есть большая вероятность, что пользователь ранее взаимодействовал с радиокнопками и ожидает, что они работают стандартным образом, а именно как переключатель между несколькими вариантами, при этом одновременно может быть выбран только один вариант из списка.

Мы попробовали исправить оформление этих элементов. Во-первых, разделили блоки подзаголовками, чтобы обозначить, что выбор объекта страхования и типа полиса осуществляется независимо друг от друга. Во-вторых, для выбора объекта страхования заменили радиокнопки на чекбоксы, чтобы предоставить возможность расчёта страхования имущества и жизни одновременно.
Абсолют Страхование — как можно исправить

Сумма

✦ Тип поля
Среди компаний, чьи калькуляторы мы рассматривали, выявили два подхода к реализации ввода суммы: слайдер в сочетании с полем ввода и простое поле ввода. Оригинальный вариант расположения слайдера внутри поля ввода обнаружился на сайте «Зетта Страхование». Такой паттерн почти не распространён, а значит, для пользователей назначение слайдера может быть непонятно.
Текст подписи
Кроме того, слайдер зачастую не позволяет указать точное значение. Это хорошо видно на примере «Абсолют Страхование»: здесь шаг слайдера составляет 20–40 тысяч, а отклик системы на перемещение слайдера достаточно долгий.
Абсолют Страхование
Каждый новый элемент в интерфейсе — это ещё одна вещь, которую пользователи должны просканировать, понять, когда хотят что-то сделать. А также это ещё одна вещь, которую они могут использовать неправильно. Поэтому подобные новые функции могут замедлять работу пользователей, затруднять использование существующих опций и увеличивать количество ошибок. Об этом гласит UX-слоган Nilsen Norman Group № 2 «Будь проще»

Пользователю было бы проще взаимодействовать с полем, которое оформлено стандартно и не содержит лишних элементов, на освоение которых нужно тратить время. Такой подход выбрали в «Альфа Страхование». На наш взгляд, он более оптимальный как для пользователя, так и для разработки.
Альфа Страхование
✦ Название поля и плейсхолдер
На примере поля ввода суммы хотели бы показать, почему стоит обращать внимание на текст, который находится в названии поля и плейсхолдере.
Например, в калькуляторе «РЕСО-Гарантия» по названию поля сложно понять, какую необходимо ввести сумму: изначальную сумму кредита или остатка долга (остаток суммы, которую необходимо погасить, чтобы закрыть кредит).
РЕСО-Гарантия
Лучше, когда название поля однозначно, как в примере «Росгосстрах». Кроме того, здесь есть подсказка о том, как узнать остаток долга, — плейсхолдер показывает допустимый диапазон значений. Шансы ошибиться с суммой и получить неверный расчёт сведены к минимуму.
Росгосстрах
✦ Обработка ошибок
Если пользователь вводит сумму, которая не попадает в допустимый диапазон, то система должна об этом сообщить. Но не у всех рассмотренных компаний получилось это реализовать. Например, в форме «Зетта Страхование» ошибка не появляется, а в поле подставляется минимальное или максимальное значение. При этом слайдер фиксируется на минимальном значении. Такое поведение формы может раздражать пользователя.
Зетта Страхование
Сделать процесс ввода суммы более понятным можно, если сообщение об ошибке будет появляться сразу после ввода некорректного значения, а текст сообщения будет подсказывать доступный диапазон.
Альфа Страхование
Наши аналитики помогут:
Запустить новый продукт. Соберём требования, проведём необходимые исследования и подготовим ТЗ для разработки
Улучшить существующий. Выявим проблемы и предложим оптимальные варианты для их решения
Нужно исследование или юзабилити-аудит?
Оставить заявку

Выводы

ВСК

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

Росгосстрах

Форма объёмная, но большинство полей оформлены стандартно. Названия полей и подсказок информативны, осуществляется проверка полей и есть сообщения об ошибках, подсказывающие, как их исправить.
— Для упрощения навигации стоит избегать большого количества категорий на сайте и использовать стандартные паттерны.
— Выбор вида страхования «Жизнь и здоровье»/«Имущество» и пола «Мужской»/«Женский» выглядят одинаково, хотя работают по-разному.
— Рекомендуем отказаться от нестандартной механики, когда заполнение данных происходит в двух формах одновременно в пользу объединения форм.
— Если поработать с контрастностью некоторых элементов, то и адаптив, и версия для ПК будут доступны большему кругу пользователей.

РЕСО-Гарантия

На сайте используется простая навигация, кнопки и ссылки оформлены в соответствии с действиями, которые они выполняют, форма для заполнения не содержит много полей. Но есть что улучшить, чтобы предотвратить ошибки со стороны пользователя.
— Предзаполненные поля лучше заменить на информативные плейсхолдеры, а также проработать минимум три состояния полей: незаполненное, заполненное корректно, заполненное с ошибкой.
— Для некоторых полей изменить формат ввода данных, чтобы исключить неоднозначное толкование. Например, заменить поле «Возраст» на «Дата рождения», а «Сумма кредита» на «Остаток долга».
— Поле «Пол» можно улучшить, показав варианты в виде переключателя или радиокнопки.

Альфа Страхование

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

Зетта Страхование

Найти калькулятор на сайте несложно, так как все виды страхования представлены на главной странице. Но стоит исключить дублирования кнопок с одинаковыми функциями.
— Оценить объем данных, необходимых для расчета, будет проще, если расположить все поля формы внутри первого этапа оформления полиса без использования скрытых шагов, а также расположить поля друг под другом.
— Как и другим компаниям, обратить внимание на контрастность элементов по отношению к фону в адаптивной версии сайта.
— Не заполнять и не исправлять данные за пользователя, продумать текст плейсхолдеров и автоматическую подстановку символов-разделителей при вводе данных.
— Отказаться от нестандартных элементов (слайдер внутри поля).

Абсолют Страхование

До определённого этапа навигация по сайту реализована стандартным образом, через шапку, карточки услуг, футер сайта, но поиск калькулятора затрудняется несоответствием текста кнопки, которая ведёт на страницу калькулятора, тому действию, которое она осуществляет.
Чтобы система откликалась быстрее на действия пользователя и помогала пользователю избежать ошибок, стоит:
— ограничить доступный для ввода диапазон данных (даты/суммы);
— реализовать проверку заполнения полей сразу после заполнения;
— сделать поведение элементов более предсказуемым: разделить ради-кнопки для выбора объекта страхования и выбор типа полиса, заменить поля, которые оформлены как слайдер рядом с полем ввода, на простое поле ввода.
Наш сайт
Шоурил 2022
Телеграм-канал
everest.cx
Смотреть
@everest_ux
Исследовательский центр работает на базе UX-студии Everest
Исследовательский центр работает
на базе UX-студии Everest
Мы проектируем интерфейсы и логику для крупных сервисов, личных кабинетов, автоматизированных рабочих мест сотрудников