HKTV Mall 的版面設計問題

適逢 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

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

TOP

TOP


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

TOP

有意思!~ 謝謝分享

TOP

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



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

TOP

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

睇黍, 設計班好高效率.

TOP

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

TOP

仲有啲product 相影得唔算出色~~~~~~

TOP