大家都說 PChome 介面醜,讓專業設計師帶你看 PChome 的 UI 設計哪裡有問題

UI Research - PChome App 有哪些可以更好的地方

【我們為什麼挑選這篇文章】現今電商正夯,各種網路購物、行動購物興起,而作為與消費者接觸的第一道關卡,這些網站、APP 的 UI 設計也就越加重要。

台灣電商龍頭之一的 PCHome ,在 UI 設計上老是為人詬病,但許多人舊址覺得難看,卻也說不出個所以然,為什麼難看。

本文作者為 UI 設計師,將從 UI 設計的角度剖析 PCHome APP 的設計,從介面風格到互動邏輯逐步拆解,除了讓大家看到 PCHome APP 該如何改善外,也可以讓其他人學到,如何做好一個 UI 設計。(責任編輯:林厚勳)

進步緩慢的 PChome

PChome 可謂是台灣發展最久的電子商務品牌。在線上購物普及之前,PChome 早於 2000 年推出「PChome 線上購物」平台,改變了許多人日常的消費習慣。

「PChome 線上購物」之所以能如此受到歡迎,有兩大原因:

  1.  PChome 商品種類相當齊全,從日常生活用品、3C、到家電等大型用品,幾乎無所不包。
  2. 「快速到貨服務」符合人們想立即拿到商品的期望。

但這些優勢還不足以成為護城河,其它平台靠著模仿、或採以更有吸引力的手段 (如補貼) 等方式,就能超越 PChome、奪得市占率。

如今陷入泥濘的 PChome,就這麼證明著。

困境背後的原因,有可能是因為行銷、或商業模式出了問題。但遲遲不更新的介面,也間接影響著消費者使用平台的意願。

就好比想寫作的人,看過 Medium 乾淨、舒服的介面後,應該就不會想用痞客邦了。

那麼,PCHome APP 有哪些可以更好的地方?

介面 – 降低閱讀體驗的「擬物化設計」

UI Research - PChome App 有哪些可以更好的地方
2017.12.14 版本更新前 VS. 更新後
UI Research - PChome App 有哪些可以更好的地方
再將頁面往下滑,型錄般的介面就出現了@@

雖然 PChome 很早就投入於電子商務市場,但至今,介面仍停留在傳統的型錄樣貌上;而不是像掏寶、Amazon 一樣,有著屬於原生設計的 App 介面。

比較好的是,PChome 近幾次 App 改版,除了解決閃退、異常無法開啟等功能性問題外,也解決了底部導航列 (Bottom Navigation) 中「擬物化設計」的問題。

從 App 介面中,可以發現過往 PChome 的搜尋列 (Search Bar) 與底部導航列 (Bottom Navigation) 都有著漸層、陰影與高光之「擬物化設計」的應用。

