引言：最開始知道Teambition是幾個月前，當時是想找一個團隊協作工具。Teambition是候選之一，它的界面設計給我留下了印象。后來得知其背后年輕的創始團隊還是讓我有些小驚訝的。這次通過朋友介紹給Teambition做可用性測試也有些興奮。
從會面到測試設計，再到實施與總結，前前后后持續了3周。在這個過程中我一直在觀察、思考，發現了閃光點，同時也捕獲了許多細節問題，可謂收獲頗豐。
我認為Teambition網站在可用性（體驗）方面是經過思考的，網站的設計含蓄優雅，力圖通過技術讓Web頁面給用戶類似桌面應用的實時體驗。大量使用隱藏、擴展面板，避免令人厭煩又毫無用處的彈出對話框，讓用戶更容易進入沉浸（"流"）工作狀態。這都是作為企業應用的優秀特質。
在測試過程中，我發現用戶在創建任務的過程中都遇到了困難。新用戶把“創建任務列表”當作創建任務進行操作。從表面上看是用戶不理解或不注意“任務列表”與“任務”的區別。但我認為深層的原因與用戶概念模型與產品實現模型不一致有關。
Teambition產品的思維模式是這樣的，創建任務前，先要創建任務組（如圖1），之后在組內創建相應任務。這個模式明顯是產品的實現模式，程序邏輯、數據庫結構清晰。
（圖1 創建任務從創建任務列表開始）
但這卻不是用戶的思維模式。用戶的思維模式是這樣的，他有一個或幾個零散的任務，當前只想把任務建好，分配出去。他還不清楚（可能都還沒有想）項目之后會發展到多大，會有多少個模塊，整體結構會是怎樣的。當以后任務多了，他可能才會想要分組。用一個表歸納如下：
| 模型 |
行為方式 |
理由 |
| 產品實現模型 |
創建任務結構（列表），創建任務 |
邏輯清晰，方便開發實現 |
| 用戶概念模型 |
先創建任務，整理、歸類以后再說 |
關注當前目標 |
設計產品時，需要更多的使用用戶概念模型去思考。例如，提供默認任務列表，用戶上來可以直接創建任務（步驟也節省了，操作效率更高），后期用戶可以在需要時對列表進行進一步的修改、整理。
Teambition界面的對齊與風格統一做得較好，但對比不足。
頁面中首先想讓用戶看到的指引提示信息使用灰底、灰字，如圖2所示。
（圖2 用戶指引信息）
對比不足，就不能凸顯當前元素的首要性，無法很好的抓住用戶的眼睛，默默的淹沒在其他元素中。當想清楚“你想讓用戶往哪看？”這一問題，大膽的使用對比。
測試中發現的另一個讓用戶遇到困難的操作是創建任務，如圖3所示。
（圖3 創建任務頁面）
造成這一困難的原因有多個，后面還會再次提到。用戶創建頁面從圖3中紅色圈處開始，但這里的對比也是不足夠的。
在“任務板”頁面（如圖4）中，你覺得1、2、3、4紅圈中的圖標，哪些是可以點擊的？你覺得5、6兩個六邊形框中的時鍾是控件嗎？橙色框7、8中的灰色文字是否都是標注？
（圖4 任務板頁面中的圖標與文字）
外表相同的圖標，有些是控件，有些僅僅是圖標，用戶又怎么知道呢？輸入框與標注文字一個模樣，同樣讓用戶疑惑，僅靠文字說明不是最優的方案。
Teambition中設計了一些拖拽操作，在某些場景下使用很方便。但如果可拖拽圖標和其他圖標一模一樣，用戶又如何去發現呢？用戶拖拽起圖標，又該放置到哪兒呢？拖拽的接收方是不是也應該在合適的時機告訴用戶“我這能接收”呢？
還有對於必填項與選填項如果能通過可視化進行區分，也能方便用戶。
在測試中有用戶在任務創建過程中，未填寫任務內容，多次點擊“創建”未果，如圖5所示。
（圖5 創建任務界面）
出現這一狀況是一連串的誤解造成，該用戶首先把創建任務列表當作創建任務，其次沒有意識到任務內容輸入框是可以輸入的，最后點擊“創建”按鈕頁面沒有任何反饋。這里點擊“創建”按鈕是最后一個指引用戶的機會，但沒有報錯、沒有提示，毫無反饋，用戶多次點擊后放棄，心里除了疑惑還有抱怨。若在這里應用能發現用戶沒輸入任務內容，不唐突的給出一個提示（如：幾秒鍾的浮動提示），同時高亮輸入區域，可能還能亡羊補牢。我認為任何失敗操作都應給用戶有用的反饋。
對於成功操作是否也需要反饋（也稱正面反饋）？這就涉及到Teambition的一項產品哲學，打造類似桌面應用的實時體驗，即用戶在頁面上進行修改、添加、刪除操作，頁面上的數據直接發生變化，無刷新。對於Teambition來說這就是成功反饋，但這是否足夠？我認為在某些情況下可能不夠。第一、有些數據變化很微小，容易被忽視，有時還會被遮蔽。譬如，任務列表中已經有很多任務，再添加一條新任務，新任務會出現在列表尾部，完全可能在用戶的可視范圍外。第二、Web無法保證完全實時的頁面更新。在測試中可以發現上傳文件或進行任務操作后實時更新並不是每次都能很及時，有時還需要手動點擊。這就讓用戶懷疑自己的操作成功了嗎？給予正面反饋，消除用戶的疑惑。
至於反饋的方式，拋棄彈出式對話框，選擇不打斷用戶的提示，現今各大網站的最佳實踐已有很多。
從Teambition中右側按鈕（如圖6所示）說起，新用戶容易忽略右側按鈕，尋找一個功能也很困難。
（圖6 Teambition中的右側按鈕）
我分析下來有兩個原因：
1. 用戶視線跳躍。以創建任務為例（操作順序如圖7所示），用戶進打開頁面后的注意區域在左上側，“創建任務列表”在右側，用戶視線注意力要橫跨屏幕。
（圖7 創建任務操作順序）
再如要修改任務執行者（操作順序如圖8所示），用戶的視線注意力需要跨越中間的任務詳情區域，太難找了。
（圖8 修改任務執行者操作順序）
2. 不斷變化的按鈕列表，用戶不容易熟悉。對於不同頁面、點擊對象，右側按鈕的數量、按鈕功能都不相同。我揣測網站設計師想讓右側按鈕根據當前上下文顯示數量最少，但這會帶來問題。右側的這些按鈕可以想象成大多數軟件的工具欄按鈕或菜單按鈕。如果你使用軟件的這些按鈕不斷的變多、變少，你會有什么感覺？而且這樣的設計也很難讓用戶記住這些功能的位置，從初學者變為中級用戶。
我的建議是：
1. 固定右側按鈕，根據上下文disable部分按鈕。
2. 減少右側按鈕的數量，盡可能把功能放入到跟合適的上下文中。提供可見即可改的操作，直接修改任務列表名稱，直接在任務詳情中修改執行人，任務列表旁邊直接提供刪除操作等，如圖9藍色框處直接可修改。
（圖9 支持可見即可改）
在任何顯示信息的區域，都去思考是否能直接提供修改的功能，這對用戶最方便。
不同程度用戶的需求是不同的，初學者需要易上手，中、高級用戶希望高效率，對於工具應用特別是這樣。
在Teambition網站的任何文本框中輸入后回車，直接完成錄入。這個功能對於中、高級用戶很高效，但這也造成了初學者的困惑。測試中用戶輸入完成后很困惑，“確定按鈕在哪里？這樣算錄入成功了嗎？”如圖10所示。
（圖10 用戶輸入后不知所措）
在提供回車錄入的同時，若能給初學者留一個確定按鈕，就能兼顧不同程度的用戶。我們要讓初學者很容易上手，同時漸漸讓他們學會更高效的方法，把他們變為中級用戶，這樣他們就會愛上我們的應用。
猜猜看圖11中點擊右上角的“×”，頁面會發生什么？
（圖11 頁面右上角的叉）
測試中被問到這個問題的用戶，都認為這樣會離開當前頁面。很難想象這個“×”是用於關閉圖中出於中間擴展區域（任務詳情區域）的。關閉按鈕放在對應模塊右上角是習慣用法，問起為什么不這樣做，聽到的回答說是當時怎么放都不美觀，就放在整個頁面的右上角。又聽說下一版本這個按鈕要改了，但並不是放回相關區域右上角，而是完全去除。關閉擴展區域的方法是在擴展區域外進行任何點擊，設計師說這是一個創新。我認為創新思維非常棒，但需要注意的是創新不是為了滿足設計師的創新欲，而是為了提供更好的用戶體驗。打破習慣用法不是不可以，但要證明新的用法能帶來足夠大的好處，這需要充足的實驗與思考。
測試中有位用戶先是選中了一個任務，並在頁面上進行探索性嘗試，她無意間點擊了“由我執行”，發現任務的執行者變了，但這並不是她想要的，但又忘了之前任務的執行者是誰。她說的話給我印象很深，“為什么沒有撤銷按鈕，一點安全感都沒有”。她希望任何操作都能撤銷，回到上一個狀態，這樣她能更大膽的嘗試各種功能。很多用戶使用科技產品會有心理負擔，擔心自己的無意操作把系統搞亂了、搞壞了。這使他們在嘗試時縮手縮腳，阻礙了學習過程。
對於獨立的桌面應用我會建議提供撤銷與回退功能，類似Office軟件中的撤銷功能或類似回收箱功能。但多人協作Web應用，提供撤銷並不容易。Teambition提供了操作日志，能看到對任務的每一個操作，這樣用戶能知道自己當前操作前的狀態，如圖12中所示。
（圖12 任務操作日志）
可惜這一功能用戶沒能發現。一方面日志的添加太不顯眼，另一方面新的日志條目添加在列表尾部，列表長了就無法看到。這也是缺乏反饋與對比的問題，如果把日志按時間倒序排列，每次新添加的條目先有一個幾秒鍾的高亮，再恢復正常顯示，對用戶可能就貼心很多。
測試中暴露出的另一個明顯問題是用戶找自己的任務很困難。有把任務板中整個項目的任務都當作是自己的，也有點擊每一個任務費力尋找的。從用戶的這些行為來看，任務板的設計是有問題的。現有任務板首先按照任務列表分組，組內可選擇“按時間分組”或“按執行人分組”。這樣的設計沒有從大多數用戶的目標出發。
我認為大多數用戶希望看到的任務列表如下：
首先、哪些任務是我要做的。這是我馬上要着手的活。
其次、我發布的任務。我關心這些任務的進度。
最后才是其他任務。
關心用戶的目標為重，整體結構的完整、條理次之。
溫故知新
1. 創造沉浸的工作狀態
2. 采用用戶概念模型思考
3. 用對比引導用戶的眼球
4. 讓用戶身未動，心已知
5. 提供正面反饋與負面反饋
6. 可見即可改
7. 為不同程度的用戶設計
8. 創新從了解用戶習慣開始
9. 讓用戶很容易的回到前一狀態
10. 從用戶的目標出發
參考資料
1. About Face 3: The Essentials of Interaction Design , Third Edition, by Alan Cooper, Robert Reimann, David Cronin
2. You Already Know How To Use It，
http://uxdesign.smashingmagazine.com/2012/09/25/you-already-know-how-to-use-it/