在幅員廣大的美國校園，行走回家難免需要路過陰暗的街角。在夜間走在這些道路上，常常令人感到可怕。事實上，美國國家犯罪受害調查報告顯示，63.2%的性侵害案件都是在入夜后發(fā)生的，而且大多時候，受害者都是獨自一人。

挑戰(zhàn)Challenge：讓我們來解決這個問題

我在美國參與的非營利組織Hack4Impact 的團隊看見了這個問題，并想試試著改善它。我們希望學生走路回家不應該擔心被侵害；我們想要降低針對「獨自一人」的行人下手的罪行。我們的做法是希望能提供行人一些關于他們身邊環(huán)境的有益資訊，以便讓他們在選擇行走哪條道路時，能做出更明智的決定，選擇最安全的道路。借此，讓他們能更安心的于夜間在戶外行走。

我的角色

在這個項目上，我的角色是UI/UX 設計師。事實上，我是伊利諾伊大學Hack4Impact 團隊史上的第一位用戶體驗設計工程師呢！在這個項目上，我負責的是產(chǎn)品的「用戶體驗設計（User Experience Design）」與「用戶研究（User Research）」。我們團隊有8 個人：一位團隊領導、一位技術領導、四位開發(fā)者、與兩位設計師：分別為我（用戶體驗設計領導）和Annie Wu。在一學期間，我們密切的合作，最終建立了一個以人為本、以用戶為設計中心（User-Centered），并具高保真度（High-Fidelity）的展示原型（Prototype），提交給客戶。

痛點Pain Points：認識問題是什么

目前，網(wǎng)上是有提供一些資料可以讓人更明智決定選擇行走哪條道路，例如過去案件地點或緊急公用電話的位置。但是，當人們想要使用這些資料來選擇行走路徑時，會遇到不少問題：

1，這些資料都存放在一些電腦版網(wǎng)頁或PDF 檔案上，很不適合用手機瀏覽

2，目前沒有一個將各種資訊整合的頁面，因為各機關皆有自己的網(wǎng)站

3，網(wǎng)站上的資料可能是以文字方式呈現(xiàn)，用戶需要自行將資料轉換到地圖上，才能找出確切位置，頗不方便

4，剛入學的新生不知道于何處存取這些資料

「資料都在，但太分散了，很難友善利用?！?/blockquote>

需求調查User Needs：了解他們想要什么

我們團隊在項目的早期計劃階段時，即一致下定了幾個本項目的目標。這些目標很重要，因為它們很可能可以有效解決上述的痛點。我們希望我們的解決方案：

1，可以整合各種現(xiàn)有的資料，并提供用戶一個中央平臺存取這些資料

2，必須以手機app的方式呈現(xiàn)，這樣用戶到哪都可以存取資料

3，用戶必須要可以很快找到他想看到的信息

4，這些資料要有效地被呈現(xiàn)，讓用戶能很容易理解它們，不用額外學習東西

5，界面的設計必須直覺、簡單，因為這個app可能會在緊急情況下被使用

6，界面的設計必須適合讓這個app在夜間被使用

7，任何用戶，不論成長背景，都應該能感覺界面的設計和他們已熟悉使用的程序沒有太大的差別

 

設計過程Design Process：從打稿到交件

? ? ? 1，用戶研究

用戶研究（User Research）是我們開發(fā)過程中不可或缺的一部分，因為我們的客戶是一個非盈利機構Cut to The Case，而他們的愿景是希望這個app能以「用戶」為中心做設計。在項目初期，團隊還在思考設計概念時，我們即采訪了大學當局，以更好地了解目前校園的安全狀況。借此，我們獲取了一些很重要的資料，例如校園免費安全接送巴士SafeRides 的用戶群體統(tǒng)計資料。

「天黑后，大多的乘客皆是國際學生，從圖書館進行接駁。但是到了午夜后，大多乘客則是從酒吧來往的學生。」

 

? ? ? 2，線框圖

根據(jù)大學提供的數(shù)據(jù)和我們的調查，我大致勾勒出了我們的第一個「低保真度」的線框圖。

 

