快速重新設計使用者介面:AO Transport & Shuttle 應用程式

簡介

AO Transport & Shuttle 是一個班車預訂應用程式,在我擔任首席技術實驗室導師期間,作為人機互動課程的大學專案的一部分而製作。 該應用程式是需要可靠班車運輸的使用者的工具,可以輕鬆預訂乘車、檢視時間表和跟蹤班車。 在本文中,我將快速重新設計應用程式中的兩個關鍵部分的,重點關注簡單但有影響力的更改,以改善可用性、視覺和整體體驗。

AO Transport & Shuttle 圖示.

目標

這次重新設計的目的是完善 AO Transport & Shuttle 應用程式的介面,以創造更精簡、更使用者友好的體驗。 作為一個針對我的學生參加人機互動課的個人專案,這個應用程式是審查核心視覺元件和可用性啟發式方法的實用示例。 目標是進行簡單、有影響力的改進,強調清晰度和易用性,無需廣泛的使用者研究或測試。 這項重新設計旨在模擬深思熟慮的調整如何顯著提高可用性,併為有效設計實踐提供有價值的見解。

識別重新設計需求

Google Play商店上的使用者評論。

現在讓我們進入其原始狀態,AO Transport & Shuttle 應用程式已收到使用者的反饋,表明了幾個可用性問題。 使用者報告說,跟蹤最近的公共汽車通常緩慢且不可靠,這削弱了該應用程式提供及時班車資訊的主要功能。 此外,人們對如何預訂門票存在困惑,這表明預訂過程可能不直觀或在應用程式中解釋不明確。

啟發

Jakob Nielsen 的 10個可用性啟發式方法. 由Jon Daiello設計的佈局。

使用啟發式方法進行重新設計,很明顯,幾個基本的可用性原則沒有得到很好的體現。 例如,系統與現實世界之間的匹配需要改進,以確保使用者能夠直觀地與巴士跟蹤和訂票等功能進行互動。 同樣,系統狀態的可見性不足,這可能會導致穿梭跟蹤功能的不可靠性。 最後,美學和極簡主義設計可以更好地應用於建立一個更專注和高效的介面。 這些問題凸顯了更新的必要性,該更新更符合可用性啟發式,以提高清晰度、響應性和整體使用者滿意度。

重新設計過程:視覺調整

在重新設計的主頁中,進行了一些關鍵的改進,以提高可用性,並更緊密地與基本的啟發式原則保持一致。

AO Transport & Shuttle App 主頁重新設計的前後對比。

首先,個性化的問候語現在在頁面頂部以姓名歡迎使用者,以及通知符號。 此新增不僅創造了更具吸引力的體驗,還確保使用者及時收到任何新的促銷或應用程式更新的通知。 在此問候語下方,動態定位功能會根據使用者的當前位置自動更新。 此功能反映了系統和現實世界之間匹配的啟發式原則,幫助使用者感受到與實時位置和附近的班車選項的聯絡。

頂部導航。

頂部導航現在還包括一個二維碼掃描器,允許使用者透過掃描快速訪問付款選項,從而簡化了付款流程。 此外,新的搜尋欄提供了對搜尋功能的輕鬆訪問,以定位公共汽車或特定目的地,透過為使用者提供清晰、便捷的方式來查詢相關資訊,增強了系統狀態的可見性。 在主頁的更下面,餘額小部件顯示使用者的當前帳戶餘額,並具有縮放、付款和訪問其他帳戶功能等操作選項。 此小部件讓使用者在一個可見、可訪問的區域瞭解他們的平衡狀態和可用操作。

為了讓使用者參與當前交易,在餘額小部件下方添加了促銷和優惠部分。 本節以橫向滾動為特色,鼓勵使用者以視覺吸引力和互動式形式探索可用折扣。

一個實時時間表小部件。

最後,在頁面底部,實時時間表列出了即將到來的巴士及其班車程式碼、車站程式碼和到下一站的預計出發時間。 此實時時間表確保使用者獲得有關巴士到達的最新資訊,同時支援系統狀態的可見性和高效的旅行計劃。 這些調整共同建立了一個更直觀、更直觀的主頁,該主頁與可用性啟發式方法非常一致,並增強了整體

搜尋欄小部件。

