全能 UI 改造王:專業設計師改造 PChome App,這才是台灣電商平台該有的樣子

UI Redesign - 設計 PChome App 在心中的理想形式

【我們為什麼挑選這篇文章】上週,TO 挑選了一篇 PChome APP 的 UI 設計問題相關文章 ,而本文則是接續上篇文章的分析,由作者親自重新設計一款更加符合現代需求的 UI 設計。

在這邊 TO 建議還沒有看過上一篇的朋友們,可以 先點這邊看看上一篇對於 PChome APP 介面設計的詳細全剖析 ,再接著閱讀本文。(責任編輯:林厚勳)

從可以更好的地方重新設計

接續前一篇 〈PChome 的 UI 設計哪裡有問題 〉 所談到的,PChome App 由於有著過於壅擠的介面、尚待統一的扁平化風格、繁複的視覺階層等缺點,因此介面就不及 Amazon 或淘寶那般的清楚、好看。

因此接下來,將根據這些 PChome 可以更好的地方來重新設計介面,希望能打造出心目中 PChome 最好用、也最好看的型態。

User Story

消費者之所以會想在電子商務平台上購物,原因在於其能達到實體商店無法實現的便捷、快速的購物體驗;因此對於消費者來說,會希望在使用時能獲得以下四點需求:

  • 快速找到有興趣的商品
  • 能立即了解商品內容
  • 知道商品相關評論
  • 掌握商品之送貨進程

基於這些平台使用上的期待,Google UX 設計師 Stephen Griffiths 更進一步將電子商務 App 的使用流程分為四個階段, 即 Adopt、Use、Transact 與 Return

1. Adopt

Adopt 即消費者剛開始使用該 App 的階段。

由於這是消費者首次接觸該 App,因此設計上應以清晰的內容、明確的導覽介面為主。

另外,對於還在瀏覽商品的消費者來說,註冊對其來說還未有任何必要性,因此若能讓消費者擁有選擇是否先註冊的彈性,亦是提昇使用體驗的不錯方法。

PChome 原始介面 VS. 重新設計的介面
PChome 原始介面 VS. 重新設計的介面

在介面設計上,首先將原本擬物化風格的 Search Bar,改成簡單的文字欄位,讓整個介面都統一成扁平化風格。

而原本 Bottom Navigation 所包含的搜尋、分類、通知、顧客中心與搜尋之五個功能項目,則只保留最常用的分類、搜尋與顧客中心這三項,以讓介面看起來更為乾淨、舒服。

另外,原本 PChome 的 Logo,則以純文字替代。會採用純文字的原因,在於原本的 Logo 若放在重新設計的介面裡,會有一種不協調感產生;消費者的焦點會反而放在 Logo,而不是本應該是主角的商品上。

PChome 原始介面 VS. 重新設計的介面
PChome 原始介面 VS. 重新設計的介面

為了讓商品能更容易被瀏覽,在介面設計上採以類似方塊的「卡片式」(Card)版面來呈現各商品類別,同時也捨去多餘不必要的資訊,只簡單列出品牌與商品名,將詳細資訊留在商品頁面上就好。

如此下來,可以發現重新設計後的介面,少了原本龐大資訊的壓迫感,多了更多讓眼睛放鬆、細細挑選的空間。

2. Use

PChome 原始介面 VS. 重新設計的介面
PChome 原始介面 VS. 重新設計的介面

對於商品數量破百萬的 PChome 來說,消費者最常使用的功能莫過於搜尋為主。

搜尋不單只有搜尋本身,還需要有「自動建議」與「近期搜尋紀錄」功能 ,前者能讓消費者快速找商品,後者則是方便消費者查詢過往紀錄。

就 PChome 的搜尋來說,只有「自動建議」功能,還少了也讓使用流程更為順暢「近期搜尋紀錄」功能。

PChome 原始介面 VS. 重新設計的介面
PChome 原始介面 VS. 重新設計的介面

為了減少購買商品的時間成本,利用「單選按鈕」與「增減按鈕」來選擇商品尺寸與數量,已是目前多數電商平台採取的方法。

這裡,PChome 的作法是尺寸與數量都採用「單選按鈕」;重新設計的介面則是尺寸採用「單選按鈕」、數量則使用「增減按鈕」,感覺上比較能符合個別使用上的情境。

重新設計的介面

在選擇商品時,消費者往往會在意該商品相關的評價。

不管是價格、還是規格上的選擇空間,消費者往往喜歡藉由比較來決定最終的選擇;這現象尤其以 3C 商品為最。

