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

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

Просто обдумываю несколько идей:

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

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

Answer 3

Ты мог бы попробовать:

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

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

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

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

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