在重新設計的預訂部分,點選主頁的搜尋欄會引導使用者進入匯流排選擇頁面。 螢幕的上半部分專門用於互動式地圖,該地圖動態更新,在使用者選擇或輸入這些詳細資訊時顯示使用者的當前位置和目的地。 這張地圖提供了他們旅行路線的清晰、直觀的表示,透過使導航和位置跟蹤直觀和相關來加強系統和現實世界之間的匹配

路線和公交車選擇頁面。

螢幕的下部包含一個實時時間表元件,從主頁回收,實時調整以反映使用者選擇的路線和站點。 該元件幫助使用者沿計劃路線跟蹤班車的預計時間和位置,增強系統狀態的可見性,並支援自信的旅行計劃。 在螢幕底部,一個突出的“選擇巴士”按鈕允許使用者繼續選擇班車和預訂座位,為預訂過程的下一步提供了一條直接的路徑。 這些設計選擇共同簡化了預訂過程,並使使用者能夠輕鬆地從搜尋到選擇班車和座位的無縫過渡。

最終介面設計。

關鍵要點

在重新設計 AO Transport & Shuttle 應用程式時,我旨在展示該應用程式如何將介面與現實世界的互動保持一致,提高系統狀態的可見性,並簡化導航,該應用程式現在以清晰直觀的方式更好地支援使用者的需求。 這種重新設計突出了深思熟慮的調整——無需廣泛的測試或使用者角色——如何改善的關鍵方面。 歸根結底,建立使用者友好的設計並不總是需要徹底的檢修;有時,它需要進行有針對性的更改,為使用者旅程帶來清晰和輕鬆。

參考來源:
關鍵字:
  • 9個傑出的Webflow CMS網站示例

    檢視這9個CMS網站示例,這些示例使用 Webflow 強大而靈活的 CMS 來建立直觀、引人入勝的數字閱讀體驗。
    2025.04.09 Wednesday
  • 案例研習:Troa 25′ Folio

    看看 Troa 如何重新構想他們的作品集 —— 專注於效能、可持續性以及簡潔、周到的設計。
    2025.04.04 Friday
  • 難民委員會 The Refugee Council 的品牌重塑

    自第二次世界大戰以來,難民委員會(The Refugee Council)一直在支援英國的難民,但許多人不知道他們是一個慈善機構。 由 Shape History、難民委員會和難民制定的新品牌重塑旨在改變這一點,提升品牌,幫助它接觸到更多人,並突出難民的聲音。
    2025.04.03 Thursday
  • 大韓航空以全新的外觀起飛

    大韓航空的品牌重塑以深藍色的現代化太極(Taegeuk)符號為特色,搭配更乾淨、更流線型的新字型。 更新的徽標和符號,結合飛機塗裝上的金屬外觀,創造了一個時尚、現代的視覺標誌,強調了航空公司的創新和前瞻性方案。
    2025.04.02 Wednesday
  • WWDC 2025 標誌讓我對蘋果未來的設計充滿了希望

    我們一直在為 iOS 設計缺乏進展,自2013年的 iOS 7 以來,iPhone 軟體看起來幾乎是一樣的。 但有傳言說,我們將在2025年進行戲劇性的軟體設計更新——蘋果新發布的 WWDC 2025 標誌表明這些報道可能是真的。 蘋果宣佈,其全球開發者大會將如預期於2025年6月9日這一週迴歸。 WWDC 始終是蘋果公司展示即將推出的軟體的機會。 標誌的設計似乎與關於 iOS 19 設計語言的傳言一致。 長期以來,有傳言稱 iOS 19 正在從 VisionOS 中得到視覺線索。 根據蘋果洩密者 Mark Gurman 的說法,這意味著「應用程式可以出現在帶有半透明面板的圓形圖示中,非常像它們目前出現在 Vision Pro 的visionOS 2 的應用程式選單中。」 標誌上的「25」具有半透明的玻璃外觀,看起來我們確實可以走向一個透明面板的世界。 但我也對 WWDC 上的色彩很感興趣。在米色化的世界裡,顏色會捲土重來嗎? 20世紀90年代的蘋果色彩斑斕的設計風格,像新的 iMac 一樣暗示了迴歸那些俏皮的根源。 我們也希望看到更華麗、更豐富多彩的 iOS。 While anything that significantly changes the homescreen that users interact with daily is […]
    2025.04.02 Wednesday