電商原來是醬

【電商原來是醬】電商專家教你,如何提升電商網頁的用戶體驗

電商專家教你,如何提升電商網頁的用戶體驗

用戶的體驗感對於網站來說是極其重要的,成功的網站都擁有良好的頁面用戶體驗。電商網頁的用戶體驗表現在多個方面,即使是最小的細節也會對客戶產生很大的影響。所以在網站建設的過程中,要把用戶體驗始終貫穿其中,關於提升電商網頁的用戶體驗,「電商原來是醬」製作團隊有一些方法和技巧分享給大家。

  • 提升網站交互體驗
  1. 註冊

現在越來越多的網站用戶註冊流程更加的簡單,這樣做可以降低用戶的使用門檻,可以促進更多的用戶去註冊。

“讓用戶感覺不到註冊的存在,那麽這個註冊才是成功的”,在提升用戶註冊體驗的時候,主要從以下幾個方面去著手:

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