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

Привет! Меня зовут Лена, я дизайнер сервисного направления Red Collar. В процессе работы над сайтом банка я разрабатывала дизайн ипотечного калькулятора — делюсь кейсом. Советы подойдут для ипотечного или кредитного калькулятора и везде, где используются слайдеры, поля ввода и блок с результатом.

Дизайн слайдера: поле значений, размер контрола, оптимальная ширина

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

Слайдер с полем ввода

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

• поле заполняет слайдер по ширине полностью;

• ввод расположен над контролом, показывая значение непосредственно над выбранной точкой.

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

Удобный контрол не вызывает трудностей

Контрол в слайдере — это элемент управления указателем, с помощью которого пользователь меняет значение в диапазоне. Это тот самый «кружок», который вы передвигаете на экране. ????

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

Чтобы добиться этого, размер контрола должен быть оптимальным для захвата, от 32 пикселей. Необязательно делать большим сам элемент — выделите его при ховере/фокусе или выделите невидимой кликабельной зоной.Для фокусировки внимания пользователя состояние при перемещении лучше заменить на яркое для глаза.

Упрощаем работу — подбираем оптимальную ширину слайдера

Когда мы работаем с большим цифровым диапазоном, слайдеру нужно больше места, чтобы прицеливание не затрудняло работу с калькулятором. Слишком широким его тоже не следует делать. Длинная зона ввода увеличивает время взаимодействия и раздражает пользователей — из‑за большого расстояния взгляд начинает «плавать» по горизонтали. Поэтому растягивайте слайдер разумно.

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

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

Округление помогает воспринимать расчет

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

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

Показываем процент взноса в слайдере

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

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

Кнопки с быстрым выбором

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

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

Визуализация результата и честные отношения с пользователем

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

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

Прозрачные данные

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

Подсказки

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

Возможность добавить досрочный платёж

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

Использование диаграмм

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

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

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

Забота о пользователе в онлайн-заявке

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

Главное, о чем стоит помнить дизайнеру и всей команде: аналитикам, разработчикам, менеджерам ‑ забота о пользователе. Человек будет испытывать стресс при заполнении даже грамотно сверстанной анкеты: он отправляет банку персональные данные, которыми страшно делиться в интернете, еще и документы прикрепить надо. Чтобы смягчить волнение, на каждом этапе объясняйте причину запроса той или иной информации и помогайте советами.

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

Если для банка в приоритете авторизация через Госуслуги, то замотивируйте пользователя использовать ее — подчеркнуть пользу. Расскажите, что это удобнее: не нужно искать паспорт, загружать документы, поскольку вся информация автоматически подтянется с сервиса.

На экране ожидания поделитесь ссылкой на полезную статью, которая поможет скоротать время.

Итоги

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