交互细节!确定按钮到底该放在左边还是右边? - 优设-UISDC

交互细节!确定按钮到底该放在左边还是右边?

2016/08/23 11540评论区

ok-button-left-or-right-1

仔细想想,我们做交互设计,讲了那么多“高大上”的理念,竟然很多小细节都还没有弄清楚——比如,确定和取消按钮哪个该放左边哪个该放右边?今天这篇文章是作者在英国约克大学读研时做的一个课题作业。想知道哪个更好,这篇或许能给你启发。

提高用户体验的几个细节:

  1. 《细节决定成败!提高用户登录体验的5个细节》
  2. 《13个提高「进度条」用户体验的设计技巧》

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

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

sxx201608231

△ 苹果的移动设备

sxx201608232

△ 苹果的电脑设备

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

sxx201608233

△ 微软的电脑设备

sxx201608234

△ 微软的移动设备

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

sxx201608236

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

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

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

整个实验过程中,唯一被记录的只有*点击重置按钮的次数*。(当然,为了避免有人故意点重置按钮,事后会问他们是不是故意点的,如果是,就不会把此人的数据计算在内。)

结果出乎意料地有趣:

sxx201608235

△ 两组的错误率完全不同

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

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

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

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

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

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

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

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

个人认为,*系统规则*可能影响更大。举一个例子,中国人用筷子,西方人用刀叉,要证明筷子和刀叉哪个更加适合人类本能,怎么设计实验?恐怕唯一的实验对象只能是还没学会用餐的小孩,因为在每个人已经被环境同化的情况下,本能的影响已经微乎其微了。而就算真的证明了筷子和刀叉哪个更符合人类本能又怎样呢?也不可能因为那一点微小的学习成本就让全世界废弃任何一种餐具。思考到这里,恐怕*顺应大环境*才是最好的选择。

最后附上该实验的真实工具:

sxx201608237

△ 我自己写的测试网页,包括问卷、说明、测试页面和最后询问 “ 点击重置是否是失误在内 ”

「本月最值得阅读收藏的完美像素使用手册」

  1. 《值得每个设计师收藏的《完美像素使用手册》之原理篇》
  2. 《中文版来了!值得每个设计师收藏的《完美像素使用手册》之细节篇》
  3. 《第三集!值得每个设计师收藏的《完美像素使用手册》之易用性篇》
  4. 《第四集!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇》
  5. 《最终版!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇》

原文地址:jianshu

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ok-button-left-or-right

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里