電子商務網站介面 設計寶典 (三)

電子商務網站介面設計寶典第三集報到!!我相信前兩集的內容若能融會貫通,在武林界已非泛泛之輩!但第三集有更多密技可以提升內力,讓你功力更上一層樓!馬上來閱讀,提昇功力吧!

UI

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.

延伸閱讀:

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter