用户体验之新菜单改造
摘 要
本文主要讲解用户体验的一些概念和如何以用户体验为中心的设计，在本文以新菜单的改进作为一个例子进行讲解，为什么进行以下改造，做下面的改造对提高用户体验带来了什么。
一、 引言
用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。
Web中的用户体验是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者BUG程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。
二、 菜单的结构
无论是最小系统原来的菜单和新菜单的结构都达到了用户功能上的需求，但一个产品除了在满足基本的功能需求外应在产品的易用性上做改进。
易用，这非常关键。产品要让用户一看就知道怎么去用，而不要去读说明书，这也是设计的一个方向。新菜单在易用性上做了明显的提升。
1. 原菜单
最小系统原菜单采用树形结构，树形结构的菜单有它固有的优势，如URL标准化、结构清晰一目了然、关键词布局精准等。在树形菜单带来这一系列的好处的同时，带来了一个比较大的弊端，当目录层次过多是导致用户不能够较快的找出自己需要的菜单，而目前公司的系统中，目录的层次结构都很多，而且没提供菜单的查询功能，导致用户使用功能是查找菜单的时间较长。
2. 新菜单
新菜单摒弃了原来层级关系复杂的树形结构，当鼠标移动到菜单目录上，即可横向展开下级的目录和菜单。在平铺的菜单中只需点击一次就可以选择到需要的功能。当不太记得菜单的准确路径时，只移动鼠标在菜单目录上来回切换无需多次点击树形菜单。
三、 新菜单的快捷功能
用户体验设计的友好性，在提供用户易用的基本功能之外，还需要给用户一个友好的体验，在新菜单中新增加了两种快捷方式让用户能更快地查找并定位到自己需要的菜单。
1. 查找
新菜单新增了查找功能，只要输入关键字，即可查找含有该关键字的所有菜单，并且显示出每个菜单的所属目录，轻松定位目录，不用记忆复杂的菜单分类。
2. 导航区快捷目录
导航区显示菜单的层级目录，可以清楚地知道当前在处理哪种业务，同时还可以通过导航的下拉列表选择其它的业务功能，即使把左侧的菜单隐藏起来，也可以自由地切换菜单。
3. 收藏夹
原收藏夹，使用操作麻烦，操作负责，界面不够友好。新菜单升级了收藏菜单功能，将经常使用的菜单添加到工具栏的常用功能中，两次点击即可完成以前多次点击才能完成的操作，工作更轻松，使用更方便。
一键收藏菜单，易学易用，升级了原有的收藏菜单功能，一键添加收藏菜单、一键取消收藏，直接在业务模块页面进行操作，易学易用。
4. 待办、工作提醒
工具栏增加了待办/工作提醒的链接，当处理单据时，无需返回桌面即可点击查看待办工作。
四、 结语
用户体验是为了全面地分析和透视一个（批）人在使用某个系统时候的感受，而不是产品的功能。现在的产品功能大同小异，技术壁垒越来越小，胜利的天平正在向用户体验倾斜。所以用户体验很重要，而好的用户体验是可以设计出来的，在设计系统的时候不仅在功能和性能上满足用户的需求，而应给用户在使用系统中带来易用感和愉悦度。
引用楼主
新的菜单模式是我们基于用户体验上的一个尝试，代表着我们迈出了注重用户体验的重要一步。
引用楼主
没考虑用缓存，每次鼠标移动都查数据库，有时很慢，体验很差的说
引用楼主
6楼指出了改进的空间，LZ可考虑下，在资产测试环境的确有明显的延迟，有不顺畅之感
关于 CSSExpression 我有一点点看法，
首先不可否认CSS 表达式是非常强大的，你可以使用 CSS 表达式实现 min-width 属性，隔行换色，模拟 :hover, :before, :after 等伪类；
并且被 IE5 以上的版本所支持，但是 IE8 的标准模式已不再支持 CSS 表达式了；
IE8下在生产系统的首页上面按下F12将开发人员工具启动后你会看到浏览器模式：IE8（B）文本模式（M）：杂项 ，现在把文本模式（M）：杂项 ，改为文本模式（M）：IE8标准，结果是浏览器都挂掉了，影响它的是因为CSS Expression，菜单上就用了CSS Expression，就两句， top:expression(document.getElementById("queryResult").scrollTop-1); 我也不能肯定这就是表达式影响的结果。
另外在生产系统登陆页把文本模式（M）：杂项 ，改为文本模式（M）：IE8标准，页面就是错位了，
关于对 CSSExpression 的性能测试
这个测试的方法是来自于《高性能网站建设指南》中的规则7；
.P {
width: expression( setCntr(),document.body.clientWidth<600?"600px":"auto");
min-width:600px;
border:1px solid;
}
这个方法通过绑定一个setCntr() 函数到 CSS 表达式上，统计页面执行了多少次的 CSS 表达式，并显示在一个文本框里面；你也可以通过 IE5 ~ IE6 访问http://stevesouders.com/hpws/expression-counter.php 进行测试；
测试结果
页面内有 10 个段落，加载完页面大概执行了 40 次的 CSS 表达式，然后在你改变页面大小，滚动页面，甚至移动鼠标，在我的测试里不动鼠标仍然会执行 CSS 表达式，几万次的求值根本不在话下，而且在点击文本框之后，IE 就已经卡死了；
好吧，我要说的是为什么尽量避免使用 CSS 表达式；
CSS 表达式虽然强大，但是会给浏览器带来很严重的性能问题，并拖慢网页的加载速度；在可能的前提下，尽量避免使用 CSS 表达式！
至于在实验中浏览器挂掉两次后 这个请不要怪罪于我。
引用第11楼
对于用户体验，不是简单的界面的美观和易操作性。个人认为更重要的是能事实在在解决用户的需求：诸如数据的准确性、操作的快速性。据了解新加坡电力公司和香港中电公司的系统，用了10年，界面没怎么变化，但人家还是用的好好的，说明了内在美才是真的美。而且人家的系统数据能快速找到，并且准确。我们的系统呢？。。。。。
对于用户体验，不是简单的界面的美观和易操作性
个人认为更重要的是能事实在在解决用户的需求：诸如数据的准确性、操作的快速性
据了解新加坡电力公司和香港中电公司的系统，用了10年，界面没怎么变化，但人家还是用的好好的，说明了内在美才是真的美。而且人家的系统数据能快速找到，并且准确。
我们的系统呢？。。。。。
引用第10楼
说菜单多找不到的 不妨考虑下 为什么一个用户会看见这么多菜单？他每天的工作真的需要这么多功能？
我们的系统，往往一个功能都对应上报菜单一个，审批菜单一个，查询菜单又一个。对于用户来讲，这些功能有何区别？区别是否仅仅是根据我们所做的功能来划分的？有时候，我觉得用户甚至不想到多个页面进行他的工作，只在一个地方搞定就可以了，根本用不到菜单。就像我们在淘宝买东西，大部分人都是直接在上面搜索的吧。
说菜单多找不到的 不妨考虑下 为什么一个用户会看见这么多菜单？他每天的工作真的需要这么多功能？
我们的系统，往往一个功能都对应上报菜单一个，审批菜单一个，查询菜单又一个。
对于用户来讲，这些功能有何区别？区别是否仅仅是根据我们所做的功能来划分的？
有时候，我觉得用户甚至不想到多个页面进行他的工作，只在一个地方搞定就可以了，根本用不到菜单。
就像我们在淘宝买东西，大部分人都是直接在上面搜索的吧。
引用楼主
个人觉得这几个菜单怎么看都还是一堆密密麻麻的中文，看起来很累，权限越多的用户看得越累。我假定用户的注意力属性只有10个点，等待登录的过程消耗1个点，看到待办消耗了2个点，看到了电子公告消耗1个点，寻找第一级菜单消耗1个点，第二级菜单消耗1个点，如果发现不对，重新寻找第一级菜单消耗0.5个点……最后进入到业务页面，点数可能已经耗光了。。。此时此刻注意力属性花光了，后面界面做成生样子都没有我们的用户体验而言。。。。。。所以，新菜单看起来似乎减少了鼠标的点击次数，忘记菜单在哪里相对比过去查找起来也很方便，不需要点击鼠标，但是注意力的属性点数消耗跟过去是没差太多的，都一样累，没专门学习过用户体验这方面的知识，仅仅个人的主观看法。
个人觉得这几个菜单怎么看都还是一堆密密麻麻的中文，看起来很累，权限越多的用户看得越累。
我假定用户的注意力属性只有10个点
等待登录的过程消耗1个点，看到待办消耗了2个点，看到了电子公告消耗1个点，寻找第一级菜单消耗1个点，第二级菜单消耗1个点，如果发现不对，重新寻找第一级菜单消耗0.5个点……
最后进入到业务页面，点数可能已经耗光了。。。此时此刻注意力属性花光了，后面界面做成生样子都没有我们的用户体验而言。。。
所以
新菜单看起来似乎减少了鼠标的点击次数，忘记菜单在哪里相对比过去查找起来也很方便，不需要点击鼠标
但是注意力的属性点数消耗跟过去是没差太多的，都一样累
没专门学习过用户体验这方面的知识，仅仅个人的主观看法。
引用第11楼
我觉得15楼说的是症结，为什么我们的用户有这么多的菜单？如果他真的有这么多的工作需要去做，那他一定会疯掉的。在海量的菜单内容面前，菜单的交互方式的改变就显得很无力了。希望我们的业务分析人员能够结合用户的实际工作梳理简化一下菜单的量，不需要的菜单坚决不让它出现。
我觉得15楼说的是症结，为什么我们的用户有这么多的菜单？如果他真的有这么多的工作需要去做，那他一定会疯掉的。在海量的菜单内容面前，菜单的交互方式的改变就显得很无力了。希望我们的业务分析人员能够结合用户的实际工作梳理简化一下菜单的量，不需要的菜单坚决不让它出现。