赞助商
立即赞助

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

产品经验3年前 (2021)发布 流光
2.8K 0 0

伯斯塔尔法则 Postel’s Law

  1. 简介说明

论表述

接受多变,输保守。

论背景

该原被称为鲁棒性原(Robustness Principle),1980 年,Jonathan Bruce Postel 在他编写的最早期的 TCP 协议规范中有到:

Be conservative in what you send, be liberal in what you accept.

对送的内容持谨慎,对接收的内容持自由。(直译)

至此之,该原理便被称为伯斯塔尔法则(Postel’s Law),泛应用计机协议以及系统控理论中。虽最近几年计机界中出现一质疑伯斯塔尔法则的声音,但并不妨碍其核心思想被应用 UI/UX 的领域。

该理表达的最核心思想是:系统/产品应保有一定程度的容错能力。

  2. 设计案例

允许用户进行任何操,即便是错的或无效的

正 Lyle Mullican 在《Your Website has Two Faces》中写到的,应用(或Web)应当具备两幅面孔,一幅给人看,一幅给机器看。

在给人的那幅面孔中,应用必须受用户所有形式的,或错的、或对的、或无效的操作。而在给机器的那幅面孔中则必须把用户输入的那些「不靠谱儿」的命令转译成机器得懂的内容。

思维和运模截然不,任意信息理解和记忆都偏于模糊、可变和多意。比如数「9」记忆可以是「9」、「九」、「nine」、「IX」、「玖」等等,而认进制「1001」,你系统绝不能允许用户输入「1001」。

设 UI 界面时,我们也应当包用户行的所可能的操作,他们可能会搜索框里输入任何奇奇怪怪的内,但的产品不能因输入的内奇怪崩溃、闪退、强制报错。

案例1:淘宝搜索的各种自纠正

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

即我输入的是「phone」、「iphonw」,甚至是「pingguishouji」(注意我输入的是 pinggui),它依然够给我想要的结果,当然这需要贝叶斯方法的协助,但我们需要了解背后实现的概率论原,我们只需要知道这个结果是符合伯斯塔法则的。

另一方面,法则中的容错同样现在搜索的结果中,用户输的是错误的信息没错,系统没有崩溃也没错,但是还不够。我们还需要在一定程度上智能修正用户能输错误的信息,并预测他们的意图。帮助用户修正信息和操,是今展的必趋势。

案例2:bilibili 安卓端头部可触发侧边栏的域

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

Bilibili 的安卓端计的也有思,头部域除了「搜索栏」和其个按钮之外,任地方点击都能够进入侧边栏,即使没有点击「三条杠」,因为这三条杠实在是了,用户极有可能没有点击,所以干脆扩大了可触发的热。

对用户可以进行的操作定义边界

可是有候就是不希望用户输入那些奇奇怪怪的内容,进行那些奇奇怪怪的操作啊。

是,我们不希望用户任性随意执「rm -rf」,我们不希望用户输入数时候输入单词或是文,所以我们需要用户可操作边界出明确定义。

案例3:器输入时的键盘

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

行纯数字输入时,淘宝会强制键盘只显示数字键盘,这一种明确的界义。当然也许会还能输入符。错,的确可以输入符,输入符淘宝不会崩溃,但会提示数超出范围。

案例4:户名/昵称的边界定义

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

另一个典的例子就是设定户名。一般情况应或者产都会非明确的示户户名应该使么样的格式,如几位字符,字母开头,特殊符号,可使哪几个符号等等。

如果操作是错的,及时给反馈

但是定义边界明显还够,就算给了边界,户还是可随心欲的输入。户在淘宝输入购 999 个 iPhone,在设定户名时输入任意字符,哪怕是边界之外的。

时就需要及时的反馈。及时的意思是指,就在用户的错误操之立马反馈。

案例5:淘提示超出范围

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

淘会提示买 999  iPhone 是不可能的,没那多钱,立刻就阻止了买 999  iPhone 的冲动。

案例6:用户名设定提示

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

用户名是否可用提示常分为两,是在用户输入用户名后实时显示该用户名是否可用,哪里不可用等;第是用户完提交才会提示用户名设定误。两者相比来说,第反馈更加及时,体验感会更好。

  3. 注意事项

实上输出保守常是指程序孔可以表笑嘻嘻,是必须丝不苟,即:「」或「系统」输出命令须严格、严谨,所以伯塔尔法则不仅是 UX 原理,也是程序员法则。

但我们也可以稍微引申一下:界面对用户输出的内同样不能随所欲。确保用户所看到的界面整洁序,并且保证他们能够轻易找到自己看到的内。

反面案例1:Amino,过于奔的视觉输出

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

  4. 小结
  • 允许户的任何操作,必要时给操作边界;
  • 无效或错误操及时给出反馈。

系列位置效应 Serial Position Effect

  1. 简介说明

理论表述

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

理论背景

系列位置效应(Serial Position Effect)是一种心理学现象,它由部组成:首因效应(The Primacy Effect)和近因效应(The Recency Effect)。1913 年,德国心理学家 Hermann Ebbinghaus 在对的研究中发现当回忆一系列项目,回忆的准确性会随着项目在列表中位置的改变而改变,于是创造了「系列位置效应」这个词。

在随后几十年里,Deese、Kaufman、Bennet 和 Murdock 近效应和首效应进了更为详细和深入研究。

研究结果表明,人们回忆一系列单词的准确性单词系列中的置关系如下表格所示:

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

  2. 设计案例

