用例驅(qū)動(dòng)設(shè)計(jì),讓你的設(shè)計(jì)更嚴(yán)謹(jǐn)!

2022-1-4    seo達(dá)人



圖片

復(fù)雜的AutoCAD與Inventor工具

 

用例(Use Case)的概念早在1986年就已被提出,它是需求分析的好幫手,可有效的劃定范圍、錨定用戶、區(qū)分關(guān)系、定義價(jià)值,通過不同顆粒度的抽象層次,不斷瓦解復(fù)雜系統(tǒng),使設(shè)計(jì)和管理有序化。本文基于早已發(fā)展成熟的用例驅(qū)動(dòng)設(shè)計(jì)理念,試圖從中找到一條適合體驗(yàn)設(shè)計(jì)師介入的小徑,來應(yīng)對(duì)復(fù)雜業(yè)務(wù)的產(chǎn)品設(shè)計(jì)。(備注:用例、參與者、UML等詳細(xì)的內(nèi)容不在闡述范圍內(nèi),本文僅探索一條可行的方式。)

 

1、什么是用例

定義:參與者與系統(tǒng)交互的一系列活動(dòng)的集合。

可以發(fā)現(xiàn),一個(gè)用例以一組活動(dòng)集合來表現(xiàn),集合中包含兩個(gè)角色,參與者、系統(tǒng)。參與者是“活的”(不一定是人類),TA的訴求驅(qū)動(dòng)了這一系列活動(dòng),此訴求即用例的核心,也是價(jià)值的體現(xiàn)。一個(gè)參與者可以對(duì)系統(tǒng)有多個(gè)訴求,詳見如下案例:

圖片

由用例驅(qū)動(dòng)的體驗(yàn)設(shè)計(jì)過程,著重關(guān)注對(duì)“行為”的設(shè)計(jì)。與系統(tǒng)的互動(dòng)“行為”被協(xié)調(diào)的、有組織的設(shè)計(jì)后,為界面表現(xiàn)設(shè)計(jì)建立堅(jiān)實(shí)基礎(chǔ),避免因邏輯的變更使界面設(shè)計(jì)反復(fù)推倒重來。試圖通過在界面設(shè)計(jì)的過程中尋找線索和靈感,反向的去設(shè)計(jì)背后邏輯是本末倒置的,個(gè)中原由在于我們更易于把控具象的視覺感知,較難把控抽象的行為。

 

2、系統(tǒng)用例和業(yè)務(wù)用例的關(guān)系

在劃分用例前,有必要澄清系統(tǒng)用例和業(yè)務(wù)用例的關(guān)系。

業(yè)務(wù)用例是從客戶當(dāng)前的業(yè)務(wù)邏輯中抽象出的用例,與數(shù)字產(chǎn)品無關(guān),即便沒有該產(chǎn)品服務(wù),客戶的業(yè)務(wù)體系也可以流轉(zhuǎn)。新的產(chǎn)品服務(wù)實(shí)際上是對(duì)傳統(tǒng)業(yè)務(wù)體系的替換關(guān)系,而系統(tǒng)用例就是從該產(chǎn)品服務(wù)中抽象出來的,圖示業(yè)務(wù)側(cè)和產(chǎn)品側(cè)的對(duì)接關(guān)系:

圖片

 

用例驅(qū)動(dòng)設(shè)計(jì)的案例:

總述:

為清晰闡釋我們是如何利用”用例“這個(gè)概念作為切入口,最終一步步驅(qū)動(dòng)、解構(gòu)、細(xì)化體驗(yàn)設(shè)計(jì)的,下面將完整展示一個(gè)注冊登陸試用產(chǎn)品的案例進(jìn)行講解,本案例為虛擬案例,方便設(shè)計(jì)過程的串連。

圖片

 

step1:  整理故事與確定用例

故事中包含了用戶的行為及其所處情境,將更易于被理解、共情和傳遞,故事情節(jié)的內(nèi)在聯(lián)系,上下游的完整性也直指價(jià)值的輻射范疇。在開始設(shè)計(jì)前,我們能從各個(gè)渠道收集到相關(guān)、相似的訴求,整合這些信息后以“故事”的方式表達(dá)出來,非常重要。

