Mr.Think

最近在谈一个酒店项目, 需求方是某全国连锁酒店, 名誉三甲. 该酒店现在有一个网站在运行, 但用户体验之差, 实在让人汗颜. 为了深入了解网站功能, 特意注册了一个马甲号试试订房体验. 结果连我这个在网络上浪迹数年的做前端开发的人都足足费够了脑筋. 预订过程中, 鲜有提示, 页面都是直接跳转的, 而不是异步加载, 网站加载速度也是相当的慢(可能得归功于大批的css/js加载请求,还有那张大大的背景图).
下面是我分别用Yahoo的Yslow工具和Chrome的Monster插件分析得出的结果:

Yslow分析报告

Monster分析报告

上面的报告就不用我详细的阐述了. 如果你是行内人士一看就该明白.
我还同时看过几家类型的酒店网站, 也都是在国内比较有名的酒店网站, 性能上都相差不多. 呵. 作为一个服务性交易性网站, 用户体验如此之差, 如何能让你的客人更便捷的订房. 也不知道因为这些操作上的不友好流失了多少营收. 后来又通过英文导航站看过几家美国的酒店的网站, 限于英文水平, 用户体验就不说, 最基本的载入速度和页面界面也要比国内这些酒店网站快好多.
其实不单是酒店这个行业, 再看看政府的网站(最著名的莫过于友情链接量绝对第一备案中心的网站),以及大部分企业网站,再看看国外的同类型的网站. 差距, 真的不是一点点. 上个月中旬, 老板朋友公司为上海电视台制作的一个交友类网站, 因为第二天上级领导要来验收, 第一天下午找到我们, 让我们帮着改一下页面. 一看, 不兼容, bug很多, 还有错误页面, 问题多多. 结果对方要求很简单, 只要兼容某一版本浏览器就行, 不要有错误页面, 有些页面放张图片即可. 汗. 原来, 这网站只是为了给领导看的.
网站的主体永远都是用户. 网站的一切行为, 都应从用户的角度出发. 做用户体验, 首先就是要忘掉自己. 国内网站与国外网站的总体差距, 真不是一点点, 就像是百度之于Google的差距. 我坚持用Google, Google无法用了我就用SOSO. 远离百度, 珍爱生命. 我会跟我所有认识的人说这句话, 有些人会说不爱国, 这与爱国无关. 中国绝大部分企业只知道赚钱, 没有责任感, 无良. 比如百度. 而像Google、腾讯这些会向用户提供很优秀的免费产品, 会推动某一行业发展的公司, 才是真正值的尊敬的.
下面是我针对本文中某酒店写的方案中部分摘录, 有兴趣的可以看看,欢迎拍砖.

现行网站在功能上已能满足用户最基本的需求，但在网站载入速度、功能模块设置、界面设计、用户操作体验等方面仍有很多欠缺。这些欠缺直接影响到了用户在网站中的交易行为，也因此流失掉很多潜在的营收。具体细化到XX网站，网站缺陷上有以下四个方面：
1、网站加载速度慢
加载速度是用户体验的第一要素，无论网站中有多么诱人多么实用的功能，如果用户打开网站很费劲，相信对他的兴致也是一个很大的打击；通过前面的分析报告也能看出，引起加载速度慢的原因，主要是要加载的图片及样式文件太多，在中国现在的网络带宽环境下，用大图（如XX现网站整站背景图）做背景图是一个不好的选择；
2、网站整体布局不合理
XX现在的布局宽是800px，而现在的显示器绝大部分都在1024以上，所以这种布局宽度对用户很不友好，应栅格化布局为950px或960px宽；
3、首页模块分布不合理
首页功能单调，不能让用户在第一时间很明了的找到网站的核心功能。导航菜单有些混乱，比如“XX新闻”菜单完全可以拿掉，而用一个独立的小模块展现；有些不重要的模块占据了重要的位置，比如头部通栏幻灯片，完全可以缩小一半出来放预订的功能导航；左上角（会员登录区）是用户进入网站的第一视觉，更应该放网站最核心的预订功能，而不是登录；
4、用户体验不友好
网站用户体验的重要性，不亚于网站的任何一个核心功能。任何一个核心的功能都是基于用户体验的。现行网站的功能模块缺少向导性的提示，比如预订功能，每一步都应该有一个明了的提示信息，这样当用户不明白该怎么做时就能很快的找到解决方法。而不是任其盲目的点击。所以，整站也缺少一个用户帮助中心，告诉网站所有的功能如何正确操作。
5、兼容性欠佳
现行网站仅兼容于IE浏览器，而对于很多使用Chrome、FireFox等标准浏览器用户却未能提供很好的兼容方案。比如预订选项的选择城市功能在Chrome、FireFox下均会错位。

通过上文中对现行网站的劣势分析，以及我们专业的前端开发人员对同类型网站的性能研究，在前端性能上，我们将在开发过程中，做如下几点的优化：
1、界面设计方面
新网站界面将以960px宽删格化布局网站，与XX”设计时尚”理念相贴合。界面将由专业的web网站设计师出图，充分考虑实用性与美观性；
2、前端开发技术
网站前端开发部分将采用符合w3c标准的xhtml、css、javascript、jQuery、Ajax等技术实现整站的结构层、表现层、行为层的相互分离。底层以xhmtl+css构建符合语义化的页面，采用css sprite技术减少整站图片的加载请求，用javascript、jQuery、Ajax实现行为的交互。前端开发过程中将结合后台开发，充分考虑功能的实用性，用最简洁明了的方法实现最完善的功能；
3、用户体验部分
我们有专业的用户体验研究人员，将会通过专业的分析工具，统计出用户的操作习惯，针对网站的每一个功能做出以用户为中心解决方案，细化到每一个按钮，每一张图片的位置与展现方式；核心功能（比如预计过程中，注册过程中）的操作步骤，我们都会简化到最少，并且每一个步骤都会尽可能明白的提示用户如何操作。查询、提交等操作，都将用Ajax技术结合后台语言实现页面异步加载，以减小用户的等待时间。 另外，我们还会加入完善的帮助中心模块，让用户能在不知所措的第一时间找到解决的方法；
4、前端代码优化
前端代码的优化除了在前端开发过程中编码标准，不沉冗，还将考虑对搜索引擎的友好性，将以符合语义化标准的代码呈现前台页面。整站完成后，将对整站的CSS、javascript文件做相应的拼合处理，以减小网站的http请求量，加快网站运行速度；
5、兼容性
开发过程中将以ie6、ie7、ie8、Chrome、FireFox为底层测试浏览器，由专业测试人员调试每一个页面的兼容性，以保证网站在各浏览器下的完美兼容。