電子商務網站介面設計寶典第三集報到！！我相信前兩集的內容若能融會貫通，在武林界已非泛泛之輩！但第三集有更多密技可以提升內力，讓你功力更上一層樓！馬上來閱讀，提昇功力吧！
31. 好的視覺階層，閱讀壓力少一半
設定好的視覺階層 (visual hierarchy)，可以幫助使用者辨識介面上資訊的重要程度。視覺階層要怎麼呈現呢?我們可以透過”對齊”、”相近”、”顏色”、”色調”、”縮排”、”字體大小”、”元素大小”、”邊距” 及 “留白” 等手法來完成。
當正確的使用上述的視覺手法時，我們就可以有效的控制使用者的注意力，並改善閱讀性。某種程度上，視覺階層也可被視為閱讀動線的摩擦力，避免使用者一下就掃視完頁面，而忽略我們想要他們注意的資訊。
雖然設計視覺階層會增加實做的時間，但結果會是好的，因為可以藉此安排或布局更多增加行銷、註冊或購買的機會。
32. 群組相關項目，避免無邏輯的擺放
將相關的項目群組化是增加介面使用性的基本方式之一，因為遵守著大部分使用者的分類邏輯可減少介面對他們的認知缺口。譬如很容易聯想”開啟”與”儲存”是放在同一區塊內，若還有其它相關功能，使用者也會在這區進行尋找。
SO，別讓使用者浪費時間在找尋功能的位置吧!!
33. 即時告知 “值” 的正確性，不要提交後再說
當使用者填寫錯誤的資訊於欄位時 (例如：密碼不符合規則或格式錯誤)，試著在介面上即時告知，並提示錯誤的原因!相對的，我們要避免他們填完並提交後，才告知因某幾項資訊填錯而執行失敗，這樣會浪費使用者來回確認的時間。
34. 彈性的輸入格式，不要嚴格的限制
嘗試讓系統更人性化、能理解人們輸入的資料吧!
因使用者差異甚大，要求他們填寫的資訊，可能因習慣而出現不同的格式。若開發團隊能預先思考各種可能格式，並讓系統自動判斷與轉換它。就介面的友善性而言，絕對優於霸道的限制使用者只能填寫唯一的格式。
這裡有個絕佳的例子：當我們要求使用者填寫電話號碼時，欄位能判定與接納各種填寫的格式，再轉換為資料庫記錄的格式 (如示意圖)。雖然會增加開發的難度，但想追求卓越的使用者體驗，請堅持這個理念吧。
35. 限時限量
要讓顧客馬上行動或購買，常使用的策略就是限時限量。因為讓產品或服務備有稀有性，就可替使用者產生”當下做出決定”的價值。
同樣的，”把握機會” 這件事情也有這樣的特性，當大家都討厭”錯過機會”時，我們就可以利用 “緊迫性” 做為刺激使用者行動的策略。但使用這樣的手段，我們還是要保持誠信，不然它會像兩面刃般傷了自己。
36. 利用 “資源缺乏” 的行銷策略，喚起使用者注意力
當資源缺乏 (scarcity) 時，我們就會更加珍惜，這就是人性!
我們來比較一下量販店與精品店訂價的差異，肯定是精品店較高，且顧客的認知亦同。主要就是量販店的商品源源不絕，顧客並沒有感受到 “資源缺乏” 可提升的價值感。若今天發生戰爭，貨源斷絕，價格定會提高。知悉人性就可以找到創造價值的機會，例如有一些量販店利用 “售完就不補充” 的策略來吸引顧客購買。
然而，軟體業長期忽視 “缺乏” 的行銷策略，因為對程式碼而言，複製貼上是一件容易且習慣的事情。但網路普及後，多種電子商務模式興起，我們可以透過介面來傳達產品的 “稀少”、”缺乏” 與 “限制”。例如強調票劵的數量、僅能接待幾組客戶、此批貨源數量等。
這些 “稀少”、”缺乏” 與 “限制” 的行銷手法，可以喚起使用者更多的注意！嘗試著使用這樣的方式吧！Think less is more.
37. 填表單時，提供線索幫助使用者喚起回憶
在介面上提供一些線索可協助使用者喚起過去的經驗，進而提供我們更多回饋；若毫無提示，使用者則需更多的時間深入回想，反而耗時或遺漏更多資訊，就如同選擇題較填充題更快完成般。
綜上所述，想得到使用者回饋時，與其期待他們記得所有的事項，不如提供若干線索，來刺激他們的記憶，其效果肯定大於你的預期。
38. 為什麼不讓 ”點擊區域” 更大一點
為求更佳的使用者體驗，網頁上的連結、表單及按鈕的尺寸設定應該以讓使用者更好點擊為主要考量因素。
根據費茨法則 (Fitts’ Law)，我們了解到目標越小、距離越遠，要達到目標定位點的時間就越長；且移動速度越快或目標尺寸越小時，引發錯誤的機率越高。
因此，我們可以試著增加欄位、關鍵行為按鈕 (calls to action) 或連結的尺寸；或是維持外觀，但增加可點擊的範圍。
39. 想盡辦法降低載入或上傳的時間
速度就是王道！
“網頁載入” 與 “操作後的反應” 速度皆會影響使用者體驗，甚至還可能降低網站的流量與轉換率。
我們該如何改善呢?其中一個方法即是透過技術減少載入時間，例如 spriter、再壓縮圖片大小或優化程式碼。另外，也可以利用心理學的技巧，來降低使用者對載入的感知時間，讓他們覺得等待其實沒那麼久。例如，在畫面上提供進度條，讓使用者可設定預期完成的時間；或系統正在上傳或載入時，提供另外一件事情讓使用者做。(有些 app 會讓使用者選擇上傳的照片後，再讓他們輸入資訊或微調，系統便於這兩個行為間將圖片上傳完成)
40. 提供鍵盤熱鍵
使用者肯定希望需重複操作的任務能快速方便，特別是專業用戶，而提供熱鍵功能就是一個好的解決方案。因為相較於圖形介面上的按鈕操作，熱鍵能讓使用者提高執行任務的效率。
本篇翻譯於 A Good User Interface。GoodUI.org is a project by Jakub (@jlinowski) and Vlad (@vladmalik) at Linowski Interaction Design.
延伸閱讀:
- 電子商務網站介面設計寶典 (一)
- 電子商務網站介面設計寶典 (二)
- 電子商務網站介面設計寶典 (三)
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
