5分鐘幫你學(xué)會(huì)用戶體驗(yàn)流程圖(附實(shí)戰(zhàn)演示)

2018-01-08 6406 0
在用戶體驗(yàn)設(shè)計(jì)領(lǐng)域,設(shè)計(jì)師常常用流程圖的方法進(jìn)行需求解析,任務(wù)描述,所有情況羅列、發(fā)掘新設(shè)計(jì)點(diǎn)等。流程圖是非常有效的將需求轉(zhuǎn)化為具體設(shè)計(jì)稿的思考工具。本文中,小可將會(huì)結(jié)合自己的經(jīng)歷,來(lái)講下用戶體驗(yàn)設(shè)計(jì)中流程圖(UX Flowchart)的運(yùn)用。 最早關(guān)于流程圖的概念由Frank 和 Lillian Gilbreth 在1921年美國(guó)機(jī)械工程師社團(tuán)(American Society of Mechanical Engineers)的《流程圖:尋找工作最有途徑的第一步》(“ProcessCharts: First Steps in Findingthe One Best Way to do Work”)演講中提出【1】。隨著在工程領(lǐng)域中的逐漸推廣和運(yùn)用,流程圖(Flowchart)已經(jīng)成為描述計(jì)算機(jī)算法的常用工具之一。
流程圖中的常用圖形 流程線(FlowLine)是單箭頭線,起始于一個(gè)圖形,終止于另一個(gè)圖形,代表了流程的流轉(zhuǎn)。通常用實(shí)線表示,在多任務(wù)間跳轉(zhuǎn)或次要流程流轉(zhuǎn)時(shí),也可以使用虛線表示。 uisdc-ddc-201609131 起終點(diǎn)(Terminal)可以用圓型、橢圓或圓角矩形來(lái)畫(huà),通常寫(xiě)著“開(kāi)始”、“結(jié)束”,或其他代表流程結(jié)束的短語(yǔ),如“提交信息”等。 uisdc-ddc-201609132 操作(Process)用矩形表示,指某件事發(fā)生了、做了什么操作等,如“輸入身份證號(hào)”、“查詢交易記錄”等。 uisdc-ddc-201609133 條件判斷(Decision)在多情景中,需要進(jìn)行條件判斷,用菱形表示。一般來(lái)說(shuō),條件判斷多為是與非(或?qū)εc錯(cuò))的結(jié)果,于是就有兩條流程線從條件判斷中流轉(zhuǎn)出,通常正面回答的流程線從下方流轉(zhuǎn)出,負(fù)面回答的流程線從右側(cè)流轉(zhuǎn)出。每條流轉(zhuǎn)出的流程先必須標(biāo)明判斷結(jié)果(即是或非)。當(dāng)然也會(huì)存在多種判斷結(jié)果的情況,這時(shí)候會(huì)有多條流轉(zhuǎn)出的流程線,注意標(biāo)注清楚每條流程線上的適用條件。在這種情況下,要特別注意是否遺漏某些條件,所以建議將復(fù)雜的條件判斷,拆分為多個(gè)二元判斷的組合,這對(duì)于后續(xù)對(duì)外溝通、自我檢查來(lái)說(shuō)也更加友好。 uisdc-ddc-201609134 預(yù)定義操作(PredefinedProcess)用左右雙線的矩形表示。在一些復(fù)雜流程中,有些復(fù)雜模塊可以單獨(dú)進(jìn)行詳述,此時(shí)在主流程中,就可以使用預(yù)定義操作模塊進(jìn)行指代,并在其他地方進(jìn)行詳述。 uisdc-ddc-201609135 以上五種是流程圖中最最基礎(chǔ)的常用圖形,對(duì)于設(shè)計(jì)師來(lái)說(shuō),也基本夠用了。在學(xué)習(xí)完基本功后,你就可以進(jìn)行自我修行了!(不負(fù)責(zé)任的作者啊喂o(+一︿一)o) 一個(gè)小練習(xí)  好了,那我們來(lái)做一個(gè)小練習(xí)——最常見(jiàn)的登錄功能。這,似乎看起來(lái)很簡(jiǎn)單。于是有了以下這張流程圖: uisdc-ddc-201609136 似乎并沒(méi)有什么問(wèn)題。但是(記住,通常每個(gè)“似乎”都有一個(gè)“但是”在等TA),這里的登錄要素只考慮了手機(jī)號(hào)+密碼一種方式,是否滿足需求呢?為什么沒(méi)有郵箱登錄?昵稱登錄?手機(jī)號(hào)+短信驗(yàn)證碼登錄?繼續(xù)看第一步輸入手機(jī)號(hào),是否會(huì)存在手機(jī)號(hào)格式錯(cuò)誤、手機(jī)號(hào)未注冊(cè)的情況?系統(tǒng)是否有必要對(duì)手機(jī)號(hào)進(jìn)行單獨(dú)檢驗(yàn)?如果單獨(dú)檢驗(yàn),會(huì)不會(huì)有什么安全隱患?不檢驗(yàn),是否體驗(yàn)友好?如何進(jìn)行評(píng)估?其中的操作、判斷是由用戶來(lái)做還是系統(tǒng)來(lái)做?系統(tǒng)做的話,是前端還是后端做呢?用戶忘記了密碼怎么辦?等等等等。看似簡(jiǎn)單的登錄流程,竟然會(huì)如此狀況百出。 這里分享幾條我畫(huà)流程圖的心得體會(huì): 面向操作的流程圖 不同的學(xué)科、不同的人都有不同的畫(huà)流程圖偏好。有些人喜歡面向頁(yè)面的流程圖,有些人偏愛(ài)面向狀態(tài)的流程圖,而我更傾向面向操作的流程圖畫(huà)法,這樣做可以更聚焦在任務(wù)本身,排除界面元素干擾,(具體界面設(shè)計(jì)應(yīng)在流程圖的基礎(chǔ)上進(jìn)行后續(xù)的深入)。 由繁入簡(jiǎn) 在剛開(kāi)始訓(xùn)練的時(shí)候,建議盡可能地將流程圖畫(huà)細(xì),每一個(gè)操作每一次判斷都詳細(xì)畫(huà)出,能拆分的情況都進(jìn)行拆分,思考盡可能地全面。 站在不同的角色角度進(jìn)行思考 在畫(huà)流程圖的時(shí)候,應(yīng)當(dāng)多思考各項(xiàng)操作、判斷的操作者是誰(shuí),是系統(tǒng)還是用戶,并用不同顏色(或其他方式)標(biāo)明。 不同情況全覆蓋 對(duì)照流程圖檢驗(yàn)是否滿足所有情況。最簡(jiǎn)單的檢驗(yàn)原則就是每條路都應(yīng)該走得通,都有開(kāi)始和結(jié)束的點(diǎn)而非莫名終端,每個(gè)判斷都至少有兩條流轉(zhuǎn)出的路。 發(fā)掘新設(shè)計(jì)點(diǎn) 在流程圖中,可以這樣問(wèn)自己,會(huì)不會(huì)有無(wú)法進(jìn)行某操作的情況?在每一種發(fā)生錯(cuò)誤的時(shí)候,是否有對(duì)應(yīng)的設(shè)計(jì)對(duì)策?如在登錄的任務(wù)中,就發(fā)掘出了用戶忘記密碼的情況。 基于以上考慮,我們來(lái)優(yōu)化下登錄功能的流程圖,假設(shè)這里的登錄方式僅允許手機(jī)號(hào)+密碼一種方式: uisdc-ddc-201609137 注意,因?yàn)樯婕暗?ldquo;注冊(cè)”、“忘記密碼”兩種新的情況,所以在這里限于篇幅,就用虛線流轉(zhuǎn)線、預(yù)定義操作的圖形來(lái)簡(jiǎn)述。若要具體展開(kāi),那就是一整套的登錄/注冊(cè)咯~ 關(guān)于流程圖的學(xué)習(xí)就先講到這里。 流程圖的練習(xí)是一個(gè)熟能生巧的過(guò)程,記住:站在不同角色角度多思考、勤練習(xí)多推敲、覆蓋全情況、發(fā)掘新設(shè)計(jì)點(diǎn)。相信在經(jīng)過(guò)嚴(yán)謹(jǐn)?shù)挠?xùn)練之后,面對(duì)再?gòu)?fù)雜的需求也能夠游刃有余化繁為簡(jiǎn)了。
9
評(píng)論區(qū)(0)
正在加載評(píng)論...