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

通常带有明确指向性和说明的标签(按钮内容,文本)会比通用的“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

相关推荐

  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 记忆篇|从心理学理解交互设计原则

    无论是设计网页还是APP,我们必须要满足用户的需求, 用户体验的好坏完全取决于你多了解用户。用户是如何思考,记忆,做决策?什么促使他们点击?知道了这些,对交互设计很有帮助。让我们从了解人记忆的复杂性和弱点开始。

    2017-04-30
  • 交互设计的两个核心问题:用户体验和以用户目标为导向

    设计师和用户如同在跳交际舞,既要顺应着对方的步伐,也要进行一定的引导。对方是一个人,不只是你感受的到他的温度,他也闻得到你身上的味道,对你时时刻刻进行着评价。

    2017-05-21
  • 产品不能忽视

    在做交互稿或视觉稿的时候,为了让界面尽可能的真实,设计师们会虚拟一些内容放在页面上。但是当看到前端同学产出的demo时,设计师们又总是会觉得为啥和我当初做的页面那么不一样捏?设计师总喜欢把图做的很漂亮,在虚拟页面的内容时,使用漂亮的图片,把内容安排的恰到好处。但是当产出界面demo时,这个页面可能是个空内容的页面,也可能内容很多,导致布局错位。所以在设计界面时,一定不能忽视空状态、内容过多等极限状态。这些状态也许只会在初次使用时遇到,也许只会有很小一部分用户遇到,但是这些都影响着产品的细节品质。

    2014-12-28
  • 2017年UX设计的3大预测

    本文作者总结了他在2016年对UX设计的预测,且又对2017年的UX设计进行了预测。

    2017-04-29
  • 一招教你让交互方案更靠谱!超好用的目标导向设计法

    对于一枚交互设计 师,设计水平的重要判断标准之一,是看设计师能否产出足够靠谱的方案。对内,方案要能帮助产品不断向前发展,提升产品的数据,为公司带来收益;对外,方案要能满足用户的使用需要,方便用户的操作,提供良好的用户体验。对于交互的同学来说,这些是我们的天职,要想尽一切办法去做好。那么问题来了,如何才能做好这些天职呢?下面我将分三个阶段介绍一个很好用的设计方法 :目标导向设计法。掌握了这个设计方法 ,可以帮你设计出团队内部认可、用户也喜欢的方案。

    2017-05-28
  • 眼球追踪到底是肿么回事?和VR有啥子不"正当"关系!

    虫虫是科技虫,更是虫博士,今天,好为人师的虫博士给伙伴们普及一下,眼球追踪到底是肿么回事?和VR有啥子不"正当"关系! 名词:眼球追踪 是一项用途颇广的科学应用技术,广泛运用于实验心理学、应用心理学、工程…

    2016-04-11
  • [自译]强大的省略号-为什么三个小点表达如此丰富

    原文链接:The Mighty Ellipsis - How 3 little dots can say so much 原文作者:John Saito 每当我告诉人们省略号(...)是最让人惊奇的字符时,大多数人都像看疯子一样看我。在你给我打上这个标签之前,让我试着…

    2016-10-09
  • 改善电商网站用户体验的6个技巧

    电子商务是一个复杂的系统,作为电子商务的典型模式之一,B2C网上零售网站要考虑的因素很多,甚至一些看似不起眼的因素都可能决定一个用户最终是否在该网站完成购物。 在消费者注意力越来越分散的今天。如果您希望潜在客户更多的停留在自己的网页上,进而产生购买行为,就需要牢牢吸引他们的注意力,并且提供简便愉快的购物体验。做到以下这6点,相信没有用户会拒绝从你的网站购买商品,甚至会带来更多的返购和忠实用户。1.提升网站的加载速度落地网页的速度通常是转...

    2018-05-08
  • 交互设计师从业时间长度与对应状态

    不同的经历决定了你的认知,而我们中的很多人往往以自己的认知去度量别人的工作和成果,每每于此,长不自拔而废咦! 从业0-2年: 这个阶段往往是浑浑噩噩进入这个行业,读了几本书,分析过几个案例,感觉自己掌握了…

    IxD案例 2016-05-24