user-interface - 用于从大型层次结构中进行选择的 Web UI 设计指南

Question

手头的问题:如何在 Web UI 中为填写某种无聊申请表的计算机文盲用户呈现两个大型层次结构。

用例:用户从层次结构“A”中选择项目“a”，然后从(完全不相关的)层次结构“B”中选择项目“b”并填写一个简短的自由格式文本以补充他的选择。

两个层次结构的深度都不到 10 个级别(通常为 - 5 个)，但每个级别可能非常宽(20,40,50,100 个项目)。

因此，绘制整个“树”并允许用户“单击它”是不可能的。通过树逐渐下降是可能的，但是:
1) 可能会出现用户迷路/不确定在哪里导航的情况 -> 他将被迫通过不同的分支回溯，直到找到他要找的东西
2)“宽子树”存在问题 - 它们可能太宽而无法在屏幕上的一行或一列中显示它们。

会动态修剪树的增量搜索可以拯救懂计算机的用户(前提是 UI 在此过程中足够快)。

现在我正在与那些不愿意放弃鼠标并按下一些键的用户作斗争。

对我有什么想法吗？

Answer 1

想一想 windows vista 或 windows 7 菜单是如何工作的。您打开它，然后单击您的“所有程序”菜单声音。整个项目列表随新内容而变化。

现在让我们多层次地考虑它。我向您展示了一份 Level-1 元素 list 。您单击一个，整个列表会随着它的子级别 2 项目而变化。然后单击一个项目，整个列表再次更改为它的子级别 3 项目，依此类推。

用 Breadcrumbs 导航补充它，例如:你在这里 -> Level-1-Item -> Level-2-Item - Level-3-Item -> 等等

面包屑中的任何项目都可以点击并且可以将您传送回该级别。

通过关键字添加快速搜索。

我可以告诉你，它非常实用。我开发了这个组件，基于 Jquery 和 Ajax json 调用，我在我正在处理的一些 Web 应用程序上使用它。

如果您有兴趣，我可以将组件和一些示例一起发送给您。无论如何，我计划在我即将发布的博客上将其开源。