x
 
Андрей Селиверстов
31 марта 2014

Здравствуйте! Подскажите, как в наше время широкоформатных мониторов и узкоформатных планшетов решается проблема вертикального главного меню? Опишу проблему: есть каталог товаров, главное меню в нём — список категорий с подкатегориями. Вариантов размещения этого меню два: вертикальный и горизонтальный.

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

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

На скриншоте основное меню сделано вертикально, что очень сильно бъёт по размеру каталога (уместилось только три столбца) и фильтра товаров (планируется добавить ещё фильтров, а уже некуда).

Как быть? Есть идея сделать каталог товаров обтекающим меню — то есть сразу под меню начинается четвертая колонка товаров. Радикально? Нормально? Но тогда остаётся проблема с фильтром. Да и всё равно есть дублирование ключевых категорий в верхнем меню — тоже напрягает. Ищу совета у вас, уважаемые знатоки.



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

Поэтому посещение физического магазина никогда не начинается с изучения прейскуранта — покупателя встречает витрина. Если покупателя что-то не устраивает, хороший продавец поможет «уточнить запрос».

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

Страница отдела серёжек Амазона встречает не фильтрами, а специальными предложениями. Затем идут группы украшений по видам драгоценных камней и металлов — самая верная альтернатива фильтрам. Ниже начинаются товары:

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

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

Ниже страница с линейным списком товаров. Перед товарами только строка настройки вида и сортировки:

Но я пошёл бы дальше в логике «потом фильтры» и переместил бы их вправо:

При такой структуре «обтекание» меню выглядит гораздо естественнее.

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

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


Поделиться
Отправить

Комментарии

Андрей Щербатых
31 марта 2014

Артём, фильтры нежелательно располагать справа, потому что:
1) их привычное расположение — слева или сверху, и там их и будут искать;
2) нарушается логика управления (кто кем) — фильтры управляют товарами, а не товары фильтрами.

Обтекание плохо также исходя из пункта 2. Интересное решение у контакта (стена новостей) — правда, оно раздражающе прыгает, что тоже спорно.

«Залипать» фильтры можно не всегда — в случае, если фильтров более 1 высоты экрана — как их проскроллить вниз, если они залипли? Вариант «навести мышку на фильтры и покрутить колесико» не предлагать — потеряем «маломобильных» пользователей.

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

Андрей Селиверстов, у вас и с самими фильтрами проблемы. Зачем вы фильтр стоимости разбили на фиксированные промежутки? Есть типовое решение — ползунок + два поля «от» и «до» (можно просто поля).


6 апреля 2014

Андрей!

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

Проблема залипания колонки фильтров решается умной прокруткой, примерно (но не в точности) такой, как в разделе «вопросов и ответов» на сайте «Я расту»: http://yarastu-company.ru/faq

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

Андрей Щербатых
8 апреля 2014

Точность настройки цены не нужна, но какое-то ограничение — нужно. Логично ведь — у меня определённая сумма на руках, которую я хочу потратить, ну добавлю 10% сверху максимум. Зачем мне 100500 товаров выше этой отметки?

Но да, вы затронули важную тему: я всегда в фильтре, когда надо указать верхний предел (например в аренде квартиры) думаю по 3 минуты, сколько же написать. Но не писать не могу — неудобно анализировать кучу левых данных, и иногда нужно увидеть цифру «найдено X вариантов» чтобы понять, большой ли у меня выбор или я нереальные требования по цене предъявляю.

А список неудобен. Потому что если я хочу цены до 300 долларов, а в фильтре 0—100 и 100—500, этот фильтр для меня бесполезен. И такое «наступание на границы» сплошь и рядом.

Наверное, лучше всего список, но рядом с ним кнопка «точный диапазон», а там уже — два поля.

Ползунок, кстати, тоже правильно программировать надо. При ценах 0—6000 и дискретности ползунка 10 получается полный маразм, начинаешь охотиться в пиксель (такой ползунок примерно на rozetka.ua — по-моему, лучший магазин по удобству пользования в уанете).


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.





Недавно всплыло

Расскажите о клише и устойчивых выражениях 13 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 2 Защититься от случайного нажатия «Сдаться» 1