本案例的注冊登陸試用故事從”企業(yè)“、”用戶“兩個(gè)維度進(jìn)行描述,能確保在用戶訴求達(dá)成的情況下,也能達(dá)成商業(yè)訴求,和諧統(tǒng)一的以產(chǎn)品服務(wù)提供出去。

 

1.1 企業(yè)故事:

公司統(tǒng)一了Platform賬號(hào)體系,在保證多設(shè)備產(chǎn)品端的一鍵暢通體驗(yàn)的同時(shí),收集用戶行為信息,以提供更精準(zhǔn)的售后服務(wù)。同時(shí)與授權(quán)中心合作,通過網(wǎng)上商城定期開展活動(dòng),以下放試用天數(shù),獲得試用授權(quán)。產(chǎn)品經(jīng)理與銷售部門達(dá)成持續(xù)的合作,通過試用用戶的手機(jī)號(hào)進(jìn)行電話回訪,提高購買轉(zhuǎn)化率。同時(shí)軟件的設(shè)計(jì)應(yīng)能最大限度的提升客戶自發(fā)購買行為,需要在何時(shí)的時(shí)機(jī),合適的位置提供購買入口。

獲取用例的方式:

  • sys_運(yùn)營人員→獲取用戶信息
  • sys_運(yùn)營人員→開展活動(dòng)

 

1.2 用戶故事

新家裝項(xiàng)目開展在即,大量的圖紙?jiān)O(shè)計(jì)使張經(jīng)理感到困難。在受到同行推薦的Platform出圖軟件后,回到辦公室,通過Platform官網(wǎng)找到軟件信息,并利用現(xiàn)場wifi網(wǎng)絡(luò)下載安裝;迫不及待的啟動(dòng)軟件,雖沒有購買,但軟件提供了試用入口,張經(jīng)理提交Platform賬號(hào)后開始試用軟件。連續(xù)使用了兩天,后面每次自動(dòng)登錄提高了試用的體驗(yàn)過程,產(chǎn)品一鍵自動(dòng)化生成圖紙初步解決了張經(jīng)理的煩惱。經(jīng)過和集團(tuán)溝通后,張經(jīng)理在界面上找到購買入口,并購買軟件正版。他將軟件推薦給朋友劉經(jīng)理,他是Platform造價(jià)產(chǎn)品的老用戶,且已購買過Platform加密鎖,啟動(dòng)軟件后,界面自動(dòng)顯示為正式版, 不用登錄試用讓張經(jīng)理艷羨不已。

獲取用例的方式:

  • sys_采購經(jīng)理→試用軟件

 

step2: 快速描摹流程圖

用戶和企業(yè)的“故事”是一種情節(jié)式的、場景式的描述,它易于想象、理解和整合。但為了更清晰的輔助設(shè)計(jì),我們需要根據(jù)描述,進(jìn)一步梳理出流程關(guān)系,將其具象化。在繪制流程圖時(shí),可不用關(guān)注角色的職責(zé)關(guān)系,旨在快速描摹出所涉及到幾個(gè)業(yè)務(wù)點(diǎn)的關(guān)系,將企業(yè)和客戶的訴求點(diǎn)包含進(jìn)去,并在反復(fù)確認(rèn)過程中思考、推敲,大體設(shè)計(jì)出其中的基本結(jié)構(gòu)。過程中,可能需要補(bǔ)足新的故事描繪,或?qū)扔械墓适旅枋鲞M(jìn)行修正,以達(dá)成一個(gè)訴求與技術(shù)實(shí)現(xiàn)的平衡點(diǎn)。

圖片

 

step3: 泳道角色化

理清核心業(yè)務(wù)流程關(guān)系后,將進(jìn)一步繪制其角色泳道圖,每個(gè)泳道下對(duì)應(yīng)參與的角色。泳道圖仍然是分析過程的一步,它在這里的意義是可清晰的觀察到各個(gè)模塊間的協(xié)作互動(dòng),是細(xì)化過程,各個(gè)“對(duì)象”的職責(zé)不同,他們之間的交互關(guān)系存在進(jìn)一步優(yōu)化的可能,以保證整體行為的和諧,減低系統(tǒng)冗余。

