【電商原來是醬】電商專家教你，如何提升電商網頁的用戶體驗
電商專家教你，如何提升電商網頁的用戶體驗
用戶的體驗感對於網站來說是極其重要的，成功的網站都擁有良好的頁面用戶體驗。電商網頁的用戶體驗表現在多個方面，即使是最小的細節也會對客戶產生很大的影響。所以在網站建設的過程中，要把用戶體驗始終貫穿其中，關於提升電商網頁的用戶體驗，「電商原來是醬」製作團隊有一些方法和技巧分享給大家。
- 提升網站交互體驗
- 註冊
現在越來越多的網站用戶註冊流程更加的簡單，這樣做可以降低用戶的使用門檻，可以促進更多的用戶去註冊。
“讓用戶感覺不到註冊的存在，那麽這個註冊才是成功的”，在提升用戶註冊體驗的時候，主要從以下幾個方面去著手：
1）區分登入和註冊
讓用戶可以明顯的區分登入和註冊，不會混淆。
2）讓用戶在註冊的時候使用信箱或者手機號註冊
讓用戶在註冊和登入的時候使用唯一的登入憑證，早期的時候有的網站會讓用戶設置用戶名，有的時間一長就容易忘記，從而登入不上給用戶不好的用戶體驗。
3）註冊顯示進度流程
網站會員的註冊流程一定要清晰簡潔，最好有流程圖來配合，讓用戶指導自己進行到哪一步來，還剩幾步需要完成。
4）第三方登入/註冊
預留第三方帳號登入/註冊，雖然不是每個用戶都會使用，但是通過這種方式登入會更加便捷。
5）顯示密碼
在密碼輸入框後面預留一個小眼睛，可以自己選擇顯示或者隱藏密碼。
6）提醒大寫鎖寫
通過 提醒大寫鎖定有助於避免多次輸入錯誤，降低用戶的多次輸錯的概率。
- 登入時候的建議
1）允許使用信箱、用戶名或已經驗證的手機登入，並且給出相應提示
2）給出明確錯誤提示
給出明確的錯誤提示，用戶能準確的判斷是哪一項錯誤，可以有效提升用戶登入操作體驗。
3）添加“忘記密碼”的連結
不需要放在很顯眼的位置，緊靠著用戶登入表單，如果用戶真的忘記了密碼可以很快找到解決的辦法。
4）按鈕上的提示訊息
在登入頁面中，按鈕上寫上“登入”字樣，不要用“提交”或“完成”字樣，這樣會讓用戶覺得操作和預期是一樣的，增強用戶體驗。
- 電商網站按鈕設計
按鈕是界面中最小的元素之一，同時也是最關鍵的控件。我們在設計的時候需要注意，用戶一般在什麽情況下會使用按鈕；按鈕在與用戶交互操作過程中如何為用戶提供反饋的訊息。
出色的交互按鈕需要注意以下幾點：
1）按鈕需要看起來可點擊
為按鈕添加微妙的陰影效果，是按鈕看起來“浮”出頁面更接近用戶。為按鈕添加滑鼠鼠標懸浮或點擊操作的交互效果，提示用戶。
2）按鈕的色彩很重要
按鈕作為用戶交互操作的核心，在頁面中使用色彩進行突出，電商網頁中的按鈕色彩應該是明亮而吸引人的，通常喜歡采用明亮的黃色、綠色和藍色進行按鈕色彩，想突出按鈕的顏色，用與背景色相對的顏色也是不錯的選擇。
同時按鈕的顏色還需要注意品牌色，選擇一個與頁面品牌配色方案相匹配的，不僅要識別度高，而且與品牌有關聯性。
3）按鈕的位置
按鈕放哪里可以為網站帶來更多的點擊量？大多數情況下，應該將按鈕放置在特定的位置。
比如：表單的底部、出發行為操作的訊息附近、在頁面或者 屏幕的底部、訊息的正下方。不管是在pc端還是移動端，這些位置都遵循了用戶的習慣和自然的交互路徑，使用戶操作更加方便。
4）良好的對比效果
在設計按鈕的時候，不僅要讓按鈕的內容與按鈕本身形成良好的對比，而且和背景以及周圍元素也要形成對比效果。
5）使用標準形狀
當我們在設計按鈕的時候盡量選擇標準形狀來設計，比如方形或者圓角矩形，符合用戶的認知習慣。
6）明確告訴用戶按鈕的功能
每個按鈕都會包含按鈕文本，它會告訴用戶的功能。按鈕上的文本要簡潔、直觀、符合整個網站的風格。當用戶點擊按鈕之後，出現的內容和指示的是相符的，迅速地呈現在用戶眼前，獲得用戶期望的結果。
7）給按鈕更高的視覺優先級
讓按鈕的形狀、顏色和視覺重量上，都是頁面中最顯眼的那一個元素。
- 麵包屑
他起源於 Hansel and Gretel 的傳說，孩子們為了能夠找到回家的路，將麵包屑撒在路上，並順著找到了家。和傳說中一致，麵包屑路徑在現實中也幫助我們找到自己的起始頁。
一般內容比較多的網站包含的子頁面也比較多，而麵包屑路徑支持一鍵訪問上一級目錄，避免搜尋和深度連結，使用戶更好操作理解。
使用戶不管在那個層級，哪個頁面都可以清楚的看到頁面的路徑，方便用戶快速跳轉到其他頁面；而且可以很好的展示整個網站的訊息結構。
常見的麵包屑路徑表現形式有三種：定位麵包屑路徑、屬性麵包屑路徑、路線麵包屑路徑。
1）定位麵包屑路徑
這是是最常見的一種形式，一般在多於兩級以上頁面就會使用到，在定位麵包屑路徑中，左側頁面都會比右邊的頁面連結高一個層級。
2）屬性麵包屑路徑
這種在電商類網站中用的比較多，一般是通過各種不同的屬性對搜索結果進行篩選。
3）路線麵包屑路徑
路線麵包屑是動態的，一般是用來指導用戶進行某種操作，動態的現實用戶需要完成的過程。
- 提升網站瀏覽體驗
- 提高網站頁面打開速度
1）優化圖片
在使用ps進行儲存圖片的時候一般操作三個熱鍵+S，“儲存為Web格式”，設置圖片質量，來控制大小，或者使用壓縮圖片大小的軟體，在不影響圖片顯示效果的情況下壓縮大小。
2）選擇合適的圖片格式
選擇合適的圖片格式可以縮小圖片容量。JPG格式通常用於照片或真彩色圖片，GIF格式用於平面色彩的圖片，一般用於按鈕或Logo圖片，PNG格式和GIF很相似，比JPG多支持一些色彩。
3）圖片寬度和高度設置
在製作電商網頁的時候設置好圖片的寬度和高度，瀏覽器在加載電商網頁的時候就會保留相應的圖片區域，加快電商網頁的顯示速度。
4）延遲顯示可見區域外的內容
用戶停留在第一屏的時候，不加載第一屏以下的圖片訊息，只有當用戶把鼠標往下滾動的時候，這些圖片才開始加載，這樣可以提升可見於去的加載速度，提升用戶體驗。
5）減少電商網頁的響應次數
通過 Ajax 無需重新加載整個電商網頁的情況下，能夠更新部分電商網頁的技術。
6）合併優化
CSS樣式的出現，使電商網頁實現了內容和元素表現方法的分離，用戶打開CSS樣式設計的電商網頁，CSS樣式一般是被下載到用戶本地的計算機中，而不像HTML標簽每次打開電商網頁都需要解析一次。
另外，CSS樣式載某些地方可以替代圖片，這就是為什麽提倡 使用Div+CSS的原因。
將JavaScript代碼和CSS樣式代碼分別合併到一個共享文件中，這樣不僅能簡化代碼，而且在執行avaScript文件的時候，如果JavaScript文件較多，就需要進行多次的Get請求 ，延長加載速度，將JavaScript文件合併在一起後，自然就減少了Get請求次數，提高了電商網頁的加載速度。
7）精簡代碼
在同等網絡下，頁面越小下載時間越快，所以在合理範圍內減少頁面大小是可以優化下載速度的，而頁面大小主要是 有HTML的代碼量來決定的（也包括一些CSS樣式和JavaScript代碼）。
想減小頁面大小，就得根據W3C的標準來優化HTML代碼結構，去除一些無意義的代碼。
更多的電商與社群知識，請收聽電商原來是醬的 Podcast：https://linktr.ee/ecprotw
更多名家專欄都可以直接上，明日科學新媒體： www.tomorrowsci.com