首效应和近效应虽然合在了系列位效应,是针这两者分开进解释或许我们在设计应用系列位效应更有帮助。

首效应

系列最开始几个项目能够更有效、更长久地储存在长期记忆,并能够快速回忆出来。

所以如果一系列速出的,首因效应的影响就小得多,毕竟充足的时间行记忆;如果一系列出缓慢或频繁重复出的,首因效应的影响将会幅增加。这就什么我们永远只记得四六级词汇的第一词 abandon,记不住第二词什么。

当然还仅于此,有注意过 Web 界面的左上角摆放的是么吗?

案例1:web 版 behance、dribbble、花瓣、pinterest 界面

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

年使用 Web 的经验以及忆告诉我们里大概率是一个 logo,并且个 logo 还能回到首页。种固定的设计和操模式每次是首先出现在我们的视野里,并已储存在长期忆之中,我们能在一时间反应出来里是什么东西,有什么用。此外,将 logo 放置在首因的位置还能很地提升品牌形象的识别度和忆度。

近因效应

系列中最近出现的几项(数情况下是最几项)更容易储存在我们的短期忆中。

近因效应受间因素的响比较大,息在短期记忆中存在的间本身就不长(数十秒),如果有外部的干扰,间则会更短。

案例2:造作、网易严选商品详情页

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

所以为了防止用户忘记把商品放入物,电商 APP 会把「加入物」等操作按钮固定在屏幕下右侧,而不会出现在内容序列,为屏幕底部永远是用户最近能够看到地。

案例3:豆瓣、twitter

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

所以一些社交类 APP 了让用户轻易记住发布动态按钮哪里,会把这按钮悬浮屏幕的右下角,也一样的道理。

首因近因界面中的置

界面设中,首末通常指左右下,版式设中,除了左右下,还可以右左下。

案例4:设计中的首位和末位

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

人的阅读习惯对「首位」和「末位」是有影响的,尤是中国周围这一片受中华影响颇深的人民群众,会自在横向阅读模式和纵向阅读模式无缝切换。在进行设计,尤是版式设计时,需要注意我们自带的这种天赋。

不光是整个界面的局,对更加细分的组件设计来说,系列位置效应的影响也是不容许忽视的。

案例5:岛读、读书

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

岛读的卡片标题是竖向的,所以会放在右上侧,阅读的标题是横向的,所以会放在左上侧。

  3. 注意事项

注意点1:快速浏览程中,首因效应影响有

之前谈到,在快速出现的系列中,首因效应的影响是分有的,因为它主要依靠的并不是短期忆而是长期忆。所以,果一个 feed 需要被用户快速浏览,么它的标题必需要有额外的视吸引力,比颜加深、字加大、字重加重,或者添加别的辅助元素等等。

反面案例1:ONE

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

而今的反面案例 ONE 就是一个非常典型的为了文艺范儿,故把标题做的轻细的应用。标题符首因效应的位置要求是没错,但是在快速浏览的过程中,首因效应的作用十有限,导致这细的标题依然没法被用户好地注和记住。

注点2:近因效应的限短

依然是之前提的一个点,近因效应主要依靠的是短期记忆,所以它的效性尤为烈,假如需要某一素充发挥近因效应的作用,要缩短之关的决策所需要花费的间,要让它远于近因效应的位置。

反案例2:少数派付费内容详情页

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

以少数派付费内容详情页为例,页第屏如左侧页所示,没什么毛病,买按钮在近位疑,是我往下滑动,查看详情时候问题出现了,买按钮不见了,在后相长段时里(为详情是长,需要花费数分钟去阅读),我都没有再见到过这个按钮,到详情结束它才又出现在页底部。我在详情部决定买呢?这样我又要经历「回忆数分钟前近按钮」过程,而这疑是增加用户记忆负担。

  4. 小结
  • 在一连串的内容当中,用户更容易住一个和最一个;
  • 首因效应作用于长期记忆,近因效应作用于短期记忆。

欢迎关注者的微信众号:「超人的电亭」

让设计更有说服力的20条经典原则:伯斯塔尔法则、系列位置效应

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

简介说明 1. 原理表述 当界面被设计得足够美观时,用户往往会容忍一些较为轻微、影响较小的可用性问题。 2. 实验背景 1995...
美即好用
前言:停更了一年,因为二手换了份工作,也换了个领域——车联网,初踏入这个领域,满眼懵X,作为设计师,不能单单从把自己固定...
工作记忆模型
简介说明 1. 理论表述 彼此靠近的元素倾向于被视为一个组。 2. 理论背景 邻近性原则是格式塔组织律中的一个部分,是简洁法...
设计原则
聊过了机器学习的基本原理及模型层面的设计要素,即「数据」和「指标」,接下来我们将探讨界面层面的设计。 优秀的机器学习...
产品
提问:以下水果中哪一种给你印象深刻呢?老规矩,读完这篇文章你就知道了。 苹果、桃子、香蕉、柿子、梨、橘子、橙子、西瓜...
经验分享
简介说明 1. 理论表述 对于许多事件,大约 80% 的影响来自 20% 的原因。 2. 理论背景 1896 年,意大利经济学家帕累托出...
帕累托原则
王M争:「所见即所得」原则我记得在之前的文章中就提到过,但是没有详细说明。最近在体验一些产品时,发现很多交互设计上的坑...
交互原则
简介说明 1. 理论表述 为了更方便地理解这个世界,人类会将接受到的大量信息进行过滤和简化。 2. 理论背景 简洁法则是所有...
简洁法则