優化蝦皮app的購物車結帳程序體驗
改善因介面資訊繁雜導致使用者無法明確了解結帳程序之問題
根據 Jakob Nielsen 所提出的 Heuristic evaluation 發現問題
以下將透過 Jakob Nielsen 提出的10項 UI原則，分析蝦皮app的購物車介面現況。
蝦皮app的購物車介面現況分析
左圖為購物車頁面、右圖為介面結構分解圖
・Flexibility and efficiency of use高效靈活原則：
此頁面為購物車，本質上來說應當是瀏覽購物車內容，但從右側結構分解圖來看，可很明顯的發現Scroll View被上下的空間佔據1/2，甚至一次只能看見一樣商品，若是想看多樣商品需不斷地滾動視窗。
然而佔據掉商品頁面的是許多「重複出現」的促銷活動，像是：免運優惠和折價券，分別同時出現兩處，使用者必須先點選商家優惠券後，再去點選全站折價券和免運卷，這些「固定式」和「重複性」的Tool Bar成為了降低購物車頁面的瀏覽效率的主要原因。
因此，若是能將「固定式」的Tool Bar更改為上下滑動頁面時會消失的「活動式」，同時將「重複性」的功能整合成一項Tool Bar，不僅能將Scroll View的空間增加，也能提升使用者在購物車頁面的瀏覽效率。
・Aesthetic and minimalist design 美觀和簡約原則：
進入購物車頁面時，乍看之下容易給人一種密密麻麻，找不到關鍵資訊的視覺感受。
在此提出了三個要點，構成此頁面雜亂的來源：
1.資訊量過多，可藉由上述所提及「重複出現」的促銷活動做簡化，降低視覺負擔；
2.店家及商品名稱過長，甚至超出頁面，使得這樣的文字成為了「無效資訊」，在瀏覽上反而起到了反作用，若是蝦皮平台能限制文字長度的上限即可解決此問題。
3.最後，由上述左圖購物車原始介面來看，上下的Navigation Bar 和Tool Bar與中間的Scroll View因底色相同，無法明顯看出層級之差，瀏覽時難以聚焦在商品資訊上。
進入蝦皮app結帳程序頁面
・Visibility of system status 狀態可視原則：
根據左圖的結帳原始頁面來看，像是「訂購人資料」、「付款與運送方式」、「優惠卷」等，將所有需填入的資料放在同一頁面，讓使用者較難明確地了解自己進行到結帳程序的哪個階段，若是能在上方Navigation Bar加入結帳程序步驟能更提升頁面的明確性。
・Consistency and standards 結構一致性原則：
由右側結構分解圖來看，頁面中央填寫資料的類別無系統性的分類整合。
像是：「折價券」和「折抵金」分散在三個選項當中；「訂單金額」更是出現了三次，其中「寄送方式」卻擺在商品和訂單金額之間，若是能將頁面依照種類做分類不僅能減輕使用者的視覺負擔，也能使介面看起來更有一致性。
根據上述的原始介面分析，針對提出的問題做修正，
優化蝦皮app購物車頁面及結帳程序
步驟1至1–1購物車頁面：
將「固定式」的Tool Bar移除，並且將「賣場抵用券」、「全站折價券」和「免運券」三者做整合，統一放在頁面下方，點進去即可一次選擇要使用的優惠券。進而將中間的Scroll View空間增加，能夠一次看見較多樣的商品。
此外，將中間的Scroll View上下方的Navigation Bar和Tool Bar做顏色上的區別，讓使用者能更容易聚焦在商品資訊的部分。
商品資訊的部分則是簡化了賣場名稱和商品名稱，統一了下拉式選項的顯示方式，在選擇商品數量時無需一直按＋號，可直接用下拉方式選擇。
步驟2、3、4結帳程序頁面：
將結帳程序分為「確認商品」、「付款與運送方式」、「訂購人資料」三大步驟進行。上方加入結帳程序的步驟圖，並且在單一頁面只顯示一種分類的選項。
在這網購盛行的時代，各式各樣的電商平台不勝枚舉，在設計的過程中，也參考了許多不同的電商app介面，其中不難發現，現今無任何一個購物平台app的介面能做到最大化的優化，總是有令人不滿意的介面設計，不論是整體視覺性，或是使用流程上。
然而在優化介面設計之中最困難的莫過於要同時站在「使用者」以及「官方平台」的角度思考，平時作為使用者的我們很容易能提出哪裡不好哪裡需要改進的問題點，但要進行修正時又必須站在官方立場思考，哪些功能為什麼要存在，哪些功能又屬於商業策略不能刪減。因此在之間如何達到平衡也是我要進一步學習的部分。
