【摘要】
导航菜单不一定是一个文字链接的简单集合,它可以丰富地表示导航信息的层级, 甚至反应整个网站内容的层次结构。由于普通下拉菜单存在很多可用性问题,促使Mega drop-down menu应运而生,由于这种菜单真的很牛X,所以我叫它超级下拉菜单。相关测试证明了超级下拉菜单克服了普通下拉菜单的缺陷,值得推荐广泛使用。
【正文】
首先结合实例,我们先分析一下超级下拉菜单是什么样子的。
1.巨型的、二维的面板将导航选项明确的信息分组;
2.通过布局、版式和图标等手段来组织导航选项的内容;
3.一次性、快速地发现所有信息,无需滚动;
4.当主导航在页面顶部时,可垂直或水平展开菜单;当主导航在页面左侧时,可以飞出的形式展开菜单。
其次,我们来看看超级下拉菜单之于普通下拉菜单的优势。
1.一目了然
对于大型网站来说,普通下拉菜单通常隐藏了大多数用户需要看到的选项。虽然通过滚动可以解决展示的问题,但由于用户无法直观比较所有的选项,他们不得不依赖短期记忆来记下扫视过的信息,记忆力的好快直接影响了完成任务的效率。尤其是下拉菜单过长时,普通下拉菜单就更让人苦恼。
而面对复杂的网站(尤其电子商务网站)超级下拉菜单充分体现了“一目了然”的原则,全部信息尽收眼底,用户无需承担记忆的负担。
2.明确分组
普通下拉菜单层级和分组都不明确,一般是在二级菜单名称前加一个“ – ”,或者缩进处理。
而超级下拉菜单由于包含的信息众多,所以从信息组织、布局、视觉表达上均强调了选项之间的层级和分组关系,帮助用户了解他们的选择。
3.信息可视化
普通的下拉菜单一般只适用文本链接,我们需运用排版、文本样式来区分不同选项的层级关系和重要程度。
而超级下拉菜单可以通过使用图标、图片、提示等丰富的形式,让选项信息可视化,更直观,更容易理解。在windows Word 2007的下拉菜单中用图标代替了文本,且鼠标移上每个图标时显示提示信息,帮助用户做选择。
接着,重点切具体地研究下超级下拉菜单的应用规则。
我所说的规则是针对超级下拉菜单的,对普通下拉菜单同样适用的规则此处省略××字。
1.响应速度
响应速度是设计用户界面时要重要考虑的因素之一,之于超级下拉菜单也不例外。一般界面元素必须在短时间(0.1秒内)作出反应,好让用户觉得是他们操作导致了屏幕上的变化,过慢的响应使他们感觉操控电脑与自己无关,所以响应需要及时。但是针对超级下拉菜单的特点,速度过快也不太好,用户要浏览的信息众多,如果鼠标不小心移出菜单就关闭菜单的话反而干扰用户的操作。
因此,在设计中我们应该注意响应速度的设置,并且针对不同的系统和浏览器予以测试,保证它的可用性。如何设定这个时间呢?根据尼老爷多年的实验得出以下建议:
A.鼠标在导航的某个选项上悬停0.5秒。
B.如果鼠标仍停在这个选项,则需要在0.1秒之内展开超级下拉菜单。
C.如果鼠标移出导航选项,且停留在导航以外区域超过0.5秒,则在0.1秒内收起超级下拉菜单。
D.对角线原则:如果鼠标如下图的路径左上至右下滑行,期间会移出导航选项和菜单的区域,在这种情况下应该保持超级下拉菜单的展开状态。虽然多数用户不存在这个问题,但是针对老年人和行动不便当用户应该适当的加长这个时间。
2.合理的组织菜单中的众多信息
超级下拉菜单包含的信息从形式上有文本、链接、图标、提示等,从内容上又包含多级导航选项、网站流程、具体的产品信息等,合理的组织这些信息,明确了分组,才能是超级下拉菜单发挥真正的作用。从主要分组的准则是:
A.按照信息的相关度打包。例如可以通过卡片分类的方法研究用户心智模型,从而将相关度高且用户认可的信息集合在一个组。
B.保持中等水平的粒度。不要在一个分组提供过多的选项,降低用户扫视这些信息的时间。相反,也不要划分的太细,这样用户需要花更多时间去了解每个分组的含义和区别。
C.使用简洁、描述性、标签化的文案。Web产品的文案有个准则:让用户在扫读时通过关键词抓住意思,避免使用专业术语。
-使用简洁、直白的文案;
-不要在同一个菜单中使用雷同的用词。
D.按信息分组布局。可以根据分组信息的重要性或使用频度来排序、布局,并通过视觉手段明确分组和层级关系。
E.不要出现重复的选项信息。不要让用户困惑,去除冗余的信息。
3.保持简单有效
按照可用性的标准,让超级下拉菜单“保持简单”,我们可以在菜单上做很多事,但并不意味着我们应该这么做。
A.用户真正需要的是一次点击达到目的,不要为了使菜单看上去很高端就乱用花俏的交互效果和功能。
超级下拉菜单是一个快速跳入跳出的控件,而不是对话框,并非越复杂越好。有的超级下拉菜单有右上角会有一个关闭按钮,用户需要快速的点击-查询-跳转,当用户将鼠标移动到导航的其他选项或页面其他区域时,当前的菜单会自动关闭,所以这“关闭”是没有必要的。而对话框可以很复杂、很炫,如果他们不想用了就关掉它,嫌它碍事可以挪到其他位置。
B.超级下拉菜单适用于网站的导航、浏览,对那些需要持续可见的、不能被中断的操作是不适用的。
举个反例,有的网站把导航栏中“我的帐户”登录设计在一个下拉菜单中,用户在填写表单的时候鼠标可能会移到菜单外,于是菜单就收起不见了,这个设计就妨碍了用户的操作。简单而有效的方案是直接把“我的帐户”登录链接到一个全新的页面。此外,全局搜索框也是个例子,没人会把它放在一个下拉菜单里,当然下图是个意外。
C.尽可能的避免信息过载。
不要因为超级下拉菜单巨型、有很多空间就扔很多的信息进来。越少的选项信息就意味着越少的扫读时间,同时减少理解的成本,少出错。
4.无障碍操作
提高超级下拉菜单无障碍操作,可以通过以下几种方法:
A.简单:不要妨碍下拉菜单的访问,使导航中的每个选项保持可点击,指向的页面链接也是正确的。
B.快捷:通过快捷方式访问。例如Word2007中,按一个字符选择以及菜单中的项目,并显示相应的超级下拉菜单。在菜单的每个选项旁边显示快捷提示。这样用户通过一两个字母就可以顺利快速的操作,无需记忆,而且理解成本更低。
C.兼容:完成超级下拉菜单的设计后,实现阶段我们应该注意显示器和浏览器等的兼容问题。保证大多数的用户可以顺利浏览到超级下拉菜单的所有信息。
【后记】昨天在工作中遇到一个关于导航的问题,一小撮er不明真相的群众就“是否需要引入超级下拉菜单”的话题热烈讨论。本想作为论据把尼老爷的文章翻译一下的,不过看了看太麻烦,还是在自己消化的基础上小结了一下。如有跑偏,请大力拍砖^_^。