按钮的优先级选取与用户体验最佳实践

通常带有明确指向性和说明的标签(按钮内容,文本)会比通用的“OK”或者“确定”要更好。
尽可能使用动词,而不是OK,因为前者意义会更明确,用户不会断章取义从而作出错误的选择。

OK/[Do it]/Yes
[Don’t do it]/No
Cancel

在网站和APP中的对话框通常会进行信息说明,并提供若干选项。最常见的选项数量通常是两个——一个选项优先级最高,为首选选项,而另外一个选项较少被选,为次要选项。(比如用户填写表单之后,结尾会提供两个按钮,一个为提交,另一个为取消)

在今天的文章中,我们将这个最常见的用户体验场景作为探讨的对象,亦即“确认”和“取消”哪个按钮优先级更高。

预防出错

正如同Jakob Nielsen 谈及可用性设计所说的:“只有谨慎小心的设计才能防患于未然。”你应当尽量避免容易出错的情形,尤其是用户容易作出错误选择的情况下。

视觉重量。当两个选项之间有明显区别的时候,你应当让两个按钮拥有不同的视觉重量,让其中一个成为视觉的重心。处于视觉重心上的按钮会获得更多的注意力。

按钮的优先级选取与用户体验最佳实践

清晰而明显的标签。一个设计正确的对话框不应该仅仅给用户提供选择而已,也应该让每个选项尽可能的明确。这就是为什么要让每个选项的标签尽可能的清晰明确。明确的标签能给予用户“恰到好处的帮助”,让用户在作出正确选择的时候不迟疑:

  • 通常带有明确指向性和说明的标签(按钮内容,文本)会比通用的“OK”或者“确定”要更好。
  • 尽可能使用动词,而不是OK,因为前者意义会更明确,用户不会断章取义从而作出错误的选择。

由于中文和英文在回答的模式上的差异,这个对话框中的两个选项OK 和 Cancel 在两种语言下回答是截然不同的。

按钮的优先级选取与用户体验最佳实践

接下来的这个对比案例中,第一个对话框中,“No”仅仅是回答问题,但是并没有指向性,并未指出这么选择的后果。而第二个对话框则好了许 多,“Cancel”和“Discard”两个选项,后者和前文所提出的问题相对应,指向性明确,而Cancel 的含义也就更加清晰了。

按钮的优先级选取与用户体验最佳实践

正向的首选操作(“发送”或“提交”等)

当首选操作是正向的时候,相关的表单和按钮应当拥有更多的视觉重量,而次要的选项的视觉重量应当更轻,这样可以最大程度减少潜在的出错风险,并将用户导向到正确的方向。

按钮的优先级选取与用户体验最佳实践

通常,我们所说的“保存”、“提交”、“发送”在多数时候都算是正向的按钮。

反向的首选操作(“替换”或者“删除”)

如果此时的操作主要是反向的,替换、删除、移除等,那么将这些不可逆的操作对应的按钮和选项赋予更多的视觉重量,其实比较危险的。因为这些操作的不 可逆性,它们并不一定是“安全操作”,用户在引导下可能并不明白它们的危害性而下意识操作,这可能会导致出错。比如,当用户在做替换文档的操作的时候,执 行速度本身并不重要,是否操作正确才是重点,只有这样才不会让用户后悔。

按钮的优先级选取与用户体验最佳实践

“取消”是次要操作,但是它应当拥有更多的视觉重心。

“删除”和“擦除”相关的操作应当多留意。你有没有误删文档事后发现追悔不及的情况?许多用户并不会仔细阅读对话框中的确认信息就作出选择。但是有时候,用户确实是阅读了提示,但是依然手滑作出了错误的选择。(在应当“取消”的时候不小心点了“删除”)

你应当为用户提供单一且明显的确认操作按钮,同时确保设计的可访问性,不会因为文化差异而出现理解偏差,包括色彩本身的指引性。

按钮的优先级选取与用户体验最佳实践

LinkedIn 的对话框中的选项就表述的非常明确。

此外,你应当基于核心的用户数据为关键性的操作设计一套不太相同的处理机制:比如为了避免用户误触,不提供而按钮而是输入框,让用户输入“Delete”来进行删除操作。

按钮的优先级选取与用户体验最佳实践

被禁用的按钮

非活动的、被禁用的按钮有时候也是非常有用的,它可以告诉用户某些操作的可能性。即使在当前情况下并不可用,用户也会意识到在某些时候它们可能会被用到。

按钮的优先级选取与用户体验最佳实践

这类被禁用的按钮还有另外一个作用,就是在紧急情况下启用,帮助陷入困境的用户。“撤销”按钮很少见,但是它确实存在,而且从可用性的角度上来看,还相当的实用。用户面对误触或者意料之外的操作,会下意识“返回”,而“撤销”按钮的存在,让操作的指向性更加明晰。

按钮的优先级选取与用户体验最佳实践

“确定”-“取消”还是“取消”-“确定”?

“确定/取消”按钮是我们最常见的按钮组合之一。而面对这一组按钮最常见的问题是,首选按钮应该是在前面还是在后面。实际上,在实际效果和用户偏好上,两种搭配方式并无显著区别。

Apple、Google 和微软的设计规范

平台的一致性设计其实比先后顺序来的更加重要,但是几个不同的平台之间的操作顺序规定并不相同。

微软的设计遵循下面的顺序:

  • OK/[Do it]/Yes
  • [Don’t do it]/No
  • Cancel

按钮的优先级选取与用户体验最佳实践

但是在 MacOSX 的设计规范中则不同,“能够引发特定操作的按钮应当处于右边,而取消按钮则应当在这个按钮的左边。”这样一来,在Mac平台上,取消按钮在左,而确认按钮在右边。

按钮的优先级选取与用户体验最佳实践

Google Android 的设计规范中则规定,“‘取消’操作的按钮始终处于左边,当用户执行这个操作的时候会回到上一个状态,而正向操作的按钮则安排在右侧。”也就是说,在Android当中,“取消”按钮是在“确认”按钮的左边。

按钮的优先级选取与用户体验最佳实践

如果你的设计是针对特定的平台,那么按钮的排布顺序倒是很清晰的,按照设计规范来就好了。相比于“个性化”的选择,平台的一致性原则优先级更高,对于用户体验上的加成也更多,简言之就是更好用、更直觉。不遵循规范的设计谈不上错误,但是用户会迟疑、犹豫,甚至误触。

基于网络的平台

当然,如果你是要设计基于Web的应用程序的话,应当遵循什么样的设计就要看你所在平台的规范或者用户的使用习惯了。你可以通过用户分析和调研,来 找出最适合平台的排列顺序。在这种情况下,你需要基于可用性来进行考虑,根据用户的使用场景来推导用户的理解方式,作出最优选。

“确定/取消”以及“是/否”的选择符合东西方文化的基本沟通逻辑,“你同意我的说法么?——是/否”,“是”为首选选项,“否”为次要选项。如果用户选择“是”的机率比“否”要高的多,那么将“是”放在第一位,降低用户误触的机率。

而“取消-确定”的排布方式修改了逻辑流程,这种排布方式让靠后的元素显得更加重要。

按钮的优先级选取与用户体验最佳实践

两种方式各有优劣,但是本身通常不存在可用性问题。

 

译文来自:优设

译者:@陈子木

原文地址:Medium

原文作者:Nick Babich

 

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29066/

(0)
CatherineCatherine
上一篇 2017-05-23 00:13
下一篇 2017-05-23 03:07

相关推荐

  • 用户体验设计中最常见的误解

    UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验来做判断。建议你阅读完之后,还是应该结合自身的经验来审视你的设计是否满足用户的需求。

    2017-05-25
  • APP特有的交互设计模式解析

      1、触屏滑动操作,移动APP端最基本的操作方式。 (1)屏幕之间或者页面直接的自由滑动切换 比如手机移动端的界面切换效果,可以滑动使用快速友好的切换 (2)滑动条目经行删除 横向滑动条目的操作犹如一汪清…

    交互设计 2015-08-19
  • 虚拟现实产品是更棒的交互体验吗?

    2016年12月,携程UED大会把虚拟现实技术作为论坛的核心主题,邀请了方方面面的专家,从技术,硬件,体验等各个方面来剖析VR这种创新的趋势。

    2017-05-09
  • 互联网设计的互惠原则:索取前请先给予【UXRen译#187】

    作者:凯特. 迈耶、 金. 弗莱厄蒂 |  翻译:毛毛,校审:天蛙   摘要:人类倾向于回报别人的好意,投之以木桃,报之以琼瑶。这种社会心理学理论可被应用于用户交互设计中,来获得用户的信任并让他们积极参与到你的…

    交互专题 2017-11-23
  • Axure实例:即刻 app 产品需求文档

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放不了了之冰淇 - 分手快乐作者:T.zh来源:简书以下我的Axure原型截图:目录:1.概述1.1产品介绍1.2需求整理2.版本信息2.1修订历史2.2版本规划3.产品逻辑3.1产品信息图3.2产品结构图3.3部分业务流程图4.产品设计4.1全局说明4.2部分功能需求说明4.3部分交互设计1. 概述1.1 产品介绍1.1.1 文档属性1.1.2 产品综述1.2 需求整理1.2.1...

    2018-03-08
  • 交互设计的进展及未来趋势

    作者:Terry Cao   2015-5-7 10:05am    发表于DESIGN & DEV      译者:小媛 作为一种无形的设计,交互设计一直以来都是UX中最难的。以往,用户会被简单的交互吸引,如一个意料不到的动画。但现在的动画效果已…

    2015-10-16
  • 设计中的色彩心理学(上):九种色彩所代表的心理感应

    之前写过一些关于色彩的文章,一直说的是关于色彩理论的一些色彩基础,其中有读者提到过想听听关于色彩心理学的一些东西,因此就在这里聊聊自己的一些感想和设计实践中的一些心得体会,并不系统,只谈感想。

    2017-05-10
  • 为什么职场上的印度人总比中国人混得好?

    目前为止我还未有机会到过印度。身边去过的人有大致两边倒的两种观点,一种是这是一个思想自由的国度,人们开心知足、与世无争。一种是这是一个脏乱差效率低下的地方,一条公路几十年也修不整齐。我无从判断,因为每一种观点都主观。有一位曾经生活在帝都的印度女记者倒是写过一本比较中印差异的书叫《烟与镜》,值得一读。因为工作和学习的关系,我与很多印度人一起共事或者正在共事,有的只能算是点头之交,有的成为了挚友。1先说一件趣事,多年前,我没有与印度人近距离...

    2018-03-16
  • 转行学设计?新手必读的五大误区+三大秘籍

    经常看到一些讲如何学习设计的文章,坦白讲感觉有些千篇一律、且不痛不痒,都说要看点书、学点画、练软件、多观察……唉,练软件这事还要说么,难道你还需要告诉一个人学开发是需要学习编程语言的?

    2017-06-03
  • 设计师要懂心理学の周边视觉还是中央视觉?

    人有两种视觉,中央视觉和周边视觉。中央视觉用来直视事物观察细节,而周边视觉则展现视野中的其他区域,也就是人眼能看到的周边区域。人可以用眼角的余光观察事物,这当然很有用,不过,堪萨斯州立大学最新研究表…

    2014-11-28