Ползунок диапазона в UI: границы, точный ввод и доступность

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

Представим сайт проката оборудования с ценами от 20 до 200 долларов в день. Покупатель ищет варианты от 40 до 120 долларов. За этой небольшой настройкой стоят два значения, связь между ними и правило обновления результатов. Все три решения можно проработать в редакторе UI-дизайна Pixso до передачи компонента в разработку.

Используйте ползунок для подбора, а не для любого числового ввода

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

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

Для одного ограничения, например максимальной цены за день, достаточно одного бегунка. Два нужны, только когда важны обе границы. Если большинство людей ищет оборудование «не дороже 120 долларов», лишняя нижняя граница добавляет действие и может случайно исключить более дешевые предложения.

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

Задайте границы и точность до оформления шкалы

В нашем примере шкала начинается с 20 и заканчивается на 200 долларах в день. Единицу измерения нужно показать в подписи или рядом со значением, чтобы цену не приняли за стоимость недели проката или возвратный залог. Выбранный интервал 40–120 долларов и весь допустимый диапазон 20–200 долларов — разные сведения.

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

Во время одной настройки сохраняйте границы шкалы. Если после перемещения верхнего бегунка на 120 долларов верхняя граница тоже станет равна 120, та же точка на экране начнет означать другое значение. Человеку, решившему расширить поиск, будет непонятно, как вернуться к 200 долларам.

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

Используйте линейную шкалу, если для другой нет конкретной причины. На линейном диапазоне 20–200 долларов равным расстояниям соответствует одинаковое изменение цены. Нелинейная шкала может облегчить работу с большим разбросом значений, но равномерно размещенные подписи не должны создавать ложное впечатление одинаковых приращений.

Закрепите за каждым бегунком одну роль

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

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

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

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

Сделайте ввод числа надежной альтернативой

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

Допустим, покупатель меняет минимум с 40 на 140 долларов, а максимум пока остается равным 120. Сохраните введенное число и покажите сообщение «Минимальная цена не должна превышать 120 долларов». Не меняйте значения местами без предупреждения: возможно, человек еще не закончил редактировать оба поля. Шкала может сохранять последнюю допустимую пару до исправления ввода; сообщение должно объяснять, что новый диапазон пока не применен.

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

Исправление должно затрагивать только проблемное место. После изменения максимума на 160 пара 140–160 становится допустимой, и ошибка исчезает. Не нужно сбрасывать остальные фильтры или заставлять покупателя начинать поиск заново.

Определите, когда диапазон влияет на результаты

На сайте проката используем отдельную кнопку «Применить». Пока панель открыта, интервал 40–120 долларов остается черновым выбором. Список под ней отражает предыдущий примененный диапазон до нажатия кнопки. «Отмена» возвращает примененные значения, а не сохраняет незавершенное изменение.

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

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

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

Продумайте клавиатуру, касание и узкие экраны

Рекомендации W3C для ползунка описывают изменение значения стрелками и переход к допустимым границам клавишами Home и End. Там же отмечена необходимость проверки на реальных устройствах с сенсорными вспомогательными технологиями. Наличие перетаскиваемого кружка еще не означает доступную реализацию.

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

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

Соберите фильтр проката в Pixso

Создайте фрейм с результатами поиска и открытой панелью фильтров. Соберите ценовой фильтр из шкалы, выбранного отрезка, двух бегунков и двух подписанных полей. Для состояний полей используйте повторно применяемые компоненты, а для размещения подписи, шкалы и сообщения — Auto Layout.

Поставьте рядом три версии: допустимый черновой диапазон 40–120 долларов, ошибочную пару 140–120 и исправленный интервал 140–160. На отдельном фрейме с примененными результатами повторите тот же интервал в сводке фильтров. Конкретные числа выявляют несогласованность, которую скрывают условные подписи «Мин.» и «Макс.».

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

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