HKTV Mall 的版面設計問題

goofyz

適逢 759 網上商店快將開張，我之前寫張篇 blog 講 HKTV Mall 有乜問題，因為篇文還有提及其他問題，唔關 programming/design 事，呢度抽出相關的放在這，希望 759 同大家都唔會重犯同樣問題。有興趣可看回原 Blog post: HKTV Mall 問題。

---------------------------------------

首頁

圖片的 3%



最搶眼的是每張圖也有 3%。超初還以為是特價 3%，細看才知那是回贈。其實若全部貨品都有「3%」，為何每張圖片都要加呢? 現在整個版面都是「3%」，看多兩次後任何人也變得麻林，會直接無視，根本不能作賣點。就算當中有一件貨品不是「3%」，也不易看到。

而消費者最關心的特價訊息比「3%」還要細，要細心看才看到，實在是弄錯重點。

密集的商品



首頁的商品密密麻麻，很壓迫，完全沒有留白的空間。每個商品分類都在首頁顯示它的相關貨品和品牌，令頁面非常長，亦令載入時間增加。

密集的顯示只會令人麻木，還不如挑一些出來重點宣傳。

「商品分類」永遠顯示

左邊的「商品分類」在任何頁面都會顯示，不會根據所在頁面 highlight 所屬分類。浪費位置之餘又不能給使用者更佳的使用體驗，更限制了其他頁面的顯示。

如可以顯示現在貨品的其他資訊，或將搜尋的設定放在左邊更好。或甚干脆移除它，讓顯示主要內容的空間更大。

Footer

Footer 竟然用粗體字，還要用上全黑色，比主要內容更顯眼，看來 HKTV Mall 是想宣傳自身公司多於賣貨品。

貨品頁面

現在來看看一般的貨品頁面。貨品頁面最重要的是當中的貨品，顧客進入貨品頁面為的就是看看貨品是不是他們想買的東西，而任何網上商店都是想盡辦法令消費者按購買的按鈕。但 HKTV Mall 似乎是反其道而行。

公司 Banner



上面的 banner 是怎麼一回事？廣告？不，原來那是銷售貨品的公司 banner。這麼大的 Banner，你是在賣公司還是賣貨品?

導覽連結


很粗很大的導覽連結

字體太大太黑，這類導覽性質的連結不用這麼搶眼。

建議改為淺灰色，並將字體縮少。

另外它的格式是「主頁 > 公司 > 商品」，為什麼不是「主頁 > 分類 > 商品」呢? 這又是以銷售公司為主的例證。但對消費者而言，查看貨品的分類比起查看某公司的貨品更重要。

按鈕位置

HKTV Mall 的「加入購物車」按鈕是放在商品簡介下的，因為不同貨品有不同長度的簡介，令每個「加入購物車」按鈕位置都不同，令整體失去一致性，更甚者要顧客花時間找。

看看 Amazon 和淘寶，它們的購買按鈕的位置是一樣的，這樣才能令顧客想購買時不需額外的「思考」。

按鈕顏色

貨品頁面的主要功能是想人按「購買」鍵，所以應該只有一個按鍵是用主色的。其他使用主色的按鈕只會分散消費者的注意力。而看看此地方，少少的地方有幾個按鈕是綠色主色的，要分辦出購買制不容易。


少少的地方有三個主色按鈕

為什麼「寫評論」要高於「加入購物車」?「即時對話」這麼大，是因為這是常用服務嗎?

再看看「喜歡此商品」，白底綠框的設計讓人一看便知是按鈕，但又能保持整體一貫設計，而且不會搶過「主按鈕」的風頭。

建議將「次要按鈕」都用上「喜歡此商品」按鈕的設計。然後「寫評論」要在購買物品後才能執行，一般用戶不會用到，建議搬到「用家評論」位置附近。另外「即時對話」縮少一點。

「不可退貨」

有點像禁止購買啊

一眼看去，「不可退貨」太大，而且有禁止圖案，令人有負面印象，以為不能購買或有其他問題。用普通文字寫出「不可退貨」便足夠，不需使用等別圖案。

其他貨品宣傳


右邊的圖片原來不是當前的貨品

初看右邊圖片還以為是當前貨品的照片，細看下才發現原來是其他貨品的宣傳。其實用戶來到此頁面最想是查看當前貨品的資料，而不是看其他貨品。購物網站用了大量的資源吸引消費者來到某一貨品頁面，當然是想他們按購物鍵，你這麼快便放其他東西在去分散他們的注意力，難得聚集了的消費意欲一下便被吹散。

不是說不能宣傳其他產品，而是應該記著貨品頁面的重點是推銷當前貨品，其他的宣傳應該排在當前貨品後，而不是現在的當眼的位置。要記得，自己的網站是靠銷售貨品為生，不是靠賣廣告 (應該是吧?)。

將「相關貨品」放在現有貨品的描述下面或縮小一點吧。

店鋪頁面

每個在 HKTV Mall 上的店鋪，都有專屬頁面。

商品位置

店鋪頁面頂部是宣傳圖，然後是「搜尋篩選」，最後最低才是商品列表。很多時進入某一商鋪頁面，不能即時看到商品列表。購物網站應該何時何地也以商品為先，為何這裏會將商品放在最不引人注意的位置？

不能 click 的宣傳圖

看到中間很大的宣傳圖嗎？店鋪似乎可自訂幾張宣傳圖，但它們是不能被 click 的，顧客想查看宣傳圖的貨品也沒有辦法。這樣的宣傳圖完全沒有作用。

搜尋結果頁面

「搜尋篩選」太佔空間

「搜尋篩選」佔頁面太多太大，還要放在頂部，訪客當然是想看搜尋結果多於「搜尋篩選」。

建議將「搜尋篩選」放在右邊較好，代替「商品分類」。

梁炳

好多人都覺得hktv mall的網有點違和感，唔似TB咁親和
維基搞掂基本物流後，要集中搞下UX

幾有意思的文章，繼續努力

look_yau

macvita

佢這個新version的網頁, 已比最初時易睇和易用, 希望佢地越做越好.

heiko

有意思!~ 謝謝分享

goofyz

佢這個新version的網頁, 已比最初時易睇和易用, 希望佢地越做越好.
macvita 發表於 30-7-2015 12:16 AM

佢最初 o個個版本真係用到想死。本來 o個時已經想寫文，點知佢好快改左版。可惜而家改左版都係唔合格。希望佢快 d 執好佢啦。

polarhei

一個好UI或好宣傳, 通常係斷捨離或我行我素. 簡單, 一句, 清倉貨品打八折,精選九折,新品有幾多積分回贈. 我相信他們不會犯上低級錯誤. 即使我不是主要負責介面設計, 主要協助設計師製造可用程式而已. 我知道如果畫面超過九個, 可能出問題.

睇黍, 設計班好高效率.

董事長

web design 同user永遠活響兩個唔同世界:titter: