互联网设计哲学-The Psychology of UI Design

2020-03-21 Data from Paul Boag

第一章-用户是如何思考的（how users think）

1.1 大脑是如何工作的-How the Brain Works

我们远不如我们所相信的那么理性。实际上，我们的许多思维过程仍然是由我们的进化根源驱动的，即使在当今的现代世界中，这也极大地影响了我们的行为。心理学理论：

1. 损失厌恶-Loss aversion
2. 《思考，快和慢》-“Thinking, Fast and Slow”

我们的大脑很大部分是基于古代的爬虫类大脑，所以很多我们的潜意识都是基于此，比如我们会评估风险，使用的技术之一就是“对未知的恐惧”。对于我们日常熟悉的东西，是安全且可取的。这不代表我们可以抄袭其他已经很熟悉的网站，也不代表我们永远不能重新设计。
大脑是损失厌恶的，所以当用户要付出金钱，个人隐私的时候，大脑会感到不满和厌恶，所以我们在要求用户作出决定和选择的时候，必须向大脑努力证明他们将获得的压倒性价值。举个例子，apple官网不仅像我们展示这个产品的功能都有什么，并且向我们展示产品可以如何使用，如何帮助人们生活，这使得我们的大脑更容易接受。同时，这也运用到了大脑无法预测或者感受未来一段时间的生理特征，比如网站的预购，花呗，分期，促成了我们的消费，我们会在当下担心一下子付出的巨额财富，但是如果可以将这样的消费放到未来6个月去分期支付，那么大脑对于未来的构想总是好的，就会很快作出决定。
但是我们的大脑并不是只有原始大脑而构成，《思考，快和慢》这本书中提出系统1和系统2的概念。
大多数人会用系统一来思考事实，比如法国的首都在哪里，或者1+1等于多少，属于本能决策。但是系统1虽然快速高效且不会给我们的大脑带去负担，但是也会出错，当我们选择相信一个人的时候，我们可能会基于他以前的历史，或者它的样貌而信赖，忽略那些现实的概率问题，比如你遇到一个好人的概率是20%而遇到坏人的概率是80%，这是我们所不具备的知识。
我们希望用户积极使用系统1而不要过度到系统2，希望用户使用网站就像开车的肌肉记忆一样，不用过多的思考，就可以完成自己的想法。

1.2 用户如何做决定-How Our Users Make Decisions

我们无法去改变用户决策的进程，但是我们可以学习和了解用户做决定时候的4个特征。

• 懒惰-lazy approach to decision making

我们一天中会做数千种决定，这些决定也不会导致什么大的灾难，比如决定我要喝水，今天要穿什么衣服，这些类型的决定是自动化的，甚至我们没有意识到我们自己已经做了决定，这些决定也是由我们的系统1所决定的。但更多具有挑战性的决定，比如今天午饭要吃什么。买什么样子的电脑，这就会唤醒我们的系统2，我们是有意识的作出决定。但是我们通常情况下大脑希望不唤醒系统2，尽量通过系统1来实现我们的目标，这就是为什么节食很难，因为要唤醒系统2，参与计算卡路里，而通过系统1我们可以简化这个问题变成，我饿了或者吃什么能让我变得更健康。
同理，当我们的网站需要用户唤醒系统二来作出决定的时候，比如，订阅（subscribe），我们应该简化这一过程，不要让用户想的太多，强调订阅的积极好处，或者我们至少可以做到避免用户感到不快乐，比如我们承诺我们不会向用户盗取个人隐私，我们不会发送垃圾邮件，用户也可以决定订阅消息的出现频率。

• 我们的看法影响了我们的决定-our perceptions shape our decision
• 他人影响了我们的决定-the influence of others on our decisions
• 时间削弱我们在做决定时间的信心-time undermines our confidence in a decision

*Dark Patterns
这是是网站和应用程序中使用的技巧，可让用户执行他不想要的事情，例如购买或签约。
然而错误的使用会让公司或者平台蒙羞或者失去用户的信任。
比如amazon，如果你想要关闭你的账户，不是登出，而是关闭，消除账号，需要层层叠叠的关卡才能关闭，并且需要人工授权。
dark patterns就是一个迷宫，很容易让你进来，但是想要出去，却很难。_dark patterns通过颜色模式，时间来诱导你作出决定。

1.3 学会了解你的受众-Getting to Know Your Audience

收集数据⬇️
第一步：市场调研部门
第二步：联系客户支持部门
第三步：销售团队
调查问卷
面对面交谈
焦点小组
分析数据⬇️
目标明确

