Избавьтесь от диапазонов в UI

Недавно я выбирал mp3-проигрыватель в качестве новогоднего подарка. Набрал в Google “лучшие mp3-проигрыватели 2023” и почитал обзоры. Отметил несколько моделей, подходивших под мой бюджет, и отправился в известный интернет-магазин. Там обнаружил, что ни одна из моделей не продаётся в России. Второй по популярности интернет-магазин предлагал доставку через месяц-полтора. Это меня не устраивало.

Тогда я решил подобрать проигрыватель из имеющегося ассортимента. Пришлось воспользоваться инструментом ограничения цены – совсем дешёвые игрушки меня не интересовали, дорогие hi-end проигрыватели тоже.

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

Проведя несколько часов за изучением предложений, в конце концов купил проигрыватель за 7300₽. Как же так получилось? А вот как: нужный мне товар попадал в диапазон до 5000₽, но закончился на складе. Зато у других продавцов он был, только дороже – эти предложения мне не показывались. Каким чудом я на них вышел – уже не помню, но точно не через инструмент ограничения цены.

Ещё один пример: иногда я смотрю автомобили на auto. ru, подбираю по параметрам, указываю диапазон цен. И вот что самое обидное: если на продажу выставлен автомобиль моей мечты всего на 1% дороже, чем я указал, этого автомобиля мне не покажут!

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

Дело в том, что представление человеком нижней и верхней границ диапазона может даже задействовать разные полушария мозга. Поэтому человеку гораздо проще представить одну величину, а не диапазон. Диапазоны – это про компьютеры. Компьютер не умеет угадывать настроение покупателя, он умеет только сравнивать числа: если X > 3000 и X < 5000, то условие истинно. Значит цена X находится в указанном диапазоне, товар с этой ценой надо показать. Программист именно так и составляет запрос к базе данных: покажи товары с ценой от 3000 до 5000.

Не знаю в чём дело – может быть product manager часто общается с программистами (ведь они составляют большую часть команды) и перенимает их образ мышления – но каким-то образом в требования к продукту попадает «дать возможность указывать диапазон цен». В этот момент случается самое страшное: уже не человек управляет компьютером, а компьютер как бы управляет человеком, диктуя: мне удобно получать данные в таком-то формате, сбегай да принеси на блюдечке.

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

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

Если диапазон цен широкий (например, от 100 до 100000), то синие кружочки разделятся. Но в реальности никто не подбирает товар с таким большим разбросом цен. Как только вы зададите разумный диапазон – два кружочка слипнутся. Тут бы дизайнеру как раз и увидеть всю бессмысленность диапазона, но мешает пресловутая насмотренность – «все так делают» (об этом феномене я готовлю отдельную статью, а пока можете почитать «Нет никаких UX-трендов»).

Итак, вместо двух значений (границ диапазона) я предлагаю указывать одно значение (примерную цену), а уже из него компьютер сам вычислит границы диапазона. По какой формуле? Здесь нам поможет статистика и большие данные – все же любят data-driven design. Если у вас интернет-магазин или сайт продаж автомобилей, вы можете собрать реальную информацию: известна цена покупки, осталось посмотреть какой диапазон цен покупатель указывал в поиске. Обобщите данные по всем покупателям, найдите среднее отклонение границ от итоговой цены, выразите в процентах. Может быть зависимость получится не линейной, а будет меняться с ростом итоговой цены. Программисты разберутся, они умные. Главное – поставить им задачу найти формулу. Если же вы создаёте новый продукт и своих статистических данных у вас ещё нет – купите их где-нибудь. Информация – это товар.

Пара слов о поведении компонента. Посмотрите на график. Горизонталь – это положение ползунка. Вертикаль – цена. Если цены товаров распределены более или менее равномерно, то шкала может быть линейной (голубая линия). Если дешёвых товаров мало, то больше подойдёт логарифмическая шкала (оранжевая линия). Если мало товаров в среднем ценовом диапазоне – пригодится синус (розовая линия). Можно даже автоматически генерировать адаптивные шкалы под каждую категорию, на разных интервалах цен задавая разный наклон графика, в зависимости от количества товаров в этом отрезке. Строить ломаную линию или сглаживать её любым алгоритмом – выбор за вами. Вариантов множество, экспериментируйте.

Помимо того, что пользователю удобней указывать примерную цену вместо диапазона, пользу получит и продавец: так как пользователю неизвестны (и неинтересны) точные границы диапазона, продавец может включать в поисковую выдачу даже те товары, которые не попали в рассчитанный компьютером диапазон (но близко подошли к границам и могут представлять ценность для покупателя). Например, на какой-то дорогой товар сейчас большая скидка, благодаря чему цена лишь немного превышает верхнюю границу диапазона. Или есть товар с очень хорошими отзывами и высоким рейтингом, но его цена немного не дотягивает до нижней границы диапазона. Для таких особых товаров можно сделать исключение (расширить границы). То же самое для продвигаемых товаров (платных объявлений). Также полезно расширять границы если найдено слишком мало товаров. В общем, возможностей много.

Может ли получиться так, что покупатель увидит нерелевантные товары (например, слишком дорогие или слишком дешёвые по отношению к указанной цене)? Да, если механизм подбора настроен неоптимально. Но в любом случае, продавец освобождает себя и покупателя от противоестественного ограничения – жёстко фиксированного диапазона.

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

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

Если хотите посмотреть больше реальных кейсов продуктового дизайна – заходите ко мне на manwe.ru