在線框圖（Wireframe）上，我們選擇設計一個地圖界面，作為這個app主要的界面，讓用戶可以直接在上面取得各式對他們有幫助的資料。這些資料的來源會直接從上述的各個不同網(wǎng)站取得。我們花了好一段時間才決定該如何展現(xiàn)「選擇要顯示的資料類型」這個選單（例如：顯示「過去案件地點」但不顯示「緊急電話」等等）。最終，我們決定用用戶能上滑顯示、下滑隱藏的「卡片」的形式呈現(xiàn)，因為：

*根據(jù)一項調查大多人使用手機的手勢的研究顯示，卡片式的界面比起其他選項，例如三橫杠的「漢堡」式選單，來說，對用戶更方便。由于我們希望用戶能在最短時間內(nèi)取的他們要的資訊，這個很重要

*卡片式的界面的設計和大多人已經(jīng)習慣使用的app有類似的設計，例如Google 與Apple 地圖皆采用這種設計。借此我們可以確定新用戶不會對我們的界面感到太陌生

研究顯示手機上大拇指自然的操作區(qū)域。綠色代表自然，橙色代表需要拉伸，紅色代表困難。

 

線框圖提供了我們團隊一個大致的設計參考，讓他們更好進入開發(fā)階段。同時間，我和另一位設計師也開始了針對線框圖的「用戶訪談（User Interview）」與「可用性測試（Usability Test）」。

 

? ? ? 3,用戶訪談與 可用性測試

我們參考了用戶訪談（User Interview）與可用性測試（Usability Tests）的結果來改進現(xiàn)有的設計。

「想像一下，夜黑了，而你必須自己走回家。你身旁沒有人，而且附近一片漆黑。你會怎么做來讓自己感覺到更安全？」

這是我們在針對線框圖的用戶訪談中，詢問被訪者的第一個問題。在他們回答問題后，我們簡單介紹了一下app的大致概念，并詢問他們是否有會有興趣下載，和是否有對我們想法的建議。最后，我們進行了可用性測試；我們讓被訪者實際與互動式的線框圖原型做互動，并觀察他們的操作行為。

「如果路上有其他大學生的話，我會即使走在比較危險的區(qū)域，也會感覺安心很多?！?/em>

進行訪談時，由于考慮到來自不同背景的用戶可能會習慣不同的設計，我們會盡量尋找不同群體的用戶進行訪談。我們希望這個app能讓所有用戶都感到熟悉與親切，不要和他們已經(jīng)習慣使用的app在設計上有太大的差異。我們訪談了一位大一女生、一位大一男生、一位大三學生與一位國際學生，而每一位在可用性測試時皆能順暢的操控互動線框圖原型，幾乎不需要我們輔助，可說有達到我們的標準！訪談時用戶推薦的一些所需功能有（1）加入公車資訊和（2）加入緊急要撥打電話的按鈕。

? ? ? 4，視覺槁 0

視覺槁0 是我在芝加哥參加會議期間，短時間內(nèi)建立的。它以更多細節(jié)呈現(xiàn)了線框圖上最重要的頁面，以便讓開發(fā)者能更輕易的了解app看起來該是怎么樣。

 

視覺搞（Mockup）0 是由線框圖演進而來的，演進期間我們討論了該如何呈現(xiàn)地圖頁面上單一圖標背后的詳細訊息；意指，當用戶點擊了地圖上的圖標后，顯示詳細訊息的界面該怎么被呈現(xiàn)？我們做了個艱難的決定：同上述「資料類型」選單使用卡片式界面。我們考慮了很久，因為怕用戶會對多張卡片感到困惑。但是，如果螢幕上永遠只有一張卡片，則會非常直覺。用戶看到不是「資料類型」選單卡，就是「詳細訊息」卡，后者若要顯示，則會覆蓋前者（可透過「x」關閉）。兩者不會同時出現(xiàn)。

 

? ? ? 5，視覺槁 1

視覺槁1 經(jīng)過精心設計，其包括了線框圖上所有可見的細節(jié)。

這個視覺搞容納了所有在線框圖可見的頁面。我們使用深色圖片作為歡迎頁面的背景，因為設想到大多數(shù)人會在晚上使用本app，不希望因為顯示過亮的頁面而讓用戶感到不適。

 

? ? ? 6，視覺槁 2

視覺槁2 增加了用戶在訪談中推薦的一些功能。

 

