结网–用户体验三要素

用户体验三要素：别让我等！别让我想！别让我烦！

别让我等

曾有很多研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。也许这样讲，各位还不会有太多感触，接下来，我列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%；Amazon每增加100ms网站延迟将导致收入下降1%；雅虎如果有400ms延迟会导致流量下降5-9%。

怎么样？现在感受如何？是不是该马上去做测试工作呢。

这时候你也许会问：什么原因会导致网站打开慢？有什么办法解决呢？别急，我一一道来。以下内容有些偏技术层面，各位需要耐心阅读。

1、减少HTTP请求数

用户在打开一个网页的时候，后台程序响应用户所需的时间并不多，用户等待的时间主要花费在下载网页元素上了，即HTML、CSS、JavaScript、Flash、图片等，统计显示，每增加一个元素，网页载入的时间就增加25-40毫秒（取决于用户的带宽情况）。

所以，想要提高网页打开速度，就要减少HTTP请求数，方法有3种：

1）减少不必要的HTTP请求，例如用CSS圆角代替圆角图片，减少图片的使用。

2）合并文件，对于文本文件，可以直接合并内容。例如将多个JS（JavaScript的简称）文件合并成一个，将多个CSS文件合并成一个。

3）优化缓存，对于没有变化的网页元素（如页头、页尾等），用户再次访问的时候没有必要重新下载，直接从浏览器缓存里读取就可以了。

2、使用CDN（Content Delivery Network，内容分发网络）

CDN由一系列分散到各个不同地理位置上的Web服务器组成，它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事，就一样要使用CDN了，比如现在的电商网站，几乎都在使用CDN。

3、压缩网页元素

网页中的每个元素越小，下载所需的时间就越少，这个很好理解。现在比较成熟和流程的压缩网页的方式，是通过Gzip，我自己的实操经验来看，一般可以将网页文本内容减少70%以上。

4、样式表放在网页Head部分

这也是我实际操作过的案例，把样式表（CSS文件）移到网页的Head部分，可以提高页面的加载速度，让页面元素顺序显示。

5、把JS文件放到网页底部

网页打开时，所有元素是顺序显示的。由于JS文件的特殊性，其相比其他元素来说，会加载的很慢，在JS文件下载完成之前，其他后面元素的顺序显示将被阻塞，因此把JS文件尽量放在底部，意味着内容能被快速显示。

6、把样式表和JS脚本放到外部文件中

尽管将样式表和JS脚本直接写入网页HTML中，可以减少外部文件调用数量，但是，这样做会增加网页的文件大小。综合来看，将样式表和JS脚本放到外部文件中，也许用户首次访问时会有点慢，但是后续在访问网站时，用户直接通过浏览器缓存就可以用，从而达到减少HTTP请求数的目的，为最优的做法。

写在最后的话：

在提升网页打开速度经常被忽视的一个问题是响应。对于用户来说，每次的操作，不管返回结果是慢，还是快，都要及时予以响应，最典型的例子就是：当用户点击打开一张图片时，是否有百分比数字显示的进度条，就是一个典型的响应设计。

一流的网站用户体验绝对不是一蹴而就的，要进行充分的可用性测试，收集用户的反馈，持续改进。

别让我想

用户不会使用一个网站绝对不是用户的错，他会打开电脑，会使用键盘和鼠标，会打开浏览器上网，经过这么步骤最终到达了你的网站，然后发现网站上一团糟，搞不懂这是什么，那是什么，也懒得学习如何使用，于是就会眼都不眨一下就关闭你的网站。这是很现实的一个用户行为。

在网站能够快速触达用户之后，网站运营人员面临的下一个重要问题就是：如何留住用户？

一、包装好你的网站

1、你是谁

我们辨识一个人，并不需要记住他从头到脚所有细节，看他的脸就OK了；当我们辨识一个网站时，也是同样的道理，网站的Logo就是脸。Logo可以让用户轻松知道网站是谁，无论浏览到网站中的任何一个网页，都能知道这是哪个网站在提供服务。

2、你是干什么的

有了网站Logo，还要告诉用户，网站是提供什么服务的，是购物网站，新闻网站，还是社交网站。尤其是对于一个新网站，清晰的一句话介绍至关重要。

3、你能带来什么好处

这就是网站的差异化优势介绍，相比同行竞争网站来说，用户使用你的网站，好处是什么，可以和“你是干什么的”整合成一句话至于Logo下方。

经过对网站的基础包装之后，我们算是完成了留住用户的第一步工作，接下来，我们希望用户在网站中做进一步的尝试，如何做呢？

二、关注用户及其任务，给予明确指引

对于用户来说，登陆任何一个网站，一定都有其目的。上购物网站是买东西，上门户网站是为看新闻，上SNS网站是为分享信息、联络朋友等，要达到这些目的，一定需要进行一系列操作。如果能让用户以最方便、最快捷的方式完成这些操作，顺利完成任务，毋庸置疑，用户一定会留下。

