B端產(chǎn)品中工作流的交互設(shè)計(jì)
B端產(chǎn)品的設(shè)計(jì)中經(jīng)常會(huì)出現(xiàn)工作流的身影,有的流程復(fù)雜有的流程簡(jiǎn)單。無(wú)論是簡(jiǎn)單還是復(fù)雜,它的概念都是一樣的。工作流的概念定義的很復(fù)雜,更多是從技術(shù)層面出發(fā),通俗點(diǎn)說(shuō)就是根據(jù)一系列過(guò)程規(guī)則,將文檔、信息、任務(wù)在不同的執(zhí)行者之間進(jìn)行傳遞與執(zhí)行。下面我將以一個(gè)相對(duì)簡(jiǎn)單的財(cái)務(wù)報(bào)銷(xiāo)的工作流程,來(lái)介紹一下工作流中的交互設(shè)計(jì)是怎么做的
在開(kāi)展交互設(shè)計(jì)之前我想說(shuō)一說(shuō)很多新手設(shè)計(jì)師都會(huì)踩的一個(gè)坑:做設(shè)計(jì)之前沒(méi)有充分了解需求。需求的溝通是交互設(shè)計(jì)師非常重要的一個(gè)能力(千萬(wàn)不要以為交互設(shè)計(jì)師就是畫(huà)畫(huà)原型圖,我做項(xiàng)目時(shí)也是最反感項(xiàng)目經(jīng)理什么需求都不說(shuō)清楚就讓畫(huà)原型圖)。
需求和誰(shuí)溝通?如果能接觸到客戶(hù)與客戶(hù)溝通當(dāng)然最好,當(dāng)然更多時(shí)候我們是與項(xiàng)目經(jīng)理或產(chǎn)品經(jīng)理溝通,我們必須有透過(guò)現(xiàn)象看到本質(zhì)的能力。需求溝通的話(huà)題太大在這里就不再贅述,后續(xù)有時(shí)間再單獨(dú)聊一聊如何溝通需求。
我將以下面三個(gè)方面來(lái)闡述一下工作流中的交互設(shè)計(jì)該怎么做:
- 需求的確定與梳理。正如前面所說(shuō)任何設(shè)計(jì)一定是建立在明確的需求之上的;
- 流程的梳理及信息架構(gòu)的產(chǎn)出。流程的設(shè)計(jì)是交互設(shè)計(jì)中非常重要的部分,好的流程能夠讓用戶(hù)更容易完成任務(wù)。這也是我本次分享著重要講的部分;
- 原型的產(chǎn)出。簡(jiǎn)單講述一下原型設(shè)計(jì)中要注意的問(wèn)題。
一、需求的確定與梳理
在需求溝通的階段有的客戶(hù)(用戶(hù))相對(duì)專(zhuān)業(yè)能夠很明確的闡述自己需要的功能,但是大多數(shù)客戶(hù)(用戶(hù))只是能大概的講一下自己需要什么東西。至于具體細(xì)節(jié)他是不清楚的,這個(gè)時(shí)候我們需要根據(jù)需求自己去整理通過(guò)與客戶(hù)(用戶(hù))的溝通盡可能的去了解用戶(hù)的使用場(chǎng)景,先設(shè)計(jì)一套方案然后和客戶(hù)(用戶(hù))反復(fù)溝通直至確定最終的需求。
這里如果有條件的情況下盡量去做一個(gè)簡(jiǎn)單的用戶(hù)調(diào)研,因?yàn)檫@樣會(huì)了解更多的用戶(hù)使用場(chǎng)景進(jìn)而挖掘出用戶(hù)的潛在需求。
通過(guò)溝通我們了解并最終確定了到客戶(hù)的需求。
客戶(hù)最開(kāi)始提出的需求是這樣的:
我們經(jīng)過(guò)溝通交流進(jìn)一步挖掘了一些潛在的需求,現(xiàn)在的需求是這樣的:
剛開(kāi)始客戶(hù)的需求是申請(qǐng)人發(fā)起報(bào)銷(xiāo)申請(qǐng),然后經(jīng)過(guò)部門(mén)經(jīng)理、分管副總、總經(jīng)理、財(cái)務(wù)的審批,在審批中發(fā)現(xiàn)問(wèn)題,可以駁回,如果審批通過(guò),財(cái)務(wù)進(jìn)行打款,整個(gè)流程形成閉環(huán)。
我們?cè)诹私獾叫枨蠛蠼Y(jié)合自己的分析提出了幾個(gè)問(wèn)題:
- 審批中被駁回的申請(qǐng)需要怎么處理;
- 如果申請(qǐng)人在提交申請(qǐng)后發(fā)現(xiàn)問(wèn)題能否進(jìn)行修改;
- 部門(mén)經(jīng)理、分管副總、財(cái)務(wù)以及總經(jīng)理是否也需要報(bào)銷(xiāo)申請(qǐng)。
在和客戶(hù)溝通后最終需求為:申請(qǐng)人發(fā)起申請(qǐng)、然后經(jīng)過(guò)部門(mén)經(jīng)理、分管副總、總經(jīng)理、財(cái)務(wù)審批,審批通過(guò)后財(cái)務(wù)進(jìn)行打款。被駁回的申請(qǐng),申請(qǐng)人在修改后可以再次提交。如果申請(qǐng)人在提交申請(qǐng)后發(fā)現(xiàn)問(wèn)題可以先進(jìn)行撤回然后再修改并提交。部門(mén)經(jīng)理、分管副總、財(cái)務(wù)、總經(jīng)理有審批和發(fā)起申請(qǐng)兩種權(quán)限,畢竟他們也需要進(jìn)行報(bào)銷(xiāo)。
經(jīng)過(guò)溝通與梳理需求基本敲定了,當(dāng)然這只是一個(gè)大的框架還有許多細(xì)節(jié)沒(méi)有考慮進(jìn)去,這就是我們后面進(jìn)行流程設(shè)計(jì)的時(shí)候需要做的事情了
二、梳理信息架構(gòu)及流程設(shè)計(jì)
經(jīng)過(guò)前面的需求溝通與梳理現(xiàn)在我們已經(jīng)對(duì)需要設(shè)計(jì)的財(cái)務(wù)報(bào)銷(xiāo)系統(tǒng)有了一個(gè)大概的框架,接下來(lái)我們需要站在交互的角度去考慮并設(shè)計(jì)流程。前面為了讓大家直觀的了解需求我已經(jīng)繪制了一個(gè)簡(jiǎn)單的流程了,現(xiàn)在我們需要在此基礎(chǔ)上細(xì)化。
這個(gè)階段比較重要,因?yàn)檫@個(gè)階段的設(shè)計(jì)基本決定了我們的系統(tǒng)可用性和易用性,關(guān)乎用戶(hù)體驗(yàn),所以要花大量時(shí)間在這個(gè)階段思考、打磨。
首先從需求出發(fā)梳理出一個(gè)大概的流程,前面談需求的時(shí)候已經(jīng)梳理過(guò)了,這里再貼出來(lái):
這里有兩個(gè)流程圖,并不是說(shuō)有兩套流程,流程都是一樣的,只不過(guò)是角色不同,后面再說(shuō)。先看看我們梳理出的流程,功能點(diǎn)比較清晰,看上去似乎沒(méi)有什么問(wèn)題,那么我們需要更深入的去思考了,站在用戶(hù)體驗(yàn)的角度去思考,這個(gè)時(shí)候我們就要帶入一些使用場(chǎng)景了。
我們舉兩個(gè)比較通用的場(chǎng)景:
- 如果操作途中出現(xiàn)了異常情況(網(wǎng)絡(luò)異常、服務(wù)器異常);
- 用戶(hù)在使用途中因個(gè)人行為被迫中斷操作(嘗試挖掘用戶(hù)新的需求點(diǎn))。
第一點(diǎn)的異常情況現(xiàn)在的流程中我們并沒(méi)有考慮到,那這里我們就要去思考了,異常情況有哪些,其實(shí)異常情況有很多這里我們只考慮幾種常見(jiàn)的情況:網(wǎng)絡(luò)異常;服務(wù)器異常。
(1)網(wǎng)絡(luò)異常
如果用戶(hù)在提交申請(qǐng)的過(guò)程中網(wǎng)絡(luò)出現(xiàn)異常該怎么處理。我們?cè)谳斎肓撕芏啾韱蝺?nèi)容上傳了一堆附件之后在提交的時(shí)候網(wǎng)絡(luò)出現(xiàn)異常了。如果不對(duì)這個(gè)環(huán)節(jié)進(jìn)行設(shè)計(jì)的話(huà),用戶(hù)辛苦輸入半天的內(nèi)容直接沒(méi)有了,回頭還得再次輸入,這是一件很崩潰的事情。這個(gè)時(shí)候我們需要一些策略,對(duì)用戶(hù)輸入的內(nèi)容進(jìn)行緩存,即使用戶(hù)碰到網(wǎng)絡(luò)異常再返回的時(shí)候內(nèi)容仍然在,這個(gè)體驗(yàn)就很贊了。
有的同學(xué)可能會(huì)覺(jué)得這個(gè)是技術(shù)層面的問(wèn)題應(yīng)該是開(kāi)發(fā)去考慮的事情,這就大錯(cuò)特錯(cuò)了。除了少數(shù)有經(jīng)驗(yàn)的開(kāi)發(fā)會(huì)去考慮這個(gè)問(wèn)題,大多數(shù)開(kāi)發(fā)是不會(huì)考慮的或者說(shuō)他們更多只會(huì)按照需求清單進(jìn)行開(kāi)發(fā),你沒(méi)提他可能也不會(huì)問(wèn)。而恰恰這些地方就是體現(xiàn)一個(gè)系統(tǒng)易用性的重要細(xì)節(jié)。也是體現(xiàn)一個(gè)產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師設(shè)計(jì)能力的點(diǎn)。
(2)服務(wù)器異常
服務(wù)器異常同網(wǎng)絡(luò)異?;绢?lèi)似,最大區(qū)別是網(wǎng)絡(luò)異??赡懿辉谖覀兊目刂品秶畠?nèi)而服務(wù)器異常卻是我們不可推卸的責(zé)任。所以在這個(gè)時(shí)候我們除了要解決用戶(hù)內(nèi)容緩存問(wèn)題還需要安撫用戶(hù)的情緒,提出一個(gè)好的解決方案,比如告訴用戶(hù)嘗試刷新頁(yè)面,或者判斷是不是用戶(hù)操作導(dǎo)致的問(wèn)題并進(jìn)行提示引導(dǎo),而不是直接丟給用戶(hù)一個(gè)404頁(yè)面。
第二點(diǎn)用戶(hù)在使用途中因個(gè)人行為被迫中斷操作
這個(gè)其實(shí)是從用戶(hù)使用場(chǎng)景出發(fā)去挖掘用戶(hù)潛在的需求點(diǎn)。比如說(shuō)用戶(hù)正在錄入報(bào)銷(xiāo)內(nèi)容,中途突然有重要電話(huà)過(guò)來(lái)了,或者臨時(shí)有重要任務(wù)需要處理,而這個(gè)時(shí)候用戶(hù)錄入了很多內(nèi)容了他并不想放棄已經(jīng)輸入的內(nèi)容,這個(gè)時(shí)候該怎么辦?
如果不去做這個(gè)環(huán)節(jié)的設(shè)計(jì)會(huì)不會(huì)影響系統(tǒng)的可用性,當(dāng)然不會(huì),我們的核心流程是沒(méi)有問(wèn)題的。
那會(huì)不會(huì)影響用戶(hù)的情緒呢?
可能會(huì),為什么是可能,因?yàn)橐徊糠钟脩?hù)可能不在乎或者沒(méi)有這個(gè)意識(shí)。那如果我們?cè)谶@里設(shè)計(jì)一個(gè)草稿箱是不是就能解決用戶(hù)這一痛點(diǎn)了呢,這對(duì)于提升用戶(hù)體驗(yàn)很有幫助。
這些用戶(hù)潛在的需求點(diǎn),只能通過(guò)帶入用戶(hù)場(chǎng)景,切實(shí)站在用戶(hù)易用性的角度去考慮問(wèn)題你才能尋求突破。
再來(lái)說(shuō)說(shuō)角色問(wèn)題
角色是工作流中最根本的一個(gè)環(huán)節(jié),不同角色權(quán)限不同,流程也會(huì)有些差別。
前面提到過(guò),這個(gè)報(bào)銷(xiāo)系統(tǒng)主要分為三個(gè)角色:?jiǎn)T工、領(lǐng)導(dǎo)(部門(mén)經(jīng)理、分管副總、總經(jīng)理)、財(cái)務(wù)。
員工只有發(fā)起報(bào)銷(xiāo)申請(qǐng)的權(quán)限,領(lǐng)導(dǎo)有發(fā)起報(bào)銷(xiāo)和審批報(bào)銷(xiāo)單的權(quán)限。這里把部門(mén)經(jīng)理、分管副總、總經(jīng)理都劃為一個(gè)角色,因?yàn)樗麄兊臋?quán)限是一致的只不過(guò)在流程的節(jié)點(diǎn)上有先后關(guān)系,財(cái)務(wù)的權(quán)限比較特殊,從級(jí)別劃分上他不具備審批權(quán)。但是要行使審核權(quán),就是檢查報(bào)銷(xiāo)信息和發(fā)票信息是否正確、屬實(shí),但是在權(quán)限上他與領(lǐng)導(dǎo)角色是一致的這個(gè)是要特別注意的。
不同權(quán)限角色在流程設(shè)計(jì)上也會(huì)不同,所以設(shè)計(jì)流程時(shí)必須搞清楚角色權(quán)限問(wèn)題。前面我們針對(duì)員工角色和領(lǐng)導(dǎo)角色分別設(shè)計(jì)了不同的流程,財(cái)務(wù)角色的流程和領(lǐng)導(dǎo)角色的流程是一致的。
這個(gè)報(bào)銷(xiāo)系統(tǒng)的設(shè)計(jì)是最基礎(chǔ)的工作流形式了,權(quán)限相對(duì)清晰,在實(shí)際工作中由于需求和應(yīng)用場(chǎng)景不同,往往會(huì)很復(fù)雜。在設(shè)計(jì)的時(shí)候需要明確把角色權(quán)限控制的規(guī)則告知開(kāi)發(fā)。
通過(guò)進(jìn)一步的考慮分析,現(xiàn)在流程設(shè)計(jì)這個(gè)環(huán)節(jié)基本就完成了(不一定全面,任何設(shè)計(jì)都要結(jié)合實(shí)際的需求和業(yè)務(wù)場(chǎng)景)。
接下來(lái)是梳理信息架構(gòu)了,有了流程和角色的設(shè)計(jì),產(chǎn)出信息架構(gòu)相對(duì)來(lái)說(shuō)就比較簡(jiǎn)單了,這里需要注意的是信息架構(gòu)需要考慮的更細(xì),有哪些角色不同角色分別對(duì)應(yīng)什么頁(yè)面,頁(yè)面有哪些功能點(diǎn)都需要列出來(lái)
三、原型的產(chǎn)出
原型同樣是一個(gè)很重要的環(huán)節(jié),因?yàn)樗沁B接上下游、可視化的呈現(xiàn)系統(tǒng)設(shè)計(jì)的一個(gè)重要載體,并且是設(shè)計(jì)、開(kāi)發(fā)、測(cè)試工作的重要依據(jù)。所以原型的設(shè)計(jì)不能馬虎,必須面面俱到,把前面設(shè)計(jì)的流程和角色權(quán)限的規(guī)則體現(xiàn)出來(lái),同時(shí)還要注意細(xì)節(jié)和流程的完整。
在前面梳理信息架構(gòu)的時(shí)候?qū)嶋H上頁(yè)面的設(shè)計(jì)在我們腦海中已經(jīng)有了一個(gè)雛形,原型的繪制只不過(guò)是時(shí)間問(wèn)題。當(dāng)然這里也不排除在繪制原型的過(guò)程中發(fā)現(xiàn)一些信息架構(gòu)設(shè)計(jì)上的問(wèn)題,可能需要同步整理修改。我個(gè)人習(xí)慣在繪制原型前簡(jiǎn)單的畫(huà)一個(gè)草稿,這樣有利于梳理思路,發(fā)現(xiàn)問(wèn)題時(shí)修改成本也會(huì)比較低。
以上是我對(duì)工作流中交互設(shè)計(jì)的一些理解,僅代表個(gè)人觀點(diǎn)不是行業(yè)準(zhǔn)則,希望能對(duì)你有所幫助,也歡迎大家提出問(wèn)題共同交流!
本文由 @鱷魚(yú)先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
謝謝
有畫(huà)好的原型圖嗎 也分享出來(lái)看下
嫖得理直氣壯!
嫖得天經(jīng)地義!
原型圖最基本的一點(diǎn):線(xiàn)盡量不要交叉
流程圖
這個(gè)流程設(shè)計(jì)強(qiáng)烈建議用泳道圖畫(huà),把每個(gè)角色的每個(gè)動(dòng)作歸屬定義清楚。 ??
有點(diǎn)東西 正好需要做個(gè)工作流 可以參考
草稿箱也可以用緩存來(lái)解決啊,再做一個(gè)草稿箱性?xún)r(jià)比太低了吧
這不是產(chǎn)品經(jīng)理做的事情嗎 需求溝通到話(huà)原型