WEB用户体验设计的五个要点

1、用户体验是个涉及面很宽泛的问题“重视用户体验的站点设计者们，努力地不断试用着自己的和他人的作品，不断地琢磨并优化着各种操作细节，找岀能找到的最好的设计”可以说，实操中的用户体验建设，更多是一种“迭代”式的开发过程：按照某种原则体系设计功能、版面、操作流程，在系统完成后，还要通过 考察各种途径的用户反馈，经历一个相对长时间的修改和细化过程。而优化阶段得到的反馈，却时常会使得 既定的版面、操作流程面临外科手术的风险，有时甚至影响到功能层面的设计,所谓的“细节之处见魔鬼”。限制WEB用户体验建设的因素很多。现有技术上的限制、使得设计人员必须优先在相对固定的UI框架内进行设计；设计的创新，在用户的接受

2、程度上也存在一定的风险；开发进度表，也会给这样一种具有艺术性的 工作带来压力；设计人员很容易认为他们了解用户需要，但实际情况常常不是这样；后期的基于反馈的细化，也有各种代价，优化的效果往往也是有限的。所以在开始设计工作之前，不妨花一些时间，审视一下目前的 各种解决问题切入点，在开发之前，找到能产生80喷献度的那20%勺设计突破点（而不是过分依赖事后的优化，以及干脆让用户在“自定义”功能中去“摸索”最合适的界面配置，）。一、切实关注用户需要的设计首先需要明确，以用户为中心这样一个原则（一个怎么强调也不为过的核心原则）。也就是，界面的设计， 和系统的模块结构、功能结构，并不是一个对应的关系，而且应

3、该说，绝不应该是一个对应关系。和界面设 计相对应的，应该是用户想要在站点上做的事情，以及做的方式。典型的问题是，当你需要用户输入比较多 的数据完成某个任务的时候，比如填写个人简历资料，是否应该根据内容的性质，进行适当的输入页面拆分、 或者组织成一个操作流程，在每一步配以合适的操作提示以及阶段性的操作结果。还是只是简单地对应数据库表结构、给出一个 long long bill of inputs?,也许你注意到了“任务”这个词眼。“任务”会是一个很合适的表述，说明用户在站点上的一组操作，所有 的操作，都是在完成特定的“任务”，操作流程，也就是“任务流”。分析用户使用站点提供的一个功能时， 会岀现

4、的各种可能情况以及其后续可能的发展，可以把“任务流”组织成一个树状的结构。基于这样一个模 型进行早期分析，可以保证设计者在后期深入设计、优化各种细节时，却仍能保证足够的大局观，最大程度 减少可能被忽略环节。很多时候，用户内心很无助、无奈，尤其面对操作失败的时候，因为他只得到一个“操 作失败”的提示，却无从知道发生了什么事，以及应该怎么处理、如何求助。因为设计者在组织操作流程的 时候，基本上是基于“数据表结构 -各种操作”这样一种思路，并没有考虑到面对各种可能的操作结果， 用户会有什么样的需要。对任务流的结束点的处理方式（尤其是操作失败的情况），可以间接体现一个站点的用户友好程度。二、适合不同“

5、级别”用户的设计用户分类是个不小的话题。对于一套成型的WEB应用，可以有不止一种的用户分类方式。基于站点的盈利目标，可以有目标用户、非目标用户；基于 web 2.0观点的一些看法，可以做信息产生者、读者这样区分；云 云。但是对于用户体验建设，主要是基于使用者对这套具体web应用的熟悉程度来区分的，这也是对所有 web应用用户通用的区分方法。明显的，对于不同level的用户，他们的具体需求是很不一样的，可以类比在一个在线游戏中的各种级别的玩家（当然，大型在线游戏本身也是个web应用,），不同级别的玩家，有着及其不同的特点初级用户，作为这套应用的初来乍到，对这套具体的应用（免费邮件？淘宝？365k

6、ey?还是Jobui ?不妨设Jobui吧）基本上是陌生的。初级用户对系统的了解，大部分来源于两个途径：同类系统的操作习惯（也许是 51job 吧），以及登陆 Jobui 后了解到的各种功能简介 （比如首页提示到的 “评语” 、“文集” 、“相册”、 “话题”）。基本上，要求新用户事前接受一个操作 tutorial 是不现实的，所以对于类同操作，比如添加 一条工作经历记录， 基本上是基于自身的认识以及在其他人才网站的操作经历来操作。 再比如添加一篇文章， 用户可能会基于在比如 donews、各种bbs上发帖的体验来操作。而来到jobui上发文章，必然会面临一些不同了,不同的编辑器按钮、不同的标

7、签录入方式（也许这个用户就不懂什么是标签），这些都可能成为是 用户产生迷惑的因素。对于这种不解，是否进行足够的优化，配备有足够的说明信息就成了关键。永远不要 假设“用户不至于那么笨”。一个可能使用户产生不解的操作流程必然是有问题的，这样的点，往往就是设 计中需要去突破的点。中级用户，基本使用过 jobui 为其提供的所有的主要功能，或者大部分。对整个站点的操作风格有足够的感 性认识， 能够比较顺畅地使用常规的操作。 他们的需求， 更多也许是关注他们的操作会对自己产生什么影响， 比如：是否能找到在工作或者在工作上有帮助的同伴，是否有效地找到关注的工作，发表的文章能获得多少 加分，有没有感兴趣的活

