活動咖手機版網站上線了 - 活動平台行動裝置網站或 App 設計的現狀探討與改進

活動咖手機版網站上線了 - 活動平台行動裝置網站或 App 設計的現狀探討與改進

這陣子剛好在幫活動平台網站-活動咖 EventPal 設計 + 製作行動裝置版網頁,因此參考了不少前輩的作品 - Accupass、KKTIX、Pinkoi、friDay 等。在這裡記錄一些我對這些網站的想法,還有我們家產品所遇到的問題和設計的功能、解法。

面對活動平台,基本上我不看精選或推薦活動 / 商品的,因為就是促銷而已,而這些促銷活動 / 商品往往無法勾起我的興趣;而個人化的推薦活動和樣本數有關,因此很可能推薦給我的也不是我真的喜歡的,因此無論如何最後我最常用的就是「搜尋」和「瀏覽」功能了。另外,個人化功能也很重要,例如訂單查詢、瀏覽記錄等。

關於目前活動平台行動裝置網站或 App 設計的探討…

活動很多,推薦又無法滿足需求,那麼搜尋和分類功能便是重點(讓我用最快的方式找到東西就好!)。活動平台的搜尋和分類不外乎就是找地區、時間、主題、關鍵字。找到之後,也能讓我很快的看到重點,決定是否符合需求。再來,如果能讓我快速看到目前的訂單狀態(是否購買成功、是否需要聯繫客服),幫我備忘我曾瀏覽過的項目,那就再好不過了。

因此,我所關注的重點是

KKTIX

Desktop 與行動裝置為同一版面(RWD),行動裝置以使用 App 為主。以 App 來看,依照時間搜尋活動是方便的,我也很常就一週、一個月內來看。一週、一月的分類,以行動裝置快速搜尋/瀏覽來說,我可能剛好這幾天或現在有空,看個一週內舉辦的活動。或我準備要參加這幾天報名的活動,但忘記詳細資訊,想臨時想查。或依照班表(班表通常以月來計)安排時間空缺。但不同的 TA 使用不同的時間區段做規劃,例如參加馬拉松就可能是以月、季來看。

KKTIX

近期檢視 - 對我來說很像是個更精準的推薦功能,畢竟都是我曾經有興趣的東西,也是幫我備忘忘記報名的活動。

KKTIX

總結

總結我喜歡 KKTIX 的功能

Accupass

同樣的,Desktop 與行動裝置為同一版面(RWD),行動裝置以使用 App 為主。以 App 來看,我超喜歡 Accupass 的活動日曆的功能!

可以依照活動日期一一尋找,好找之外也很好瀏覽,資訊清楚。

Accupass

可以指定日期。

Accupass

熱門搜尋推薦。

Accupass

總結

總結我喜歡 Accupass 的功能

活動咖

活動咖 EventPal 是一個賽事、活動報名與購物平台,目前著重於賽事報名,而賽事大多為體育賽事,例如馬拉松、路跑、自行車等。

好找

活動咖目前還沒有 App,但將桌機版和行動裝置版網頁分開,即可針對不同 Device 做優化 - 桌機版網頁資訊豐富、功能較複雜,而行動裝置版網頁著重在前面所述的三個重點:

分類

活動咖希望能讓使用者快速依照地區、時間、主題或關鍵字找到活動,因此利用兩層 tab 做 filter - 第一層先決定要用地區、時間來瀏覽,第二層則針對第一層所選而細部分析。

這是首頁,使用者可選擇熱門、一週內(舉行)、依地區分類、依時間分類來看有興趣的賽事或活動。

活動咖 EventPal

選時間則用月份(賽事以月,甚至季為單位),選地區則以區域或縣市來分類。使用者皆可在兩次 tap 內完成指定功能。

活動咖 EventPal

活動咖 EventPal

地區和時間是選擇參加活動的重要因素,因此這兩個分類我們特別提出來。

搜尋

如果不知道自己想看什麼主題,在搜尋 bar 下看熱門關鍵字的推薦,看看最近流行什麼。搜尋關鍵字後可得到活動列表。

活動咖 EventPal

好讀

揀選對使用者做決策最重要的資訊 - 實體活動舉行時間、地點。

個人化功能

我們做了「最近瀏覽過的活動」- 是個不浪費效能的類推薦功能 - 使用者有興趣、又不一定要存在 DB(web 可存在 local storage)。

活動咖 EventPal

但目前我們還沒有做到訂單改版的功能,所以這塊要再等等摟 :(

Mobile SEO

我在做這一塊的時候,實行的原則與 PC 版的網頁並沒有太大的不同(該做的都有做),唯一不一樣的地方就是將網站重點「活動」這件事更為凸顯,其他次要部份,例如在 PC 版首頁上有的相關報導、購物、合作夥伴等區塊都收納在 Menu 中。這樣的目的是,讓手機版首頁專心做好流量分配、User Signal 的工作。另外,也有使用工具做檢測和針對給予的建議做優化,例如:Google 的行動裝置相容性測試

活動咖 EventPal 手機版網站 Prototype Demo

活動咖 EventPal 手機版網站 Prototype Demo

點此瀏覽手機版網站。

一些好用的套件、工具

推薦閱讀


這篇文章的原始位置在這裡-活動咖手機版網站上線了 - 活動平台行動裝置網站或 App 設計的現狀探討與改進

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。

SEO Responsive Web Design 搜尋引擎優化 響應式網頁