Доступная навигация больших информационных деревьев

Question

Я занимаюсь разработкой общедоступного веб-сайта, который является источником информации о состоянии здоровья.

После того, как пользователь выполняет поиск (на основе вопросника), ему предоставляются результаты, которые подразделяются на разделы и подразделы.

Информационные элементы могут быть назначены как разделам, так и подразделам.

На данный момент разделы представлены вкладками в верхней части экрана, а разделы - ссылками на боковой панели. Ссылки на боковой панели меняются в зависимости от того, какой раздел выбран.

Проблема в том, что названия разделов довольно длинные (несколько слов), и в результате общая длина вкладок слишком велика для стандартного разрешения экрана (1024 x 768). Поэтому они оборачивают и ломают макет страницы. Мы также должны будем добавить дополнительные вкладки в будущем.

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

Answer 1

Вы можете попробовать:

• Меню в стиле iPod (в котором подразделы представляют собой скрытые страницы, которые появляются справа): http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

Или, как сказал Даан:

• Каскадные выпадающие списки: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

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

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

Answer 2

Как долго называются названия подразделов? Подойдут ли они в пространство для вкладок? Вы, скорее всего, получите лучшую производительность для пользователя, если разместите ссылки на разделы в боковом меню и ссылки на подразделы на вкладках, а не наоборот. Смотри http://www.usability.gov/pubs/040106news.html.

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

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

Answer 3

Просто мозговой штурм некоторых идей:

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

В другом вопросе о SO я натолкнулся на ссылку Айва , возможно, вы тоже можете найти там вдохновение.