評價商品價值的方法,則有「評價系統」與「評分系統」兩種方法可以採用。

但對於電子商務平台來說,「評價系統」由於只有「喜歡/好」與「不喜歡/不好」兩種選擇,對於商品評比過於簡化,有著很難得知商品好壞的缺點。

相對的,「評分系統」則是提供一個數值範圍,有如打分數一樣,比較能提供一個較為具體的相對參考。

Amazon 採用評分系統作為商品價值的參考(From: Amazon

像 Amazon 即採用「評分系統」作為衡量商品價值的方法。除了評分之外,Amazon 更還有著評論的功能,這功能在 Pinkoi 裡也能看見,不過這也是 PChome 所缺乏的部分。

3. Transact

在消費者選訂商品後,接下來即進入到交易付款階段。

PChome 原始介面 VS. 重新設計的介面
PChome 原始介面 VS. 重新設計的介面

當消費者選購完商品,運費、送貨所需時間及退貨辦法等細節說明,在在都決定著消費者是否願意完成最後付款的階段。

也因此,將運費、送貨時間與退貨辦法詳列在購物車頁面上,會讓消費者更容易掌握商品相關資訊,間接也能提升平台使用上的滿意度。

PChome 的作法是,將運費、送貨時間與退貨辦法列在商品頁面上。

重新設計的介面則是列在購物車頁面上,考量點在於運費、送貨時間與退貨對於各個商品都是一樣的說明,因此放在購物車作為最後的確認就好。

但如果是像 Pinkoi 那樣的 C2C 電商平台,最好的做法還是放在商品頁面上,畢竟每個店家的運費、送貨時間都有各自的規定。

重新設計的介面
重新設計的介面

4. Return

當消費者經歷 Adopt、Use、再到 Transact 階段都能有著順暢的體驗時,回頭率自然就會隨之提升,進而形成穩定的良性循環。

然而即使如此,仍會有些細節需要留意,例如讓 App 保持在持續登入狀態、擁有歷史紀錄等功能,都能讓消費者的購物流程更為順暢,減少受到那些不必要、或重複項目的干擾。

寫在最後|那些還能更好的細節

在消費者進入付款階段時,除了提供數量修改、免運費額度提醒之外,還可以提供方便的「單一輸入框」設計,讓消費者在付費輸入資料時更為便捷。

↑行動支付 Square app 能夠讓消費者在「單一輸入框」內輸入所有付款資訊(From: LUKEW

所謂的「單一輸入框」,即是消費者無需切換欄位下,即可以於單一欄位內輸入信用卡卡號、有效期限、CVV 和郵遞區號。

雖然「單一輸入框」的樣貌,一樣是傳統上常見的四段之四位分隔,但在消費者輸入完卡號後,卡號即會自動往前移並只顯示最後一組號碼,剩下空著的三段即可以讓消費者再依序填入有效期限、CVV 和郵遞區號。

透過「單一輸入框」的設計,可以讓消費者免於切換欄位的麻煩,進而更順利且快速地完成付款手續。

透過 Redesign 來建立學習目標

看到這裡,可以發現 UI 設計真的有需多細節需要留意。雖然一開始會覺得很複雜,但透過 Redesign 來建立學習目標,終究還是能一步步釐清、了解 UI!

以上關於設計作品與思考的分享,希望大家會喜歡 😀

About Visual Design – 每週,在設計的路上紀錄著 ,有興趣的朋友歡迎追蹤。

─ ─

(本文經 Bevis 授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為 〈 UI Redesign – 設計 PChome App 在心中的理想形式 〉,首圖來源:
Tranmautritam,CC Licensed。)

更多的 PChome 和 UI 相關

大家都說 PChome 介面醜,讓專業設計師帶你看 PChome 的 UI 設計哪裡有問題
2017 年最殘酷電商大戰:PChome 大輸蝦皮的關鍵,從來不在 UI/UX 設計
【學習資源總整理】精進 PM 和 UX、UI 知識,這 15 個網站你可千萬不要漏


【2018 年 TechOrange 招募新血,引領台灣正向改變】
如果你平常關注人工智慧、fintech、區塊鏈、創新創業、數位行銷、技術開源、資安、物聯網、經營管理、科技小物等,加入《TO》跟我們一起關注社會、產業創新!

TechOrange 社群編輯、實習生持續徵才中
意者請提供履歷自傳以及文字作品,寄至 jobs@fusionmedium.com
來信主旨:【應徵】TechOrange _填上應徵職稱_:您的大名

點關鍵字看更多相關文章: