UI Research - PChome App 有哪些可以更好的地方
資訊爆炸的介面，會有那些問題、又會如何影響著使用者體驗
進步緩慢的 PChome
PChome 可謂是台灣發展最久的電子商務品牌。在線上購物普及之前，PChome 早於 2000 年推出「PChome 線上購物」平台，改變了許多人日常的消費習慣。
「PChome 線上購物」之所以能如此受到歡迎，有兩大原因：
1. PChome 商品種類相當齊全，從日常生活用品、3C、到家電等大型用品，幾乎無所不包。
2.「快速到貨服務」符合人們想立即拿到商品的期望。
但這些優勢還不足以成為護城河，其它平台靠著模仿、或採以更有吸引力的手段 (如補貼) 等方式，就能超越 PChome、奪得市占率。
如今陷入泥濘的 PChome，就這麼證明著。
困境背後的原因，有可能是因為行銷、或商業模式出了問題。但遲遲不更新的介面，也間接影響著消費者使用平台的意願。
就好比想寫作的人，看過 Medium 乾淨、舒服的介面後，應該就不會想用痞客邦了。
有哪些可以更好的地方
介面 - 降低閱讀體驗的「擬物化設計」
雖然 PChome 很早就投入於電子商務市場，但至今，介面仍停留在傳統的型錄樣貌上；而不是像掏寶、Amazon 一樣，有著屬於原生設計的 App 介面。
比較好的是，PChome 近幾次 App 改版，除了解決閃退、異常無法開啟等功能性問題外，也解決了底部導航列 (Bottom Navigation) 中「擬物化設計」的問題。
從 App 介面中，可以發現過往 PChome 的搜尋列 (Search Bar) 與底部導航列 (Bottom Navigation) 都有著漸層、陰影與高光之「擬物化設計」的應用。
「擬物化設計」不是不好，而是已經不符合現在所需。
認知心理學家 — 吉布森 (James Gibson) 於「預設用途」(Affordance) 理論裡認為，「人們會自然地透過物體的外觀、屬性，來判斷該物體的使用方式」。
也因此，早期手機從「實體按鈕」朝向「觸控螢幕」過渡時，「擬物化設計」便被用於形塑出虛擬按鈕，以呈現出過往「實體按鈕」的物理樣貌。
如此一來，使用者就能依尋經驗直覺地操作各種功能。
然而，在「擬物化設計」與「扁平化設計」兩者介面相比較下，可以發現「擬物化設計」其實有著過於複雜的細節；例如漸層、陰影、浮雕與紋理等元素，都會對視覺造成干擾，進而影響功能的判讀與操作。
此外，隨著使用者已日漸習慣行動裝置的操作時，將按鈕擬物化的必要性也逐漸降低。
因此，Apple 便在 iOS 7 開始捨去「擬物化設計」，推出崇尚「扁平化設計」的 Human Interface Guideline；Google 同樣的也在 Material Design Guideline 中，規範各種「扁平化設計」的準則。
那麼，再回頭看 PChome 的介面。
會發現 Search Bar 的地方，依然保持著漸層、陰影與高光之擬物化效果。
整體看起來，Search Bar 就明顯與帶有扁平化風格的 Bottom Navigation 有著相當大的風格差異。
這點在 App 改版上，是覺得蠻可惜、且還能更好的地方。
排版 - 缺少適當的留白空間
第一眼看到 PChome app 的感覺，莫過於那過度擁擠的內容所帶來的窒息感。
之所以會設計出如此易讀性不佳的排版，往往是因為手機介面尺寸有限，因而想讓內容盡可能放滿整個空間，即所謂「恐懼留白」(Horror Vacui) 的心理。
但其實，留白反而就是有效利用空間、提升內容價值的最好方法。
透過留白的方式，主要內容便能與周圍的空間形成強烈的對比，進而達到被凸顯效果；使用者體驗也能因為留白所帶來易讀性提升的關係，而獲得大幅的改善。
導覽 - 不夠明確的視覺階層
將 PChome app 的功能圖 (Functional Map) 畫出後，可以發現介面上方的App Bar、Search Bar 與下方的 Bottom Navigaton，都各有著重複的全站分類、購物車與搜尋之功能項目。
1. App Bar 與 Bottom Navigation
過多且不必要的項目重複，在在都會讓使用者感到困惑、也徒增選擇上的時間，導致使用者可能在未完成購物前就選擇離開。
也因此，為能有效引導使用者的瀏覽動線、避免可能的階層迷航，適當地將項目簡化就顯得相當重要。
那麼，將項目整合至 App Bar、還是 Bottom Navigation 好呢？
從《行動介面設計模式》(Designing Mobile Interfaces) 一書裡，可以知道有 49% 的手機使用者是以單手握持、並搭配大拇指的方式來操作手機，而大拇指方便觸控的區域即所謂的「操作熱區」。
從上圖可以發現，手機螢幕偏下方的區域，是拇指較容易觸及的範圍。
因此若將購物中心、購物車等重要項目陳列在 Bottom Navigation 裡，就能配合「操作熱區」而讓使用者有著更舒適的操作體驗。
2. Navigation Drawer
另外，也可發現 PChome 將 3C、周邊、NB 等眾多的商品類別收納於側邊導航選單 (Navigation Drawer) 裡，雖然這方法能讓介面更為簡潔，但 PChome 以型錄式的排版來填塞畫面的方式，卻也讓 Navigation Drawer 原本介面簡潔的優點消失。
另外，PChome 的商品類別多達 13 項，若全放在 Navigation Drawer 裡，閱讀起來仍會覺得有些壅擠。
雖然說 Navigation Drawer 的呈現上，可以捨去原本傳統上常見、但不易閱讀的列表式 (List)，而改以清楚易讀的格線版面 (Grid) 來呈現項目；然而 Navigation Drawer 本身觸及率低的隱憂，依然很可能讓使用者不容易發現這些商品類別。
在 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 都會放置在介面上方的顯目區域上。
基於 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 UI Redesign
總結一下，PChome App UI 可以更好的地方，包含：
- 改善型錄般的商品陳列方式
- 增加介面中的留白空間
- 圖示與功能列統一採用扁平化風格
- 提升視覺階層的清晰度
基於這些可以更好的地方，下篇 〈UI Redesign — 設計 PChome App 在心中的理想形式〉將利用 Google UX 設計師 - Stephen Griffiths 提出的 Adopt、Use、Transact 與 Return 之電子商務使用流程，來分析使用者操作 App 的路徑與習慣，並進一步將 PChome App 重新設計成心中理想的介面。
以上關於 PChome UI 研究的分享，希望大家會喜歡 :D
