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

不好意思讓讀者久等了,受大家歡迎的 電子商務網站介面設計寶典(一) 續集終於來了!!第二集帶來更多 “小撇步”,讓你在設計電商平台時無往不利。

21. 在元素變化時增加動態效果,取代唐突的出現

介面上的元素為了符合使用者的使用情境與方式,它們有時會出現顯示、隱藏、移動或轉移等變化,其目的最主要就是協助使用者理解介面的互動方式。另外,在元素的變化過程中增加一些動態效果,這是更尊重使用者的一種表現。怎麼說呢?因為這些動態效果可以幫助使用者有時間理解介面上各元素大小或是位置的變化。但是要特別注意,千萬不要讓動態效果的時間過長 (最好在0.5秒以下),因為可能讓大部分人開始感到困擾,特別是想要快速進行任務的使用者。

電子商務網站介面

 

22. 讓使用者逐步式體驗產品,不要馬上要求註冊

與其要求訪客馬上註冊,何不先透過一些小任務來證明產品的價值 (例如使用案例、影片或試用等方式) !藉由初步的互動,產品功效便可彰顯出來,也可表現出與他牌之差異。當使用者體會到產品帶來的價值,他們更容易接受與分享你未來提供給他的訊息。所以盡可能的先讓使用者來試用你的產品或服務吧!逐步式參與來展示產品與服務的價值,才是使用者主動註冊的動機!

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

 

23. 別因為方便將頁面作過多的分割

因使用者時間有限且同一時間需注意的事情太多,網站怎麼抓住他們的注意力就顯得相當的重要。使用線框 (border) 來強調與定義不同內容是過去常用的手法,不過因為具有明顯具體的線條,可能也會讓使用者花費過多的專注力,特別是頁面上有多個具線框的區域時。較好的手法是,在設計之前就定義好內容或元素之間的關係,將相似的內容放置於同區,並透過對齊、不同的背景色或相似的風格來排版,這樣才能有效的降低使用者認知時的難度

當我們在設計頁面時,常因方便而將畫面安排為多個區塊 (box),不過有時候這些區塊僅是帶給我們頁面似乎很適合閱讀與統一的假像。殊不知,區塊安排不當或過多,視覺上會趨於雜亂且不整齊。另外,頁面上安排線條可以區隔不同內容或區域,但也可以思考另外的解決方式,例如:定義內容視覺上的關係 (例如標題與內文不同顏色) 或減少不必要的文字,這樣都可以減輕使用者閱讀的困難度,因而更理解網站內容。

電子商務網站介面

 

24. 告訴顧客你賣給他的東西是價值

人們在選購產品或是服務時,考慮的不僅是需求,有時更在乎能帶給他們甚麼好處,而這些好處通常就是為顧客帶來價值的所在,也是讓他們甘心掏錢出來的關鍵。那人們關心的價值有哪些呢?不外乎就是愛、金錢、省時、降低壓力、避免衝突、解決難題及降低不確定性等。所以當我們在網站上進行行銷活動時,別僅是告知他們產品與服務的內容,而是試著告知為顧客帶來甚麼好處!

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

 

25. 設計系統在 “無數據” 時的介面

設計師對於如何呈現數據的方式已經相當有經驗,但產出示意圖大多都是介面上充滿數據的樣子,往往忽略了”無數據”狀態的設計。

當使用者初次使用你的系統時,他會感到陌生與無助,此時”無數據”時的空白區域就相當適合幹些甚麼事情! 例如提供教學或提示,來幫助使用者跨越最初的障礙。

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

 

26. 使用 “可以不參加” 的行銷策略

行銷上,”可以不參加 (opt-out) “策略會在文案中出現正反向的選擇語句 (你可以要也可以不要),且通常會先替使用者勾選其中一項 (要);而另一種 “馬上參加 (opt-in) ” 的傳統策略則是僅在正向的語句中 (你一定要),提供一個可勾選的方框 (check box) 讓使用者進行選擇。(道德上,此 check box 應該要預設未勾選,但目前常出現粗劣的行銷手段,都將預設設為勾選,常讓使用者在未注意下就答應了)

就這兩種策略的優劣比較來說,有兩個理由可以解釋為什麼 “可以不參加策略” 比 “馬上參加策略” 更好:第一,它會減緩當使用者不想擁有或參與時的抵抗;第二,它也是一種推薦的手法,會讓使用者產生 “可能大家都會想要,所以我也要” 的心態,進而選擇 (你的目的)。

同樣的, “可以不參加策略”有時也會使用一些較不正派的手法而被大家詬病批評,例如,減低文字的可讀性或令人混淆的語法 (雙重否定句)。所以,行銷時必須維持基本的道德 (影響使用者怎麼看到你的品牌),如果你採用 “可以不參加策略”,最好還是使用清楚且易理解的方式告知系統預設的值是甚麼!

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

 

27. 一致性可以避免使用者重新學習

相信大家都有聽過,Donald Norman 曾提出具備一致性 (consistency) 是打造良好使用性不可忽視的要素之ㄧ。介面上具一致性可以幫助使用者更容易學習,若頁面設計破壞了這樣的原則,他們可能需要再重新學習一次。在介面上,一致性可藉由多種方式來達成,例如顏色、方位 (directions)、行為、大小、形狀、標記或語言等。

不過,”不一致” 仍具有價值,因為不一致的元素會吸引使用者的注意力,而你可以透過這樣的手法來強調需突顯的內容。

電子商務網站介面

 

28. 智能導入預設值,避免重複的操作

填寫表單的介面上,將輸入框內預設好我們設想周全的預設值,可以大量的減少使用者的操作並節省他們的時間

另一個令人詬病的問題就是不斷的要求使用者填寫以前已經寫過的資料。此時,若能提供系統設定的預設值或自動帶入之前填過的資料,再讓使用者自行判斷正確性,絕對比每次都要他們輸入”值”來的好!

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

 

29. 考量使用者過去的操作習慣

維持傳統的操作習慣也是介面維持一致性的手法之一。如果使用大家習以為常的介面元素,使用者在操作時就不會有太大的障礙,且可以降低學習曲線。例如,人們已經可以不加思索的在介面右上角找到關閉的圖標。當然,新的操作圖標或方式也許可以帶來新的氣象及流行,但在進行大改造前,我們必須思索改變的目的與成效。

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

 

30. 強調產品怎麼避免顧客的損失

人們喜歡贏,但更討厭失去!!

心理學研究指出,人們可能更傾向於避免損失,而非獲得利益。這樣的觀點可被應用於產品的布局策略以及如何說服使用者。例如你的產品是維護顧客的幸福、健康、財富或社會地位,可能較有效的行銷策略是讓顧客知道,用了產品或服務可以避免損失,而不是強調可以獲得他們已經擁有的東西。

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

 

本篇翻譯於 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