圖片

 

step4: 業(yè)務(wù)實(shí)體的獲取

事實(shí)上,帶有角色的泳道圖僅是在很粗的層面描述了業(yè)務(wù)所參與的對(duì)象,是單純從流程圖層面歸納出來的“對(duì)象角色”。在面對(duì)詳細(xì)的功能分析時(shí)略顯不足,可能缺失實(shí)際參與的“對(duì)象角色”,如不分析出來,將導(dǎo)致用戶與系統(tǒng)的交互”行為“的缺失。我們需要進(jìn)一步挖掘其中涉及的各個(gè)參與“角色”,完整的描繪出其交互行為過程,才能對(duì)該封閉系統(tǒng)做完整的設(shè)計(jì)。

從哪里可以獲取到全部業(yè)務(wù)實(shí)體呢?當(dāng)然還是故事。業(yè)務(wù)實(shí)體天然的包含在用戶或企業(yè)故事中,才得以支撐故事的完整發(fā)生,這與故事描述的程度有關(guān),我們第一步就需要填充完整的故事。

備注:什么是業(yè)務(wù)實(shí)體——用于達(dá)成業(yè)務(wù)目標(biāo)的實(shí)體與過程中的記錄信息。諸如“點(diǎn)餐”用例中的“打印單”就是一個(gè)實(shí)體,打印單上的手機(jī)號(hào)是記錄信息。外賣員之所以能將外賣送到你的手上是通過打印單,查看上面的手機(jī)號(hào)和地址才能找到你。

下面是結(jié)合”故事“,進(jìn)一步獲取業(yè)務(wù)實(shí)體的案例,把所涉的可見的業(yè)務(wù)實(shí)體標(biāo)識(shí)出來。

 

4.1 企業(yè)故事:

公司統(tǒng)一了Platform賬號(hào)體系,在保證多設(shè)備產(chǎn)品端的一鍵暢通體驗(yàn)的同時(shí),收集用戶行為信息,以提供更精準(zhǔn)的售后服務(wù)。同時(shí)與授權(quán)中心合作,通過網(wǎng)上商城定期開展活動(dòng),以下放試用天數(shù),獲得試用授權(quán)。產(chǎn)品經(jīng)理與銷售部門達(dá)成持續(xù)的合作,通過試用用戶的手機(jī)號(hào)進(jìn)行電話回訪,提高購買轉(zhuǎn)化率。同時(shí)軟件的設(shè)計(jì)應(yīng)能最大限度的提升客戶自發(fā)購買行為,需要在何時(shí)的時(shí)機(jī),合適的位置提供購買入口。

圖片

 

4.2 用戶故事:

新家裝項(xiàng)目開展在即,大量的圖紙?jiān)O(shè)計(jì)使張經(jīng)理感到困難。在受到同行推薦的Platform出圖軟件后,回到辦公室,通過Platform官網(wǎng)找到軟件信息,并利用現(xiàn)場wifi網(wǎng)絡(luò)下載安裝;迫不及待的啟動(dòng)軟件,雖沒有購買,但軟件提供了試用入口,張經(jīng)理提交Platform賬號(hào)后開始試用軟件。連續(xù)使用了兩天,后面每次自動(dòng)登錄提高了試用的體驗(yàn)過程,產(chǎn)品一鍵自動(dòng)化生成圖紙初步解決了張經(jīng)理的煩惱。經(jīng)過和集團(tuán)溝通后,張經(jīng)理在界面上找到購買入口,并購買軟件正版。他將軟件推薦給朋友劉經(jīng)理,他是Platform產(chǎn)品的老用戶,且已購買過Platform加密鎖,啟動(dòng)軟件后,界面自動(dòng)顯示為正式版, 不用登錄試用讓張經(jīng)理艷羨不已。

圖片

 

step5: 時(shí)序圖的繪制

