Содержание
Поговорим о двойных ценовых слайдерах, ценовых диапазонных контролах, диапазонных регуляторах цены, диапазонных шкалах, price range sliders.
Три оговорки:
а) Общепринятого термина для них нет. Здесь и далее я использую термины «диапазонная шкала» («ДШ») вместо «слайдеров» и «регуляторы» вместо «ползунков»;
б) Меня укачивает от теоретизации, поэтому рассказывать буду на действующих примерах; я рассматриваю только примеры магазинов, которые по неким причинам отказались от фильтрации товаров с помощью списка ценовых категорий;
в) Я понимаю, что от доброго дизайнера зависит ⅓ результата. От злого — ⅔. Целиком результат практически никогда не зависит от дизайнера. Это командная работа, поэтому я оцениваю конечный продукт в целом, а не работу отдельных людей. И, кстати, призываю к этому всех коллег.
Примеры
Начнем с варианта Озона, он мне ближе остальных (привет, Артур!):
Я вижу тут такие проблемы:
1.1. Передвигая регуляторы, я постоянно получаю рандомный для меня результат. У шкалы, конечно, есть свой шаг, но он нигде не описан. Будь я математиком, я смог бы вычислить его за несколько пробных движений, но это не то, чем я хочу заниматься, — я хочу купить книжку за 2 500 — 3 500 р. Как бы я ни таскал регуляторы, достичь более-менее круглой суммы, с которой я мог бы соотнести свой бюджет, невозможно. Даже если я мыслю неокругленным бюджетом (например, у меня есть 2 623 рублей на книгу и ни рублем меньше или больше), я не могу найти с помощью регуляторов такой суммы: система все время навязывает мне удобный только для нее самой бюджет.
1.2. При первом обращении к шкале нигде нет кнопки применения — она появляется только после первого сдвига регуляторов и самостоятельно пропадает, если выкрутить регуляторы на минимум и максимум одновременно. Это значит, что по каким-то загадочным причинам я могу посмотреть товары в диапазоне, например, 6 — 791 875 рублей, но все товары в полном ценовом диапазоне я посмотреть не могу. При этом, в полях сверху значения написаны обычным, неприглушенным стилем, а это сигнализирует нам о том, что условия для применения уже проставлены. Тем не менее, применить эти условия невозможно. Я сам большой противник избыточных подтверждений, но не в таких случаях.
1.3. Предположим, в процессе работы с регуляторами я случайно увидел нужное мне число, возьмем 392 969. Тут я пробую попасть в него специально, но это занимает кучу времени — когда я отпускаю регулятор, он сползает на соседние значения, хотя с мелкой моторикой в силу профессии у меня все в порядке, а трекпад Эйра тяжело обвинить в нечувствительности. В диапазоне просто слишком много шагов:
1.4. Регуляторы в этой шкале действуют по принципу «паровоза». Таким образом, мой выбор всегда почему-то ограничен каким-то фиксированным диапазоном, но нигде не объясняется, почему именно таким:
1.5. Озон не предлагает мне никаких рисок на шкале, и при ориентировании по ней я должен полагаться исключительно на собственный глазомер. В условиях неокругленных чисел это затрудняет весь процесс.
1.6. Одна из самых больших проблем ДШ — чрезмерный либерализм. Сам принцип работы такой шкалы изначально предполагает равнозначность цен для пользователя, а это прямое игнорирование наиболее важного принципа электроторговых интерфейсов — разделения покупательских потоков. Возьмем пример детской/семейной литературы, мне он довольно хорошо знаком. Любой книготорговец знает, что основная масса заказов в детской литературе охватывает товары стоимостью до 700 — 1 000 рублей. Смотрим шкалу и понимаем, что гибкая настройка до 1 000 рублей невозможна в ней физически (рис. «а»). В Озоне при этом работает принцип паровоза (см. пункт 1.4.), т. е. минимальный доступный в данном случае диапазон составляет 13 — 23 654 рублей (рис. «б»). Мягко говоря, для основного потока покупателей эта шкала абсолютно бесполезна. К этому вопросу мы еще вернемся чуть позже в примере Сотмаркета.
Устав от непредсказуемости регуляторов, попытаемся воспользоваться другими возможностями. Теперь мне надо догадаться, что в цифры над диапазоном можно ткнуть. О такой возможности мне говорит только смена курсора на каретку, потому что редактируемые поля лишены своих половых признаков: грани, с которых внутрь поля должна падать тень, ничем не отличаются от граней всего блока фильтра, поля не разделены и в них 2 разных стиля текста. Это смелое решение, оставим его на совести разработчиков, и порадуемся, что сменился курсор — для какой-то части пользователей этого будет достаточно.
1.7. Попробуем напечатать что-нибудь в этом поле. Куда бы в этом поле я ни ткнул, я не могу ничего напечатать, попробуйте сами:
1.8. Когда до меня доходит, что надо сначала стереть цифры, я понимаю, что не могу ввести 0 р., система автоматически исправляет его на минимально доступное в базе значение. Прекрасно, когда система не дает мне сделать ошибку, но ужасно, что она делает это молча без объяснений. От этой безмолвной борьбы чувствуешь себя идиотом, особенно если знаешь, что неправильно введенный показатель в конечной выдаче ничего принципиально не изменит: я просто не увижу никаких товаров дешевле минимума или дороже максимума, что произошло бы и без моего вмешательства.
Итак, я наконец-то ввел в поля нужные мне значения. Что дальше? Система не сообщает мне, что там будет. Возможно, я увижу 1 товар, а возможно, 244. Мне предлагают слепо довериться Озону и нажать на кнопку.
Перейдем к Юлмарту и парням из Нимакса.
2.1. Здесь для ориентации по шкале мне показывают срединную риску. Это уже хорошо, но при такой верстке подписи к риске похожи на подсказки к полям.
2.2. Регуляторы не срублены. В тот момент, когда оба они окажутся на одной позиции, я, как пользователь, окажусь в конфузной ситуации. Я могу предположить четыре выхода из такой ситуации: а) потянется регулятор минимума, б) потянется регулятор максимума, в) потянется регулятор, который я дергал в последний раз, г) потянутся оба регулятора одновременно, перемещая фиксированный диапазон влево-вправо по принципу «паровоза». Я не хочу гадать, я хочу купить триммер для бороды не дороже 4 тысяч рублей.
2.3. См. пункт 1.1.
Перейдем к Сотмаркету (привет, Амик!):
3.1. Парни в Сотмаркете явно знают доступные минимум и максимум, но почему-то не хотят мне о нем говорить цифрами:
3.2. Для дополнительной наглядности шкалы на ней закрасили доступный диапазон цен. Нетрудно догадаться, что шкала врет — в ценовом сегменте 62 000 р. — 66 000 р. товаров нет — фрустрируем вместе:
3.3. У Сотмаркета шкала хитро разделена: до первой риски регулятор шагает по 10 рублей за раз, потом по 100 рублей, по 500 и по 1 000. Это отвечает на пункт 1.6. озоновского примера. Однако, для такого решения нужно обладать потрясающим знанием своих покупателей, ведь оно навязывает мне роли вроде «если я хочу телефон дороже 5 тысяч, у меня есть и лишние 500 рублей», «если я хочу бритву за 30 тысяч, лишняя тысяча для меня не проблема». Кроме того, для недостаточно внимательного пользователя прогрессивность шага оборачивается ситуацией из пункта 1.1.:
3.4. Я так и не понял, почему у ребят равные по ширине отрезки шкалы отражают настолько разные ценовые категории. Нелинейные шкалы бывают, например, в омметрах, но это очень сложно. На мой взгляд, наглядность — единственная полезная функция шкалы, и здесь она подорвана:
Еще примеры и альтернативы
Это все были классные диапазонные шкалы. Плохая новость заключается в том, что этим примерам следуют менее опытные коллеги, например, ребята из Отто, Бонпри, Вайлдберрис и т. д.:
Есть еще экстремистский вариант c инфокривыми/искрографиками/словографиками/гистограммами по Тафти:
Рис. из статьи на UXMatters Грега Нудельмана
Я понимаю, визуализация — это дико модно, и без знания Тафти вас не возьмут в офис с печеньками и даже не в офис без печенек. Но в магазинах с большой товарной базой и огромной аудиторией лишние запросы к серверу просто тормозят работу при минимальном полезном действии для рядового покупателя. У компаний же с бутиковыми базами нет смысла делать такую детализацию. Для многих магазинов откровением становится даже примитивное вытаскивание минимальных-максимальных значений.
В первой двадцатке интернет-магазинов по Коммерсанту такая шкала есть только у E96 (привет Jetstyle!):
Но если обратиться к первоисточникам, оказывается, что искрограммы в основном используются для отображения изменений во времени (по оси X), я не уверен, что такая штука действительно считывается кем-то, кроме людей, профессионально имеющих дело с графиками. Кроме того, они визуально шумят и дублируют функцию, которая и так отрабатывается — количество товаров нам показывает всплывающая подсказка.
Кстати, у Викимарта грандиозный по своей жадности пример, здесь для подбора по цене используются все три способа (категории, шкала, поля), причем все три еще и взаимосвязаны:
Сделаем отступление, обратимся к небожителям. Даже простой, недиапазонный слайдер в документации iOS описан так:
Purpose. Sliders allow users to:
Make smooth and continuous adjustments to a value
Have relative control over a value within a range
Set a value with a single simple gesture
Мне нравится, как скромно парни ставят нахождение значения на последнее место в списке, при этом явно подчеркивая «smooth and continious» в первом пункте, «relative» во втором и «single simple gesture» в третьем. О точности значения нет ни слова. Слайдеры в iOS, быстро ставшие одной из визитных карточек системы, в основном контролируют сущности, для оценки которых не требуется знание абсолютных значений. Их значения воспринимаются глазами (яркость экрана, размер иконок), руками (скорость движения мыши), но не нуждаются в численном измерении. Я посмотрел настройки системы в Mac OS: в основных закладках из 19 шкал только 5 используются для выбора абсолютных значений. При этом, такие шкалы, как правило, в 2-3 раза шире оных в электромагазинах, и количество шагов в них несоизмеримо меньше.
На Медиуме UX-дизайнер, раздраженный эпидемией ДШ, вспоминает даже руководства Майкрософта (заметка милая, прочитайте):
«Шкала с регулятором — это хорошее решение в тех ситуациях, когда вы знаете, что пользователь думает об относительной величине, а не числовой. Например, пользователь хочет установить „средний“ или „низкий“ уровень громкости, а не выставить конкретное значение, например, „2“ или „5“».
Выводы
Все эти недостатки, безусловно, лечатся, и в в разных разработках есть более или менее удачные решения (обратите внимание, что почти везде шкала очень широкая), например:
а) регуляторы взаимозаменяемы, б) при приближении друг к другу подсказки над регуляторами склеиваются.
Тем не менее, изучив множество примеров, я так и не смог ответить себе на один фундаментальный вопрос.
Во всех этих случаях слайдер дублируется полями ввода. Да, можно остроумно совместить поля с диапазоном, как сделал Артур. Но ШД все равно остается сравнительно нестандартным, непредсказуемым и не самым наглядным элементом интерфейса, который в электромагазинах абсолютно всегда сопровождается стандартными, понятными, предсказуемыми полями. Иначе говоря, шкалы настолько несостоятельны, что им всегда требуется неотложный интерфейсный «фоллбек», хотя сами они изначально призваны облегчить работу с полями. Зачем тогда их вообще использовать?
Даже если представить, что перед дизайнером не стоит проблема экономии экранного пространства (дизайнеры электроторговли в этом месте должны засмеяться), сам факт дублирования функции усложняет интерфейс минимум в 2 раза и с точки зрения использования, и с визуальной точки зрения.
В большинстве случаев интерфейс, лишенный шкалы, совершенно спокойно мог бы выглядеть проще без потери функций (это магазины из рейтинга Коммерсанта), по вкусу можно добавить кнопки применения:
◀▶
К 2014 году большинство наших пользователей научились набивать многокилометровые СМС-сообщения одним пальцем, за доли секунд отвечать на электронные письма, а многие и вовсе почти разучились писать от руки. Вбить руками трех- или четырехзначное число уже давно стало для них посильной задачей, особенно если она ведет к удобной и приятной покупке. Для меня популярность ДШ — полная загадка, и я склонен искать объяснение не в заботе о пользователе, а в каких-то других причинах: желании набить цену своему интерфейсу, банальном желании приукрасить скучный интерфейс нарядной фурнитурой, личных амбициях дизайнера и, наконец, слепом копировании. Когда в декабре мы наконец-то ввели в Лабе фасетную систему подбора товаров, я просто сделал крупные, легко редактируемые поля, отобразил в них минимум и максимум, и на этом тема ДШ для меня осталась закрытой:
После всего
Черно-белые иллюстрации взяты из книги «Основы художественного конструирования радио и электронной аппаратуры» Р. Г. Варламова. Это потрясающе интересная книга, найдите ее.