在這個視覺槁中，我們加入了一些用戶在訪談中推薦的功能，其一即是撥打電話的捷徑。要在這個原本只有一個功能的app中加入新的功能，我們必然需要做一些大幅度的改變。一開始，我們是希望在頁面左上方加入「漢堡」式的選單，讓用戶可以開啟選單，選擇電話捷徑功能并撥打。但是，這樣的設計不符合iOS系統(tǒng)（我們當時優(yōu)先考量的系統(tǒng)）的Human Interface設計規(guī)章，而且這設計并不符合大多人使用手機的手勢。

我們最終決定在頁面底部加了一個選單標簽，供用用戶切換卡片的選項。這樣的設計能提供最直觀的操作流程，同稍早闡述的原因：由于畫面上只會顯示一張卡片，用戶要不是在「資料類型」選單卡或「詳細信息」卡，就是在「電話捷徑」卡，三選一。這樣，用戶較不會因為畫面信息過多而被混淆。

同時，我們還更改了「詳細信息」卡上資料被顯示的先后順序，因為我們希望用戶能最優(yōu)先看到對他們更重要的信息。例如：我們在訪談中了解到，用戶大多認為「確切案件地址」比「案件類型」更重要，因為用戶通常都會選擇避免所有類型的案件。

「我喜歡你們把『詳細信息』卡上的資訊歸納的這么干凈，讓我一目了然！不過，如果能加入該案件『是否有涉及學生或教職員』的信息更好?！?/blockquote>

 

? ? ? 7，視覺槁 3

視覺槁3 在整體視覺上做了一些改變。

 

我們把卡片的背景改成非半透明的，這樣用戶能更清楚的區(qū)分畫面上的卡片區(qū)域與地圖區(qū)域。我們同時還擇使用紫色作為app的主要顏色，因為研究證實它可以平息心靈；可能有助于處于緊張心境的用戶。

 

? ? ? 8，視覺槁 4

視覺槁4 重新設計了新用戶會看到的歡迎頁面。

 

在先前多次可用性測試中，我們發(fā)現(xiàn)有些用戶，尤其是國際學生，會直接跳過所有的歡迎頁面，不閱讀頁面上的文字。他們說這些頁面上的字太多了，而且以非母語呈現(xiàn)，并沒有吸引力讓他們停下來閱讀。為解決這個問題，我們重新設計了這幾個歡迎頁面，并將它們整合成單一一個介紹頁面，并僅顯示最重要的訊息。我們還大幅減少了文字量，并添加了更多視覺元素及動畫，以吸引用戶留下觀看。

另外，我們在主要頁面上的各卡片上加入了標題文字，以幫助用戶區(qū)分它們。

 

 

解決方案Solution：最終設計成品

互動式原型

經(jīng)過多次的設計改良、用戶訪談和可用性測試后，我們使用Sketch 設計app建立了一個最終的、具高保真度的可互動原型（Interactive Prototype）。

在Sketch 軟件中可見我們app（原型）的使用流程。

 

這圖片顯示了我們app原型的關鍵導航流程；另外，我們也制作了影片版。在用戶第一次打開app時會看到介紹頁面，可以在那里了解app的主要功能。點了繼續(xù)后，會到主地圖頁面，用戶可以看到自己現(xiàn)在目前的位置，并透過圖雕資訊了解他們身邊周圍的情況。還影更多功能在影片中您也可以看到。

 

完結Outcome

我們設計的高保真原型成功解決了本文所述的「痛點」和「用戶需求」。我們的解決方案（app）讓任何能都可以隨時隨地查看他們周邊的相關信息，借此近一步保護自身安全。而且，這個app提供一個直觀的用戶體驗，讓人們即使在緊急情況下亦能順利找到正確的資料與訊息。透過這個app，我們讓在伊利諾伊大學的學生們在夜間更安全了！

我們的成品得到了非盈利機構客戶Cut to The Case 非常正面的贊譽，他們非常喜歡我們的設計！我們的成品也在Hack4Impact 年終發(fā)表會上獲得其他團隊的愛戴?！敢匀藶楸尽沟脑O計原則，成功的提供了直觀的用戶體驗，讓所有用戶皆感到親切，尤其是那些處于緊急情況，并需要快速找到相關資料與訊息的用戶。此外，本設計是可擴展（Scalable）的，只需要一點改良，即可應用于大多其他地區(qū)。希望我們透過謹慎的設計與研究所開發(fā)出的解決方案，行人在夜間返家能更安全！

 

 

本文由郭力銘撰寫與翻譯，原文作者Philip Kuo