好文分享：微笑單車只見苦笑？youbike app redesign

hyhu77771025

文、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)



►我想觀看全文。





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