接下來,我們將進(jìn)行最重要的一步:基于已明確的核心業(yè)務(wù)流程和已拆分出的業(yè)務(wù)實(shí)體,構(gòu)造出一整套完整的系統(tǒng)行為。將使用到UML語言的重要工具——時(shí)序圖。時(shí)序圖能天然的表達(dá)多個(gè)對(duì)象間的復(fù)雜行為關(guān)系,在產(chǎn)品研發(fā)領(lǐng)域應(yīng)用廣泛。(時(shí)序圖的繪制有一整套完整的語法,本文不講解該部分內(nèi)容)時(shí)序圖的“對(duì)象對(duì)話”形式,原生的契合了“交互”這一概念,游戲大師Chris Crawford和設(shè)計(jì)專家Jon Kolko都對(duì)此有所定義:

發(fā)生在兩個(gè)或多個(gè)活躍主體之間的循環(huán)過程,各方在此過程中交替地傾聽、思考和發(fā)言,形成某種形式的對(duì)話(conversation)”

——《Chris Crawford on Interactive Storytelling, 2nd Edition》

“所謂交互設(shè)計(jì),是指在人與產(chǎn)品、服務(wù)或系統(tǒng)之間創(chuàng)建一系列對(duì)話(dialogue)”

——《houghts on Interaction Design, Second Edition》

時(shí)序圖重點(diǎn)強(qiáng)調(diào)了“行為”的發(fā)生與互動(dòng),使整體目標(biāo)達(dá)成。一系列有邊界的行為活動(dòng)合集,就組成一個(gè)完成的、有意義的“用例”。讓我們再次回到開頭的“用例”上來,并將該用例系統(tǒng)化。

用例:

  • sys_運(yùn)營人員→獲取用戶信息
  • sys_客戶人員→試用軟件
  • sys_客戶人員→授權(quán)軟件

圖片

除確保能服務(wù)于運(yùn)營人員、客戶外的核心邏輯能達(dá)成外,為帶來更好的使用體驗(yàn)。我們需要從諸多體驗(yàn)維度考慮各個(gè)系統(tǒng)行為?!绑w驗(yàn)因子”將作為系統(tǒng)行為的一部分目標(biāo),使整個(gè)交互活動(dòng)更易于理解和順暢。可直接借鑒一些通用的體驗(yàn)因子來評(píng)估,對(duì)于不同形態(tài)、業(yè)務(wù)的產(chǎn)品,體驗(yàn)因子有所偏重,諸如工具類產(chǎn)品對(duì)“操作便捷度”、“工具易學(xué)性”、“工具幫助引導(dǎo)”有較高要求。

回到注冊案例上來,考慮到“易學(xué)性”和“幫助引導(dǎo)”兩個(gè)體驗(yàn)因子,可以對(duì)用戶“輸入手機(jī)賬號(hào)”的行為進(jìn)行優(yōu)化設(shè)計(jì),提前或?qū)崟r(shí)對(duì)手機(jī)賬號(hào)進(jìn)行校驗(yàn),避免出錯(cuò)后再提示,徒增挫敗感。同時(shí)提供“獲取驗(yàn)證碼”的觸發(fā)入口,引導(dǎo)用戶執(zhí)行該操作,很大程度上降低系統(tǒng)的理解負(fù)擔(dān)。在行為設(shè)計(jì)過程中,存在顆粒度問題,復(fù)雜系統(tǒng)涉及到大量互動(dòng)會(huì)話行為,可以有粗細(xì)的逐步細(xì)化。

圖片

 

step6: 觸點(diǎn)行為的競品調(diào)研

完成系統(tǒng)互動(dòng)行為的設(shè)計(jì)后,可以開始正式的界面信息設(shè)計(jì)。“行為”的表達(dá)是極度精煉的,行為本身就是價(jià)值取向,并暗合用戶的內(nèi)心想法,由用例行為來驅(qū)動(dòng)界面設(shè)計(jì),才能真正做到按需設(shè)計(jì)。諸如“我感到肚子餓,第一想法是吃飯“、”早上該上班了,第一想法是走路去、打車去或坐地鐵“。

