[ 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/ ...

Read More

Huzi 凌晨4:11  No comment

[ UX ] 為什麼使用者不會點擊首頁輪播圖片

Erik Runyon 網站研究首頁輪播圖片點擊率發現300萬的主頁訪問量僅約1%的人會點擊輪播圖片。下面的研究結果是從2013年01月01日 至 2013年6月30日，長期觀察五個網站的首頁輪播點擊效果： 網站 1： 首頁訪問量：3,755,297 點擊每個輪播位置的百分比： 第 1 張：89.1％ 第 2 張：3.1％ 第 3 張：2.4％ 第 4 張：2.8％ 第 5 張：2.6％ 網站 2： 首頁訪問量：37,688 點擊每個輪播位置的百分比： 第 1 張：71.07% 第 2 張：7.13% 第 3 張：6.71% 第 4 張：8.18% 第 5 張：6.92% 網站 3： 首頁訪問量：43,724 點擊每個輪播位置的百分比： 第 1 張：54.57% 第 2 張：17.87% 第 3 張：10.84% 第 4 張：8.75% 第 5 張：7.97% 網站 4： 首頁訪問量：8,210 點擊每個輪播位置的百分比： 第 1 張：62.1% 第 2 張：15.32% 第 3 張：12.1% 第 4 張：10.48% 網站 5： 首頁訪問量：26,900 點擊每個輪播位置的百分比： 第 1 張：84.81% 第 2 張：4.48% 第 3 張：10.71% 輪播圖片的點擊效果差到令人吃驚。 大多數的輪播區塊都有兩張以上的圖片，第一張圖片都嘗都得到最多的點擊，但第二張之後的點擊率都急劇下降，這樣的點擊效果通常問題都不是出現在圖片身上，而是輪播ux設計，例如輪播區塊的導航列。...

Read More

Huzi 凌晨12:30  1 comment

[ 設計好幫手 ] 推薦給設計師的 Photoshop 自動切圖軟體 Slicy（Layer Cake）

根據 想提升工作生產力，就別再做這七件事 一文中，提到一項是 停止作重複的事情，並使它自動化。 對於設計師來說，切板這件事常常會覺得浪費時間，但卻又不得不做好，這時找出一些有用的小工具，讓例行工作“切圖”這件事變得非常輕鬆，意外的還會讓你養成良好的工作習慣。 Slicy 官網：http://macrabbit.com/slicy App Store：https://itunes.apple.com/tw/app/slicy/id512533449?l=zh&mt=12 這項軟體操作簡單，唯一的必備條件是使用 Slicy 前需要一個架構乾淨清楚的 photoshop 結構與命名。 後續只要將 PSD 拖進去 Slicy 的 APP 視窗內，就能自動生成切圖元件，事後只要一變更 PSD 內容，切圖元件則會自動更新，省掉非常多的工作量，聽起來是不是很神奇～～ 當然，前提是必須先養好良好的PSD圖層管理習慣及命名。 命名規則 基本標簽 圖層或群組名稱的字尾打上.png 或 .jpg。 沒有打上副檔名的圖層資料夾則不會生成元件。 設定切圖尺寸 有時製作APP時，照文件規則會需要固定的尺寸，例如 64 x 64, 48 x 48, 24 x 24.。 方法有兩種： 將欲呈現的尺寸，使用形狀圖層畫出，命名為 @bounds 。生成圖片時，系統不會生成@bounds圖片。（如圖 red.png） 在資料夾上使用向量遮色片 （如圖 yellow.png） ps. 若在圖層上使用向量遮色片則會出面錯誤 （如圖 green.png） 製作 Mac Icon  方法： 只要把副檔名改成.icns 製作兩倍尺寸或1/2尺寸的圖層 方法（寫法）： 1. 放大2倍：圖檔名稱@2x.png 2. 縮小1/2倍：圖檔名稱.png+@2x ps . 記得做向量圖檔，不然放大會糊掉哦 另外這裡有一個貼心的小功能，原PSD檔的星星尺寸為基數（85x81)，Slicy 會自動把尺寸各加上1px的空白，讓數字變成偶數時，再放大or縮小。 最後，最厲害的就是當你按上方的  save 存檔時，Slicy 會詢問是否要自動更新元件，這時候選擇右邊 Automatically，當你事後更改PSD時，就不用每次修改一次 PSD 還當個傻子慢慢存檔了！ 是不是方便極了～～～～～～～～！ 官網可以先下載試用哦  http://macrabbit.com/slicy/ ...

Read More

Huzi 清晨7:40  No comment