设计师,你何不直接帮使用者选好“下一步”?
2012-09-20 14:18

设计使用者界面时常常会碰到需要让使用者来决定下一步的时候,在电脑系统中最常见的就是“确认”以及“取消”按钮;像是在作业系统中要删除档案时,系统会跳出以下的询问视窗,并且已经预设将选项标记在主要的选项上:

当版面上有复数按钮时,我们通常将其区分为“主要选项”及“次要选项”等,主要选项按钮代表你希望使用者使用的功能、进行的步骤等。

以双按钮的设计为例,我们简单举例几种不同设计方式的情况:

我们注意到当两个按钮的设计相同时,使用者必须花费时间确实地阅读按钮上的文字并判断其功能,然后才能做出“要按但是当我们依据主要选项以及次要选项的规则,将次要选项的按钮改变颜色、造型后,我们发现效率提高了,由于预先帮使用者做了选择,并且使用不同色彩来区别特性,所以阅读性以及使用性上都得到了提高:下哪一个按钮”的决定,如下图:

但是当我们依据主要选项以及次要选项的规则,将次要选项的按钮改变颜色、造型后,我们发现效率提高了,由于预先帮使用者做了选择,并且使用不同色彩来区别特性,所以阅读性以及使用性上都得到了提高:

因为在没有选择的情况下,使用者容易更快速地做出决定

或者不应该说是决定,因为本来就不需要让使用者做判断。没有多余的按钮吸引注意力、也没有多余的按钮可以点,使用者不假思索地就完成了操作;例如“下一步”按钮独自出现的状况,使用者往往点得很愉悦:

以下我们整理几种比较好的设计方式:

1. 只给使用者一个按钮:

下图为Google 新使用者注册的表单,把使用者注册分开成几个步骤来达成,让使用者只要依询步骤就可以完成注册的动作。

以下是Google 以及Hotmail 的帐号登入页面,为了提高界面的使用效率,两者不约而同的在界面上都精简到只留下了一个“登入”按钮,而其他选项则以文字式的超连结显示:

2. 将重要的、预设的功能以特殊色显示

在WordPress 发布文章的控制面板中,使用者可以选择储存草稿、预览、发布以及删除的功能,而在面板中将“发布”的按钮以显眼的色彩显示,暗示使用者这是预设动作。对于熟悉界面后的使用者,也可以因此快速找到需要的功能、减少花费在阅读按钮资讯的时间。

3. 调整按钮的大小尺寸、以及位置

浏览器中预设使用者最常用的按钮功能为“上一页”,因此将“上一页”的按钮做得比较大:

而使用者浏览网页的视线习惯是由左至右浏览,在输入文字时也是,因此将主要选项摆放在左边,最容易让使用者先注意到该选项的存在。

在Blogger 控制面板中,除了将“发布”功能以特殊色显示外,按钮摆放的位置也经过细心的安排:

综合以上结论,当我们在安排界面时:

1. 最好只给使用者一个按钮,额外功能以不同样式显示。

2. 当必须使用复数按钮时,则最好预先帮使用者做好选择。

3. 将利用摆放位置以及色彩、样式等来帮助使用者更快地做出判断。Desiring Clicks 是一个专门介绍使用者界面、使用者经验、视觉设计、资讯架构和网路行为的网志。欢迎你一起参与界面设计,让这个世界变得更美好。

 

本文由“TechOrange与“i黑马”联合出品,原文地址:http://techorange.com/2012/09/20/desiring-clicks-dont-make-me-think/文章由TechOrange 撰写。如果在阅读过程中遇到什么问题,请联系post@chuangyejia.com ,期待您宝贵的意见和建议!

i黑马也诚邀第三方媒体入驻“开放实验室”,合作联系:@老雅痞