在面對(duì)”輸入手機(jī)號(hào)碼“行為的界面設(shè)計(jì)時(shí),除了個(gè)人創(chuàng)新外,也可調(diào)研市面上有哪些優(yōu)秀的界面承載方式,作為一種”學(xué)習(xí)輸入”,或者激發(fā)出新的創(chuàng)新行為。這種由內(nèi)而外的驅(qū)動(dòng)設(shè)計(jì),能使設(shè)計(jì)過程變得更有序,且避免遺漏。

圖片

 

step7: 觸點(diǎn)支線、異常、極限情況的排查

最后一步是對(duì)支線、異常、極限情況的排查,得益于時(shí)序圖系統(tǒng)行為的可視化表達(dá),我們可以清晰、有序的排查每一個(gè)對(duì)話過程中可能出現(xiàn)的異常或錯(cuò)誤,諸如“驗(yàn)證碼無法到達(dá)”、“信息返回錯(cuò)誤”等異常,都將被有效地排查出來。同時(shí),還能從行為對(duì)話結(jié)構(gòu)中,洞察到新的設(shè)計(jì)優(yōu)化機(jī)會(huì)點(diǎn),諸如“提交賬號(hào)信息”環(huán)節(jié),必然需要網(wǎng)絡(luò)的通暢,故斷網(wǎng)環(huán)境下需要給出明確的反饋。如下示例:信息返回錯(cuò)誤、異常流程高發(fā)地、頁面跳轉(zhuǎn)……

圖片

圖片

時(shí)序圖會(huì)話的先后順序也將直接影響到界面的表達(dá),圖示中“輸入手機(jī)賬號(hào)”與“填寫驗(yàn)證碼”是有先后時(shí)間順序的,如果同時(shí)在界面中展示兩個(gè)輸入信息,無疑造成并列的誤解。(可惜市面上幾乎大多數(shù)注冊環(huán)節(jié)都如此,大家早已習(xí)慣)

 

3、找到體驗(yàn)的最大撬動(dòng)點(diǎn)

總結(jié)

所謂用例驅(qū)動(dòng)體驗(yàn)設(shè)計(jì),是借用例的概念來定義問題和范圍,并使用UML來分析問題,使整個(gè)設(shè)計(jì)過程變得有序、系統(tǒng)、嚴(yán)謹(jǐn),在應(yīng)對(duì)復(fù)雜系統(tǒng)、多鏈路多角色的業(yè)務(wù)時(shí)較為有效。用例在整個(gè)設(shè)計(jì)過程中是核心的存在,一旦模糊就會(huì)出現(xiàn)偏差,引入無關(guān)內(nèi)容,同時(shí)也會(huì)失去對(duì)用戶價(jià)值的把控。用例的獲取很不容易,而精準(zhǔn)統(tǒng)一的用例更難,涉及到顆粒度、抽象層次、參與者、受眾等等內(nèi)容,本文未對(duì)“用例的獲取”做詳細(xì)闡述,僅專注在用例如何驅(qū)動(dòng)設(shè)計(jì)過程,有興趣者可移步學(xué)習(xí)。

 

撬動(dòng)點(diǎn)

以用例為中心的體驗(yàn)設(shè)計(jì),從業(yè)務(wù)邏輯出發(fā),轉(zhuǎn)化為系統(tǒng)邏輯,在構(gòu)建這個(gè)過程時(shí)就持續(xù)考慮體驗(yàn)因素,是把控體驗(yàn)的有效辦法,我們站在結(jié)構(gòu)上思考體驗(yàn),將徹底的優(yōu)化系統(tǒng)的體驗(yàn)。單純從界面表現(xiàn)和框架呈現(xiàn)上做體驗(yàn)優(yōu)化,上限明顯,只有扎得更深,才能從結(jié)構(gòu)上找到優(yōu)化的“最大”杠桿點(diǎn),帶來體驗(yàn)提升,并有可能直接對(duì)研發(fā)程序設(shè)計(jì)帶來指導(dǎo)。而UML的建模語言是有效的輔助工具,兩者的配合使這一切成為可能。

圖片

 

原文鏈接:酷家樂用戶體驗(yàn)設(shè)計(jì)(公眾號(hào))

作者:同舟

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用例驅(qū)動(dòng)設(shè)計(jì),讓你的設(shè)計(jì)更嚴(yán)謹(jǐn)!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