Павел Т.
16 марта 2011

Приветствую.

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

    Категории разбиты трехступенчато:
  • в первой ступени 3 позиции (включая позицию «все категории»),
  • во второй и третей около 10 позиций.
    У меня есть два варианта, и оба меня смущают:
  • первый, на мой взгляд, достаточно масштабный и не подходит для планшетников,
  • второй неудобен большим количеством кликов.
  • Вы можете мне что-нибудь посоветовать?



Павел!

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

Если на первом уровне всего две настоящих категории, то лучше первый и второй уровень объединить.

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

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

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

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

Раз вы говорите, что на первом уровне есть вариант «все категории», то можно относиться к вашему классификатору как к фильтру для большого списка категорий. Тогда можно всё перевернуть: показать полный список, а справа от него фильтр, в котором выбраны «все», но можно сузить выборку. Полный список при этом можно сортировать по популярности, последнему использованию, алфавиту.

P. S.

Я веду практический курс «Пользовательский интерфейс и представление информации». Дата следующего курса пока неизвестна.

 
Мы напишем вам, когда будет открыта запись. Без спама.

Поделиться

Комментарии

Игорь Писорев
16 марта 2011

Буквально недавно натолкнулся на хороший скрипт для решения таких проблем: mcDropdown jQuery Plug-in

Роман Верник
16 марта 2011

Может это очевидно, но первый вариант вполне подходит для планшетников, если под каждую ступень отвести отдельный экран.

Денис Соколов
16 марта 2011

Если у вас эти категории связаны с навигацией, попробуйте мега-выпадающее меню. В последнее время они становятся всё популярней и не зря.

Не могу припомнить хорошего примера, но вот неплохой:
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/

Только имейте ввиду, что делать такую выпадалку с Джаваскриптом — преступление. Оно делается на чистом ЦСС :-)

Иван Титов
16 марта 2011

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

http://www.avtodeti.ru/

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

Михаил Озорнин
16 марта 2011

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

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

Кстати, у Якоба Нильсена есть пара статей про Mega Dropdown Menu:
http://www.useit.com/alertbox/mega-dropdown-menus.html
http://www.useit.com/alertbox/mega-menus-wrong.html

Игорь Писорев
17 марта 2011

Михаил!

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

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

Решение этой проблемы явно в не скиптах или прочих технических решениях, дело в ошибке проектирования такой системы.


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

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

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

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

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

4 Расскажите об управляемости: программа 2 Как сделать плавный переход от общения с администратором к директору? 1 2