電子商務平台經營成功的要素，除了要有好的商業模式外，介面設計也相當重要。優異的使用者介面需有高度的網站轉換率 (conversion rate) 且好用易上手。
Jakub Linowski 列出了超過 55 項的設計寶典，活用這些指南肯定可讓您的平台具備商業效益與好的使用者體驗。此外，作者的網站會不斷的新增內容，設計大舌頭將會陸續翻譯這些專業的 電子商務網站介面 指南 (本篇為前 20 項)，提供大家做參考，請持續追蹤我們喔!
在本篇文章發布前，我們發現已有 友站 發布了前 16 項的介紹，不過也許彼此翻譯角度或解讀不同而內容會有些許差異，各位讀著也可互相參考。
1. 單欄排版取代多欄排版
單欄排版讓你更能掌握內容的呈現樣貌。對使用者來說，上而下的方式閱讀更直覺。相對的，多欄排版可能增加使用者閱讀時分心的風險，而不能專注於重點上。
2. 嘗試先給使用者好處，不要馬上進行銷售
可以利用友善的活動或方案讓顧客買單，例如送些小禮物。而給與顧客禮物的方式要以互惠的角度，這樣對他們而言才是有效且具說服力的銷售戰術。
3. 在介面上整合相似的功能，避免版面破碎化
設計師常因無心而設計出多欄位卻又相似的元素或功能，在頁面上就會顯得多餘甚至混淆影響使用者的操作。
4. 讓社群來證明您的價值，而非老王賣瓜
利用社群的力量來幫助你說服客戶是相當聰明的策略，且可有效的提高轉換率。用戶看到別人的認可，或是討論你的產品服務時，會加強他們想要了解或使用的動機，所以試著把使用者的推薦文或是數據證明放在網站上吧!
5. 希望使用者進行某項動作，你可在不同位置放入引導的指示
在長頁面或多分頁的網頁中，重複出現你希望使用者進行操作的元件，是一個好的經營策略。不過你千萬不要卯起來放這些元件，這麼做肯定會讓使用者感到憤怒或挫折的。然而,長頁面的網站設計模式已經相當的普及，不像過去盡量將可視範圍壓縮在一個螢幕大小內。所以在長頁面的最上方及最下方各放置一個可操作的元件，這樣的作法顯得合理且符合人性。就使用者的習慣而言，通常他們會將網頁閱讀 (或掃視) 至最底，此時看到可操作的元件，可以激發他們思考接下去該做甚麼，如此你就有機會完成一筆交易。
6. 讓可點擊和可選擇之元件的樣式有所差異，避免混淆
應用視覺元素之手法可以幫助使用者了解介面上的功能與結構，例如顏色、深度與對比度等。同時為了與你的使用者精準的溝通，需點擊的行為(如連結或按鈕)與需選擇的元件 (如選單) 設計上要有所區別，同時上方的文字必須描述清楚，才有利使用者辨別。在底下的例子中，作者選擇了藍色做為網站上使用者可點擊元件的主色，而黑色為標示已選擇的項目或是現在頁面的名稱，簡單明顯的顏色應用，讓使用者藉由顏色的線索更輕易的學習和使用網站功能。最後請記得，千萬別使用難以辨識或過多的顏色混淆使用者。
7. 強調推薦的主打產品或服務
當頁面上有多項可選擇的產品或服務時，強調主打品會是一個好想法，因為有些使用者需要多一點刺激物才會注意到。但心理學的研究指出，若提供使用者越多項的選擇時，他們從中挑選的機率就越低。為了解決這個困境，我們需要利用設計來強調最推薦的主要產品或服務。
8. 讓使用者有復原 (undo) 的機會，而非跳出確認視窗一次定生死
按下按鈕或連結，系統可能會出現兩種訊息，第一種為在介面的底部滑出可讓你回復至上個狀態的功能，另一種則是跳出視窗詢問你是否要進行操作，確認後無法復原。而這兩種有甚麼差異呢?
可 “復原 (undo)” 的設計對使用者是友善且尊敬的，因為它提供使用者就算操作錯誤也可以回復到上一步的功能，而不是像 “跳出提示視窗” 般，似乎質疑使用者的意圖。另外，使用者若需要重複的進行某項工作，系統又以跳出提示視窗為操作的方式，可能讓使用者操作效率低落，甚至產生不好的體驗。
9. 清楚描述網站的目標族群
你希望網站的目標用戶是大眾還是特定族群？
描述或限制適合產品或服務的目標族群，可以幫助網站找到更多相似特質的使用者，也更具特色，同時讓使用者感到自己具獨特性。然而，使用這樣策略具有風險，可能讓你的網站在短期內失去一些潛在用戶。不過，透明與誠實才是建立與使用者之間信任的最佳方式。
10. 語氣若不肯定，你叫使用者怎麼信任你
當你收到一封語句充滿不確定性，甚至有些膽怯的信件，以及收到一封肯定且充滿信心語句的信件，你會怎麼看待這兩個撰寫信件的人?沒錯!答案很明確肯定能待給人安心，優柔寡斷則會降低信任感。
如果你常使用問句，或是用一些不確定的詞彙，例如:也許、可能、有興趣嗎?或想要嗎?。這代表你對你的產品或服務信心不足，這時候可以使用更具權威性的語句，例如你能帶給用戶甚麼有利的改變。
11. 用對比的手法來強調
讓你的 CTA (calls to action) 更加明顯可提高使用者注意到的機率，我們可以透過深淺色調、陰影、漸層或對比色的手法來增加畫面上的對比性，進而達到我們的目的。
12. 說明產品的產地，增加與他牌的差異
說明產品或服務的產地，可讓網站與用戶之間的溝通更加人性化。例如人們總是喜歡介紹自己來自哪個國家、地區及城市，若產品或服務也能以這種人性化的方式來介紹，會顯得更加友善。另外，說明產地也可能讓產品品質與產地名聲達到雙贏。
13. 別讓使用者填太多表單
人類天生不喜歡麻煩的事物，就如同大家不喜歡在網站上填寫太多的表單。每新增一項必填欄位，訪客放棄填寫的風險就越高。此外，並非所有人打字都相當快，而且在移動裝置上輸入簡直就是件苦差事。所以盡可能的只留必要欄位，不那麼重要的就不要讓使用者填了。但如果你真的有非常多必填欄位，可以試看看將第二重要的資訊在提交第一重要的資訊後，出現於單獨的頁面上，請使用者繼續填寫。
14. 試著別隱藏頁面上的選項
使用下拉式選單的目的即是增加頁面的空間，但在第一時間，使用者無法了解選項的內容。若你的目的在於選擇可預期或已熟悉的項目 (例如：生日、日期或地區)，那使用下拉式選單元件是個不錯的選擇。另外，下拉式選單也長被使用於高度重複操作的選項，例如作業系統上方的 “檔案” 或 “編輯” (action menus)。
但若是這些選項是跟內容有關，而且是流程中必選的 (如下圖)，那你可以考慮不要隱藏這些選項，這樣可以提升網頁著轉換率。
15. 避免讓使用者產生已經滾到 “網頁最底部” 的錯覺
沒錯，長型的滾動頁面的設計相當符合人性，但要小心訪客可能會因為設計不良而產生 “已經滾到最底部” 的錯覺，這會大大的降低轉換率。
你可以透過視覺化的圖標或是小動畫，來告知或暗示使用者：網頁還沒置底，你們還可以繼續往下閱讀。另外，設計時也需小心各主題之間留白區域的尺寸，因為過大也會讓人產生底下無資訊的想法。
16. 以聚焦手法吸引使用者的目光，效果大於頁面上滿滿的連結
我們常會在頁面上留下許多 “連結”，目的在於可以滿足使用者可能的所有需求 (例如：可了解更多)。不過，假如你的目的是讓使用者捲到頁面底部時，採取你期待他們做的動作，那你必須思考上述的做法是否恰當。因為在中間安插任何連結都可能導致使用者分心而忽視了你最希望他們做的事情，所以放置連結，其數量與位置都要取得平衡。怎麼取得平衡必須仰賴大家的經驗，不過至少我們知道減少多餘的連結，可增加使用者注意到你 ”最重要動作 (可能是按鈕) ” 的機會。
17. 描述項目或功能目前的狀態
網頁設計的手法常以不同的元素來表現某項目的不同狀態。例如 E-mail 上可標記為未讀或已讀，帳單旁可顯示已繳清或未繳的 icon 等。這些做法都是告知使用者，該項目目前的狀態，也是系統提供回饋給使用者的好方式。
重點是，介面上項目的狀態可以幫助使用者了解是否已經操作過了? 操作是否成功? 或是哪些動作是使用者需進行的?
18. 試著在介面上使用能 “帶給用戶好處的按鈕”，取代 “任務導向的按鈕”
想像一下，若是頁面上有兩個按鈕，其中一個寫著 “替你省下大錢” (帶來好處的按鈕)，另一個寫著 “請註冊吧” (任務導向的按鈕)，肯定大部分的使用者會點擊前者。
原因很簡單，因為第一個按鈕視乎能替使用者產生價值；相對的，註冊這個動作則代表使用者需要花時間精力填寫表單，當然他們不願點擊。由此可知，若這個按鈕能替使用者帶來好處，自然就會有較高的轉換率。另外，”帶來好處的按鈕”與”任務導向的按鈕”若有相關性，可以將兩者放置於一區 (如下圖)，這樣可提醒使用者為什麼他們需要進行這項任務或動作。
19. 直接操作比多階層下拉式選單 (contextless menus) 來的直覺
針對介面上的元素直接操作有時比整合的操作工具列還要來的方便直覺。如下圖，若各項目皆有一些可以讓使用者操作的功能，我們可以藉由點擊或鼠標覆蓋的方式來呈現一些功能或進行操作 (如刪除或重新命名等)。另外還有一種常見的操作方式，就是點擊項目後，該項目會轉變為可編輯的狀態。
然而，多階層下拉式選單 (context of button) 十分常見，但過多的階層可能會增加操作的步驟，所以下次設計時不妨考慮減少階層或直接操作的方法。
20. 當下就可以操作，何必再多開分頁呢?
當頁面上有一些我們期望使用者做，並會帶來價值的功能時 (例如：留下聯絡方式)，最好可將實際的表單或欄位放置於本頁上。如下圖，欄位若能與頁面整合在同一層，其帶來的好處大於還要連結至別頁輸入的方式。
那我們該怎麼做呢?首先，必須精簡流程的步驟，盡可能的讓使用者花最少的時間。接著，將精簡化的表單或欄位放置於該頁面上，除了可讓使用者直接操作外，使用者也可藉此預估完成所需的時間，這樣他們進行操作的意願會更高。
本篇翻譯於 A Good User Interface。GoodUI.org is a project by Jakub (@jlinowski) and Vlad (@vladmalik) at Linowski Interaction Design.
延伸閱讀：
- 電子商務網站介面設計寶典 (一)
- 電子商務網站介面設計寶典 (二)
- 電子商務網站介面設計寶典 (三)
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
