网站用户体验提升

概述,对于任何一个网站来说，无论是行业门户、企业网站，还是B2C或者B2B，抓住用户体验是我们提升网站竞争力的一个重要指标。怎样才能提升用户体验，大致可以从这五个方面来把握：,1、感观体验：2、交互体验：3、浏览体验：4、情感体验：5、信任体验：,目录,1、感观体验：呈现给用户视听上的体验，强调舒适性。2、交互体验：3、浏览体验：4、情感体验：5、信任体验：,一、感观体验_设计风格,符合目标客户的审美习惯，并具有一定的引导性。网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。,确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。如图：,一、感观体验_网站LOGO,一、感观体验_页面速度,正常情况下，尽量确保页面在秒内打开。如果是大型门户网站，必须考虑南北互通问题，进行必要的压力测试。如果页面下载时间超过秒，很难有用户会喜欢你的网站。,一、感观体验_页面布局,重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。目前我们经常用到的版面布局形式：1.“T”结构布局2.“口”型结构布局3.对称对比布局4.“三”型结构布局5.POP布局,一、感观体验_页面布局_“T”结构布局,所谓“T”结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。如图：,这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。,这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。如图：,这是目前国内各大门户网站应用最广泛的一种布局方式。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。,一、感观体验_页面布局_“口”结构布局,一、感观体验_页面布局_对称对比布局,顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。如图：,这种布局的优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。,一、感观体验_页面布局_“三形”结构布局,这种布局多用于国外站点，国内用的不多。如图：,一、感观体验_页面布局_POP布局,POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点以及专题专栏界面设计，示例：,布局的优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。,一、感观体验_页面布局_小结,以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于创意和设计了。对于版面布局的技巧，这里提供四个建议：1、加强视觉效果2、加强文案的可视度和可读性3、统一感的视觉4、新鲜和个性是布局的最高境界现在网上经典的有淘宝、Q、网易这些都是一些网站仿造的首选。示例：,一、感观体验_页面布局_小结,一、感观体验_页面尺寸,页面大小适合多数浏览器浏览（以15寸及17寸显示器为主）。1995年做互联网用户调查，美国的用户在1994年的时候，只有10%的用户会拖动浏览器右边的滚动条，而绝大多数，90%的用户，打开一个网站，只看浏览第一屏看到的内容，就以为看到了全部，而不会向下滚动。”现在中国也有这样的人，而且为数不少。在一个网站的首页，能看到第三屏内容的人只有10%以下，一个过长的网站很容易引起浏览者的视觉疲劳，更何况大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了。,一、感观体验_页面色彩,与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。页面没有视觉差异，页面设计很“平”，缺少“层次感”，缺少视觉冲击力和亮点或者视觉冲击力突出的并不是网站的主体内容。这是没有经验的设计师设计大型网站时最容易犯的错误。把一大堆信息铺天盖地的展示到浏览者的眼前，你认为他会记住多少。页面设计要吸引并引导浏览者来观看你想推广的内容或产品，当然对网页“层次感”的设计平不是简单的用一些纯度高的颜色来实现，要根据页面的环境及周边元素综合考虑。就象在一个黑板中画一个白点很明显，但在一个白板上画一个白点就看不清楚了。,一、感观体验_页面导航,导航条清晰明了、突出，层级分明。不友好的导航是最影响用户操作的，不能让用记很方便的找到自己想到的内容。用户来到一个页面不知如何返回上一页，不知道当前页面是在哪个栏目下的，这样的网站很可能用户来了一次就不会再来了。,一、感观体验_lash，图片，图标，广告位的使用,适当的用一些图片及Flash，可以增加网站的生动性，增加视觉冲击力。但无限制的使用Flash及图片，会造成页面文件超大，占用浏览者的CPU资源，并且不利于页面更新及搜索引擎对网站的抓取。企业营销在服务企业客户时也会遇到纯Flash的整站首页网站，建议网站建设过程中要考虑视觉效果的同时，把优化的因素重视起来。,动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远图标使用：简洁、明了、易懂、准确，与页面整体风格统一。广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。,一、感观体验_页面兼容性,页面局部的兼容性主要从两方面考虑：一是要进行主流浏览器上的兼容，二是要考虑主流显示器分辨率上的兼容。浏览器主要是微软的IE和火狐firefox，设计时应该考虑多种浏览器上都能正常浏览；而屏幕分辨率则主要是1024*768px和1280*1024px等，当前大多数用户还使用的是1024*768px，因此网站界面设计也尽量保持在主流分辨率的基础上，兼顾到适合未来主流分辨率的趋势。随着3G时代的到来，移动商务也是未来发展的趋势，企业在建立网站时还有必要对手机浏览兼容，建立专供手机浏览的WAP网站。,目录,1、感观体验：2、交互体验：呈现给用户操作上的体验，强调易用/可用性。3、浏览体验：4、情感体验：5、信任体验：,二、交互体验_页面刷新,尽量采用无刷新（AJAX）技术，以减少页面的刷新率。Ajax是新兴的网络开发技术的象征。它将Java和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。,二、交互体验_链接设置,现在很多刚上网站的人还只认为有带下画线的文字才是链接，网站要有统一标准的链接表现形式，并且要和没有链接的文字有区别，要让浏览者很方便的认出哪些是链接的文字。点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。文字链接要加title属性，便于搜索引擎搜索。“更多”要用中文写，最好不要more或者标点符号代替。如图：,二、交互体验_链接设置,如果是图片加的链接要在图片下标出“点击图片见大图”，图片一定要加alt属性，便于搜索引擎搜索，万一图片未显示也有文字说明。如图：,死链接或链接错误，这是最低级的错误，但是好些网站还有这样的错误，包括新浪网易。由于网站很难避免死链接及链接错误，就此可以制作一个提示页面；如图：,二、交互体验_按钮设置,按钮是网站界面中伴随着用户的点击行为的特殊图片，由于按钮点击行为是将用户引向顾客转化的重要步骤，因此按钮在设计上有较高的要求。按钮设计的基本要求是要达到“点击暗示”效果，凹凸感、阴影效果、水晶效果等均是这一原则的网络体现。同时，按钮中的可点击范围最好是整个按钮，而不仅限于按钮图片上的文本区。如图：,二、交互体验_表单设置,用户在填写网站表单的时候，无论是注册、信息反馈，都已到了一个关键环节，重要性不言而喻。表单涉及到较复杂的在线交互行为，与流程息息相关，当一个交互过程需要分成很多个步骤完成的时候，更重视对用户一步一步的引导，每一次点击都合理有效，接近并最终达成任务目标。表单设计中以下几点需要注意：控制输入框的大小恰当对齐，符合内容版式的需要；根据表单元素的相关性进行合理分组排序；如图：,二、交互体验_表单设置,有下拉选择区域的下拉列表，将初始状态默认为全部区域；下拉列表过长时，可横向排列；如图：,二、交互体验_表单设置,表单填写：需填写部分需注明要填写内容，并对必填字段作出限制。（如手机位数、邮编等等，避免无效信息）；如图：,错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。如图：,二、交互体验_表单设置,表单提交：表单填写后需输入验证码，防止注水。提交按钮醒目，位置符合习惯；提交成功后，应显示感谢提示。如图：,二、交互体验_会员申请注册,注册步骤流程清晰、简洁。待会员注册成功后，再详细完善资料。介绍清晰的会员权责，并提示用户确认已阅读条款。如图：,二、交互体验_让等待快一些(等待提示),等待意味着浪费时间而无所事事。但等待是交互的过程中所必须经历的过程，网站不会马上相应你的指示，你需要等待网页下载，登载程序编译因为等待并不是产品好的特征，你需要把它的影响最小化。下面来介绍两个方法:最直接的方法是优化你的代码：重构和缓存可以让你的程序运行更快，优化代码是最诚恳也是最最显而易见的减少等待时间的方式。第二种方法是欺骗，一种指标而不治本的方式，来抵消等待带来的消极影响。等待最大的问题是不确定性不确定合适能够结束（当然，有时候对于开始的不确定性也是如此）。软件中，这种不确定性可以通过进度条和载入标识来解决。在互联网中这种不确定性可以通过进度条和载入标识来解决。,二、交互体验_让等待快一些(等待提示),进度条进度条告诉你进度目前完成了多少，剩下多少，还可以精确地显示进行得有多快，以此来估算出剩余时间。研究表明，在没有进度条的时候，人们会感觉程序运行的时间变长，这意味着在没有任何进度显示标识的情况下，你的程序会让用户觉得比较慢。如图：,载入标示有时候处理过程仅需短短几秒，这种情况下无需显示完整的进度，仅仅加入一个“载入”标示就好。目的是告诉用户服务器已经响应了他们的请求且会很快完成。没有这样的标示，用户不知道发生了什么，会误解认为程序崩溃或请求没有被响应。如图：,二、交互体验_显示路径,无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。这些体验在各大知名网站如网易，淘宝，腾讯做得很好。,二、交互体验,7.新开窗口（_blank）：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。过多的弹出新窗口，会大量占用计算机的资源，影响浏览者的浏览速度。8.意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。9.在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。10.在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。,二、交互体验：呈现给用户操作上的体验，强调易用/可用性。,7.新开窗口（_blank）：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。过多的弹出新窗口，会大量占用计算机的资源，影响浏览者的浏览速度。8.意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。9.在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。10.在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。,目录,1、感观体验：2、交互体验：3、浏览体验：呈现给用户浏览上的体验，强调吸引性。4、情感体验：5、信任体验：,三、浏览体验_栏目,栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥。栏目的层级：最多不超过四层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。,三、浏览体验_内容,内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。内容的原创性：尽量多采用原创性内容，以确保内容的可读性。内容的更新频率：确保稳定的更新频率，以吸引浏览者经常浏览。精彩内容推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。相关内容推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。,三、浏览体验_文本,信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。文字排列：标题与正文明显区隔，段落清晰。文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。新文章的标记：为新文章提供不同标识（如new），吸引浏览者查看。文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字截取字数准确，避免断章取义。,三、浏览体验_快捷功能,收藏夹的设置：为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。栏目的订阅：提供Rss或邮件订阅功能信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。页面打印：允许用户打印该页资料，以便于保存。,三、浏览体验：呈现给用户浏览上的体验，强调吸引性。,.注意事项：页面底色：不能干扰主体页面的阅读。页面的长度：设置一定的页面长度，避免页面过长而影响阅读。分页浏览：对于长篇文章进行分页浏览。语言版本：为面向不同国家的客户提供不同的浏览版本。快速通道：为有明确目的的用户提供快速入口。,目录,1、感观体验：2、交互体验：3、浏览体验：4、情感体验：呈现给用户心理上的体验，强调友好性。5、信任体验：,四、情感体验_客户分类,将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。例广东移动为不同品牌的用户分类：,四、情感体验_友好提示,对于每一个操作进行友好提示，以增加浏览者的亲和度。示例：,四、情感体验_网站