本篇教程探讨了WEB页面设计教程之国外设计师是如何做网站优化的，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

BlueApron的客户向我传达了他们目前遇到的问题：“我们网站的注册转化率维持在7%，我们对这个有价值的业务产生了疏漏。”BlueApron意识到他们面临着一个提升转化率的机会：如果他们专注于提高信息透明度和注册流程的易用性，将能极大地提升注册转化率，进而增加数百万美元的收益。
注：BlueApron（蓝围裙）是一个食材订购网站，网站会根据客户的口味每周定期派送食材到客户家中，省去线下选购的麻烦。在原始的版本中，操作流程分为3步。第一步，输入姓名、邮箱、密码和邮编。相当于创建账户。
注：第二步，下订单。输入收件信息。
注：第三步，付款。输入卡号信息。
目标
BlueApron的业务目标是每周增加500个额外的有效订单，相当于超过1700万美元的收入，然而事实是BlueApron并没有花时间去优化或理解他们现有的注册流程。所以我们征求了符合以下条件的7位用户的意见：
· 对产品不熟悉
· 家庭收入超过10万
· 25-35岁之间
用户访谈
我们记录了受访者的注册流程，同时展开了访谈。我不会深入研究测试结果，不过有许多结果存在共性：
1.当用户初次注册的时候，他们的疑惑主要集中在产品的操作逻辑上，不知道产品到底是如何运作的。
2.用户在注册完成之后才被要求明确自己的饮食偏好，而非注册过程中。流程中缺乏偏好设置会导致结果的不确定性。
3.费用的结算方式表达不清，导致用户不得不自己去心算，最终用户会对每一餐的花费感到困惑。
4.【快递窗口】一栏填写的并不是快递窗口，而是快递日期。
通过调研，我们明确了很多使用流程中的体验痛点。在坚持到了最后一个步骤的用户当中，只有42%的人成功输入了他们的卡号信息并订购。由此可见，大部分的用户在注册流程之初就离开了！这个问题亟待解决。
“我很难对这个公司产生信任，感觉他们向我隐瞒了很多信息，有种要被骗的预感”——用户访谈节选
最终的方案分别为网页和移动端提供了一个全新的注册流程。我在其中负责制定战略、绘制线框图、设计，以及将最终方案交付给BlueApron团队。
 
新的流程
更新后的注册流程通过更加人性化的UI解决了调研过程中收集到的绝大部分问题。
新方案采用了一个固定的顶部导航来创造一种明确的进度感，该导航展示了流程中全新的4个步骤：欢迎，偏好，快递，付款。这个导航让用户在操作过程中对前后的步骤都有清晰的认知。友好的文案和帮助提示贯穿其中，在之前用户产生疑惑的地方均加入了产品相关的提示信息。
我的假设是用户能够没有任何阻碍地走完这4个步骤，创造更高的转化率和更低的流失率，最后达到每周新增500个订单的目标。
流程中的导航清晰地展现了每个操作步骤
第一步：欢迎
“是什么”、“为什么”、“什么时候”、“怎么样”，如果用户在输入个私人信息的时候无法获知这几个问题的答案，他们就会感到十分不适。我们不能假设用户已经从过往的购物经历中收集到了关于这些问题的必要信息。所以如果我们想要创造一个简单、流畅的操作流程，就需要去回答这些问题，以便让用户没有顾虑地继续：
1.是什么：BlueApron会送什么东西给我？我可以根据自己的饮食偏好来自定义吗？
2.为什么：在线订购为什么会比超市购买更好？有什么好处？
3.什么时候：这些食物什么时候能送到？
4.怎么样：具体怎么收费？
注册的初始步骤充分展现了业务之于用户的价值
新的欢迎页去掉了输入姓、名、密码等会产生阻碍的操作，这些操作在这个步骤并不是必要的。姓名可以在快递运输过程中收集，密码则可以在付款后获取。欢迎页仅要求输入Email和邮编，并且有效地向用户传达了BlueApron高品质、个性化、优惠、零负担等信息。旁边附带了一张打包好的食物的照片，并且加了一个免运输费的标签。用户立即就能感受到BlueApron诚信、信息丰富、友好的形象，从而舒适放心地进行订购。
第二步：偏好
在原始的流程中，用户的饮食偏好并没有得到重视。用户无法指定自己的饮食限制，也不能在一个地方修改他们的家庭、饮食或快递的偏好。我在流程中引入了一个新的步骤——“偏好”，用来收集与整个BlueApron体验相关的自定义选择。
由于这个步骤实际上比较复杂，并且包括3个部分（家庭、饮食、快递），因此UI拆分成了3个偏好选项卡（子步骤）。每个选项卡的底部都有一段摘要，记录了用户的自定义选择并总结成一段可读性很强的小结。举个例子，如果用户选择了素食、鱼类和贝类，摘要就会变成，“基于你的偏好和目前的选项，你将会收到鱼素者菜单中的食品”
注：鱼素者，只吃鱼和素食的人
注册流程中的偏好设置
你注意到啦！用户现在可以选择他们不吃的食物了。鉴于美国人可以吃这6类食物中的大部分（牛肉、羊肉、鱼肉、贝类、猪肉、禽类），我将他们设置成6个默认选中的选项，然后让用户去选他们不吃的食物。如果用户选择了素食，其他荤食选项将会随之自动去选。
本次设计中有一件趣事。当我们进行测试的时候，用户享受其中并说，“这个过程感觉像游戏一样。”区分明确的元素、输入的最小值、摘要，带来了快速有趣的体验。现在用户已经表达了他们对家庭、饮食和快递的偏好，已经准备好掏钱吃饭了！
 
