UI Redesign - 設計 PChome App 在心中的理想形式
從可以更好的地方重新設計
接續前一篇〈UI Research — PChome App 有哪些可以更好的地方〉所談到的，PChome App 由於有著過於壅擠的介面、尚待統一的扁平化風格、繁複的視覺階層等缺點，因此介面就不及 Amazon 或淘寶那般的清楚、好看。
因此接下來，將根據這些 PChome 可以更好的地方來重新設計介面，希望能打造出心目中 PChome 最好用、也最好看的型態。
User Story
消費者之所以會想在電子商務平台上購物，原因在於其能達到實體商店無法實現的便捷、快速的購物體驗；因此對於消費者來說，會希望在使用時能獲得以下四點需求：
- 快速找到有興趣的商品
- 能立即了解商品內容
- 知道商品相關評論
- 掌握商品之送貨進程
基於這些平台使用上的期待，Google UX 設計師 Stephen Griffiths 更進一步將電子商務 App 的使用流程分為四個階段，即 Adopt、Use、Transact 與 Return。
1/ Adopt
Adopt 即消費者剛開始使用該 App 的階段。
由於這是消費者首次接觸該 App，因此設計上應以清晰的內容、明確的導覽介面為主。
另外，對於還在瀏覽商品的消費者來說，註冊對其來說還未有任何必要性，因此若能讓消費者擁有選擇是否先註冊的彈性，亦是提昇使用體驗的不錯方法。
在介面設計上，首先將原本擬物化風格的 Search Bar，改成簡單的文字欄位，讓整個介面都統一成扁平化風格。
而原本 Bottom Navigation 所包含的搜尋、分類、通知、顧客中心與搜尋之五個功能項目，則只保留最常用的分類、搜尋與顧客中心這三項，以讓介面看起來更為乾淨、舒服。
另外，原本 PChome 的 Logo，則以純文字替代。會採用純文字的原因，在於原本的 Logo 若放在重新設計的介面裡，會有一種不協調感產生；消費者的焦點會反而放在 Logo，而不是本應該是主角的商品上。
為了讓商品能更容易被瀏覽，在介面設計上採以類似方塊的「卡片式」 (Card) 版面來呈現各商品類別，同時也捨去多餘不必要的資訊，只簡單列出品牌與商品名，將詳細資訊留在商品頁面上就好。
如此下來，可以發現重新設計後的介面，少了原本龐大資訊的壓迫感，多了更多讓眼睛放鬆、細細挑選的空間。
2/ Use
對於商品數量破百萬的 PChome 來說，消費者最常使用的功能莫過於搜尋為主。
搜尋不單只有搜尋本身，還需要有「自動建議」與「近期搜尋紀錄」功能，前者能讓消費者快速找商品，後者則是方便消費者查詢過往紀錄。
就 PChome 的搜尋來說，只有「自動建議」功能，還少了也讓使用流程更為順暢「近期搜尋紀錄」功能。
為了減少購買商品的時間成本，利用「單選按鈕」與「增減按鈕」來選擇商品尺寸與數量，已是目前多數電商平台採取的方法。
這裡，PChome 的作法是尺寸與數量都採用「單選按鈕」；重新設計的介面則是尺寸採用「單選按鈕」、數量則使用「增減按鈕」，感覺上比較能符合個別使用上的情境。
在選擇商品時，消費者往往會在意該商品相關的評價。
不管是價格、還是規格上的選擇空間，消費者往往喜歡藉由比較來決定最終的選擇；這現象尤其以 3C 商品為最。
評價商品價值的方法，則有「評價系統」與「評分系統」兩種方法可以採用。
但對於電子商務平台來說，「評價系統」由於只有「喜歡/好」與「不喜歡/不好」兩種選擇，對於商品評比過於簡化，有著很難得知商品好壞的缺點。
相對的，「評分系統」則是提供一個數值範圍，有如打分數一樣，比較能提供一個較為具體的相對參考。
像 Amazon 即採用「評分系統」作為衡量商品價值的方法。除了評分之外，Amazon 更還有著評論的功能，這功能在 Pinkoi 裡也能看見，不過這也是 PChome 所缺乏的部分。
3/ Transact
在消費者選訂商品後，接下來即進入到交易付款階段。
當消費者選購完商品，運費、送貨所需時間及退貨辦法等細節說明，在在都決定著消費者是否願意完成最後付款的階段。
也因此，將運費、送貨時間與退貨辦法詳列在購物車頁面上，會讓消費者更容易掌握商品相關資訊，間接也能提升平台使用上的滿意度。
PChome 的作法是，將運費、送貨時間與退貨辦法列在商品頁面上。
重新設計的介面則是列在購物車頁面上，考量點在於運費、送貨時間與退貨對於各個商品都是一樣的說明，因此放在購物車作為最後的確認就好。
但如果是像 Pinkoi 那樣的 C2C 電商平台，最好的做法還是放在商品頁面上，畢竟每個店家的運費、送貨時間都有各自的規定。
4/ Return
當消費者經歷 Adopt、Use、再到 Transact 階段都能有著順暢的體驗時，回頭率自然就會隨之提升，進而形成穩定的良性循環。
然而即使如此，仍會有些細節需要留意，例如讓 App 保持在持續登入狀態、擁有歷史紀錄等功能，都能讓消費者的購物流程更為順暢，減少受到那些不必要、或重複項目的干擾。
寫在最後｜那些還能更好的細節
在消費者進入付款階段時，除了提供數量修改、免運費額度提醒之外，還可以提供方便的「單一輸入框」設計，讓消費者在付費輸入資料時更為便捷。
所謂的「單一輸入框」，即是消費者無需切換欄位下，即可以於單一欄位內輸入信用卡卡號、有效期限、CVV 和郵遞區號。
雖然「單一輸入框」的樣貌，一樣是傳統上常見的四段之四位分隔，但在消費者輸入完卡號後，卡號即會自動往前移並只顯示最後一組號碼，剩下空著的三段即可以讓消費者再依序填入有效期限、CVV 和郵遞區號。
透過「單一輸入框」的設計，可以讓消費者免於切換欄位的麻煩，進而更順利且快速地完成付款手續。
看到這裡，可以發現 UI 設計真的有需多細節需要留意。雖然一開始會覺得很複雜，但透過 Redesign 來建立學習目標，終究還是能一步步釐清、了解 UI！
以上關於設計作品與思考的分享，希望大家會喜歡 :D
