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

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

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

我的角色

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

痛點(diǎn)Pain Points：認(rèn)識(shí)問題是什么

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

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

2，目前沒有一個(gè)將各種資訊整合的頁面，因?yàn)楦鳈C(jī)關(guān)皆有自己的網(wǎng)站

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

4，剛?cè)雽W(xué)的新生不知道于何處存取這些資料

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

需求調(diào)查User Needs：了解他們想要什么

我們團(tuán)隊(duì)在項(xiàng)目的早期計(jì)劃階段時(shí)，即一致下定了幾個(gè)本項(xiàng)目的目標(biāo)。這些目標(biāo)很重要，因?yàn)樗鼈兒芸赡芸梢杂行Ы鉀Q上述的痛點(diǎn)。我們希望我們的解決方案：

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

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

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

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

5，界面的設(shè)計(jì)必須直覺、簡(jiǎn)單，因?yàn)檫@個(gè)app可能會(huì)在緊急情況下被使用

6，界面的設(shè)計(jì)必須適合讓這個(gè)app在夜間被使用

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

 

設(shè)計(jì)過程Design Process：從打稿到交件

? ? ? 1，用戶研究

用戶研究（User Research）是我們開發(fā)過程中不可或缺的一部分，因?yàn)槲覀兊目蛻羰且粋€(gè)非盈利機(jī)構(gòu)Cut to The Case，而他們的愿景是希望這個(gè)app能以「用戶」為中心做設(shè)計(jì)。在項(xiàng)目初期，團(tuán)隊(duì)還在思考設(shè)計(jì)概念時(shí)，我們即采訪了大學(xué)當(dāng)局，以更好地了解目前校園的安全狀況。借此，我們獲取了一些很重要的資料，例如校園免費(fèi)安全接送巴士SafeRides 的用戶群體統(tǒng)計(jì)資料。

「天黑后，大多的乘客皆是國際學(xué)生，從圖書館進(jìn)行接駁。但是到了午夜后，大多乘客則是從酒吧來往的學(xué)生?！?/blockquote>

 

? ? ? 2，線框圖

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

 

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

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

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

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

 

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

 

? ? ? 3,用戶訪談與 可用性測(cè)試

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

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

這是我們?cè)卺槍?duì)線框圖的用戶訪談中，詢問被訪者的第一個(gè)問題。在他們回答問題后，我們簡(jiǎn)單介紹了一下app的大致概念，并詢問他們是否有會(huì)有興趣下載，和是否有對(duì)我們想法的建議。最后，我們進(jìn)行了可用性測(cè)試；我們讓被訪者實(shí)際與互動(dòng)式的線框圖原型做互動(dòng)，并觀察他們的操作行為。

「如果路上有其他大學(xué)生的話，我會(huì)即使走在比較危險(xiǎn)的區(qū)域，也會(huì)感覺安心很多。」

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

? ? ? 4，視覺槁 0

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

 

視覺搞（Mockup）0 是由線框圖演進(jìn)而來的，演進(jìn)期間我們討論了該如何呈現(xiàn)地圖頁面上單一圖標(biāo)背后的詳細(xì)訊息；意指，當(dāng)用戶點(diǎn)擊了地圖上的圖標(biāo)后，顯示詳細(xì)訊息的界面該怎么被呈現(xiàn)？我們做了個(gè)艱難的決定：同上述「資料類型」選單使用卡片式界面。我們考慮了很久，因?yàn)榕掠脩魰?huì)對(duì)多張卡片感到困惑。但是，如果螢?zāi)簧嫌肋h(yuǎn)只有一張卡片，則會(huì)非常直覺。用戶看到不是「資料類型」選單卡，就是「詳細(xì)訊息」卡，后者若要顯示，則會(huì)覆蓋前者（可透過「x」關(guān)閉）。兩者不會(huì)同時(shí)出現(xiàn)。

 

? ? ? 5，視覺槁 1

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

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

 

? ? ? 6，視覺槁 2

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

 

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

我們最終決定在頁面底部加了一個(gè)選單標(biāo)簽，供用用戶切換卡片的選項(xiàng)。這樣的設(shè)計(jì)能提供最直觀的操作流程，同稍早闡述的原因：由于畫面上只會(huì)顯示一張卡片，用戶要不是在「資料類型」選單卡或「詳細(xì)信息」卡，就是在「電話捷徑」卡，三選一。這樣，用戶較不會(huì)因?yàn)楫嬅嫘畔⑦^多而被混淆。

同時(shí)，我們還更改了「詳細(xì)信息」卡上資料被顯示的先后順序，因?yàn)槲覀兿Ｍ脩裟茏顑?yōu)先看到對(duì)他們更重要的信息。例如：我們?cè)谠L談中了解到，用戶大多認(rèn)為「確切案件地址」比「案件類型」更重要，因?yàn)橛脩敉ǔ６紩?huì)選擇避免所有類型的案件。

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

 

? ? ? 7，視覺槁 3

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

 

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

 

? ? ? 8，視覺槁 4

視覺槁4 重新設(shè)計(jì)了新用戶會(huì)看到的歡迎頁面。

 

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

另外，我們?cè)谥饕撁嫔系母骺ㄆ霞尤肓藰?biāo)題文字，以幫助用戶區(qū)分它們。

 

 

解決方案Solution：最終設(shè)計(jì)成品

互動(dòng)式原型

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

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

 

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

 

完結(jié)Outcome

我們?cè)O(shè)計(jì)的高保真原型成功解決了本文所述的「痛點(diǎn)」和「用戶需求」。我們的解決方案（app）讓任何能都可以隨時(shí)隨地查看他們周邊的相關(guān)信息，借此近一步保護(hù)自身安全。而且，這個(gè)app提供一個(gè)直觀的用戶體驗(yàn)，讓人們即使在緊急情況下亦能順利找到正確的資料與訊息。透過這個(gè)app，我們讓在伊利諾伊大學(xué)的學(xué)生們?cè)谝归g更安全了！

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

 

 

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