网站界面分析和优化设计技术详解.doc

网站界面分析和优化设计 一、网站界面优化的重要性。web技术的发展，使得互联网用户从单纯浏览信息时代迈入了更加注重交互、更加人性化的时代。网民使用互联网产品已经不仅仅只关注工作效率，而是越来越关心使用过程中的体验。网站界面的本质是让用户做主，操作简便性、强调交互性。在互联网发展的过程中，最初希望通过建立网站来抢占市场、树立形象的企业逐步认识到网站提供优质的用户体验才是可持续发展的竞争优势，而网站服务界面的设计效果是用户体验好坏的直接影响因素。某电商网站Allurent曾经做过一个调查，当用户对某一网站的验较差时，80%的用户表示不会再次访问该网站，60%的用户表示影响到了自己对该商家的整体印象，而40%的用户表示甚至可能不再去该商家的实体店铺。用户不良体验无疑是在与网站界面的交互中形成的。目前，很多商业网站已经充分认识到周到、贴心的网站界面设计对于企业利益获取的重要性。很多跨国公司如雅虎、惠普、IBM微软、苹果、等都先后成立了用户体验研究机构，尝试将用户体验的研究成果应用到界面设计中来，国内互联网企业如百度、腾讯等也都建立了相应的研究团队。二、网站界面优化的核心要素网站服务界面是指网站为用户办事服务和提供信息的网页内容展现方式。关注服务界面，就是要做好网页界面的优化设计工作。基于用户体验进行网站服务界面优化设计，需要将用户体验从不同层次、维度进行分解，提取与网页界面相关的要素，然后才能对相应要素实施具体的优化设计。 Adaptive Path公司的创始人James Garrett对用户体验的要素进行过较为系统地研究，将用户体验划分为战略、范围、结构、框架、表现10个核心要素，如图所示。这5个层面自下而上逐步的从抽象转为具体。图1. 用户体验要素模型这一用户体验要素模型中与界面优化直接相关的是框架层和表现层的四个关键要素，即界面设计、导航设计、信息设计和视觉设计。我们主要讨论界面设计这一主要要素。三、网站界面的优化3.1提高页面响应速度随着科技的发展用户等待网页加载的耐性越来越低。2009年，微软搜索引擎必应（bing）进行过一项调查，研究页面载入速度和其他网站指标是否有明显相关性。根据报告显示，每2秒钟的延迟页面会使用户满意度降低3.8%的，减少4.3%的单位用户收入和减少4.3%的点击数。多项研究结果表明，2秒以内是用户最满意的网页打开时间，用户能够忍受的最长等待时间为6-8秒，如果网页载入时间超过12秒，99%的用户会关闭网页。从用户角度看，网页打开的速度越慢，其心理受挫感会越强，进而会恶化用户对网站的使用体验。目前，百度、谷歌等主流搜索引擎已经将页面响应速度加入了他们的排名计算因素中，成为决定网站权重值的重要因素，可见页面响应速度的重要性。网站应定期对页面响应速度进行测试。例如，可以利用标准化度量工具如YSlow来协助进行前端性能优化。同时采取相应措施改进性能：一方面应尽量减少网页文件的大小。图片和多媒体在修饰网页的同时，也成为影响网页下载速度的重要因素，可将图片压缩或将大图分块成为零散图片来减少图片载入负荷。另一方面可提高加载的呈现效率，选择让页面内容根据重要程度有秩序地加载。3.2增强站内搜索易用性绝大多数功能完善的政府网站都提供站内搜索服务，并将其当做标准功能。当用户无法通过导航系统找到信息或者他们清楚自己所需信息的准确描述时，发起站内搜索将是获取信息最简单、最直接的途径。然而，目前绝大多数政府网站的站内搜索实际效果都不尽人意，有的网站甚至没有设置搜索条。搜索功能不足使得用户面对庞大的政府网站资源无从下手，既降低了用户体验，也降低了网站资源的利用率。增强站内搜索的易用性主要从两个方面入手：一是要让用户易于发现，二是要提高搜索性能。首先，搜索条的位置要尽量统一，且放置在醒目位置。较为通用的做法是放置在网页右上角，并使用与周围网页元素颜色对比强烈的搜索按钮吸引用户注意。其次，搜索性能方面，应用查询建议工具，提供结果筛选功能，在提高搜索查准率的同时，还可建立垂直搜索。查询建议工具又称为提前键入，当用户在搜索框中输入相应词时会自动出现更多相关的搜索词，查询建议工具对于那些不太明确查询信息的正确描述的用户来说尤其有效，目前google、百度都提供了此功能。3.3优化界面细节体验网站建设之初，设计人员往往按照对用户需求的理解和规划方案进行服务界面设计，而这种状况下往往因为关注了一些大的方面，却忽视了一些细节功能的处理。而很多时候，一些细节的优化最能够给用户惊喜、贴心的感受。细节处理的过程实际上亦是用户需求的发现与需求满足的过程。随着互联网技术不断创新，已经出现了一些用于改善网站用户体验的智能分析工具，其中就有国家信息中心网络政府研究中心研发的记录网站用户点击行为的分析工具政府网站页面热力图。热力图收集了网民访问页面的每一次鼠标点击，并将这些点击位置用添加图层的方式在政府网站页面上予以准确标示，是分析网民访问行为的有效工具。在热力图中网民点击越多的地方颜色越亮（黄色），点击较少的地方呈蓝色，无人点击的地方为白色。使用网站页面热力图可以有效帮助发现曾经忽视的细节，从而有针对性的提出优化方法以都政府网站首页（www.chengdu.gov.cn）为例，在首页加载热力图后我们发现，从2011年12月10日到2012年5月10日五个月中，网站logo“太阳神鸟”有近6500人次点击，但用户点击Logo后，网页仅仅只是刷新屏幕。用户点击便意味着他们对logo好奇，认为这里应当有内容。于是我们建议成都网站运营部门在网站首页logo中加入了链接，点击logo将进入logo“太阳神鸟”的介绍页面中，让用户对logo以及网站设计风格有更为深入的了解。热力图是用户访问行为的客观记录工具，基于热力图可以有针对性的发现优化细节。3.4提升表单的友好性表单是用户在网站上进行信息输入的窗口，是交互体验最重要的影响元素。对于网站来说，想要获取尽可能详细、规范的用户信息，而对于用户来说，希望填写的表单越简单越好。因此，在满足网站信息收集基本要求的同时，也要考虑表单设计的友好性。一是应减少表单操作的时间。表单输入元素应尽可能简化，避免过早向用户索要过于详细的信息，否则繁琐的输入操作不仅延长了完成任务的时间，还会导致用户的厌烦情绪而放弃使用。根据用户喜欢点击多于输入的操作习惯，还应尽量用选择性控件代替输入框。二是尽量简化用户的思考。为容易产生疑惑的表单元素提供必要的解释或示例，如允许输入的长度、必填项等，避免让用户过多思考。三是出错信息及时提醒。当用户在相应输入框中输入错误信息时应及时判断并提醒，这比起点击提交按钮后出现错误页面提示、要求返回重新输入的交互方式，不仅降低了用户的劳动量，也减少了任务完成的时间。四是让表单记住用户的部分信息以减少用户下次访问时重复信息的输入。3.5划页面布局网站页面中用来传递信息的元素主要有文字、图片、多媒体动画、视频。页面布局应将这些不同内容进行合理排列布局，使得用户更有效的抓住重点。页面布局需要结合用户的行为习惯进行考虑。国外的一些研究机构和学者曾组织过关于网页阅读习惯的视觉轨迹研究。研究结果表明用户浏览网站的视觉路线类似于字母“F”型。所谓F型模式，即用户浏览网页时首先从网页最左上看起，看完前面几行的大部分内容，越往下看的越短，只有左边一部分内容被看到，形成F型浏览轨迹，F型浏览轨迹也正好符合人们从左到右的书写习惯。因此，对于页面布局来说，应将网页重要的元素放在左侧，并且以符合F形状的形式来放置。在具体的页面布局上，现在有很多良好的布局解决技巧可以帮助创建整洁有序的内容布局，包括内容的归类整理、排列与对齐、贴近与远离、流畅的视线移动、平衡、重复元素的应用等等。通过对网页设计元素及内容进行合理布局,使网页形式富有节奏感并且图文并茂。事实上，页面布局的工作分为前期的布局设计和后期的网站调整。前期布局设计是通过对用户需求的预测而做的设计，这样的设计不一定能够完全解决用户的访问需求，因此需要结合后期的网站访问数据分析、可用性测试、栏目设置等进行调整，将用户最需要、最关注的内容放在最明显的位置，从而提升用户体验。后期的调整是长期性工作，又是极容易被忽视的工作。3.6实例分析“十乐网”网站界面的视觉优化，分别针对以下九个方面进行：1、视觉风格；2、LOGO 优化；3、首页优化；4、页面尺寸：5、色彩搭配；6、文字排版；7、图标优化；8、Header 优化；9、Footer 优化。图1 “十乐网”的优化“十乐网”网站界面可用性设计，可用性的目的是使产品更为易用、易学、简单和愉悦，是通过对用户的认知和知觉两个方面来研究产品的界面设计。依据我个人理解，网站页面的可用性体现在视觉设计和交互设计之中。前面两章所谈及的视觉设计优化和交互设计优化，其实一直是在优化“十乐网”网站界面的可用性。图2“十乐网”在手机屏幕上的效果图“十乐网”的交互设计：导航系统、搜索系统、帮助系统、登陆系统和出错提示，其中导航系统是优化设计的重中之重。图3 “十乐网”的“面包屑”导航设计