用户界面建议/导航想法(提供样机图像)

时间:2010-01-25 14:52:10

标签: jquery web-applications user-interface navigation

我想要显示多个图表,每个图表都有相应的文字。

左边区域的大小是唯一的约束,我很欣赏有关如何使界面直观和刺激的建议(如果有任何矛盾?)。

在这个模型中,基本上有两种模式:

1)显示图树菜单(图1)。用户单击标题和带有相应文本加载的图形。

2)选择特定图表(图像2)。用户可以导航到相关图表或返回图表菜单。

一个问题是用户绕过模式1来到特定图表:
如何设计界面以方便这些用户找到树状菜单?

......并且应该有一个树状菜单和两个分开的“面板”吗? 请建议可在此上下文中使用的其他UI组件/布局。

alt text http://www.lapidus.se/external/mockup1.jpg

alt text http://www.lapidus.se/external/mockup2.jpg

2 个答案:

答案 0 :(得分:1)

我认为您不应该使用相同的页面区域进行导航和上下文信息。 恕我直言你有几个选择:
1)将图形选择控件放在一个可隐藏的图层中(模态弹出窗口,或者 - 更好 - 在标题下可访问的垂直滑动图层:在这里查看“控制面板”http://www.tomstardust.com/),将图形信息保留在它们的位置在Image2中。

2)将图形信息图层放在图形下面,以展开可视区域。

在每种情况下,我的建议是始终可以访问主导航树。

答案 1 :(得分:0)

我会先解决你的第二个问题。如果每个菜单项选择都将菜单替换为主题文本,我看不到图表面板旁边的菜单面板有多大好处。用户必须单击链接才能返回菜单,在那里,我没有看到他们需要继续查看图表的充分理由 - 他们点击图表菜单,因为他们已完成图表。使用仅作为菜单的主页,该应用程序将至少同样有效(就更改图表的点击次数而言)。这将为您提供更多的菜单空间,以帮助用户选择图形(例如,显示完全展开的层次结构,以便只需单击一下即可选择任何图形,或为每个图形提供缩略图或摘要文本)。

如果用户选择图表后,单独的菜单面板可能会更好。这允许用户看到当前图形与一些其他图形的关系(例如,它们都是经济的)并且通过一次单击选择相关图形,使其比必须首先导航回图形菜单更有效。但是,全职菜单意味着其他面板的房地产减少。为了在一个窗口中容纳菜单,图形和主题文本(后者在它自己的第三个面板中),您可能必须使图形更小,这意味着用户可能会丢失他们可能感兴趣的细节。或者,您可以通过链接使文本可访问,用文本替换图形,但这使得更难获得文本并破坏指向图中特定特征的任何文本的有效性(例如,“注意如何在1929年... “)。

所以你必须判断,菜单值得像素吗?如果您希望用户进行相对大量的导航,只需查看每个图表,通常不会读取大部分文本,然后转到下一个图表,那么全时菜单会更好。如果您希望用户进行相对大量的图表研究,检查细节,阅读文本以及可能操作图表几分钟或更长时间,那么菜单的主页更好。除了赌博之外,您对用户行为的期望应该基于用户研究:您的用户是谁,他们想要完成什么,以及他们在什么条件下工作。

您可以通过三个面板提供两种方式使用应用程序的容量,其中每个面板都是可调整大小和可关闭的窗格(并且可以缩放,用于图表),允许用户配置窗口以获得所需的平衡研究抗导航。但是,您仍然需要默认配置,因此您仍需要进行研究以确定大多数用户将如何使用该应用。

如果您有一个全职菜单面板,如果您希望用户通常在同一类别的图表之间导航,则树控件很好。树控件只会在一次点击后放置相关的图形,但可以在折叠下方推送不相关的图形,迫使用户在选择它们之前滚动(如果您可以显示所有图形而不需要滚动,则永久扩展层次结构并显示所有图形 - 不要让用户打开和关闭树枝,如果他们不必)。如果See Also几乎总是该类别中的其他图形,则全时树控制可以消除对See Also链接的需要。

如果您希望用户跳转到任意图形,那么您可能希望将菜单层次结构实现为一组侧栏或下拉菜单,以便最大限度地减少总体导航工作量。如果用户知道他们想要的确切图表,那么就有一个按名称排序的可滚动图表列表,最好支持提前输入。如果用户有时按名称选择图表,有时按类别选择图表,请将图表列在可按名称或类别排序的可滚动表格中。

要解决您的第一个问题,如果您有一个全职菜单面板,那么您不必担心用户知道如何导航回来。如果您选择在主页上显示菜单,那么使徽标成为家庭的链接是一个广为人知的惯例。但是,您可能希望使用显式链接进行备份。我会用内容标记它(例如,“所有图形”)而不是它的实现(例如,“图形菜单”,它可以被解释为用于操作当前图形的菜单)(“返回图形菜单”?如果它们绕过菜单,没有任何回复)。我会将All Graphs链接放在See Also链接附近,这样这些链接就可以强化多个图形可用的概念。要建立与See Also链接的关联,您应该为All Graph链接提供相同的一般外观(颜色,下划线),尽管它可能更大或更大胆以引起注意。