1.4 把信息转变为洞见-Turning Information Into Insights

• 可视化数据方式—persona 用户画像
• 移情映射（又称同理心地图）

• 用户旅程图（Customer Journey Maps）

在理想的世界中，人们成为忠实客户的旅程将是一条直截了当的高速公路：查看您的产品。购买您的产品。使用您的产品。重复。
1.找到客户目标和自己的目标相吻合的最佳点
在开始进行旅程映射之前，请确定您的业务目标。您在客户旅程中进行的任何营销和沟通都应着重于帮助您的品牌实现这些目标。
但是，必须承认客户的目标可能与您的目标不同。例如，假设您的目标是销售更多具有更好利润率的新型改进镜片的太阳镜。同时，您客户的头等大事可能是购买符合其个人风格的太阳镜。镜头保护可能是他们的第二甚至第三优先。
考虑一下您的营销和传播策略如何帮助您的客户实现目标，同时也使您更接近目标。
2.确定客户旅程中的所有沟通接触点
传统上，您什么时候与客户交流或互动？列出这些时刻，并根据它们在旅途中的发生时间进行分组：购买前，购买和购买后。例如，您可能决定购买阶段中的重要时刻是引导客户通过您的网站购买其购物车中的商品。但是您可能会在购买时刻之前注意到其他交流接触点，例如您的网站向客户确认已将商品添加到他们的购物车中，然后建议相关产品。
寻找所有这些接触点可以使您的团队迅速陷入很多细节和微交互中。
3.识别痛点和愉悦时刻
您的客户在尝试实现目标时在购买前，购买后和购买后感觉如何？
例如，您的客户是否会为您的网站使浏览变得轻松而感到高兴，但对购买产品的困惑感到沮丧？
寻找您的客户可能会遇到负面体验的时刻。您的团队中谁参与了这些接触点？您的网页设计师？您的营销团队？您的撰稿人？还有其他团队成员可以合作并改善情况吗？
4.亲自体验客户之旅
想象一下客户在旅途中的感受是很有价值的，但是亲自体验一下可以发现急需的见解。
如果您的企业在线运营，请打开浏览器并体验成为客户的感觉。同样，如果您有实体店，请进入销售产品的地点。然后，问问自己您遇到的主要沟通接触点。他们工作得好吗？他们是否帮助您完成了旅程？缺少了什么？
5.可视化您的客户旅程图
不仅记录您的客户旅程和沟通接触点，而且可以实际创建它们的可视化地图。不必是经过精心设计的可视化文件，只需将您的每个接触点写下在单独的便笺或纸张上，然后将它们固定在墙上即可。
通过执行此练习，您可以帮助您的团队全面了解整个客户旅程。您可以组织您的想法，并在这些接触点上共同集思广益，以改变或增加交流的新思路。
确保围绕新的沟通接触点将改善客户旅程的原因创建假设，然后实施和测试它们。如果您的假设是错误的，请返回您的旅程图，重新评估，调整和改进。**

1.5 聚焦一个问题并且解决-Focusing on a Problem to Solve

你的产品或服务满足什么需求？

一方面我们必须知道我们正在使用产品或服务满足的基本需求，另一方面，我们必须了解用户在决策过程中的需求，他们正在寻找关于我们产品或服务的什么答案，以及他们将才去那些步骤才能做出决定。

第二章-认知载荷（Cognitive Load）

2.1 什么是认知载荷，同时他为什么如此重要-What Is Cognitive Load and Why It Matters

经典心理学实验《看不见的大猩猩》
链接：https://www.bilibili.com/video/av59827203/
在这个实验中，或许我们能在完成任务的情况下仍然看到大猩猩的出现，但是我们确实很难去关注到背景换了颜色，甚至实验人员中途离开，这就是这个实验对我们的意义。
增加用户的认知载荷会让用户减少对网站的信任—淘宝更新后的界面？
但是在有些情况下，比如学习驾驶车辆，在学习的前期是非常痛苦的，要学会同时注意道路上的各种情况还要学习操纵驾驶设备，但是当学完上路开了几年后，就完全不再担心。—前期付出学习成本，后期收益。
对于向微信/淘宝这类app来说，并不是说他们界面设计设计的有多好，而是用户已经熟悉了他们所要的这些服务的功能已经可以自动实现，已经形成了固定思维模式。
再比如我们通常采用过程性知识来解决问题，比如我们不能直接陈述我们是如何找到网页的搜索框的，但是我们可以知道先去寻找，比如右上角，然后就在框子中输入，然后点击右侧按钮。所以对于我们而言，要理解用户通常情况下会怎么做，尽我们最大努力去匹配他们的知识，减少他们的不熟悉感。

