一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。

苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边*:

苹果的移动设备

苹果的电脑设备

微软说,除了删除之类的负向操作外,不论移动或电脑设备,*确定按钮放在左边*:

微软的电脑设备

微软的移动设备

为了弄清楚这个问题,我做了一个实验:

试验中A组和B组的区别只是交换了按钮位置

我一共找了30人,先让他们在九张图中选择最喜欢的一张,然后按确定按钮提交。然后再让他们在剩下的图中选择最不喜欢的,再按确定按钮提交。这个实验的关键是,在选择不喜欢的图时,*确定和重置按钮的位置被悄悄替换了*。用来测试的是一个在iPad上展示的黑白简易网站:

然而,这30人被分成A和B两组,A组先使用放在左边的确定按钮,再使用放在右边的确定按钮;B组先使用放在右边的确定按钮,再使用放在左边的确定按钮。

整个实验过程中,唯一被记录的只有*点击重置按钮的次数*。

结果出乎意料地有趣:

两组的错误率完全不同

人们在第一次选图时,如果确定按钮在左(A组),则有13.33% (2/15) 的错误率;如果确定按钮在右边(B组),则没有人出错。然而2个人未免有点少,不够说服力,所以到这里还看不出什么证据。

真正意想不到的是,在第二次选图时,如果按钮从左换到右边(A组),错误率稍有提升达到23.08%(3/13,注:减去了第一次出错的人);如果确定按钮从右换到左边(B组),错误率竟然从第一步的0%冲到了*66.66%*(10/15)!如果不是亲自做的这个实验,我可能不会相信这个结果。

那么,为什么唯独将确定按钮从右换到左时,才有超过一半的人点错呢?

我的推测如下:从两组的第一步实验就可看出端倪,人们是比较习惯确定按钮在右边的,所以B组的第一步才*没有人出错*。A组出错的人不是很多可能是因为,像点按钮这样的简单任务,即便不符合习惯,也很容易在最后一刻发现自己即将点错,并及时纠正。所以15个人里也不过2个人点错了。

所以A组的大部分测试者虽然在第一部中没有犯错,但因为差点按错按钮而提高了警觉,所以在第二步中,虽然按钮的位置出现了意想不到的翻转,但大部分人还是再次察觉到了按钮位置的异常。

相对的,B组的被测试者因为在第一步走得很顺利,所以在第二步中根本不会考虑按钮位置的问题,猝不及防地改变了确定按钮的位置后,他们中的大部分人都点错了。估计那些没点错的少部分人中,不少人都是差点按错,在最后时刻才发现并纠正的。

所以,得出结论,只有确定按钮放在右边时,使用体验才是最顺畅的吗?

这个结论,无法轻易得出。因为影响人们使用习惯的因素很多,例如设备、系统和载体等。尤其是本实验使用iPad,而包括iPad在内的苹果设备都是把确定按钮放在右边的。因此无法判断被测试者在右边寻找确定按钮的习惯是出于本能还是对IOS系统的适应。

个人认为,*系统规则*可能影响更大。举一个例子,中国人用筷子,西方人用刀叉,要证明筷子和刀叉哪个更加适合人类本能,怎么设计实验?恐怕唯一的实验对象只能是还没学会用餐的小孩,因为在每个人已经被环境同化的情况下,本能的影响已经微乎其微了。而就算真的证明了筷子和刀叉哪个更符合人类本能又怎样呢?

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2017-04-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android 开发者

Android 开发者和设计师必须了解的颜色知识

2033
来自专栏Jerry的SAP技术分享

SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么

身边有些年轻同事曾经向我表达过这种困扰:尽管完成日常工作没有任何问题,但是还想更进一步,把代码写得更好些,做到精益求精。现在写的代码能实现功能,但是不知道可以怎...

1653
来自专栏琯琯博客

awesome-css-cn命名习惯和方式参考其他资源原文链接

CSS 资源列表,内容包括:CSS预处理器、框架、CSS结构、代码风格指南、命名习惯、播客、演讲视频、大网站的 CSS 开发经验等等。 预处理器 更快地编译 C...

4478
来自专栏理论坞

【教程】C4D样条字设计终极版 | 附源文件工程

在站酷关于C4D的样条约束文字设计教程自己注到的共有三篇, 设计文章写的都非常细致,效果也都是各有长的,有很多学习点 然后最近本人也在国外设计B站看到了几位国外...

882
来自专栏无原型不设计

成为优秀UI设计师,必须了解的UI设计规范

今天带来的这些规范,可是成为优秀UI设计师必须知道的“纯干货”,还能让大家深刻了解UI设计规范(https://ds.mockplus.cn)的本质是什么。

1264
来自专栏数据小魔方

think-cell chart系列2——堆积百分比柱形图!

今天要跟大家分享的是think-cell chart系列的第二篇——堆积百分比柱形图! 我们还是先欣赏一下使用think-cell chart制作的堆积百分比柱...

5799
来自专栏静晴轩

所历前端“姿势”更替记(其一)

写作是为了光阴流逝使我心安。在上一篇 Vue ES6 Jade Scss Webpack Gulp中,阐述了现如今从事前端工作的“打开方式”;然而,虽到目前为...

3466
来自专栏ytkah

3个技巧快速入门微信文章排版

  编辑微信图文消息,我们有时会先保存在word文档中,或者是企划部给你的新闻稿,里面有不同的字体(大小)、格式,如果我们直接Ctrl+c/v,那么领导很快会找...

2945
来自专栏数据小魔方

Xcelsius(水晶仪表)系列5——统计图综合运用

今天继续跟大家分享水晶仪表系列的第5篇——统计图的综合运用。 本例是一个通过展现某银行前八年的存款储蓄以及贷款数据,通过预计后两年的存款储蓄增长率、贷款增长率等...

35111
来自专栏互联网杂技

全面屏下的新交互方式

全面屏时代,交互方式会有哪些变化? ? 什么是全面屏? 2017年可以称为全面屏集中爆发的一年,小米,OPPO,VIVO,华为,三星,苹果等等都在今年发...

3496

扫码关注云+社区