第三步：快递
快递部分并没有完全地偏离旧版页面。主要的变化在于把右侧的摘要面板移除，以及把偏好设置单独拉出来成为了一个步骤。最后界面中就只有一个比较传统的形式，仅要求玩家输入姓名和位置信息。因为这个步骤并不是用来付款的，因此没有必要向用户展示订单的摘要。订单摘要会带来花费时间成本的回顾思考，同时还会引发一些疑惑。我们把这部分放到最后的步骤中就可以。
注册流程中的快递设置
在流程中我们强调了一些事实：快递是免费的，并且食材都由冷藏箱打包。这个做法鼓励了用户，同时降低了流失。
第四步：付款
正如我提到过的，在原始的版本中只有42%的用户坚持到了最后一步，输入卡号信息并订购。很多流失可能都是操作过程中缺乏充分提示信息引发的。用户希望在最后一个步骤之前就能获取需要的信息，但是当他们到达了付款步骤的时候，他们还是充满了疑惑，于是他们往往会离开。
注册流程中的付款步骤
在新的流程中，我们在价值展现和每个步骤的细节说明方面都做了优化。当用户到达付款步骤的时候，他们会处于一个更好的认知状态去输入他们的支付信息。
有一个比较有趣的变化，现在你可以在不输入付款信息的情况下创建一个账号了，你的偏好设置也会被保存下来。这样一来，你就可以在输入付款信息之前看到食材管理面板。我们认为这个做法可以大大地提升注册转化率，但我们真正关心的数字其实是订购转化率，而不是“用户”转化。
在这个步骤中，用户需要创建一个密码（与原始流程中的第一步相对应），此时他们已经位于协议的最后一步了。现在回想起来，我个人更倾向于在用户完成了注册并激活邮箱之后再要求他们去创建密码，这样可以降低这个步骤的复杂度。
在右侧，一个摘要全面地展示了食材数量，饮食概况，快递，费用明细等信息。此时，用户就应该获得了所有与完成一个订单所需要的相关信息，并真正地对这个品牌产生信任。
译者分析点评
1.原始的流程与问题
从资料图中我们可以看出，原始的流程仅停留在满足业务需求的层面，订餐需要哪些信息，网站就设计了哪些功能，并没有从用户操作的角度去考虑。这就造成了用户操作时缺乏动机和认知的问题。
我们可以从新用户的角度去走一遍原始流程，就能发现不少问题：
1.1.注册：输入姓名/邮箱/密码/邮编
在注册步骤，除了信息输入外，界面没有任何的提示说明。这个网站是做什么的？我为什么要输入这些信息？...用户无法带着这些预知去进行操作，自然就会感到不安。
1.2.订单：输入人数/姓名/地址/邮编/邮箱/手机/快递信息/备注，查看订单摘要
在订单步骤，用户仍旧无法获知关于这个网站的任何资料，网站还进一步要求用户去输入更隐私的信息，并且姓名/邮件/邮编等信息在前一个步骤已经输入过一次。到了这一步，用户基本上都会选择放弃，没有人会愿意在一无所知的情况下就将自己的隐私暴露给别人，因而摘要在这里也就显得没有意义——你甚至不知道你买了什么
1.3.付款：输入卡号信息，查看摘要
在这个步骤，摘要起着承上启下的作用，放在付款步骤是必要的。付款是一个十分严肃的行为，这里意味着玩家要在不知道这是什么，不知道能收到什么的情况下去支付一笔数目不小的钱。这就是为什么有的用户会觉得这是一个诈骗网站的原因，因为只有诈骗网站才会如此遮遮掩掩。
一般来说，新用户产生购买欲望并完成购买，需要经过这样的历程：
认知：认知需要保证基础的3个部分
基础认知——了解业务内容；
好奇与驱动——知晓业务的优势，以及能够获得的实际益处；
持续的信任感——明确感受到业务的安全可靠。
参与：将信息整合归类，符合用户认知，保证用户操作流程的通畅无阻。像这种拉新为主的业务流程，最好遵循循序渐进的设计原则，降低参与的门槛，然后逐渐提升后续的操作要求，不要让用户被一开始的复杂操作和巨量信息吓走。
转化：当用户充分信任了业务，流畅无阻地操作完成后，才能保证转换的顺利进行。
 
