Рекомендации по разработке веб-интерфейса для выбора из большой иерархии

Question

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

Вариант использования: пользователь выбирает элемент "a" из иерархии "A", затем он выбирает элемент "b" из (совершенно не связанной) иерархии "B" и заполняет короткий текст произвольной формы, чтобы дополнить свой выбор.

Обе иерархии имеют менее 10 уровней глубины (обычно - 5), но каждый уровень может быть очень широким (20, 40, 50, 100 пунктов).

Таким образом, рисование всего «дерева» и предоставление пользователю возможности «щелкнуть по нему» не подлежит сомнению. Постепенный спуск по дереву возможен, но: 1) может случиться так, что пользователь теряется / неуверен в том, где перемещаться -> он будет вынужден вернуться через разные ветви, пока не найдет то, что ищет 2) существует проблема с «широкими поддеревьями» - они могут быть слишком широкими, чтобы представить их в одной строке или столбце на экране.

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

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

Есть идеи для меня?

Answer 1

Один из вариантов - использовать список прокрутки в стиле меню iPhone / iPod. Несмотря на то, что они представлены в виде меню, в этом примере группы нитей показан один со следом крошки, а другой с обратной навигацией. Возможно, вы захотите реализовать это в каком-нибудь вертикально прокручиваемом div. Скользящая анимация влево / вправо и след от крошки предоставляют пользователю некоторые ситуативные подсказки. Понятно, какие варианты являются ветвями, а какие листьями. Там нет ограничения по глубине. Кроме того, эта схема навигации будет знакома всем, кто использовал iPhone / iPod / iPad.

Держу пари, это где-то реализовано. Если я откопаю одну, я отредактирую соответственно.

Answer 2

Подумайте, как работает Windows Vista или Windows 7 меню. Вы открываете его, затем щелкаете голосом в меню «все программы». Весь список предметов меняется с новым содержанием.

Давайте подумаем об этом многоуровневом сейчас. Представляю вам список предметов 1-го уровня. Вы нажимаете один, весь список меняется с его дочерними элементами уровня 2. Затем вы щелкаете элемент, и снова весь список меняется с его дочерними элементами уровня 3 и т. Д.

Дополните его навигацией «Хлебные крошки», например: вы здесь -> Предмет 1-го уровня -> Предмет 2-го уровня - Предмет 3-го уровня -> и т. Д.

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

Добавить быстрый поиск по ключевому слову.

Я могу вам сказать, это довольно функционально. Я разработал этот компонент на основе вызовов Jquery и Ajax json и использую его в некоторых веб-приложениях, над которыми я работаю.

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