А был ли тут UX: исследуем сайты банков и пытаемся оформить ипотеку

В этой статье дизайнеры и UX-писатели aim digital собрали хорошие и не очень хорошие UX-решения со страниц ипотечных продуктов Юникредит банка, Совкомбанка, ВТБ, Альфа-банка, Росбанка, ПСБ, Газпромбанка и других. В конце материала список частых ошибок и рекомендации от команды по улучшению страниц.

Всем привет! На связи команда aim digital. Мы занимаемся разработкой и развитием цифровых продуктов и сервисов, интеграциями и автоматизацией бизнес-процессов. Одно из ключевых направлений работы — финтех и банковские продукты.

Продуманный UX важен даже для, казалось бы, простой задачи — заказа еды. Это мы выяснили в прошлой статье. Когда речь заходит о мире финансов, вопрос о важности понятных и простых дизайна и текстов отпадает сам собой. Многие люди далеки от финтех-терминологии вроде овердрафта, пролонгации или аккредитива. Чтобы пользователи сайта стали клиентами банка, текст внутри продукта должен быть четким, простым и понятным каждому. И, конечно, никакой текст не поможет, если в продукте не продуман UX-дизайн и не учтены потребности пользователей.

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

Также мы добавили в список Банк ДОМ.РФ, Русский Стандарт, СДМ-банк и Всероссийский банк развития регионов (ВБРР).

Легко ли найти нужный раздел на сайте и подходящую программу среди других предложений.

Легко ли воспринимается текст и дизайн. Есть ли сложные формулировки и терминология, элементы с двойным смыслом — всё, что повышает когнитивную нагрузку и вызывает желание бежать прочь.

Задача в данном случае — оформить заявку. Здесь смотрели, нужно ли заполнять много непонятных форм, или на оформление уйдет пара кликов.

В итоге собрали хорошие решения, которые:

Примеры, как делать не надо, тоже прилагаются.

На сайтах всех банков не составляет труда найти раздел с ипотеками. Как правило ссылка на раздел всегда есть где-то на главной, там, где пользователь ожидает ее найти. И называется тоже чаще всего ожидаемо — «Ипотека».

На сайте Газпромбанка после клика на раздел «Ипотека» появляется выпадающий список с программами.

Дальше начинается интересное: выбор нужной ипотечной программы.

Хорошее решение — сделать разводящую страницу с карточками программ. Обычно на такой странице собирают главные преимущества, на которых нужно сделать акцент: ставку, первый взнос, сумму кредита и количество документов, которое потребуется от клиента. Еще на такой странице можно сделать удобный фильтр, чтобы найти ипотеку по определенным критериям было просто.

Например, на сайте Альфа-банка программы можно найти по удобным фильтрам с названиями «Новостройка», «Вторичка», «Семейная ипотека».

В Совкомбанке можно найти программу по стоимости жилья, сроку кредита и первоначальному взносу.

Не самый лучший пример нашелся у ЮниКредит банка.

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

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

Простые и понятные тексты и говорящие заголовки есть у Тинькофф.

На сайте ВТБ условия тоже читаются легко, но можно упростить текст. Например, в блоке «Обязательно»: убрать или вынести в заголовок повторяющееся слово «наличие» и удалить «либо». Отредактировать условия, избавиться от скобок и отглагольных.

Пример похуже. В описаниях программ ЮниКредит банка нет акцентов на ключевые преимущества — все они просто выделены жирным шрифтом в сплошном тексте.

В некоторых преимуществах нет конкретики. Например, пункт «Лояльные требования к заемщикам и объектам недвижимости» не раскрывает, что это за требования.

Сноски-примечания в конце основного текста повышают когнитивную нагрузку, хороший план делать их в подсказках рядом с текстом.

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

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

Еще один пример лишнего скрытия текста — преимущества ипотеки в Альфа-банке. В этом случае проще переписать преимущества и избавиться от подсказок.

