Image for post
Image for post

微笑單車只見苦笑?YouBike App Redesign

00nyrhtak
00nyrhtak
Jan 30, 2019 · 10 min read

2018/10 月 AAPD 在 Facebook 上發起了「生活中的難用介面大賞」,邀請「受害者」們投訴難以使用、令人懷疑人生的操作介面,從鐵路時刻表到 ATM 交易畫面,都能感受到無盡的困惑和痛苦的哀號。沒有為生活帶來便利就算了,反而還形成「科技考驗人性」的窘境!

呼應此次怒氣四溢的活動,AAPD 緊接著舉辦「練功房|介面 Redesign 挑戰賽」,賦予難用大賞的得主之一 YouBike App 重生機會。剛好在挑戰結束後沒多久,不知是否被設計師們強大的氣場(怨念)影響,YouBike 悄悄進行了介面大翻新(和 Redsign 後的版本有幾分相似!)

Image for post
Image for post

版本 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 則的負面用戶評論,歸納出五大現況問題,同時從功能特性切入,進行簡單的競品分析,並共同訂定出三個應遵循的設計原則。

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

俗話說:好的資訊架構是成功的一半,使用者要能夠有脈絡地知道「我現在在哪裡 、我可以到哪裡、我要怎麼到那裡」,我們依據三種不同的使用情境梳理出三個主要架構。

  • 站點:使用者想查看站點狀態、搜尋站點或地標。
  • 最愛:使用者想快速查看加入最愛的常用站點。
  • 我的:使用者想使用 YouBike 相關服務或者會員專屬功能。
Image for post
Image for post
・icons 使用:Material Design (Rounded)
・可以生成不同樣式的 Google Maps 線上工具:Styling Wizard
Image for post
Image for post
Image for post
Image for post

原先開啟 App 後,要再自行點擊站點才會展示資訊卡片,我們認為與其增加一次點擊,不如直接預設展示最近的站點卡片。

這裡讓我們很掙扎的是廣告的去留,可以從用戶評論看到不少用戶對於「在官方 App 內看見廣告」相當反感,且廣告形式為非原生廣告,就這麼突兀地出現在畫面下方,我跟 hui 猶豫很久還是決定暫時把廣告從地圖畫面移除。

Image for post
Image for post
Source: AppAnnie (YouBike Android 2018/10/09–2019/01/06)
延伸閱讀👉🏻【硬塞科技字典】什麼是原生廣告(Native advertising)?
Image for post
Image for post

這張小卡片上涵蓋了「站點名稱、加入最愛、可借可停、距離、更新時間、開啟導航、步行時間」,資訊含量不少,我們反覆來回調整了好幾次顏色、排版、字級大小⋯⋯,直到它看起來清爽、容易被消化理解。

除了強調對使用者來說最重要的可借可停資訊,也在右上角的位置放置輔助標籤(正常/快空/空車/滿位),讓使用者能夠更快速地判斷站點現況。比較容易被忽略的細節是更新時間的顯示,相較於「幾分幾秒更新」,我們認為「幾秒前更新」直覺多了。

Image for post
Image for post

使用者若想查看站點緊急通知,要點選漢堡選單後前往最新消息頁面查詢,然而全台灣地區的資訊都混雜在同一頁面上,沒有明顯的標籤劃分。況且,真的會有使用者特地跳轉到這個頁面嗎?還是就這樣默默錯過了這些消息?都說是緊急通知了就不要藏在選單裡啊(崩潰)!

我們選擇把和該站點相關的緊急通知直接呈現在卡片上方,點擊後再跳轉到詳細頁面,另外有幾位參賽者也是同樣的處理方式。

Image for post
Image for post

不太清楚為什麼地圖和列表要同時出現在同一個畫面裡,不過我們想讓使用者一次專注在一種瀏覽模式,地圖歸地圖、列表歸列表、傑尼龜傑尼(意味不明的諧音梗 XDD)。

評審 Lin Simon 在直播講評時提到,列表模式下無法將站點加入最愛或開啟導航,是不是和地圖模式的操作行為一致會比較好?但我們認為列表頁面的功用在於「索引」,才只保留了重點資訊、移除其餘動作。這一小段談話也讓我再次體會到設計之所以吸引我的地方——它沒有絕對的標準答案。

Image for post
Image for post

