用于从大型层次结构中进行选择的 Web UI 设计指南
当前的问题：如何在 Web UI 中为不懂计算机的用户呈现两个大型层次结构，以填写某种无聊的申请表。
用例：用户从层次结构“A”中选择项目“a”，然后从（完全不相关的）层次结构“B”中选择项目“b”，并填写简短的自由格式文本来补充他的选择。
两个层次结构的深度都少于 10 个级别（通常为 5 个），但每个级别可能非常宽（20,40,50,100 个项目）。
因此，绘制整个“树”并允许用户“单击它”是毫无疑问的。通过树逐渐下降是可能的，但是： 1) 可能存在用户迷路/不确定导航到哪里的情况 ->他将被迫通过不同的分支原路返回，直到找到他要找的东西 2）“宽子树”存在问题 - 它们可能太宽而无法在屏幕上以一行或一列的形式呈现。
具有计算机知识的用户可以通过增量搜索来动态修剪树（前提是在此过程中 UI 足够快）。
现在，我正在与那些不愿意放弃鼠标并按下某些按键的用户作斗争。
有什么想法给我吗？
Problem at hand: How to present two large hierarchies in Web UI for computer-illiterate users that fill some kind of boring application form.
Use-case: User selects item "a" from hierarchy "A", then it selects item "b" from the (completely unrelated) hierarchy "B" and fills in a short free-form text to supplement his choice.
Both hierarchies have less than 10 levels in depth (usually - 5), but each level could be very wide (20,40,50,100 items).
So, drawing the whole "tree" and allowing user to "click it" is out of question. Gradual descent through the tree is possible, but:
1)there could be case with a user being lost/unsure where to navirate -> he would be forced to backtrack through different branches until he found what he is looking for
2)there is an issue with "wide subtrees" - they could be too wide to present them in one line or column on the screen.
Computer-literate users could be saved by the incremental search that would dynamically trim the tree (provided that UI would be speedy enough during the process).
Right now I'm struggling with users who are reluctant to abandon the mouse and press some keys.
Any ideas for me?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
想一想 Windows Vista 或 Windows 7 菜单的工作原理。您打开它，然后单击“所有程序”菜单语音。整个项目列表随着新内容而变化。
现在让我们多层次地考虑一下。我向您展示了 1 级项目的列表。单击其中一项，整个列表将随其子 2 级项目一起更改。然后，您单击一个项目，整个列表将再次与其子级 3 级项目一起更改，依此类推。
用面包屑导航来补充它，例如：你在这里 -> 1 级项目 -> 2 级项目 - 3 级项目 ->等等，
面包屑中的任何项目都是可点击的，并且可以将您传送回该级别。
添加按关键字快速搜索。
我可以告诉你，它非常实用。我基于 Jquery 和 Ajax json 调用开发了这个组件，并在我正在开发的一些 Web 应用程序中使用它。
如果您有兴趣，我可以向您发送带有一些示例的组件。无论如何，我计划在我即将发布的博客上将其开源。
Think about how windows vista or windows 7 menu works. You open it, then click your "all programs" menu voice. The whole list of items changes with the new content.
Let's think about it multi level now. I present you a list of Level-1 items. You click one, the whole list changes with its child Level-2 items. Then your click an item, and again the whole list changes with its child Level-3 items, and so on.
Complement it with a Breadcrumbs navigation like: you're here -> Level-1-Item -> Level-2-Item - Level-3-Item -> and so on
Where any item in the breadcrumbs is clickable and can teleport you back to that level.
Add a quicksearch by keyword.
I can tell you, it's quite functional. I developed this component, based on Jquery and Ajax json calls and I use it on some web applications I'm working on.
If you're interested, I can send you the component with some example. I'm planning to make it opensource on my upcoming blog anyway.
一种选择是尝试 iPhone/iPod 菜单式滚动列表。尽管它们以菜单形式呈现，此灯丝组示例显示了一个带有面包屑路径，以及具有反向导航功能的路径。您可能希望在某种可垂直滚动的
div中实现此功能。左/右滑动动画和面包屑轨迹为用户提供了一些情境提示。哪些选择是分支，哪些是叶子，一目了然。没有深度限制。另外，任何使用过 iPhone/iPod/iPad 的人都会熟悉这种导航方案。我敢打赌这已经在某个地方实施了。如果我挖出一个，我会进行相应的编辑。
One option would be to try an iPhone/iPod menu-style scrolling list. Although they're presented as menus, this Filament Group example shows one with a breadcrumb trail, and one with back-navigation. You'd probably want to implement this in some sort of vertically-scrollable
div. The left/right sliding animation and breadcrumb trail provide some situational cues to the user. It's clear which choices are branches and which are leaves. There's no depth restriction. Plus, this navigation scheme will be familiar to anyone who's used an iPhone/iPod/iPad.I'll bet this has been implemented somewhere. If I dig one up, I'll edit accordingly.