2.2 使你的网站更加简单-Introducing Simplicity to Your Site

1.减少杂乱，不要让用户分心。
为此，我们需要对我们出现的每一个ui元素都进行审查，不要再问我们为什么不上线这个，而是回答，为什么我们要上线这个，所以我们需要审查。
审查过程：我们可以删除这个吗？我们可以隐藏这个吗？我可以弱化这个吗？
2.创建网页视觉层次结构
我们的目的是呼吁用户行动，但是我们需要划分层级。
比如，分组。在银行卡上，我们可以看到数字是按照4位划分的，这不仅帮助用户匹配了心理模型，也让视觉层级看上去更有序和简洁。

2.3 与用户的心智模型一起工作-Working With the User’s Mental Model

网站设计者和初次使用者对于这款产品的心智模型是不同的，所以我们需要可用性测试，来让网站设计者知道或者了解用户的真实使用情况以及试图理解他们的心智模型。
*optimalworkshop 用户研究
https://www.optimalworkshop.com/optimalsort/

2.4 避免选择瘫痪-Avoiding Choice Paralysis

用户会因为过多的选择而陷入选择困难。
hick定律：选项越多，做出选项所花费的时间就会越长。
比如当用户希望买一台电视机的时候，面对网页上众多选项，反而变得不知所措。
这时候我们可以引入buying guide （添加保存机制，避免用户推出后重新登陆信息丢失）


**

2.5 如何让事情感觉更简单-How to Make Things Feel Easier

情绪可以改变和影响人们的认知，因此我们需要尽我们所能去调整和改善用户的情绪。
交互动画设计可以让人充满满足。
它可以提供触觉，视觉效果，互动让人满足也增加了个性。
但我们也要避免动画分散用户的注意力，使人分心或者不快。

*卡诺模型
卡诺模型（KANO模型）是对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。在卡诺模型中，将产品和服务的质量特性分为四种类型：⑴必备属性；⑵期望属性；⑶魅力属性；⑷无差异属性。

• 魅力属性：用户意想不到的，如果不提供此需求，用户满意度不会降低，但当提供此需求，用户满意度会有很大提升；
• 期望属性：当提供此需求，用户满意度会提升，当不提供此需求，用户满意度会降低；
• 必备属性：当优化此需求，用户满意度不会提升，当不提供此需求，用户满意度会大幅降低；
• 无差异因素：无论提供或不提供此需求，用户满意度都不会有改变，用户根本不在意；
• 反向属性：用户根本都没有此需求，提供后用户满意度反而会下降

第三章-催促型设计（Persuasive Design）

3.1 操纵的危险-The Dangers of Persuasion

我们有时会会使用前文所提到的Dark Patterns，因为它可以帮助我们完成绩效任务，诱导更多不愿意做这件事的人做这件事，然而企业中也没有一条伦理准则，或者一条底线来规定我们设计的时候到底怎么操纵用户，但是有一点我们需要注意，尽管短期来看我们确实达到了我们的阶段性目标，但是我们可以关注到我们的回头客的人数在下降，品牌忠诚客户的数量在下降，这有可能是因为我们使用了过多的dark pattern，让用户不计后果的去做出没有经过大脑的潜意识行为。
拿booking来举个例子，用户确实能感受到那些放大的图标，那些快速流逝的时间敦促她赶紧下单，但是当谈及他为什么会选择booking来定房时，他指出booking的易用性很高，他可以为此忽略那些操纵他的行为，有趣的是，他所谓的易用性正是因为网页设计师在操纵他，潜意识里他已经被操纵了。
这或许只是一个特别的例子，该用户在知晓自己被操纵的同时仍然愿意选择这个网站，然而我们面对的是成千上万的用户，他们会作出的选择各不相同，但是在这样的电子时代，一个心怀不满的用户会毁掉整个品牌，有一个心怀不满的用户在某处发表了一个评论，就会有第二个用户在底下留言，评论，会有更多的人参与进来，会有更多的人看到，会有更多的人对这个品牌产生不信赖，品牌因此失去了忠诚的用户。
当用户在消费的过程后感受到自己被操纵了，是最为悔恨的，比如说一家装饰良好的淘宝店，声称自己用的是最好的材料，最后的设计，售价400并且因为全手工定制的原因不支持7天无理由退货，那么当用户心怀期待的买下后，发现根本不像卖家所描述的那样，就会心怀悔恨，感受到自己被欺骗了，从而对卖家做出不良的评价，在商品底下给出自己的评论，从此这家商店可能再也没有顾客会购买了。

