LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

聯成電腦設計好文分享:微笑單車只見苦笑?youbike app redesign

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、00nyrhtak

 

 

 

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 猶豫很久還是決定暫時把廣告從地圖畫面移除。

 

Source: AppAnnie (YouBike Android 2018/10/09–2019/01/06)

 

 

 

 

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

 

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

 

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

 

 

 

 

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

 

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

 

 

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

 

 

 

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

 

 

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

 

 


 

 

 

結語

 

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

 

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

 

 

另外推薦閱讀 UBike 團隊的開發故事——如何在 10 個工作天內改造微笑單車 APP 服務?

我們的 U-bike iOS APP 的開發故事
Ubike 開發的方法論體會:那些 SPEC 之外的事情

 

 

文章轉載自「Medium」,已取得作者授權同意,原文為:微笑單車只見苦笑?YouBike App Redesign

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策