举例来说，如果是一家电商网站，是否有清晰的站内搜索功能提示，清晰的商品分类导航，醒目的购买按钮，以及灵活的付款结算系统等，这些都是围绕着用户及其任务（网上购物）展开的。因此，在设计网站的时候，我们一定要给予用户醒目、清晰的操作指引，以帮助用户尽快且顺利地进入下一步，下一步，直至最终完成任务（下单付款）。

满足用户，其实很简单，做到贴心、用心、上心，用户自然会向你靠近。

别让我烦

用户都是喜欢偷懒的，如果你的网站操作效率很低，就会令用户烦躁，进而导致不好的体验，甚至出现坏口碑。有一个粗略的说话是，完成任务的难度与其所需步骤的平方成正比，那么，缩短完成路径就是帮用户偷懒，就是好的用户体验。

举个正面的网站实例来说明。登陆美国亚马逊网站，当你进入一个商品页面之后可以无刷新切换商品的规格，比如我要购买一台苹果笔记本电脑，我打开了商品页（大家自己登录试试），商品右侧会有个版本切换的选项，在这里我可以快速查看不同配置的电脑价格，只需将鼠标移动上去，商品图片、价格等信息就会自动发生变化。这种人性化的设计，为想要比较商品的多个版本的用户提供了极高的操作效率，用户自然喜欢。

目标信息要醒目而亲近

在关注缩短完成路径这个问题的时候，优化操作步骤是第一位的，因为我们首先要简化用户的任务。接下来，我们要在任务内部优化指点设备（鼠标或手指等）运动轨迹和眼球运动轨迹等细节。根据费茨定律，使用指点设备到达一个目标的时间与以下2个因素有关：

1.设备当前位置和目标位置的距离，距离越短，所用时间越短。

2.目标的面积，面积越大，所用时间越短。

通俗来说，就是如果我们希望用户注意或点击某个元素（如文字、图片、按钮等），那么这个元素就不应该距离指点设备的当前位置太远（比如出现在屏幕的右侧），并且它的面积要足够大。伴随着Web2.0的热浪，网站设计也有了一系列的革新，其中最大的一个革新就是“以大为美”，大大的LOGO，大大的图片，大大的按钮，它们不光看起来更有冲击力，也更方便用户的识别和点击。

提醒方式要温和并及时

除了简化任务流程之外，在用户完成任务的过程中，网站有时需要给用户提供帮助和指引。之前常见的做法是采用弹框方式进行提示，用户需要关闭对话框才能继续自己的任务，无形中降低了操作效率。

最佳的提醒方式应该转向温柔的方式，将打断降低到最低，举个例子：当在你注册一个邮箱时，当输入用户名后，最佳的检验方式应是自动查询此用户名是否可用，如不可用，应给出建议，yeah.net邮箱就做的很好，图略（大家可以登录尝试）。

其实，有时候操作效率的降低，并不是因为功能设计得不够好，或者提示和建议处理得不够好，而是由于强行的塞进了一些用户不想要的信息或任务。比如，用户正在阅读一篇文章，忽然飘出来一个广告挡住了用户想要阅读的部分，用户怎么能不恼火？

经营网站，尽管是盈利为本，但是过分的不重视用户体验，忽视用户感受，小心衣食父母离你而去，并一去不返。

当用户犯错的时候，你是如何做的呢？

在我们做好一切运营优化后，有一种情况需要另外注意，就是用户会自己出错。

当用户出错的时候他也会很烦躁，他不会认为是他自己的问题，反倒会把责任推给网站，所以要尽可能降低用户出错的机会。

举一个网站的例子，当用户登录一个网站时，首先是输入用户名，现在最常见的用户名是采用邮箱。当用户在用户名的输入框内输入邮箱地址时，不可避免的会出现错误，比如少了1个字母，或少写了1个数字，或者邮箱后缀写错了，结果肯定是登陆不进去。用户一定会恼火，最佳的提醒方式应该是什么呢？

当用户输入用户名，光标离开输入框之后，网站应自动校验此用户名是否已注册（可用），如若用户填写错误，应及时给予提醒，如：用户名不存在，邮箱格式不对等，让用户的出错在萌芽时就完成纠正。

再举个非网站的例子。笔记本电脑电源线可能会绊倒人，同时笔记本电脑也会被摔倒地上，这很可能不在保修范围之内，这种情况很糟糕。看看Apple是怎么做的，Apple推出了名为Magsafe的电源接口以减少这种出错，Magsafe采用磁力的方式连接电源线与笔记本，当电源线受到外力时，会自动脱离笔记本。是不是很贴心的设计？

这样的例子还有很多很多，这里不再一一列举。记住：用户是否喜欢一个网站，不仅取决于他使用网站获得的好处，也取决于他在网站中获得的体验，两方面都是用户价值所在，缺一不可。

转自： http://jianshu.io/p/65934891ca45

（关注更多人人都是产品经理观点，参与微信互动（微信搜索“人人都是产品经理”或“woshipm”）