[ UX ] “ OK 按鈕 ” 與 “ Cancel 按鈕 ” 擺放位置順序的微妙關係

當設計師設計對畫框畫面時，常常思考「確定」與「取消」按鈕的放置位置。根據他們的功能或使用者習慣，什麼是最好的？哪個又該放在前面？

或

平台的一致性？

許多人面對這個問題時，最常看見的解決辦法就是「 跟別人一樣就對了」，例如 windows 把 「確定按鈕」放置第一，我們就應該遵循這個原則。雖然這看起來像是一個解決問題的方法，但實際上它不是。設計師應該要去思考放置這兩個按鈕位置的背後原因和用戶體驗。

「一致性」是設計師常常說的話，也是一個受歡迎的藉口。但若不深思熟慮用戶所面臨的問題，一昧的追尋所謂的“設計法則”對用後又有什麼益處？如果設計師根本不知道某設計為何存在。又或者，某些“設計法則”其實是對用戶不友善的方式，但設計師只為了借助平台的「一致性」，以為就能解決所有的問題？

其實平台設計的一致性不應該只是為了滿足設計師，一個真正的設計師是需要了解問題的根本或這更深的層次，並了解為什麼應該這樣設計。

為什麼「確定」按鈕放在畫面右側比較好

當設計師開始思考按鈕的放置位置， 可能會覺得唯一的辦法就是要讓用戶測試。如果是一個資歷較淺的設計師，還不太相信自己的判斷時，這可能會你唯一的方法；但如果是一個經驗豐富的設計師，他們可以從用戶的角度來看這項產品或頁面時，那麼就可以通過設計分析來解決這個問題。

從「使用者眼球流程」來判斷

有些設計師認為，把「確定」按鈕放置在左側對用戶是最好的，因為這樣就更接近使用者的眼球瀏覽順序，聽起來是有道理，但你不能忽略使用者習慣，使用者不會貿然決定點擊任何一個按鈕，當他們還沒看到所有的選擇之前。這意味著，大多數的用戶不會盲目地點擊他們眼球看到的第一個選項。

 當「ok」按鈕放置在左側時：

使用者眼球必須看完所有可以選擇的按鈕，才會返回來點擊

當「ok」按鈕放置在右側時：

當使用者確認看完所有的按鈕，眼球也朝一個方向流動，

順著進行點擊的動作。

以上兩張圖明顯表示，下圖帶給用戶更快的視覺流程，用戶在每個按鈕上注視的次數只有一次，所以以速度或是用戶使用上的流程來說，「確定」按鈕放置於右側是好的。

從「按鈕功能」來判斷

按鈕功能？簡單來說就是當用戶點擊「確認」或「取消」按鈕時，他希望應用程式給他什麼 feedback？

「確定」按鈕是當他們完成該頁 閱讀/填表 完後點擊的按鈕，並把它們推進到下一個頁面。「取消」按鈕是讓用戶回到原始狀態，回到上一個動作，例如清空所有已填寫的欄位。

這樣的判斷類似分頁按鈕的位置，以使用者到「下一個」的按鈕放至右側，而需要使用者返回到「前一頁」的按鈕位置放在左側。這樣也反射到使用者的閱讀和導覽方向，「右進、左退」，這樣直覺的思考也便於用戶理解。


為什麼按鈕不能分別放在 左下角 及 右下角 呢？

是啊，就上面理解來說，那為什麼不能直接把「取消」「確定」按鈕各放置於左下角，這樣不是更能直覺思考導覽模式嗎？
OH~NO NO NO，因為「取消」「確定」按鈕不是完全屬於 “分頁”按鈕，所以就方向性嚴格的區分其實是不必要的，這樣反而弊大於利。

除了按鍵之間巨大的視覺分離使得操作變得困難之外，在功能上，使用者如果不能直接看到該程序有“撤回”的關鍵動作，反而會覺得不安。（就像 Ctrl+ Z 功能，在軟體操作上來說很重要一樣）。

所以讓使用者可以看到「取消」按鈕隨著「確定」按鈕放置在旁是很重要的，因為取消按鈕對於使用者來說，也是一個安全按鈕，以防有任何想要“撤回”的步驟，而且放置一起，也讓使用者能更高效率地去二選一中採取最佳的下一步行動。


為什麼按鈕要放在頁面的最右下角？

放置於右下角是為了讓用戶更方便點擊，它遵循了 Gutenberg diagram (古騰堡圖表) 的瀏覽模式：

右下角的位置剛好是使用者瀏覽順序的最後一個區塊，把按鈕放在右下角的位置剛好可以讓用戶閱讀完文章後決定所要採取的行動按鈕，順勢進行點擊的動作。

結論

當真的了解為什麼“確認按鈕”要在畫面的右下角時，同樣的觀念就可以用在更多設計思考層面上。
當然，除了按鈕的位置很重要之外，要注意的還有按鈕視覺比重與文案撰寫。

via 

http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/