用戶體驗之新菜單改造
摘 要
本文主要講解用戶體驗的一些概念和如何以用戶體驗爲中心的設計，在本文以新菜單的改進作爲一個例子進行講解，爲什麼進行以下改造，做下面的改造對提高用戶體驗帶來了什麼。
一、 引言
用戶體驗並不是指產品本身是如何工作的，而是指產品如何和外界聯繫並發揮作用，也就是人們如何“接觸“或者“使用”它。
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樓說的是癥結，爲什麼我們的用戶有這麼多的菜單？如果他真的有這麼多的工作需要去做，那他一定會瘋掉的。在海量的菜單內容面前，菜單的交互方式的改變就顯得很無力了。希望我們的業務分析人員能夠結合用戶的實際工作梳理簡化一下菜單的量，不需要的菜單堅決不讓它出現。