7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)
7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(下)

 

本文為下篇,上篇請看此連結

 

5. 按鈕在版面上的順序位置

循序漸進的按鈕順序就像是使用者和系統之間的對話,在 UI /UX設計的過程中,不斷反問自己或換位思考,使用者點選按鈕的步驟,會希望達成什麼目的,並進行相對應的設計。譬如說:上一頁/下一頁的按鈕,左右方向的箭頭按鈕是常見呈現方式。

 

 

6. 避免過多的按鈕分散注意力

為了能夠增進 UX 使用者體驗,會在同個頁面上增加各式各樣的按鈕,一不小心數量會比預期來得多,便會產生分流降低點擊率。譬如說:如果主要目的是想讓使用者點選頁面下載按鈕,使用者可能會因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開,以確保使用者點選到目標按鈕。

 

 

7. 加入音效或動畫產生互動

藉由人的五官體驗,在按鈕的設計上傳達聲音與動態效果就能更加深使用者的體驗,試著營造出如同按鈕圖示呈現的舒適情境,當使用者點選時,產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時,通常會認為系統沒有接收到指令,而不斷的重複點選,便會導致多次不必要的操作。

 

方便點選的按鈕還有許多值得探討的 UI 設計技巧,以上所述的7個基本要點常用也可以說是最容易忽略的一部分。優化按鈕設計的各種細節,探索各個細節對目標的點選,更能夠達成自己所理想的轉換成效哦。

 

 

 

 

 

 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


線上會議不卡卡,人工智慧讓你給你超優質體驗!(上)


影片也要SEO?!15種方法讓你在GOOGLE前幾名!(上)


經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!

 

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)
7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(上)

 

目錄

1. 互動式的按鈕設計

2. 方便搜尋版面上的按鈕位置

3. 指令清楚的按鈕標示與說明

4. 符合使用者習慣的尺寸大小

5. 按鈕在版面上的順序位置

6. 避免過多的按鈕分散注意力

7. 加入音效或動畫產生互動

 

按鈕在網站上出現的頻率是相當高的,如同實體店面的動線,協助顧客快速找到目標。隨著線上的商業發展蓬勃,網站設計上開始重視使用者觀看版面的體驗(UX),如何藉由按鈕的佈局轉換為交易,並進一步提升營收將是本次的主題。

 

雖然現今的網站美輪美奐,還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design,簡稱 RWD)的普遍,改善同時在手機、iPad與電腦不同裝置顯示問題,在版面中搭建使用者與系統之間的互動操作流程,仍不能缺少按鈕作為基礎視覺元素。

 

按鈕的設計不只是簡單的一個圖示,任何讓我們感到舒適方便的操作,都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理,加入外觀美學、色彩學等知識創建而成,分成以下7個基本要點說明:

 

1. 互動式的按鈕設計

建立按鈕需要使用正確的樣式,依照按鈕產生的狀態設計不同外觀,包含:大小、形狀、顏色、陰影等因素組成,再搭配上合適的字體與間距,藉由簡單的觸控、按下去即可達到目的,讓人享受到即時的強烈滿足感。

 

線上虛擬按鈕的視覺性,來自接觸實體按鈕的體驗和認知根深蒂固,UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。

 

以下是大多數用戶熟悉的幾個按鈕示例:

1. 帶有方形邊框的按鈕

2. 帶圓角的按鈕

3. 帶陰影的按鈕

4. 幽靈按鈕

 

 

除了容易點選的按鈕樣式,保持與周遭文字適當的留白避免視覺干擾。

 

 

 

2. 方便搜尋版面上的按鈕位置

使用者閱讀內容的同時,會搜尋版面可點選的功能按鈕,比如:下一頁、產品介紹等,如果使用者在視覺上尋找的時間愈久,若找不到按鈕,便不會知道它的的存在,愈容易感到網站不好使用。

 

為了和使用者不要玩追逐按鈕的遊戲,因此使用一致性的排版設計,便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局,足夠的留白與簡潔使版面不會太擁擠,即使不是強烈鮮明的按鈕,依然隨著閱讀動線吸引使用者輕鬆的點選。

 

3. 指令清楚的按鈕標示與說明

帶有誤導性資訊的按鈕標示,容易讓使用者感到迷惑。設計標示按鈕文字時,為了傳達出每個按鈕的作用,便需要簡短、有邏輯且適當的文字,讓使用者清楚了解點選按鈕後的結果,盡快獲得自己想要的內容,太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。

 

比如下列案例

 

 

不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事?”

 

 

與其按鈕標示“OK”,不如使用“Remove”,清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作,可以使用強烈的顏色來提醒。

 

4. 符合使用者習慣的尺寸大小

按鈕圖示讓 UI 觸控尺寸大於可視尺寸,確保互動可靠性,按下按鈕應該是一個簡單的任務,如果使用者無法成功地輕點按鈕,或在操作過程中感到無所適從,這會帶來負面的體驗,並且浪費時間。

 

按鈕的大小反應著在屏幕上優先順序,愈是優先的重點便會是愈大的按鈕表示,或是使用更鮮明的對比色來凸顯,藉此增加使用者的注意力。而在操作 UI 使用者介面過程中,按鈕需考慮對使用者觸控的友好度,按鈕太小,往往導致會有輸入錯誤的情況發生。

 

 

 

 

 

麻省理工學院觸控實驗室的研究發現,指尖的平均值在 10-14 mm之間,指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。

 

 

 

下篇請看此連結
 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


會say no的人工智慧?!美打造辯論談判高手AI!


憂鬱症掰掰,人工智慧快速判別及早治療!


經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!