交互设计心理学之 古腾堡原则

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
12585 15 332 2020-08-26


写在前面


在平时的设计过程当中,你可能会有这样的疑惑,为什么在大部分APP中,当单个按钮和多个按钮同时存在时,最重要的按钮一般都会放置在页面的右侧呢?如果最重要的按钮放在左侧又有什么问题呢?按钮放在右侧的原因是什么呢?它又有什么理论依据呢?接下来带着这些疑问,开始我们今天所要介绍的内容:交互心理学之古腾堡原则



古腾堡原则的起源


古腾堡原则是由14世纪西方活字印刷术的发明人约翰·古腾堡提出,早在20世纪50年代,他在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,就像读书一样,由左到右,从上到下。这其中蕴含着什么信息呢?经过研究最终得出被后人所熟知的结论:古腾堡原则,并附上了一张图,名为「古腾堡图」。古腾堡图将画面所呈现的内容分成四个象限:


1、第一视觉区(POA):左上方,用户首先注意到的地方

2、强休息区(SFA):右上方,较少被注意到

3、弱休息区(WFA):左下方,最少被注意到

4、终端视觉区(TA):右下方,视觉流终点




从图中可以看出,用户视线很自然的会从第一视觉区开始,逐渐移动到终端休息区。整个阅读过程视线都会沿着一条方向轴开始从左到右浏览。用户会更容易关注到页面的开始与结束区域,而中间的段落则很少被关注到。古腾堡揭示了一个实用的视觉轨迹规律:阅读引力是从上到下,从左到右。


遵循古腾堡原则把关键信息放在左上角、中间和右下角,能够更好的体现元素的重要性。例如:我们平时所看到的页面弹窗、各种证明文件和合同文件等等。



古腾堡图通过对设计元素的重量与元素布局和组成方式进行调和,指导眼睛的运动轨迹。让用户迅速获取有价值的信息,同时用户对信息的熟悉程度也是影响眼睛运动轨迹的因素之一。


而随着互联网的兴起,古腾堡原则也逐渐被应用到APP设计和网页设计当中。接下来让我们来看看他在界面中的实际应用。




在设计中的应用


1.1 底部单个按钮


这种形式在引导用户操作的页面中最为常见,为了能够保证用户对内容进行阅读,所以将按钮摆放在页面底部,内容放在顶部,这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。





1.2 底部垂直双按钮


上面我们提到了单个按钮的摆放思路,接下来看一下垂直双按钮的摆放思路是怎么样的。如果一个界面上同时存在两个优先级不同的按钮,并且产品希望用户对每一个按钮都有足够的关注度,那么垂直摆放是最佳选择,虽然垂直双按钮在样式上做了区分,但用户同样会停留一段时间将按钮的内容进行对比思考。


那么,按照古腾堡原则,重要的按钮应该放在页面最底部,原则上它应该是这样的:



仔细观察上图,有没有发现浅色按钮很容易被忽略掉,这样就违背了产品要保证每一个按钮都要有足够关注度的初衷,所以我们要违背古腾堡原则来满足业务需求,正如我们所看到的微信授权页面一样,




为了保证「同意」与「拒绝」这两个独立的按钮能够被用户足够的重视,并且其中的任意一个按钮不会被轻易的忽略掉,这里将「同意」按钮颜色加重,并且放在「拒绝」按钮之上,让眼睛原本垂直向下的运动轨迹产生回流的变化。



小结

原则是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系。




2、顶部按钮分析


由于顶部导航栏空间有限,导致按钮相对较小,并且不便于点击操作,所以这类顶部按钮适用于修改内容的编辑页面,即可以避免误触,又可以让用户关注内容本身。关键按钮至于顶部,还可以缩短用户眼睛的运动路径,让用户更容易注意到其状态的变化状态。




小结

顶部按钮更关注可编辑的内容区域,并非按钮。而底部按钮则更关注按钮本身。并非内容。




3、水平按钮分析


除了上面提到的顶部按钮和底部按钮,还有水平摆放的按钮,比如淘宝详情页、京东详情页、网易严选详情页的「加入购物车」和「立即购买」按钮,界面中的「立即购买」按钮都放在了右下角,结合古腾堡原则的视觉终点说明,右下角为视觉终端区域,即视觉最终停留的位置,所以他们都将与转化率密切相关的「立即购买」按钮放在了界面的右下角,让用户更容易关注到。




再比如比较常见的「取消」和「确认」弹窗样式,通常是在需要让用户确认某种操作行为时出现,有可能是提交表单、协议授权、获取用户信息等等,为了防止用户误操作,这也是提升产品体验的小细节。


平常我们所看到的弹窗,推荐按钮都是在右侧,那么将推荐按钮放在左侧会怎么样?如下图所示:






不难看出推荐按钮放在右侧后,视觉在水平方向轴上产生了回流。


弹窗的目的是想让用户点击「确认」按钮,如果将「确认」放在左侧,根据古腾堡原则,用户的视线会不由自主的向右侧移动,也就是「取消」按钮的位置,想要回到左侧「确认」按钮位置就需要移动视线,并且眼睛的运动轨迹会在水平方向轴上来回的往复运动,无形中增加了用户选择时长。如果将「确认」放在右侧,「取消」放在左侧则可以为用户提高操作效率。


在实际产品中的应用案例:




小结

当产品想要让用户进行某种操作时,主要按钮放在右边




总结


1、古腾堡图第一视觉区,强休息区,弱休息区,终端视觉区

2、原则是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系

3、顶部按钮更关注可编辑的内容区域,并非按钮。而底部按钮则更关注按钮本身。并非内容

4、当产品想要让用户进行某种操作时,主要按钮放在右边



Powered by Froala Editor

全部评论:15

  • Linke

    2020-12-22 16:17

    “为了保证「同意」与「拒绝」这两个独立的按钮能够被用户足够的重视”不敢苟同

  • 光毅

    2020-09-25 15:05

    @杨小晗晗: 有PC“退出提示”弹窗,经常会把“确认”放在左边,“取消”放在右边!可能他们更想让你点右边的“取消”,然后继续留在产品界面!

  • 吴铁奶

    2020-09-15 00:00

    学到了

  • jscao

    2020-09-09 23:09

    @lsongren: 哈哈哈,同道中人,我也是这样想的

  • 夏目xcl

    2020-09-07 10:25

    get

  • HD

    2020-09-04 22:02

    很不错,很有用的文章,谢谢作者

  • dong13

    2020-09-03 17:27

    挺好的 推荐

  • 王雨_Vision

    2020-09-02 16:41

    @冰镇汽水: 这个不是左右手单持手机操作的问题,左手持手机的人并不少见,一般弹窗适配都是水平垂直居中显示,并不存在在手势操作热区内误触的问题,windows弹窗之所以推荐按钮在左,是为了增加用户二次确认的时长,避免用户犯错

  • 冰镇汽水

    2020-09-02 16:18

    左右按钮的问题,可以看一下Pc上的按钮习惯,Windows中“确认”一直是在左边,而“取消”是在右边的。楼主讲的“确认”在右边的例子都是以手机APP案例。我理解为手机一般是用右手单手操作,“确定”按钮放在右侧更便于右手拇指点击操作。若手机的“确定”放在左侧,则在高频次的点击操作中,跨度大容易导致疲劳感是一方面,再就是在跨越操作的时候容易误按。再一个,Windows系统里一直在左边,而IOS一直在右边,当初不知道是出于什么原因这么整,导致一直到现在还沿用了这种排布

  • 由页小姐姐

    2020-09-02 14:50

    学习了

  • 青丝三千丈

    2020-08-31 16:25

    最近都在讲古腾堡

  • 杨小晗晗

    2020-08-31 09:38

    @肖申克的九叔: 看作者最后总结的第二条,“原则是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系”原则只是支撑设计的一个理论基础,以此作为设计的依据,如果需要用户二次确认当然可以反过来放。这些心理学原则并不是用来去遵守的,要依情况讨论。

  • lsongren

    2020-08-30 18:05

    我把它叫做Z法则

  • 肖申克的九叔

    2020-08-28 17:22

    有些重要提醒的弹窗,也会违背古腾堡原则,将确认和取消按钮反过来放,达到让用户二次确认的目的

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票