Хороший пример — новый сайт ПСБ. В условиях скрытого текста меньше, а сам текст простой и понятный.

Важно использовать единую терминологию в текстах. Это помогает пользователям не путаться в понятиях. В МКБ ипотечная программа в одном блоке странице называется и ипотекой, и программой. А еще не разъяснено понятие акции, из-за этого может сложиться впечатление, что ипотеку назвали еще и так. Не до конца понятно о чем речь, почему ипотека — это акция.

UX-текст не может быть оторван от дизайна. Иначе пользователи будут разгадывать ребусы вместо быстрого просмотра условий. Например, в Росбанке пользователи могут снизить ставку, если выполнят определенные условия. Но иконка рядом с пунктом будто показывает рост ставки, а никаких уточнений нет. В итоге, без контекста непонятно, увеличится ставка на 0,25% или снизится.

Путать пользователей могут не только длинные тексты. Короткий формат тоже может ввести в ступор. Например, как на странице СДМ-банка.

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

Чтобы помочь пользователям разобраться с условиями можно сделать блок с часто задаваемыми вопросами. Это удобно, если у пользователей возникают однотипные вопросы, нужно снизить нагрузку со службы поддержки или подсветить важную информацию. Например, так делают ВТБ и Газпромбанк. Ответы на вопросы четкие, с полезными ссылками и объяснением непонятного.

Дом. РФ разделил ответы по категориям. В некоторых из них можно упростить текст и исправить табуляцию. Например, на скрине ниже последний пункт скорее дополнение, которое можно вынести из списка.

Правильное расположение элементов — шанс управлять вниманием пользователей.

На сайте Банк ДОМ.РФ есть красивый блок популярных продуктов. Но сетку можно было бы упростить и сделать более предсказуемой.

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

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

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

Какие-то калькуляторы выглядят просто и содержат немного условий.

А в каких-то немного разбегаются глаза от обилия элементов и подписей.

В некоторых есть проблемы с логикой. Например, в калькуляторе ВБРР кнопка «Рассчитать» живет отдельно от ползунков с настройками. Привычнее, когда она находится внизу. А еще калькулятор позволяет выбрать сумму кредита до 40 млн рублей, но по факту она не может быть больше 6 млн. Никаких подсказок нет. Такие нестыковки могут испортить впечатление от взаимодействия с интерфейсом.

МКБ предлагает на выбор, как пользователям будет удобно оформлять ипотеку: отправить заявку, позвонить или обратиться в отделение.

В Газпромбанке можно оставить заявку на сайте или перейти на Госуслуги. Пользователям объясняют, почему там будет удобнее.

А прогресс-бар подсказывает, сколько шагов потребуется для заполнения заявки.

В ВТБ можно оставить заявку, чтобы перезвонил сотрудник банка. Непонятно, зачем указывать дату рождения — хорошо было бы объяснить такие моменты пользователям.

На сайте Открытия как раз объясняют, зачем оставлять емейл и номер телефона.

Домлик от Сбера объясняет, зачем пользователям заходить через Сбер ID или Госуслуги — потому что данные подтянутся автоматически и их не придется заполнять вручную.

Лучшее, что может сделать банк на этом этапе — не мешать:

— не добавлять много полей и объяснять, зачем заполнять обязательные.

— автоматически подтягивать данные о пользователе, если это возможно.

— в принципе дать возможность оставить заявку. Нам встретился только один банк, который не оставил формы заявки вообще. Зато там точно не заморачивались с UX-текстами 🙂

У банков, в которых быстрее всего получилось разобраться в условиях и дойти до формы с заявкой, похожи подходы к UX-дизайну и текстам:

Если вы хотите сделать UX-аудит сайта, улучшить тексты и дизайн интерфейсов, проанализировать и упростить пути пользователей или создать понятный гайд для сотрудников, то мы готовы вам помочь.

Связаться можно по почте hello@in-aim.ru или в телеграм.

Наш сайт

Телеграм-канал