2.新方案设计分析
我们可以从上面提到的3个角度去分析作者提供的新方案。
认知：第一个步骤对业务内容和优势做了充分解释，在后续步骤中，则采用标题+副标题的形式来继续强化用户对业务的认知。并且通过强调新鲜、运输便利、可随时取消、自定义等优势来吸引用户。
参与：拆解成4个步骤，相关的信息均收拢在对应的步骤下面，关系简单明了。第一个步骤，欢迎，仅要求用户输入邮编和邮箱，通过低操作门槛+文案配图的方式来鼓励用户继续。
不过我个人认为第二步信息还是过多，每个选项卡下面的摘要意义不大，因为相关的信息就在正上方可以直接查阅。选择不吃的食物这一栏，6类食物仅仅只是一个大概的统计，缺乏严谨和普适性。
 
3.最新实现方案
https://www.blueapron.com/users/sign_up
BlueApron网站已经经过多次的优化，在2018年12月的版本中，信息更加清晰，网站也让人感觉更加“体面、可信”了。
首页使用视频+图文介绍的方式生动展现了BlueApron的特色和吸引力，尤其是大面积的视频展示感染力很强。
当然注册步骤也有了比较大的优化。
3.1.欢迎
排版优化：按照视线从左到右的原理，将最具吸引力的配图放在左侧，右侧则是操作。两侧的信息放在一起产生了强烈的暗示：你也可以获得这么精美的料理，在这里注册就可以。解释性文案则放在底部，毕竟人眼更青睐图像。
降低认知和操作门槛：顶部导航变成了3个，并且增加了脸书注册方式，从心理预期和操作上都降低了用户的负担。
3.2.计划与价格
到了这个步骤大家可以发现，顶部的导航步骤从3个变成了4个！前面刻意用3个步骤来吸引用户继续的意图不言而喻。
信息简化：正如前面所说的，作者的优化方案可能还是存在信息过量的问题。最新的版本延续了之前的设计思路，去掉了快递信息的设置，将饮食偏好设置简化成3个套餐，用户仅需选择人数和套餐。整个页面显得纯粹简单。当然，这个界面可能还是让用户产生一定的焦虑：每个套餐里面有什么，万一有我不吃的怎么办？ 因此官方提供了一句提示：结算完之后可以进行饮食偏好设置。
需要注意的是，第一步的解释说明文案仍旧在底部，说明这个版本非常重视建立安全可靠便利的业务形象。
3.3.结算
结算步骤将之前方案中的快递和付款操作结合到了一起。可见最新版本仍旧沿袭了之前从简到繁的设计思路，先把简单、吸引用户的内容和操作放到前面，当用户已经被吸引，信任企业并愿意订购的时候，再让用户进行高阶操作。
其实这也正是许多内容向产品的设计思路，先让你看看网站或者APP里面有什么精彩内容，当你被内容吸引想要参与转发评论的时候，系统就会提示你进行注册。比起一开始就让用户注册，被内容吸引或者过滤后的用户，操作意愿会更强，自然地，转化率也会随之提高。
新浪微博中，用户会首先以游客的身份尽情阅览各种有趣的热门信息，当用户想要发布评论（可以输入文字），点击发送的时候，系统就会提示用户注册。被内容吸引的游客注册意愿会更高
以上就是本文的全部内容。最新版本的全部流程大家可以通过点击前面的链接来完整体验。作者另外还提供了一个移动端的设计，不过差别并不大，算是一个移动端适配，因此没有放上来。    

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！