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

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

相关推荐

  • 教你4步挖掘设计灵感,30分钟打造出一款圣诞节Banner!~

    憋不出灵感就如难产一般,蓝瘦,香菇/(ㄒoㄒ)/~~

    2017-05-14
  • 百度地图:智能化设计探索,让出行更简单

    出行一直是地图用户的核心诉求。随着移动互联科技的飞速发展,越来越多的出行服务参与到地图用户的生活中,同时也使得用户的出行场景变得复杂多变。但传统地图的出行功能无论从产品还是从用户体验上,大多只满足了用户规划路线、导航驾车等基础需求。所以,探索用户的潜在出行需求,设计贴心的出行服务,让用户的出行更有效率并提升出行体验,是地图设计团队的核心目标。

    2017-05-12
  • Sketch 这几招你肯定不知道

    1.精确调整元素属性在点击元素属性旁的箭头时按住 alt 键可以以10px 倍进行调整,按住 option 键则是0.1px 倍。2.用对齐工具对齐锚点Sketch 中的对齐工具不仅可以对齐群组和图层,还能够对齐锚点,非常方便。3.导航栏文本状态调整与其为导航栏每一个状态都重新做一下,不如将导航栏中的所有元素转为一个符号(symbol),这一个符号中调整样式即可。如果要隐藏文字图层的话只需要在符号的对应文字中输入空格键即可。4.直接拖动...

    2018-04-26
  • 【干货】关于交互设计那点事儿

    交互设计作为现在的热门行业之一就业前景和薪资待遇都很好今天我们就来聊聊交互设计那点事儿先来看一下关于交互行业概览和工作机会。金融公司(Bloomberg,CapitalOne)科技公司(Google,Facebook,Microsoft,Tencent)设计公司(NASN,government,NGO)我们所了解以上这些大名鼎鼎的公司,都是需要很多交互设计师的。那么用户体验设计师、交互设计师、UI设计师有什么区别用户体验设计师,就是我们...

    2018-04-21
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • 如何培养交互设计思维?

    什么是交互思维?上网找度娘会有一堆交互设计的方法,但这里要告诉大家的是,交互设计应具备的思维方式。在国内交互设计并不成熟,未来还有很长的路要走,所以需要我们对其进行了解,首先培养交互思维方式。以下几点可以培养你的交互设计思维:1、设计不能脱离目标交互设计师沟通方式是:“我们需要为想要购买商品的用户提供信息,可选的商品数量有N个,用户最感兴趣的信息有……,有的人不会看但必须附上的信息有……”。不要觉得这样做很矫情,这样可以将不同的信息和重...

    2018-02-01
  • 如何设计移动端的文本输入框?

    基于移动设备的ux设计有很多难点。其中最大的设计挑战之一是在有限的屏幕空间上解决点击输入的问题。对于ux设计师、开发人员和产品经理来说,让这个过程变得易于用户使用就显得至关重要。

    2017-05-22
  • 学而思网校UED部门招聘

    简介INTRODUCTION学而思网校,纽交所上市公司好未来集团旗下品牌,专为3-18岁孩子提供小初高全学科课外教学。UED负责K12在线教育全业务体验闭环的设计工作,我们的团队活力创新、勇往无前,真诚期待你的加入~UI设计师UI DESIGNERS岗位职责负责网校全平台产品体验设计工作;可以主导设计风格,参与设计规范和流程的制定。岗位要求3-5年视觉设计经验,美术、设计、艺术学等专业,本科及以上学历;有移动客户端设计经验更佳;熟悉用户...

    2018-02-16
  • 4月最新便民信息!政府、企业、医院、社工...你想要的岗位都在这里!

    各类招聘求职生活信息关注后回复发布查看更多4月啦,又是新的开始没有工作的同学快快看有哪些好工作吧...   ...招聘信息类首先,是我们玩转郫县的招聘啦邀请你一起来和我们玩营销经理▲薪资待遇:社保+底薪+全勤+提成+奖金(4000-10000元)▲职责要求:1.开拓郫都地区美食、休闲、旅游市场2.建立并维护平台与合作商家良好关系3.能熟练运用word、Excel办公软件▲任职资格:1.工作主动、责任心强、具有良好的团队合作精神、抗压能力...

    2018-04-08
  • [交互留学]英国HCI方向交互设计院校推荐

    之前很多设计相关专业的小伙伴问马克君,是否能够申请HCI方向的交互设计专业,马克君给出的答案是肯定可以,但是你在准备时需要比申请IxD方向的交互要更偏重提升自己的计算机方向的能力。对于HCI和IxD两个交互方向…

    2017-08-02