前端工程師後端之旅(4) - 前端體驗優化

Outline

這個專案著重於後端資料規劃,不過在前端部分我還是有幾個覺得可以優化的地方,分別是

  1. 訊息提示
  2. 表單檢查
  3. 購物車實現方式。

訊息提示

不管是成功或是失敗,訊息回饋我們不希望用跳頁的方式,以減少server的負擔,不過以MVC框架的話用server端解決對工程師來說是比較明確。我想也許這邊可以用重要性來分,如網站底下的聯絡我們表單,就很適合用ajax送出資料,然後給予使用者提示。

像是使用者註冊跟個人資料修改這種比較重要的資料,就可以用傳統跳頁的方式,使得回饋感比較重。

頁尾聯絡表單

不跳頁的即時回饋:

結帳頁面Coupon彈跳訊息

結帳頁面的coupon因為是用ajax去確認coupon合法性,所以訊息不採用跳頁的方式。

表單錯誤檢查

表單檢查最好是前後端都做,但由前端處理可以減少server負擔,也確保資料送到server時的完整度,
這邊示範前端表單檢查:

結帳頁面

頁尾聯絡表單

購物車實現方式

原本的購物車是做在Server Side, 所以每加入一次購物車,甚至在購物車頁面增加或減少商品數量都是一次Request,使用者每點擊一下都要等待將近一秒鐘的延遲,對使用者比較不友善。

所以我將體驗改為,直到使用者結帳之前,都是使用瀏覽器Cookie記錄使用者加入購物車的商品資料;而使用者進入結帳頁面之後,我才是使用session來傳遞購物車資訊,避免商品資料被竄改,產生使用者購買錯誤商品的悲劇。

你可以在這裡看到相關的技術細節

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×