3.2 积极看待你提供的产品-Positioning Your Offering in a Positive Light

您的网站有意或无意地影响了用户对您的产品的看法。 危险在于您做出的某些决定会对它们产生负面影响。

第一：锚定效应
我们是如何为我们的网站，比如订购房间的网站来排序的，是从a-z或者是从评分最高到最低，或者是随机的？我们必须做一个选择，但是我们所做的这个选择会最终影响用户的转化，比如我首先给你展示了最便宜的房间，那么网站的平均预定价格就会有所降低，如果我先给你看最贵的房间，那么由于用户是从上到下阅读的，那么后来看到的房间价格就是相对便宜的，这里的相对是相对于第一个所展示的价格而言。
这就是锚定效应，我们要为用户设置一个锚点，用户就会根据自己的状态来围绕我们给出的锚点来做出自己的决定。
第二：积极构筑你的产品
举例来说，一个公司声称他们的消毒产品可以杀死98%的细菌，但是如果的说你们的失误概率只有2%，其实从理性的角度上来说是一样的，但是我们宁愿选择可以杀死98%的那款产品。
再举个例子，当你想要购买一个产品的时候，你一定会想法设法的考虑他们的优点，能够带来什么，而当你想要拒绝或者筛选一个产品的时候，一定会关注负面的属性，有什么是我一定不要的。

3.3 被用户低估的角色的增值-The Under Appreciated Role of Appreciation

大多数消费者都对公司不满意。 当然，他们会注册一份账号以从中获得一些好处，但是他们知道，注册一份账号给公司带来的好处要大于他们。 但是公司通过给人们额外的回报，提供了使人们感到惊讶和喜悦的机会。
*thank users感谢用户
拿捐助网站举例，就算我们没有点击捐款金额，但是仍然会有一个界面弹出，感谢用户的行为。

但是请注意，这还没完。
当我们提出thank you这一口号时，实际上就触发了用户被‘注视’的机制，人会会感受到有一双无形的眼睛在注视着自己的行为，其实现实生活中并没有。
在我们现实生活中也有很多，以前做的不是很好，但是现在好了很多。当我们有任何疑问时，我们可以咨询客服，诸如给他回邮件，虽然有这个功能，然而并没有会回复，我们虽然知道这会发生，但是如果企业给了我们特定的回复，我们会有额外的欣喜，我们会非常认同这个企业，当然，现在已经很普及了，但是在某些企业中仍然做的不是很好。
再比如说很多奢侈品公司都会感谢这一年来消费较多的消费者，向他们的支持表示感谢，为他们提供定制化的个性化体验，作为消费者或者用户会非常喜欢这种行为，会自愿为品牌推广并且继续成为产品的消费者。

3.4 为什么以及你该如何寻找和减少风险-Why and How You Should Seek to Reduce Risk

比如一些共有的问题：个人隐私的泄漏
我们关心用户的担心并且希望帮助用户减少他们的担心。
查看下面的链接，了解更多。
“your privacy on Boagworld,Explained in Plain English”
⬆️通过简单的语言解释，让用户获取足够的信息支持他们做出理智的决定，让他们拥有控制风险的能力，提供给用户控制感是最好的。
再比如用户在网上购买时会担心无法退换货，会担心自己的账户安全：

告知用户所考虑的风险已经被考虑并且降低，能够让用户更轻松的去完成交易。

3.5 社交背书的巨大潜力-The Power of Social Proof

social proof是一种心理特征，这是一种偏向他人的行为和对他人行为的推定在任何给定情况下他人都是正确的。换句话说，我们倾向于复制他人已经完成的行为，尤其当我们不确定如何应对的时候。同时我们也更倾向于组织结构中的权威人物。
我们应该如何使用社交背书？
诸如米其林，我们都认可这个证书。
诸如现在非常流行的评分和评论的功能，就是提供社交背书的一种方式。

3.6 为什么以及怎么样去获取用户的信赖-Why and How to Gain the Trust of Users

晕轮效应：
是一个人，公司，品牌或产品在一个区域中产生积极印象，从而积极影响他人在其他方面的观点或者感觉的趋势，这是一种认知偏见。举例来说，如果某人注意到一张照片里的人是有吸引力的，穿戴良好的话，根据心理暗示法，会假设照片中的人是好人。但是这是一种感知失真。
对于设计师来说，就是带给用户专业感。

