活動咖手機版網站上線了 - 活動平台行動裝置網站或App設計的現狀探討與改進
這陣子剛好在幫我們家的活動平台網站 活動咖 EventPal 設計+製作行動裝置版網頁，因此參考了不少前輩的作品 - Accupass、KKTIX、Pinkoi、friDay等。在這裡記錄一些我對這些網站的想法，還有我們家產品所遇到的問題和設計的功能、解法。
面對活動平台，基本上我不看精選或推薦活動/商品的，因為就是促銷而已，而這些促銷活動/商品往往無法勾起我的興趣；而個人化的推薦活動和樣本數有關，因此很可能推薦給我的也不是我真的喜歡的，因此無論如何最後我最常用的就是「搜尋」和「瀏覽」功能了。另外，個人化功能也很重要，例如訂單查詢、瀏覽記錄等。
目前活動平台行動裝置網站或App設計的探討
活動很多，推薦又無法滿足需求，那麼搜尋和分類功能便是重點(讓我用最快的方式找到東西就好！)。活動平台的搜尋和分類不外乎就是找地區、時間、主題、關鍵字。找到之後，也能讓我很快的看到重點，決定是否符合需求。再來，如果能讓我快速看到目前的訂單狀態(是否購買成功、是否需要聯繫客服)，幫我備忘我曾瀏覽過的項目，那就再好不過了。
因此，我所關注的重點是
- 好找(很快找到想要的活動)
- 好讀(舒適且快速看到重點，決定是否符合需求)
- 個人化功能(訂單、瀏覽記錄)
KKTIX
Desktop與行動裝置為同一版面(RWD)，行動裝置以使用App為主。以App來看，依照時間搜尋活動是方便的，我也很常就一週、一個月內來看。一週、一月的分類，以行動裝置快速搜尋/瀏覽來說，我可能剛好這幾天或現在有空，看個一週內舉辦的活動。或我準備要參加這幾天報名的活動，但忘記詳細資訊，想臨時想查。或依照班表(班表通常以月來計)安排時間空缺。但不同的TA使用不同的時間區段做規劃，例如參加馬拉松就可能是以月、季來看。
近期檢視 - 對我來說很像是個更精準的推薦功能，畢竟都是我曾經有興趣的東西，也是幫我備忘忘記報名的活動。
總結我喜歡KKTIX的功能：
- 近期活動：以一週、一個月內來看。
- 近期檢視：幫使用者備忘和推薦。
- 訂單 / 票券方便檢視和使用：現場報到的時候，拿出App馬上就可以找到票券、掃QR Code報到。
Accupass
同樣的，Desktop與行動裝置為同一版面(RWD)，行動裝置以使用App為主。以App來看，我超喜歡Accupass的活動日曆的功能！
可以依照活動日期一一尋找，好找之外也很好瀏覽，資訊清楚。
可以指定日期。
熱門搜尋推薦。
總結我喜歡Accupass的功能：
- 活動日曆：依照時間找活動很方便。
- 關鍵字搜尋有推薦功能。
活動咖
活動咖 EventPal 是一個賽事、活動報名與購物平台，目前著重於賽事報名，而賽事大多為體育賽事，例如馬拉松、路跑、自行車等。
關於好找
活動咖目前還沒有App，但將桌機版和行動裝置版網頁分開，即可針對不同Device做優化 - 桌機版網頁資訊豐富、功能較複雜，而行動裝置版網頁著重在前面所述的三個重點：
- 好找(很快找到想要的活動)
- 好讀(舒適且快速看到重點，決定是否符合需求)
- 個人化功能(訂單、瀏覽記錄)
分類
活動咖希望能讓使用者快速依照地區、時間、主題或關鍵字找到活動，因此利用兩層tab做filter - 第一層先決定要用地區、時間來瀏覽，第二層則針對第一層所選而細部分析。
這是首頁，使用者可選擇熱門、一週內(舉行)、依地區分類、依時間分類來看有興趣的賽事或活動。
選時間則用月份(賽事以月，甚至季為單位)，選地區則以區域或縣市來分類。使用者皆可在兩次tap內完成指定功能。
地區和時間是選擇參加活動的重要因素，因此這兩個分類我們特別提出來。
搜尋
如果不知道自己想看什麼主題，在搜尋bar下看熱門關鍵字的推薦，看看最近流行什麼。搜尋關鍵字後可得到活動列表。
關於好讀
揀選對使用者做決策最重要的資訊 - 實體活動舉行時間、地點。
關於個人化功能
我們做了「最近瀏覽過的活動」- 是個不浪費效能的類推薦功能 - 使用者有興趣、又不一定要存在DB(web可存在local storage)。
但目前我們還沒有做到訂單改版的功能，所以這塊要再等等摟 :(
Mobile SEO
我在做這一塊的時候，實行的原則與PC版的網頁並沒有太大的不同(該做的都有做)，唯一不一樣的地方就是將網站重點「活動」這件事更為凸顯，其他次要部份，例如在PC版首頁上有的相關報導、購物、合作夥伴等區塊都收納在Menu中。這樣的目的是，讓手機版首頁專心做好流量分配、User Signal的工作。另外，也有使用工具做檢測和針對給予的建議做優化，例如：Google的 行動裝置相容性測試。
活動咖 EventPal 手機版網站 Prototype Demo
實際手機版網站請用手機瀏覽 - 點此
推薦閱讀
- Pinkoi 把手機版網站變好用了
- 讓網站設計更符合 Mobile Friendly 的12項原則
- 9 basic principles of responsive web design：圖說RWD，超可愛。
一些好用的套件、工具
- slick - the last carousel you'll ever need：輪播，適合RWD，可設定breakpoint、swipe。
- 行動裝置相容性測試
由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-活動咖手機版網站上線了 - 活動平台行動裝置網站或 App 設計的現狀探討與改進。
留言