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

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

活動平台行動裝置網站或App設計的現狀探討與改進

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

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

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

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

因此,我所關注的重點是

  • 好找(很快找到想要的活動)
  • 好讀(舒適且快速看到重點,決定是否符合需求)
  • 個人化功能(訂單、瀏覽記錄)

KKTIX

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

KKTIX

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

KKTIX

總結我喜歡KKTIX的功能:

  • 近期活動:以一週、一個月內來看。
  • 近期檢視:幫使用者備忘和推薦。
  • 訂單 / 票券方便檢視和使用:現場報到的時候,拿出App馬上就可以找到票券、掃QR Code報到。

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 設計的現狀探討與改進
張貼留言