還處於「擬物化設計」的 iOS 6 VS. 採用「扁平化設計」的 iOS 7 (From: 咖尼馬管家的筆記)
還處於「擬物化設計」的 iOS 6 VS. 採用「扁平化設計」的 iOS 7(From: 咖尼馬管家的筆記

「擬物化設計」不是不好,而是已經不符合現在所需。

認知心理學家 — 吉布森 (James Gibson) 於 「預設用途」(Affordance) 理論裡認為,「人們會自然地透過物體的外觀、屬性,來判斷該物體的使用方式」。

也因此,早期手機從「實體按鈕」朝向「觸控螢幕」過渡時,「擬物化設計」便被用於形塑出虛擬按鈕,以呈現出過往「實體按鈕」的物理樣貌。

如此一來,使用者就能依尋經驗直覺地操作各種功能。

然而,在「擬物化設計」與「扁平化設計」兩者介面相比較下,可以發現「擬物化設計」其實有著過於複雜的細節;例如漸層、陰影、浮雕與紋理等元素,都會對視覺造成干擾,進而影響功能的判讀與操作。

此外, 隨著使用者已日漸習慣行動裝置的操作時,將按鈕擬物化的必要性也逐漸降低。

因此,Apple 便在 iOS 7 開始捨去「擬物化設計」,推出崇尚「扁平化設計」的 Human Interface Guideline;Google 同樣的也在 Material Design Guideline 中,規範各種「扁平化設計」的準則。

UI Research - PChome App 有哪些可以更好的地方

那麼,再回頭看 PChome 的介面。

會發現 Search Bar 的地方,依然保持著漸層、陰影與高光之擬物化效果。

整體看起來,Search Bar 就明顯與帶有扁平化風格的 Bottom Navigation 有著相當大的風格差異。

這點在 App 改版上,是覺得蠻可惜、且還能更好的地方。

排版 – 缺少適當的留白空間

第一眼看到 PChome app 的感覺,莫過於那過度擁擠的內容所帶來的窒息感。

之所以會設計出如此易讀性不佳的排版,往往是因為手機介面尺寸有限,因而想讓內容盡可能放滿整個空間,即所謂「恐懼留白」(Horror Vacui) 的心理。

但其實,留白反而就是有效利用空間、提升內容價值的最好方法。

透過留白的方式,主要內容便能與周圍的空間形成強烈的對比,進而達到被凸顯效果;使用者體驗也能因為留白所帶來易讀性提升的關係,而獲得大幅的改善。

導覽 – 不夠明確的視覺階層

UI Research - PChome App 有哪些可以更好的地方
Functional Map

將 PChome app 的功能圖 (Functional Map) 畫出後,可以發現介面上方的 App Bar、Search Bar 與下方的 Bottom Navigaton,都各有著重複的全站分類、購物車與搜尋之功能項目。

1. App Bar 與 Bottom Navigation

過多且不必要的項目重複,在在都會讓使用者感到困惑、也徒增選擇上的時間,導致使用者可能在未完成購物前就選擇離開。

也因此,為能 有效引導使用者的瀏覽動線、避免可能的階層迷航,適當地將項目簡化就顯得相當重要。

那麼,將項目整合至 App Bar、還是 Bottom Navigation 好呢?

圖左,人們慣用的單手操作方式;圖右,操作熱區依握持位置與方式而有所不同,綠色為手指可輕鬆觸及的區域;黃色為手指需伸展才能觸及的區域;紅色則表示須改變握持方式才能觸及的區域(From: ELECTRIC news)
圖左,人們慣用的單手操作方式;圖右,操作熱區依握持位置與方式而有所不同,綠色為手指可輕鬆觸及的區域;黃色為手指需伸展才能觸及的區域;紅色則表示須改變握持方式才能觸及的區域(From: ELECTRIC news

從《行動介面設計模式》(Designing Mobile Interfaces) 一書裡,可以知道有 49% 的手機使用者是以單手握持、並搭配大拇指的方式來操作手機,而大拇指方便觸控的區域即所謂的「操作熱區」。

從上圖可以發現,手機螢幕偏下方的區域,是拇指較容易觸及的範圍。

因此若將購物中心、購物車等重要項目陳列在 Bottom Navigation 裡,就能配合「操作熱區」而讓使用者有著更舒適的操作體驗。

2. Navigation Drawer

Navigation Drawer 裡包著相當多商品的類別。
Navigation Drawer 裡包著相當多商品的類別。

另外,也可發現 PChome 將 3C、周邊、NB 等眾多的商品類別收納於側邊導航選單 (Navigation Drawer) 裡,雖然這方法能讓介面更為簡潔,但 PChome 以型錄式的排版來填塞畫面的方式,卻也讓 Navigation Drawer 原本介面簡潔的優點消失。

除此之外,PChome 的商品類別多達 13 項,若全放在 Navigation Drawer 裡,閱讀起來仍會覺得有些壅擠。

圖左,List 版面;圖右,Grid 版面(From: UpLabs)
圖左,List 版面;圖右,Grid 版面(From: UpLabs

雖然說 Navigation Drawer 的呈現上,可以捨去原本傳統上常見、但不易閱讀的列表式(List),而改以清楚易讀的格線版面(Grid)來呈現項目;然而 Navigation Drawer 本身觸及率低的隱憂,依然很可能讓使用者不容易發現這些商品類別。

Navigation Drawer 的使用頻率明顯比 Tab Bar 低了許多(From: TNW)
Navigation Drawer 的使用頻率明顯比 Tab Bar 低了許多(From: TNW

TheNextWeb 一篇針對 Navigation Drawer 使用行為的研究結果,發現 Navigation Drawer 的使用頻率不及於無須點擊、即可看見項目的標籤列(Tab Bar)。

雖然 Navigation Drawer 能讓介面更為簡潔,然而無法一眼就看出有哪些選擇項目的導覽方式,連帶的也讓使用者點選 Navigation Drawer 的動機與意願低落。

相較之下,同時有著操作熱區與 Tab Bar 優點的 Bottom Navigation,不外乎是讓視覺階層更為清楚的最好方法。

因此在下一篇 UI 實作中,會嘗試以這概念帶入 UI Redesign 裡。

3. Search Bar

Search Bar 對於電子商務平台來說,可以說是對使用者最方便、也是最常使用的導覽方式。

考量到人們是以由上而下的動線來閱讀內容,因此 Search Bar 都會放置在介面上方的顯目區域上。

圖左,為 Expandable Search;圖右,為 Persistent Search(From: Android by outline)
圖左,為 Expandable Search;圖右,為 Persistent Search(From: Android by outline

基於 App 功能定位上的不同,Search Bar 可分成「可擴展式搜尋」(Expandable Search)與「持續式搜尋」(Persistent Search)。

Expandable Search 主要用於 Search Bar 為次要功能的情境上 ,因此僅會以簡單的搜尋 Icon 來表示搜尋功能。

相對的,Persistent Search 則用於 Search Bar 為主要功能的情境上,因此光 Icon 提示是還不夠的,還會加上搜尋文字欄位讓 Search Bar 更為明顯。

對於 PChome 來說,使用者可謂相當依賴搜尋功能,以便於在茫茫商品快速找到目標商品。因此 PChome 原有的 Persistent Search 功能,是相當適合做為其商品導覽的方式。

不過還是忍不住想說,帶有擬物化外觀的 Search Bar,真的不是很好看就是了 XD

總結

總結一下,PChome App UI 可以更好的地方,包含:

  1. 改善型錄般的商品陳列方式
  2. 增加介面中的留白空間
  3. 圖示與功能列統一採用扁平化風格
  4. 提升視覺階層的清晰度

基於這些可以更好的地方, 在下一篇文中我 將利用 Google UX 設計師 – Stephen Griffiths 提出的 Adopt、Use、Transact 與 Return 之電子商務使用流程,來分析使用者操作 App 的路徑與習慣,並進一步將 PChome App 重新設計成心中理想的介面。

以上關於 PChome UI 研究的分享,希望大家會喜歡 😀

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

 

TO 編按:本文作者下篇文章《全能 UI 改造王:專業設計師改造 PCHome App,這才是台灣電商平台該有的樣子》已上線, 歡迎閱讀

─ ─

(本文經 Bevis 授權轉載,並同意 TechOrange 編寫導讀與修訂標題,原文標題為 〈 UI Research – PChome App 有哪些可以更好的地方 〉。)

PCHome 的問題只有 UI?

PChome 反擊蝦皮!結果 Banner 做超像,沒創意沒彈性難怪輸 hen 慘
【台灣人『不好意思』心態礙事】何飛鵬回應 PChome 電商大戰:我也很不滿,礙於情面才未說
本土電商龍頭 PChome 對上蝦皮:別再拿「國族主義」,來掩蓋自家企業競爭力很差的現實啊
2017 年最殘酷電商大戰:PChome 大輸蝦皮的關鍵,從來不在 UI/UX 設計


科技新時代來到,肝苦 IT 人

參加 IT 人!新痛苦指數大調查!抽任天堂 Switch

馬上抽 Switch

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