Перед вами задача спроектировать калькулятор для банковского сервиса. Рассказываем, с чего начать, какие практики упростят работу пользователя и сделают калькулятор честным.
Привет! Меня зовут Лена, я дизайнер сервисного направления Red Collar. В процессе работы над сайтом банка я разрабатывала дизайн ипотечного калькулятора — делюсь кейсом. Советы подойдут для ипотечного или кредитного калькулятора и везде, где используются слайдеры, поля ввода и блок с результатом.
Дизайн слайдера: поле значений, размер контрола, оптимальная ширина
Пользователям нравится слайдер, так как он отсылает к физическому взаимодействию с контролом (похож на пульт управления) и помогает понять предлагаемый диапазон вариантов: показывает изменения результата при смене переменной, подчеркивает взаимосвязь между параметрами.
Слайдер с полем ввода
В случае с кредитным или ипотечным калькулятором, слайдер объединяется с полем ввода, чтобы пользователь мог точечно указать нужное значение. Мы рассматривали расположение поля ввода, когда:
— поле заполняет слайдер по ширине полностью;
— ввод расположен над контролом, показывая значение непосредственно над выбранной точкой.
В нашем случае лучше подошел слайдер, встроенный в поле ввода — инпут. С ним длинная сумма выглядит аккуратнее в широкой строке, и так мы избавляемся от громоздкой группы слайдеров.
Удобный контрол не вызывает трудностей
Контрол в слайдере — это элемент управления указателем, с помощью которого пользователь меняет значение в диапазоне. Это тот самый «кружок», который вы передвигаете на экране.
Интересные статьи
Интересные статьи