8、跃圈子 , 中级用户关注的， 已经不是操作上的问题， 而是网站服务逻辑上的问题。 对于这样的用户，是否在操作界面中包含适当的常用操作链接，是否对服务细节有足够清晰的帮助文档等， 就成了需要突破的点。当然，提供便利的方式是多种多样的，主要考虑是否真的提供到方便。高级用户基本理解整套应用提供的功能， 而且使用的时间比较久。 对这样的用户， 提供什么样的便利更合适， 怎样确保这样的长期用户能在这个站点持续的获得所需， 更好的享受服务就成为更需要考虑的问题。 在使用 上，设计者当然不愿意看到资深用户已带有 hack 性质的方式去使用系统，而更愿意为高级用户设计一些自 由定制的功能，更好的满足资深用户的

9、需要 ,三、关注用户“有限注意力”的设计这是一个更为有趣的问题。 绝大部分的用户都对网络广告有不同程度的厌恶， 阅读一篇原本白底黑字的文章， 却要同时享用和自己需要基本搭不上边的广告（甚至QC的震撼性Flash ）。其中的根本原因是，用户在屏幕上的注意力是有限的，过多的不相关信息，会很大的影响用户的阅读。这也是门户页面不可能成为一件艺 术品的原因。良好的操作界面必然是要有助于用户把注意力放在当前任务上的。比如：用户的正常关注焦点，有相关研究 表明是在屏幕中点到向上 1/4 的范围，所以，原则上文章列表、文本编辑区等布局核心块，就应该尽量涵盖 这个区域，而将其他辅助块，有秩序地围绕放置。比如有较

10、多鼠标操作的编辑页，可以优先编辑区为左、左 上，辅助功能块居右或右下的布局方案。以阅读为主的文章页，基本上会是优先把文章列表放左（例如blogline ，论坛社区常见的左边导航）或上方（ foxmail ， rss 阅读器等）。在块布局的策略上，注意力分布是 主要的分析因素。随着操作界面提供的功能越来越丰富，块布局也越来越趋于复杂，很多时候，如果完整地显示所有功能块， 屏幕几乎无法容纳 , 为什么窗口会有菜单？会有滚动条？ UI 构件的发展，一方面就是在克服屏幕空间的 有限性。直到像 VisualStudio 、Dreamweaver、Word等等这些现代IDE （集成开发环境）和编辑器里的&

11、quot;菜 单折叠”，工具条 ,都是努力地在日趋复杂的功能和有限的关注力上取得平衡。最终，各种功能按照其使用 频率在操作界面占据相对应的面积比例，比如常用的功能在工具条，触手可及，不常用的功能也许会丢到茫 茫菜单树中的某个角落，比如 Preference （设置）菜单，弹出的窗口中包含了大量非常用功能。对于web应用，一般的功能复杂度还无法企及现代IDE的水平，但是其复杂度也是不能忽略的。而且，一个简洁、顺畅的操作或编辑界面，对一个良好设计的贡献度是相当大的。设计一个web编辑页，除了应该尽量 遵从注意力分布的原则外，还应该按使用需求出现的原则，避免机械罗列以及屏幕面积浪费。以 Jobui

12、目前 在使用的FCK编辑器为例，上部的按钮，有收起的功能显然会比较好。对于添加一篇文章时标签选择，我们 选择结合弹出层、鼠标点选这样的方式，在信息提示上也优先使用基于弹出层的信息提示框来做，还有几乎 每页必有的个人用户登陆框 ,相对来说可以更好的节省空间， 使用户的注意力集中于主要任务， 让各种功能 块按“需”出现。四、传递信息的设计用户使用web应用，绝大多数的目的都在于获取信息，所以在web应用中信息组织的质量，也是网站用户体验的一个重要构成部分。这主要体现在一些细节上。比如列表是一个常见的点，通常由于排版的原因，需要 对文章标题进行限字，对超出部分截断。但对于查看标题列表的用户，这种截断

13、会带来诸多不便，所以通常 应该做到鼠标到标题上，可以看到全段标题（当然这有不止一种实现方式，a标签的title ，图片img的alt 属性都可以简单实现，或者使用弹出层的方式）。从另外的角度讲，这也是一种按“需”出现体现。对 于用户有需要了解更为详细的信息、却又不需要进入具体操作页面的地方，提供这样一种按“需”提示的信 息途径，会更能在原有内容布局的基础上，理解和照顾到用户的信息需求。假如说，移动鼠标到这样一条截断过的 title 上，可以理解为是发出了一种信息的请求。但对于某些操作来 说，发出“信息请求”没有意义，想象这样一个具体的操作，删除一个系统文件夹，比如“回收站”（早期 的 Jobu

14、i 版本中也存在不能删除的系统文件夹这样的概念）。那么，删除回收站，应该是怎样的任务流呢？ 点击“回收站”删除按钮，然后系统提示“是否删除？”，然后用户“yes”，然后系统返回异常“回收站不能被删除” “WELL, 现代web应用应该不会有这么笨的设计，这只是一个例子。但实际中偏偏很多时候， 这样的“不能操作'对象”和“可操作对象”刚好基于排版或其他原因必须放在一起，这时候就必须有明 确的体现，依上例，可以隐去删除按钮、或者将其置灰、或者把按钮替换成提示信息，当然这里最合适和最 简单的方法，就是把这个操作按钮隐掉。五、其他用户体验建设无疑是一个富有创意的、 却也比较麻烦的设计领域 ,一方面， 不容易有直观的标准指明设计的 好坏，一方面，用户对具体功能的使用具有偏好性，