在幅員廣大的美國校園,行走回家難免需要路過陰暗的街角。在夜間走在這些道路上,常常令人感到可怕。事實(shí)上,美國國家犯罪受害調(diào)查報(bào)告顯示,63.2%的性侵害案件都是在入夜后發(fā)生的,而且大多時(shí)候,受害者都是獨(dú)自一人。
挑戰(zhàn)Challenge:讓我們來解決這個(gè)問題
我在美國參與的非營利組織Hack4Impact 的團(tuán)隊(duì)看見了這個(gè)問題,并想試試著改善它。我們希望學(xué)生走路回家不應(yīng)該擔(dān)心被侵害;我們想要降低針對「獨(dú)自一人」的行人下手的罪行。我們的做法是希望能提供行人一些關(guān)于他們身邊環(huán)境的有益資訊,以便讓他們在選擇行走哪條道路時(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)識問題是什么
目前,網(wǎng)上是有提供一些資料可以讓人更明智決定選擇行走哪條道路,例如過去案件地點(diǎn)或緊急公用電話的位置。但是,當(dāng)人們想要使用這些資料來選擇行走路徑時(shí),會遇到不少問題:
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è)中央平臺存取這些資料
2,必須以手機(jī)app的方式呈現(xiàn),這樣用戶到哪都可以存取資料
3,用戶必須要可以很快找到他想看到的信息
4,這些資料要有效地被呈現(xiàn),讓用戶能很容易理解它們,不用額外學(xué)習(xí)東西
5,界面的設(shè)計(jì)必須直覺、簡單,因?yàn)檫@個(gè)app可能會在緊急情況下被使用
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é)生。」
? ? ? 2,線框圖
![]()
![]()
根據(jù)大學(xué)提供的數(shù)據(jù)和我們的調(diào)查,我大致勾勒出了我們的第一個(gè)「低保真度」的線框圖。
在線框圖(Wireframe)上,我們選擇設(shè)計(jì)一個(gè)地圖界面,作為這個(gè)app主要的界面,讓用戶可以直接在上面取得各式對他們有幫助的資料。這些資料的來源會直接從上述的各個(gè)不同網(wǎng)站取得。我們花了好一段時(shí)間才決定該如何展現(xiàn)「選擇要顯示的資料類型」這個(gè)選單(例如:顯示「過去案件地點(diǎn)」但不顯示「緊急電話」等等)。最終,我們決定用用戶能上滑顯示、下滑隱藏的「卡片」的形式呈現(xiàn),因?yàn)椋?
*根據(jù)一項(xiàng)調(diào)查大多人使用手機(jī)的手勢的研究顯示,卡片式的界面比起其他選項(xiàng),例如三橫杠的「漢堡」式選單,來說,對用戶更方便。由于我們希望用戶能在最短時(shí)間內(nèi)取的他們要的資訊,這個(gè)很重要
*卡片式的界面的設(shè)計(jì)和大多人已經(jīng)習(xí)慣使用的app有類似的設(shè)計(jì),例如Google 與Apple 地圖皆采用這種設(shè)計(jì)。借此我們可以確定新用戶不會對我們的界面感到太陌生
![]()
研究顯示手機(jī)上大拇指自然的操作區(qū)域。綠色代表自然,橙色代表需要拉伸,紅色代表困難。
線框圖提供了我們團(tuán)隊(duì)一個(gè)大致的設(shè)計(jì)參考,讓他們更好進(jìn)入開發(fā)階段。同時(shí)間,我和另一位設(shè)計(jì)師也開始了針對線框圖的「用戶訪談(User Interview)」與「可用性測試(Usability Test)」。
? ? ? 3,用戶訪談與 可用性測試
我們參考了用戶訪談(User Interview)與可用性測試(Usability Tests)的結(jié)果來改進(jìn)現(xiàn)有的設(shè)計(jì)。
「想像一下,夜黑了,而你必須自己走回家。你身旁沒有人,而且附近一片漆黑。你會怎么做來讓自己感覺到更安全?」
這是我們在針對線框圖的用戶訪談中,詢問被訪者的第一個(gè)問題。在他們回答問題后,我們簡單介紹了一下app的大致概念,并詢問他們是否有會有興趣下載,和是否有對我們想法的建議。最后,我們進(jìn)行了可用性測試;我們讓被訪者實(shí)際與互動式的線框圖原型做互動,并觀察他們的操作行為。
「如果路上有其他大學(xué)生的話,我會即使走在比較危險(xiǎn)的區(qū)域,也會感覺安心很多?!?/em>
進(jìn)行訪談時(shí),由于考慮到來自不同背景的用戶可能會習(xí)慣不同的設(shè)計(jì),我們會盡量尋找不同群體的用戶進(jìn)行訪談。我們希望這個(gè)app能讓所有用戶都感到熟悉與親切,不要和他們已經(jīng)習(xí)慣使用的app在設(shè)計(jì)上有太大的差異。我們訪談了一位大一女生、一位大一男生、一位大三學(xué)生與一位國際學(xué)生,而每一位在可用性測試時(shí)皆能順暢的操控互動線框圖原型,幾乎不需要我們輔助,可說有達(dá)到我們的標(biāo)準(zhǔn)!訪談時(shí)用戶推薦的一些所需功能有(1)加入公車資訊和(2)加入緊急要撥打電話的按鈕。
? ? ? 4,視覺槁 0
![]()
視覺槁0 是我在芝加哥參加會議期間,短時(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)榕掠脩魰Χ鄰埧ㄆ械嚼Щ?。但是,如果螢?zāi)簧嫌肋h(yuǎn)只有一張卡片,則會非常直覺。用戶看到不是「資料類型」選單卡,就是「詳細(xì)訊息」卡,后者若要顯示,則會覆蓋前者(可透過「x」關(guān)閉)。兩者不會同時(shí)出現(xiàn)。
? ? ? 5,視覺槁 1
![]()
視覺槁1 經(jīng)過精心設(shè)計(jì),其包括了線框圖上所有可見的細(xì)節(jié)。
這個(gè)視覺搞容納了所有在線框圖可見的頁面。我們使用深色圖片作為歡迎頁面的背景,因?yàn)樵O(shè)想到大多數(shù)人會在晚上使用本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ī)的手勢。
我們最終決定在頁面底部加了一個(gè)選單標(biāo)簽,供用用戶切換卡片的選項(xiàng)。這樣的設(shè)計(jì)能提供最直觀的操作流程,同稍早闡述的原因:由于畫面上只會顯示一張卡片,用戶要不是在「資料類型」選單卡或「詳細(xì)信息」卡,就是在「電話捷徑」卡,三選一。這樣,用戶較不會因?yàn)楫嬅嫘畔⑦^多而被混淆。
同時(shí),我們還更改了「詳細(xì)信息」卡上資料被顯示的先后順序,因?yàn)槲覀兿M脩裟茏顑?yōu)先看到對他們更重要的信息。例如:我們在訪談中了解到,用戶大多認(rèn)為「確切案件地址」比「案件類型」更重要,因?yàn)橛脩敉ǔ6紩x擇避免所有類型的案件。
「我喜歡你們把『詳細(xì)信息』卡上的資訊歸納的這么干凈,讓我一目了然!不過,如果能加入該案件『是否有涉及學(xué)生或教職員』的信息更好?!?/blockquote>
? ? ? 7,視覺槁 3
![]()
視覺槁3 在整體視覺上做了一些改變。
我們把卡片的背景改成非半透明的,這樣用戶能更清楚的區(qū)分畫面上的卡片區(qū)域與地圖區(qū)域。我們同時(shí)還擇使用紫色作為app的主要顏色,因?yàn)檠芯孔C實(shí)它可以平息心靈;可能有助于處于緊張心境的用戶。
? ? ? 8,視覺槁 4
![]()
視覺槁4 重新設(shè)計(jì)了新用戶會看到的歡迎頁面。
在先前多次可用性測試中,我們發(fā)現(xiàn)有些用戶,尤其是國際學(xué)生,會直接跳過所有的歡迎頁面,不閱讀頁面上的文字。他們說這些頁面上的字太多了,而且以非母語呈現(xiàn),并沒有吸引力讓他們停下來閱讀。為解決這個(gè)問題,我們重新設(shè)計(jì)了這幾個(gè)歡迎頁面,并將它們整合成單一一個(gè)介紹頁面,并僅顯示最重要的訊息。我們還大幅減少了文字量,并添加了更多視覺元素及動畫,以吸引用戶留下觀看。
另外,我們在主要頁面上的各卡片上加入了標(biāo)題文字,以幫助用戶區(qū)分它們。
解決方案Solution:最終設(shè)計(jì)成品
互動式原型
經(jīng)過多次的設(shè)計(jì)改良、用戶訪談和可用性測試后,我們使用Sketch 設(shè)計(jì)app建立了一個(gè)最終的、具高保真度的可互動原型(Interactive Prototype)。
![]()
在Sketch 軟件中可見我們app(原型)的使用流程。
這圖片顯示了我們app原型的關(guān)鍵導(dǎo)航流程;另外,我們也制作了影片版。在用戶第一次打開app時(shí)會看到介紹頁面,可以在那里了解app的主要功能。點(diǎn)了繼續(xù)后,會到主地圖頁面,用戶可以看到自己現(xiàn)在目前的位置,并透過圖雕資訊了解他們身邊周圍的情況。還影更多功能在影片中您也可以看到。
完結(jié)Outcome
我們設(shè)計(jì)的高保真原型成功解決了本文所述的「痛點(diǎn)」和「用戶需求」。我們的解決方案(app)讓任何能都可以隨時(shí)隨地查看他們周邊的相關(guān)信息,借此近一步保護(hù)自身安全。而且,這個(gè)app提供一個(gè)直觀的用戶體驗(yàn),讓人們即使在緊急情況下亦能順利找到正確的資料與訊息。透過這個(gè)app,我們讓在伊利諾伊大學(xué)的學(xué)生們在夜間更安全了!
我們的成品得到了非盈利機(jī)構(gòu)客戶Cut to The Case 非常正面的贊譽(yù),他們非常喜歡我們的設(shè)計(jì)!我們的成品也在Hack4Impact 年終發(fā)表會上獲得其他團(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
全站高品質(zhì)素材免費(fèi)下載!