微笑單車只見苦笑？YouBike App Redesign
2018/10 月 AAPD 在 Facebook 上發起了「生活中的難用介面大賞」，邀請「受害者」們投訴難以使用、令人懷疑人生的操作介面，從鐵路時刻表到 ATM 交易畫面，都能感受到無盡的困惑和痛苦的哀號。沒有為生活帶來便利就算了，反而還形成「科技考驗人性」的窘境！
呼應此次怒氣四溢的活動，AAPD 緊接著舉辦「練功房｜介面 Redesign 挑戰賽」，賦予難用大賞的得主之一 YouBike App 重生機會。剛好在挑戰結束後沒多久，不知是否被設計師們強大的氣場（怨念）影響，YouBike 悄悄進行了介面大翻新（和 Redsign 後的版本有幾分相似！）
版本 3.3.19 的站點地圖笑得你發寒，感覺就會造成密集恐懼症患者的莫大恐慌，成為難用大賞的眾矢之的；更新後的 版本 4.0.7 有大幅度進步，友善多了，一次只顯示幾筆該地區周遭的站點。而這次挑戰賽的重點我認為在於「如何清楚有效率地傳遞站點資訊」，讓使用者能夠快速掌握站點狀態。
本文架構ㄧ、組隊參賽：和夥伴一起建立團隊共識
二、專案背景：現況問題、預期目標
三、前期研究：用戶評論、競品分析、設計原則
四、資訊架構：打造與產品的良好溝通
五、重新設計：整體介面呈現
一、組隊參賽：和夥伴一起建立團隊共識
最初是從 hui 那裡得知挑戰賽的消息，平時我們會透過 Messenger 交流各種 UI/UX 資訊，也盡可能為對方面臨到的疑難雜症提供協助，很感謝有他這位好碰油。雖然在他提出組隊的當下我回應「滿想試試看的」，但一方面又怕工作結束後沒有餘力完成作品，回家後只想當個徹底的廢人。後來實在是太想看到大家對於同一個題目會有什麼不一樣的改造，決心參賽。
報名成功後，我們花了些時間聊聊參賽的原因和期待。hui 先前曾經以個人身分參加過 UI Club 的音樂應用挑戰賽，想體驗看看兩人組隊參賽。我則是沒有任何比賽經驗，趁這個機會給自己一個小挑戰，也想知道作品是否能夠得到評審的認可，或者我只是單純在自嗨。我們也都好奇對方的設計流程、使用工具、參考資源⋯⋯，透過挑戰賽互相學習。
我們的溝通和協作方式・檔案共享平台：Dropbox
・共筆文件：Dropbox Paper
・咖啡廳：溫床 NEST、羊毛與花
二、專案背景：現況問題、預期目標
我跟 hui 設想我們是負責 YouBike App 改版的設計師，且有時程和資源上的壓力（事實也是如此啦），因此我們專心將現有功能盡可能地最佳化，暫時不考慮加入新功能。
- 現況問題：YouBike 作為輕量型共享單車，提供城市市民更加環保及便捷的交通選擇，兼具通勤、休閒、運動等多項用途，然而官方 App 的使用體驗欠佳、介面雜亂無序，使用者無法即時獲得所需資訊或順利完成特定任務，造成莫大的挫敗感。
- 預期目標：本次改版聚焦於產品核心功能（查看站點狀態），並重新梳理資訊架構，將操作流程減至最低點擊次數，同時考量到技術可行性。透過明確的視覺層級讓使用者一眼就能獲取所需資訊，並除去不必要的裝飾性元素，保留畫面的呼吸感，延續線下的便利、友善體驗。
三、前期研究：用戶評論、競品分析、設計原則
我們在針對頁面上的問題提出解決方案、繪製設計稿之前，試著先做了一些桌面研究，使用 AppBot 蒐集了近 90 天內、共 235 則的負面用戶評論，歸納出五大現況問題，同時從功能特性切入，進行簡單的競品分析，並共同訂定出三個應遵循的設計原則。
四、資訊架構：打造與產品的良好溝通
俗話說：好的資訊架構是成功的一半，使用者要能夠有脈絡地知道「我現在在哪裡 、我可以到哪裡、我要怎麼到那裡」，我們依據三種不同的使用情境梳理出三個主要架構。
- 站點：使用者想查看站點狀態、搜尋站點或地標。
- 最愛：使用者想快速查看加入最愛的常用站點。
- 我的：使用者想使用 YouBike 相關服務或者會員專屬功能。
五、重新設計：整體介面呈現
・icons 使用：Material Design (Rounded)
・可以生成不同樣式的 Google Maps 線上工具：Styling Wizard
原先開啟 App 後，要再自行點擊站點才會展示資訊卡片，我們認為與其增加一次點擊，不如直接預設展示最近的站點卡片。
這裡讓我們很掙扎的是廣告的去留，可以從用戶評論看到不少用戶對於「在官方 App 內看見廣告」相當反感，且廣告形式為非原生廣告，就這麼突兀地出現在畫面下方，我跟 hui 猶豫很久還是決定暫時把廣告從地圖畫面移除。
延伸閱讀👉🏻【硬塞科技字典】什麼是原生廣告（Native advertising）？
這張小卡片上涵蓋了「站點名稱、加入最愛、可借可停、距離、更新時間、開啟導航、步行時間」，資訊含量不少，我們反覆來回調整了好幾次顏色、排版、字級大小⋯⋯，直到它看起來清爽、容易被消化理解。
除了強調對使用者來說最重要的可借可停資訊，也在右上角的位置放置輔助標籤（正常／快空／空車／滿位），讓使用者能夠更快速地判斷站點現況。比較容易被忽略的細節是更新時間的顯示，相較於「幾分幾秒更新」，我們認為「幾秒前更新」直覺多了。
使用者若想查看站點緊急通知，要點選漢堡選單後前往最新消息頁面查詢，然而全台灣地區的資訊都混雜在同一頁面上，沒有明顯的標籤劃分。況且，真的會有使用者特地跳轉到這個頁面嗎？還是就這樣默默錯過了這些消息？都說是緊急通知了就不要藏在選單裡啊（崩潰）！
我們選擇把和該站點相關的緊急通知直接呈現在卡片上方，點擊後再跳轉到詳細頁面，另外有幾位參賽者也是同樣的處理方式。
不太清楚為什麼地圖和列表要同時出現在同一個畫面裡，不過我們想讓使用者一次專注在一種瀏覽模式，地圖歸地圖、列表歸列表、傑尼龜傑尼（意味不明的諧音梗 XDD）。
評審 Lin Simon 在直播講評時提到，列表模式下無法將站點加入最愛或開啟導航，是不是和地圖模式的操作行為一致會比較好？但我們認為列表頁面的功用在於「索引」，才只保留了重點資訊、移除其餘動作。這一小段談話也讓我再次體會到設計之所以吸引我的地方——它沒有絕對的標準答案。
搜尋站點是決賽直播時，每個參賽者都有特別提到的環節，對於「只能搜尋站點名稱，不能搜尋地址或地標」的操作流程，我們都感到很詭異，到底誰會記得 YouBike 的站點名稱啦！雖然最新版本的官方 App 終於可以用地址來搜尋了，不過仍舊無法搜尋地標附近的站點。我跟 hui 希望可以滿足「搜尋站點」和「搜尋地址或地標」這兩種使用情境。
若站點名稱包含使用者輸入的字串，符合的項目就會呈現在地標列表上方，點擊站點後跳轉至地圖模式。講評時，評審提到搜尋結果畫面跟 Google Maps 十分相似，我們確實應用了 Google Maps 的 Design Patterns，一方面它是大部分使用者熟悉的介面，能夠降低使用者的學習成本，一方面是我們沒有把這次挑戰的目標放在創意的視覺展現，而是能不能有效解決問題。
其實我一直很糾結，在設計手法上我們的表現似乎過於中規中矩，好像也缺少了些品牌性格在裡頭，它或許達到使用體驗提升的目的，但總感覺跟使用者之間無法產生更多連結，是我覺得最可惜的；_；。
延伸閱讀👉🏻 品牌設計讓數位產品不一樣的三大關鍵！
另一種搜尋情境是站點名稱裡沒有使用者輸入的字串，這時候搜尋結果就會列出相關地標，點選地標後跳轉到地圖模式，自動展示離該地最近的站點。
直播中有個參賽者提問列表的「↖︎」箭頭有什麼特別作用？由於是直接應用 Google Maps 的介面，我跟 hui 一直認為它就是單純的「前往頁面」圖標，沒想到點擊後是「自動填入」字串到搜尋欄，第一次發現到這個不可思議的神奇功能！只是到現在我還是不太理解它的用意為何⋯⋯。
即使將最愛站點入口放置在初始畫面頂部，看似有著高資訊層級，但在其他頁面時就必須經過三次的點擊「漢堡選單 → 場站地圖 → 最愛站點」，才能查看。我們將它固定放置在底部 Tabbar，不管在哪裡都能快速切換，也加入原先沒有的自訂排序站點功能，增加使用上的彈性。
原先的會員登入入口和相關服務都收在漢堡選單裡面，登入後才能看到會員專屬功能，為了引導使用者轉化成為會員，我們將會員獨立成一個頁面，在畫面最上方放置醒目的入口，另外強調登入後才能使用的會員專屬功能，以提升註冊登入率，最後把其他相關服務群組，以列表形式呈現在下方。
結語
最後我們的設計得到了挑戰賽的冠軍 🏆！寫這篇文章的同時還是有很多自己覺得不足的地方，前期研究是否太過淺薄、不夠深入？整體畫面會不會太過保守、看不見品牌個性？除了現有基本功能以外，有沒有未來延伸的應用？（這次有幾位參賽者發想了運動紀錄和附近景點等新功能）
雖然被這些「應該可以再做得更好一點⋯⋯」的想法困住有點困擾，但也有了繼續前進的動力和努力的方向。謝謝 AAPD 舉辦超～有趣的挑戰賽，賽後也保留了決選交流直播紀錄（我跟 hui 的部分從 51:30 開始）可以回顧評審的深度講評。
另外推薦閱讀 UBike 團隊的開發故事——如何在 10 個工作天內改造微笑單車 APP 服務？・我們的 U-bike iOS APP 的開發故事
・Ubike 開發的方法論體會：那些 SPEC 之外的事情
對於本文有任何建議、回饋、想法，歡迎在底下留言！也可以透過我的 Facebook 聯繫我 🙌🏻
