行動電子商務網站研究報告-十大設計重點分析

昨天看了一篇超棒的文章,
忍不住自己擷取重點胡亂翻譯一下當成筆記,
歡迎各方高手不吝給予指教,謝謝!

原文出處:Exploring Ten Fundamental Aspects Of M-Commerce Usability

這是在國外所做的一個大規模的使用者經驗測試結果,針對目前在線上的18個行動電子商務網站做了測試,
(1-800-Flowers, Amazon, Avis, Best Buy, Buy.com, Coastal.com, Enterprise.com, Fandango, Foot Locker, FTD, GAP, H&M, Macy’s, REI, Southwest Airlines, Toys “R” Us, United Airlines, Walmart.)
測試過程中使用者碰到超過1000個網站可用性的問題,
最後的研究報告分析歸納出了147個設計建議,而這篇文章列舉了其中10個重點:

 

1.讓首頁可輕易的被檢視

問題:當用戶無法在你的首頁快速輕易的掃視出網站的概貌時,他們會失去對網站的信心,並且最後通常會發生操作上的錯誤。

建議避免以下設計:
a.過多的視覺元素
scannable-homepage-2_mini
在Macy’s的首頁上出現了少8個以上的圖形化視覺元素,完全干擾了用戶的視線。
b.沒有顯示(至少第一層)分類
c.故意設計完美切齊(至少某一種)行動裝置的解析度

2.明白使用者"害怕遺失已輸入的資訊"

問題:在行動裝置上輸訊息是非常麻煩的事,用戶時時刻刻都害怕會失去所輸入的資料。

建議改善方式:
即時備份用戶輸入的資料,若無法做到,至少要在適當時刻給與用戶清楚的提示。

 

3.在產品說明頁底部放置一個主按鈕(購買此商品or加入購物車)

問題:如果沒有這麼做,用戶很有可能會將"購買"及"購物車"的按鈕搞混。

建議改善方式:
在產品說明頁底部放置第二個加入購物車的按鈕(第一個通常位於頁面頂端或中間)。PChome商品頁也是如此設計。

 

4. 謹慎使用輪播式AD

問題:如果某些特殊功能只呈現在輪播中,大多用戶不會發現;再者,在行動裝置上輪播式AD的操作並不友善。

animating-carousels-3_mini
在玩具反斗城的頁面中,用戶想要尋找一個Gift Guide的功能,他快速的瀏覽了一遍首頁的分類選單但找不到這個功能(左圖),
但這個功能其實只出現在頁面上方的輪播AD中(右圖),大多數的用戶跟本不會注意到這點。

重點說明:
a.用戶常常誤點錯誤的輪播項目,因為在行動裝置上不像在電腦上一樣可以在滑鼠游標移上時停止輪播。
b.大多使用者早已習慣將此種區塊視為廣告而直接挑過,多數用戶甚至在輪播的第一張時就已經捲動瀏覽至頁面別處。
c.承上點,因為若有重要特殊功能是以輪播AD為單一入口,用戶將難以發覺,最後決定離開此網站。

 

5.謹慎選擇是否另開視窗來呈現商品的詳細內容(如商品大圖)

問題:你無法想像另開的單獨視窗會造成用戶多大的困擾

建議改善方式:
由於在行動裝置上的瀏覽體驗和在電腦上有很大的區別(可視範圍小、通常無法隨時瞭解當前已開啟的頁籤架構),
盡量避免用另開的方式,用類似light box或其他可在同頁面呈現的方式將可避免用戶不必要的困擾。

 

6.小心的設計結帳的三種帳戶選則及順序

問題:用戶時常無法釐清"直接結帳(非會員)"、"以會員身份登入結帳"、"建立帳號"三者間的差別,而這其中時常與介面設計相關。

建議改善方式:
a.將直接結帳(非會員)的項目放在最前面,並且所有的項目都設計在同一個可視畫面中可供選擇。
b.將這三種選項清楚的區分開,甚至是選擇後再連結到各別的頁面(或是展開)。

account-selection-5_mini
這是一個建議的設計方式(不是BESTBUY現在真實的頁面),有清楚的三種結帳登入方式,
點選後可向下展開對應的登入表單,右方的箭號icon給予適當的操作提醒。

 

7.適時停用拼字建議

問題:在不適當的地方(如email輸入欄位)使用拼字建議有可能導致錯誤的結果破壞使用者經驗。

建議改善方式:
在某些特輸欄位,如email、地址、城市...停止使用拼字建議,只需加入以下語法:
<input type="text" autocorrect="off" />

 

8.輸入欄位的長度要夠長(並將對應標籤置於輸入欄上方)

問題:當數入欄位過短時,用戶將難以發覺輸入的資料是否正確,更別提修正它。

field-labels-above-2_mini
左:Amazon的email輸入欄位太短,儘管還有大量的空間可運用。
中:信用卡輸入欄位只顯示15個字元長度,但大多數的信用卡號碼是16位數。
右:Macy’s的email輸入欄位太短,用戶難以自行檢查兩個欄位所輸入的email是否正確。

建議改善方式:
輸入欄盡可能留下夠長的空間(至少在某些特定欄位上如地址、email、信用卡號...)
將欄位標籤置於輸入欄上方而不是擺放在同一行是非常建議、常見,且正確的方式。

 

9.讓用戶可即時確認他們所選定的日期

問題:日期的選擇功能若使用文字輸入欄位的話,將可能造成用戶極大的困擾,更可能導致嚴重的錯誤結果。(如:機票買錯日期)

date-inputs-1_mini
使用者不確定她選擇的日期是否為"她所想的那個週五",所以她用她的另一手在旁幫忙計算日期(右)。

date-inputs-4_mini
上面三個網站則提供了完整的月曆供用戶選擇。

建議改善方式:
當網站的表單中有需要選取日期的欄位,並且是一個重要性相當高的情況時(如:購買機票),
請設計一個能完整顯示出月曆的介面供用戶選取,這是最直覺且對用戶最無負擔的日期選取方式。

 

10.列表的點擊區塊應設計為整行列表皆可點選

問題:在某些列表的設計上,用戶跟本無法判斷應該從哪裡點擊。

1-southwest_mini
這是個可怕的例子,你跟本無法判斷哪些地方是可以點擊的,橘色文字有時是標題,有時看起來又像是連結;白色的隔線有時是用來區隔列表元件,
有時又用來區隔文字資訊,兩種接近的藍色文字有什麼不一樣?為什麼Business Select文字有時是藍色有時是黑色?
除此之外,畫面還有一個深藍色的有底線的文字連結...你搞混了嗎? 受測的使用者感覺也跟你一樣。

建議改善方式:
* 讓整個列表可被點選,尤其是縮圖
* 在適當的位置放置箭號icon或其他可提示點擊後可移動到下一頁(下一步驟)的圖示
* 避免在同一個列表內有多個連結到不同頁面的點擊區塊

 

 

以上是此份報告當中所擷取出來的10個重點,原文有更詳盡的說明,
有興趣的朋友可自行研讀:
Exploring Ten Fundamental Aspects Of M-Commerce Usability

完整的報告則可以在這邊買得到:
https://baymard.com/mcommerce-usability

留下評論