UI/UX 設計案例分享：如何讓行人在夜間返家更安全
看我們在 Hack4Impact 如何透過系統化的「介面 UI 設計」、「使用者體驗 UX 設計」與「用戶研究」，打造一個人性化的應用程式，幫助使用者決定選擇行走哪條道路最安全。
在幅員廣大的美國校園，行走回家難免需要路經陰暗的街角。在夜間走在這些道路上，常常令人感到可怕。事實上，美國國家犯罪受害調查報告顯示，63.2% 的性侵害案件都是在入夜後發生的，而且大多時候，受害者都是獨自一人。
挑戰 Challenge：讓我們來解決這個問題
我於美國參與的非營利組織 Hack4Impact 的團隊看見了這個問題，並想試試著改善它。我們希望學生走路回家不應該擔心被侵害；我們想要降低針對「獨自一人」的行人下手的罪行。我們的做法是希望能提供行人一些關於他們身邊環境的有益資訊，以便讓他們在選擇行走哪條道路時，能做出更明智的決定，選擇最安全的道路。藉此，讓他們能更安心的於夜間在戶外行走。
我的角色
在這個專案上，我的角色是 UI/UX 設計工程師。事實上，我是伊利諾伊大學 Hack4Impact 團隊史上的第一位使用者體驗設計工程師呢！在這個專案上，我負責的是產品的「使用者體驗設計（User Experience Design）」與「用戶研究（User Research）」。我們團隊有 8 個人：一位團隊領導、一位技術領導、四位開發者、與兩位設計師：分別為我（使用者體驗設計領導）和 Annie Wu。在一學期間，我們密切的合作，最終建立了一個以人為本、以使用者為設計中心（User-Centered），並具高保真度（High-Fidelity）的展示原型（Prototype），提交給客戶。
痛點 Pain Points：認識問題是什麼
目前，網路上是有提供一些資料可以讓人更明智決定選擇行走哪條道路，例如過去案件地點或緊急公用電話的位置。但是，當人們想要使用這些資料來選擇行走路徑時，會遇到不少問題：
- 這些資料都存放在一些電腦版網頁或 PDF 檔案上，很不適合用手機瀏覽
- 目前沒有一個將各種資訊整合的頁面，因為各機關皆有自己的網站
- 網站上的資料可能是以文字方式呈現，使用者需要自行將資料轉換到地圖上，才能找出確切位置，頗不方便
- 剛入學的新生不知道於何處存取這些資料
「資料都在，但太分散了，很難友善利用。」
需求調查 User Needs：了解他們想要什麼
我們團隊在專案的早期計劃階段時，即一致下定了幾個本專案的目標。這些目標很重要，因為它們很可能可以有效解決上述的痛點。我們希望我們的解決方案：
- 可以整合各種現有的資料，並提供使用者一個中央平台存取這些資料
- 必須以手機程式（app）的方式呈現，這樣使用者到哪都可以存取資料
- 使用者必須要可以很快找到他想看到的訊息
- 這些資料要有效地被呈現，讓使用者能很容易理解它們，不用額外學習東西
- 介面的設計必須直覺、簡單，因為這個程式可能會在緊急情況下被使用
- 介面的設計必須適合讓這個程式在夜間被使用
- 任何使用者，不論成長背景，都應該能感覺介面的設計和他們已熟悉使用的程式沒有太大的差別
設計過程 Design Process：從打稿到交件
用戶研究
用戶研究（User Research）是我們開發過程中不可或缺的一部分，因為我們的客戶是一個非盈利機構 Cut to The Case，而他們的願景是希望這個程式能以「使用者」為中心做設計。在專案初期，團隊還在思考設計概念時，我們即採訪了大學當局，以更好地了解目前校園的安全狀況。藉此，我們獲取了一些很重要的資料，例如校園免費安全接送巴士 SafeRides 與隨行服務 SafeWalks 的用戶族群統計資料。
「天黑後，大多的乘客皆是國際學生，從圖書館進行接駁。但是到了午夜後，大多乘客則是從酒吧來往的學生。」
線框圖
在線框圖（Wireframe）上，我們選擇設計一個地圖介面，作為這個程式主要的介面，讓使用者可以直接在上面取得各式對他們有幫助的資料。這些資料的來源會直接從上述的各個不同網站取得。我們花了好一段時間才決定該如何展現「選擇要顯示的資料類型」這個選單（例如：顯示「過去案件地點」但不顯示「緊急電話」等等）。最終，我們決定用使用者能上滑顯示、下滑隱藏的「卡片」的形式呈現，因為：
- 根據一項調查大多人使用手機的手勢的研究顯示，卡片式的介面比起其他選項，例如三橫槓的「漢堡」式選單，來說，對使用者更方便。由於我們希望使用者能在最短時間內取的他們要的資訊，這個很重要
- 卡片式的介面的設計和大多人已經習慣使用的程式有類似的設計，例如 Google 與 Apple 地圖皆採用這種設計。藉此我們可以確定新使用者不會對我們的介面感到太陌生
線框圖提供了我們團隊一個大致的設計參考，讓他們更好進入開發階段。同時間，我和另一位設計師也開始了針對線框圖的「使用者訪談（User Interview）」與「可用性測試（Usability Test）」。
使用者訪談 與 可用性測試
我們參考了使用者訪談（User Interview）與可用性測試（Usability Tests）的結果來改進現有的設計。
「想像一下，夜黑了，而你必須自己走回家。你身旁沒有人，而且附近一片漆黑。你會怎麼做來讓自己感覺到更安全？」
這是我們在針對線框圖的使用者訪談中，詢問被訪者的第一個問題。在他們回答問題後，我們簡單介紹了一下程式的大致概念，並詢問他們是否有會有興趣下載，和是否有對我們想法的建議。最後，我們進行了可用性測試；我們讓被訪者實際與互動式的線框圖原型做互動，並觀察他們的操作行為。
「如果路上有其他大學生的話，我會即使走在比較危險的區域，也會感覺安心很多。」
進行訪談時，由於考慮到來自不同背景的使用者可能會習慣不同的設計，我們會盡量尋找不同族群的使用者進行訪談。我們希望這個程式能讓所有使用者都感到熟悉與親切，不要和他們已經習慣使用的程式在設計上有太大的差異。我們訪談了一位大一女生、一位大一男生、一位大三學生與一位國際學生，而每一位在可用性測試時皆能順暢的操控互動線框圖原型，幾乎不需要我們輔助，可說有達到我們的標準！訪談時使用者推薦的一些所需功能有（1）加入公車資訊和（2）加入緊急要撥打電話的按鈕。
視覺稿 0
視覺稿（Mockup）0 是由線框圖演進而來的，演進期間我們討論了該如何呈現地圖頁面上單一圖標背後的詳細訊息；意指，當使用者點擊了地圖上的圖標後，顯示詳細訊息的介面該怎麼被呈現？我們做了個艱難的決定：同上述「資料類型」選單使用卡片式介面。我們考慮了很久，因為怕使用者會對多張卡片感到困惑。但是，如果螢幕上永遠只有一張卡片，則會非常直覺。使用者看到不是「資料類型」選單卡，就是「詳細訊息」卡，後者若要顯示，則會覆蓋前者（可透過「x」關閉）。兩者不會同時出現。
視覺稿 1
這個視覺稿容納了所有在線框圖可見的頁面。我們使用深色圖片作為歡迎頁面的背景，因為設想到大多數人會在晚上使用本程式，不希望因為顯示過亮的頁面而讓使用者感到不適。
視覺稿 2
在這個視覺稿中，我們加入了一些使用者在訪談中推薦的功能，其一即是撥打電話的捷徑。要在這個原本只有一個功能的程式中加入新的功能，我們必然需要做一些大幅度的改變。一開始，我們是希望在頁面左上方加入「漢堡」式的選單，讓使用者可以開啟選單，選擇電話捷徑功能並撥打。但是，這樣的設計不符合 iOS 系統（我們當時優先考量的系統）的 Human Interface 設計規章，而且這設計並不符合大多人使用手機的手勢。
我們最終決定在頁面底部加了一個選單標籤，供用使用者切換卡片的選項。這樣的設計能提供最直觀的操作流程，同稍早闡述的原因：由於畫面上只會顯示一張卡片，使用者要不是在「資料類型」選單卡或「詳細訊息」卡，就是在「電話捷徑」卡，三選一。這樣，使用者較不會因為畫面資訊過多而被混淆。
同時，我們還更改了「詳細訊息」卡上資料被顯示的先後順序，因為我們希望使用者能最優先看到對他們更重要的訊息。 例如：我們在訪談中了解到，使用者大多認為「確切案件地址」比「案件類型」更重要，因為使用者通常都會選擇避免所有類型的案件。
「我喜歡你們把『詳細訊息』卡上的資訊歸納的這麼乾淨，讓我一目瞭然！不過，如果能加入該案件『是否有涉及學生或教職員』的訊息更好。」
視覺稿 3
我們把卡片的背景改成非半透明的，這樣使用者能更清楚的區分畫面上的卡片區域與地圖區域。我們同時還擇使用紫色作為程式的主要顏色，因為研究證實它可以平息心靈；可能有助於處於緊張心境的使用者。
視覺稿 4
在先前多次可用性測試中，我們發現有些使用者，尤其是國際學生，會直接跳過所有的歡迎頁面，不閱讀頁面上的文字。他們説這些頁面上的字太多了，而且以非母語呈現，並沒有吸引力讓他們停下來閱讀。 為解決這個問題，我們重新設計了這幾個歡迎頁面，並將它們整合成單一一個介紹頁面，並僅顯示最重要的訊息。我們還大幅減少了文字量，並添加了更多視覺元素及動畫，以吸引使用者留下觀看。
另外，我們在主要頁面上的各卡片上加入了標題文字，以幫助使用者區分它們。
解決方案 Solution：最終設計成品
互動式原型
經過多次的設計改良、使用者訪談和可用性測試後，我們使用 Sketch 設計程式建立了一個最終的、具高保真度的可互動原型（Interactive Prototype）。
這圖片顯示了我們程式原型的關鍵導航流程；另外，我們也製作了影片版。在使用者第一次打開程式時會看到介紹頁面，可以在那裡了解程式的主要功能。點了繼續後，會到主地圖頁面，使用者可以看到自己現在目前的位置，並透過圖雕資訊了解他們身邊周圍的情況。還影更多功能在影片中您也可以看到。
完結 Outcome：繳件給客戶
我們設計的高保真原型成功解決了本文所述的「痛點」和「使用者需求」。我們的解決方案（程式）讓任何能都可以隨時隨地查看他們周邊的相關資訊，藉此近一步保護自身安全。而且，這個程式提供一個直觀的使用者體驗，讓人們即使在緊急情況下亦能順利找到正確的資料與訊息。透過這個程式，我們讓在伊利諾伊大學的學生們在夜間更安全了！
我們的成品得到了非盈利機構客戶 Cut to The Case 非常正面的讚譽，他們非常喜歡我們的設計！我們的成品也在 Hack4Impact 年終發表會上獲得其他團隊的愛戴。「以人為本」的設計原則，成功的提供了直觀的使用者體驗，讓所有使用者皆感到親切，尤其是那些處於緊急情況，並需要快速找到相關資料與訊息的使用者。此外，本設計是可擴展（Scalable）的，只需要一點改良，即可應用於大多其他地區。希望我們透過謹慎的設計與研究所開發出的解決方案，行人在夜間返家能更安全！
如果你喜歡這邊文章，記得幫我「拍拍手」喔！
