網頁制作poluoluo文章簡介：Web應用中“確定”和“取消”按鈕（或者類似的其它按鈕）的正確排列順序這一話題引起了一些Web設計師、關注可用性的人以及一些極客們的討論。
引言
Web應用中“確定”和“取消”按鈕（或者類似的其它按鈕）的正確排列順序這一話題引起了一些Web設計師、關注可用性的人以及一些極客們的討論。來看幾個例子：- 在Windows平台下，多年以來的標准是，只要這樣的按鈕出現在模式窗口的底部，則一定是“確定”在左、“取消”在右的組合。不妨看看這份Vista用戶體驗指南。Sun公司的Java界面風格設計指南也是這樣規定的。這背後的邏輯性似乎建立在西方從左到右的閱讀順序上，因此“確定”按鈕（大概因為它比別的按鈕更重要或更常用）被首先看到。
- 在Mac平台下，標准恰恰相反：模式窗口底部的那組按鈕是“取消”在左，“確定”在右。詳見蘋果公司人機界面指南。它背後的邏輯性似乎體現在下方右邊的按鈕（“確定”）總是與前進聯系在一起，就像讀書時的翻頁動作。
- 在Web環境中就沒有什麼明確的標准了。最貼切的例子可能是在一連串相關頁面中應用“上一頁”和“下一頁”按鈕，實際的標准是“上一頁”在左邊，“下一頁”在右邊，除非最後一頁那裡變成了“提交”或者“完成”按鈕。
所以當Web設計師需要用到“確定”和“取消”兩個功能時該怎麼辦呢？首先，讓我們明確這兩個功能到底是什麼：
- “確定”功能：它引發一個將要被執行的動作，比如保存更改的內容或者提交訂單。Web上執行這個功能的常見標簽有“確定”、“保存”、“提交”和“完成”。
- “取消”功能：它引發一個將要被取消的動作，而且用戶會返回到前一個狀態或者最初的狀態。Web上最常見的標簽可能就是“取消”。（有時也會用“後退”，但它很可能會和浏覽器的那個後退功能混淆。）“關閉”也是一個相關的功能，但它沒有放棄將要處理的操作那層含義。
當我看到一個關於可用性的郵件討論組上出現好幾個關於Web應用中如何恰當地排列這些按鈕的問題時，我決定做一個可用性和用戶體驗的網絡調查來看看到底怎樣的順序是最佳的。
調查
這個調查使用SurveyMonkey。問卷有4個問題，如下圖所示：
（點擊圖片查看大圖。）
4個問題和各自的圖片均包含兩個變量：
- 按鈕的放置：要麼放在一起（第1題和第3題）要麼分開放置（第2題和第4題）。
- 按鈕的標簽：要麼是“確定”和“取消”（第1題和第2題），要麼是“提交”和“取消”（第3題和第4題）。
為避免誤導，標簽（“確定”和“取消”，“提交”和“取消”）的順序是隨機的。如上圖3所示，每個選項只能選一個答案。
我把這個調查的鏈接發到了那個關於可用性郵件討論組上，同時也發給了我們公司Web設計師和用戶體驗專家組成的郵件列表。結果
這個調查問卷在發布後的24小時內有效（2008年2月26號和27號之間）。共有64人參與了調查。4個問題的結果如下：
A B 確定 51% 49% 取消 50% 50% 評論：
- 兩個按鈕太近了。
- 但是“確定”應該是默認選項
- 如果是左撇子選擇會相反
- 我受Windows標准影響太深了。
- 預期的或者積極的選擇應該排在前面
- “確定”和前進對應，“取消”和後退對應……
- 參考Windows的慣例
- 我更傾向“後退”而不是“取消”，“取消”看起來意味著選擇到頭了。
- 參考Windows彈出窗口的實踐規范
- 參考“左頁/右頁”的慣例，B會翻到下一頁
- 我覺得你可以把它和“前進”、“後退”聯系起來，“後退”放在左邊，“前進”放在右邊。
- 我希望“提交”按鈕或者代表“前進”的別的叫法的按鈕放在最右邊（就好象翻到下一頁）。
- 在大部分西方慣例中是從左往右、從上往下讀的。右下方的按鈕應該代表前進。
- “取消”這個標簽太多地出現在不該出現的地方了。
- 我們的習慣是比較積極的選擇放在右邊。
- 這個問題是mac與pc之爭，如果用mac我的回答會相反
- 對於右撇子，“確定”放在右邊會更近。
- 在我們的文化中，右邊的區域用來翻頁，代表前進。
- 我覺得“取消”應該是個鏈接
- 不是只有在連環畫才會畫成這樣，Windows平台下一切都是“確定”在左邊，“取消”在右邊。
- 應該和早期的Windows應用程序的標准設置相符
A B 確定 24% 76% 取消 76% 24%
評論：
- 如果一定要有一個“取消”按鈕，就應該放在那。
- 但是我不會把它們放得間隔那麼遠，除非它們和其它按鈕以某種方式組合在一起。
- 哪一種都行
- 我感覺他們看起來是分開的。
- “確定”=前進，“取消”=後退
- 以前看見過它們是這樣的排列順序
- 再說一遍，“後退”比“取消”好
- 因為被放在邊上，它們看起來更像是導航，因此右邊的按鈕意味著繼續，左邊的意味著後退
- 我從來不會把這兩個按鈕照這樣分開。
- 我認為這樣把它們分開意味著它們的功能更像“上一頁”和“下一頁”。
- 這沒有意義，“A”是什麼跟“B”代表“下一頁”沒有關系
- 比上一個圖的放置好，因為把它們分開可以減少誤操作
- 你可以把它們放到任何地方，它們的意義還是一樣的！這不是“上一頁”/“下一頁”，而是“確定”/“取消”。
- 這問題有點傷腦筋。我覺得這要根據向導的上下文。在這個例子中，我主張A=“返回”，回到前一頁面，B=“下一步”（到6個步驟中的第2個）。
A B 提交 42% 58% 取消 58% 42%
評論：
- 用Z形模式掃描
- 除非信息集中在左欄
- 真難選，有種觀點認為要讓積極的先出現，但這樣就和“取消”矛盾了
- 我不喜歡“取消”！
- 用“提交”/“反對”怎麼樣？[Smart alec!]
- “提交”=“確定”，所以我不會改變之前的答案。
- 用和“確定”/“取消”一樣的原則
A B 提交 24% 76% 取消 76% 24%
評論：
- 都行
- 和之前的評論一樣。
- 再說一遍——這沒有任何意義。在這裡應該用“下一頁”和“上一頁”
- 和第2題的評論一樣，我認為這個設計只能用在一步步前進的情況下。否則，會讓人迷惑。
討論
最讓我感到意外的是第1題的結果。就是把兩個按鈕放到一起，給它們“確定/取消”標簽，問哪個應該是“確定”哪個應該是“取消”，兩種選擇的結果旗鼓相當。顯然在可用性研究這個圈子裡，沒有任何一方對此達成一致觀點。
把兩個按鈕分開的兩個設計（第2題和第4題）的調查結果是最一致的。兩種情況下，都有76%的受調查者認為應該把表示繼續的按鈕（“確定”或“提交”）放在右邊，“取消”放在左邊。
把按鈕放在一起、用“提交”/“取消”標簽（第3題）的那組調查的結果則介於之間：58%的人把“提交”放在右邊，“取消”在左邊，而另外42%的人選擇相反。這與均分概率（50/50）之間的差異剛好成為顯著性差異（χ2分布P＝0.05）。
建議
我從這個調查得出的建議主要包括以下幾點：
避免在Web應用中把標記為“確定”和“取消”的按鈕放在一起（就像第1題那樣）。這太有可能讓你的用戶對“確定”和“取消”的順序問題產生與你不同的看法了。如果他們趕著做事，他們可能就碰巧選錯了。
最好讓不同的按鈕有視覺上的分隔（可能不必像這個調查中表現出來的那麼極端）。兩個按鈕分開放置時，把表示繼續動作的按鈕（如“確定”、“保存”、“提交”等）放在右邊，可能更符合用戶的期望。
Luke Wroblewski有一篇有趣的文章叫做Primary and Secondary Actions in Web Forms，他用眼動議得出的數據分析“確定”和“取消”按鈕的順序。