搜尋站點是決賽直播時,每個參賽者都有特別提到的環節,對於「只能搜尋站點名稱,不能搜尋地址或地標」的操作流程,我們都感到很詭異,到底誰會記得 YouBike 的站點名稱啦!雖然最新版本的官方 App 終於可以用地址來搜尋了,不過仍舊無法搜尋地標附近的站點。我跟 hui 希望可以滿足「搜尋站點」和「搜尋地址或地標」這兩種使用情境。

Image for post
Image for post

若站點名稱包含使用者輸入的字串,符合的項目就會呈現在地標列表上方,點擊站點後跳轉至地圖模式。講評時,評審提到搜尋結果畫面跟 Google Maps 十分相似,我們確實應用了 Google Maps 的 Design Patterns,一方面它是大部分使用者熟悉的介面,能夠降低使用者的學習成本,一方面是我們沒有把這次挑戰的目標放在創意的視覺展現,而是能不能有效解決問題。

其實我一直很糾結,在設計手法上我們的表現似乎過於中規中矩,好像也缺少了些品牌性格在裡頭,它或許達到使用體驗提升的目的,但總感覺跟使用者之間無法產生更多連結,是我覺得最可惜的;_;。

延伸閱讀👉🏻 品牌設計讓數位產品不一樣的三大關鍵!
Image for post
Image for post

另一種搜尋情境是站點名稱裡沒有使用者輸入的字串,這時候搜尋結果就會列出相關地標,點選地標後跳轉到地圖模式,自動展示離該地最近的站點。

直播中有個參賽者提問列表的「↖︎」箭頭有什麼特別作用?由於是直接應用 Google Maps 的介面,我跟 hui 一直認為它就是單純的「前往頁面」圖標,沒想到點擊後是「自動填入」字串到搜尋欄,第一次發現到這個不可思議的神奇功能!只是到現在我還是不太理解它的用意為何⋯⋯。

Image for post
Image for post
Google Maps 點擊「↖︎」會自動填入字串,點擊「列表項目」會跳轉到地圖頁面
Image for post
Image for post

即使將最愛站點入口放置在初始畫面頂部,看似有著高資訊層級,但在其他頁面時就必須經過三次的點擊「漢堡選單 → 場站地圖 → 最愛站點」,才能查看。我們將它固定放置在底部 Tabbar,不管在哪裡都能快速切換,也加入原先沒有的自訂排序站點功能,增加使用上的彈性。

Image for post
Image for post

原先的會員登入入口和相關服務都收在漢堡選單裡面,登入後才能看到會員專屬功能,為了引導使用者轉化成為會員,我們將會員獨立成一個頁面,在畫面最上方放置醒目的入口,另外強調登入後才能使用的會員專屬功能,以提升註冊登入率,最後把其他相關服務群組,以列表形式呈現在下方。

最後我們的設計得到了挑戰賽的冠軍 🏆!寫這篇文章的同時還是有很多自己覺得不足的地方,前期研究是否太過淺薄、不夠深入?整體畫面會不會太過保守、看不見品牌個性?除了現有基本功能以外,有沒有未來延伸的應用?(這次有幾位參賽者發想了運動紀錄和附近景點等新功能)

雖然被這些「應該可以再做得更好一點⋯⋯」的想法困住有點困擾,但也有了繼續前進的動力和努力的方向。謝謝 AAPD 舉辦超~有趣的挑戰賽,賽後也保留了決選交流直播紀錄(我跟 hui 的部分從 51:30 開始)可以回顧評審的深度講評。

另外推薦閱讀 UBike 團隊的開發故事——如何在 10 個工作天內改造微笑單車 APP 服務?我們的 U-bike iOS APP 的開發故事
Ubike 開發的方法論體會:那些 SPEC 之外的事情

對於本文有任何建議、回饋、想法,歡迎在底下留言噢!也可以透過我的 Facebook 聯繫我:)

到 airtable 查看我的完整文章列表,裡面或許會有你需要的資源👇🏻
Image for post
Image for post
我的完整文章列表

00nyrhtak

Written by

00nyrhtak

💜✨ 先好好過生活,才能好好做設計 ✨💜

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

00nyrhtak

Written by

00nyrhtak

💜✨ 先好好過生活,才能好好做設計 ✨💜

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store