引言：最開始知道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/