3.7 创建一种归属感-Create a Sense of Belonging

比如苹果和windows就是两种不同的部落，苹果这个部落为创意而提供产品，在这个部落你能够感受到他们的创意，热情，以及对未来的向往和创新，因此，买apple的人也会认同这种价值感，并且成为部落里的已员，部落里拥有相同想法的人会共同交流，共同进步，吸引部落外的人来，壮大了部落。这就是apple打造的品牌文化，这也为用户提供了归属感。
要打造这样的归属感，我们一定要有一个社区。
这个社区是什么，任何社区都需必须建立在某种共有的认同感附近，社区之所以聚集是因为周围都是认可潜在谁区共有价值观的人群，因此才会有人群聚集。因此第一步是考虑这个社区的价值观是什么，所以我们要去探究用户究竟渴望实现什么目标以及如何被这个社会所辨识（也就是被打上什么标签）

第四章-鼓励行动（Encouraging Action）

4.1 吸引高质量的流量-Driving Quality Traffic

试想一下，现在有3个可选的渠道来吸引流量，一种是到你的网站按点击付费的社交网站，并通过电子邮件将转化率发送给您，每次点击付费占据了5%，社交占据了25%，邮件收发占据了30%，你的网站的有效流量转化率是20%，但是如果你放弃点击付费的网站的整体，那么转换率可以提高到27%，但是我并不提倡这么做，因为这会抑制整个网页的转化率，与此同时我们应该做的是将网站的点击付费功能更新，确定和吸引合适的人。

4.2 选择合适的时机来号召用户行动-Pick Your Moment to Ask Users to Act

比如：相比在用户注册时就向他们展示优惠信息，在购买产品或者在产品详情页上展示优惠更科学和有效。
善用cookie，cookie可以记录用户浏览过哪些页面，在页面上停留多少时间，他们是否响应了coupon，因此，合理利用好cookie就可以帮助我们的网站选择正确的时机，为用户提供适当的coupon。

4.3 最大可见性-Design for Maximum Visibility

因为通常来说用户是从左往右的阅读习惯，所以把一些号召性的campaign放在左边比放在右边更容易让用户看到，同时，最好把一些希望让用户点击的按钮放置在中心头部位置，因为用户通常来说都会对这个位置比较感兴趣。

最好将用户注册的界面放在底部而非顶部，因为用户在尚未看到任何有关信息的时候不会选择立刻订阅或者注册，所以当用户浏览完网页后再决定是否要注册，是一个普遍行为。
利用图像而非文字，我们潜意识里面会更喜欢图像，特别是那些包含人或者动物的画面，吸引注意力的网页可能会对我们造成好或者坏的影响，这取决于我们如何转换和利用图像。

4.4 撰写引人注目的行动呼吁-Writing Compelling Calls to Action

第一：把信誉放在炒作之前
不要夸大其词，长久以来会损失信誉。
相反，采取一些标题党的做法，例如：
1.10大方法助你成为更好的游戏玩家（时间敏感）
2.如何。。。。。（如何成为最佳玩家）
3.提出问题（你想成为一个呃更好的游戏玩家吗）
第二：聚焦异议处理
会有用户对产品提出质疑，例如太贵了或者你会不会泄漏我的信息…所以确保网站中有相应的解释，可以给予用户回应，以降低用户的风险。
第三：从情感层鼓励用户行动

4.5 考虑一下点击后的体验-Consider the Post-Click Experience

删除那些不必要的元素
例如：amazon的改变，在用户选择购买后，去除那些和购买无关的信息，只简单的保留和用户付款相关的内容。


维持用户的体验感**
在用户提交表单的时候，我们不能等待用户去提交，我们要主动向用户展示过程，给予用户目标感，让用户减少压力，确保在每一个阶段都提供积极的反馈，了解已经进行的步骤和还需要多少步骤。如何进行表单设计，可以参考下方书目。
推荐书目-《Web Form Design:filling in the Blanks》-2008
简介：表格构成或打破最重要的在线互动: 结账 (商业) 、注册 (社区) 、数据输入 (参与和共享) 以及任何需要信息输入的任务。在网页表单设计中，卢克 Wroblewski 借鉴了原创研究，他在雅虎的丰富经验和 eBay，以及该领域许多领先设计师的观点，向您展示设计有效和吸引人的 Web 表单所需的一切。

感谢您的阅读
翻译和整理 by 嘉艺
2020.03.26

如有任何疑问或机会请发送邮件至email：
[_lucida997@outlook.com]()_