在產品開發過程中,為了有效和不同角色溝通,軟體PM經常需要準備各種形式的資料,例如簡報、範例圖、流程圖、表格....,林林總總的資訊,目的就是要確保每個人對同一件事、同一個產品規格有足夠且具體的了解。資料準備越齊全,即便日後經過人員交替、任務交接,也能遵循相同的規則繼續前進,讓影響降到最小。

一個產品從發想到形成規格,勢必經過一段演進的過程,嚴謹一點來說,應該會有User Story、 Functional Map、Flow Chart、Wireframe、Prototype ...等產出,最後彙整成一份完整的產品規格書,而本篇文章將依據我過去的工作經驗,以及收集各方資訊後,分享一些製作Flow Chart(流程圖)的心得。

1.流程圖基本符號
使用統一的符號繪製,可以減少大家對符號定義的認知誤差,讓Flow Chart更容易閱讀,因此PM務必要熟悉畫法,才能和工程師有效溝通。PM的養成過程很少有一套固定的模式或標準學習曲線,部分原因來自於不同產業、不同公司對PM的定義各有差異,而PM本身要學會的技能也非常多,繪製Flow Chart成為容易被忽視的一項基本能力。多數PM熟悉各種不同的簡報形式,畫過各形各色的圖表,經常會為了簡報效果而美化、更替流程圖圖示,久而久之反而養成習慣,或直接將簡報用的流程圖放到文件規格中,造成其他人閱讀規格上的困難,因此,雖然流程圖基本畫法看似是一項簡單的技能,卻是PM必須要留意、時時提醒自己的。

流程圖符號.PNG

常用的流程圖符號簡單說明如下
(a) 開始或結束符號 : 清楚標示流程的第一個、最後一個動作,等同是替這一張流程圖定義明確的範疇,開始的流程不一定會是某個頁面或功能的最上層,它可能源自於做了某一個動作、點擊某一個按鈕之後。

(b) 輸入/輸出 : 通常是在定義有明確需要使用者手動輸入某些資訊,或是網頁畫面有特定資訊需顯示時。

(c) 處理流程 : 可能是某個動作、某項操作,或執行某一個指令。

(d) 決策判斷 : 例如樂透兌獎,必須先判斷彩券號碼是否和開獎結果一致,通常後面會有是或否的不同路徑。

(e) 資料庫 : 當需要特別表示資料來源或儲存位置時,可以使用此符號。

(f) 子流程 : 如同開始或結束在界定範疇,當接下來的流程屬於範疇外,或者因流程複雜必須另行定義時,可使用子流程的符號來代表。

(g) 產出文件 : 相較於資料庫,此為文件形式的產出。

以買樂透的流程為例,可以畫成下方的flow chart。
流程圖.PNG


2.流程圖進階繪製
雖然正規化的Flow Chart已經容易拿來和團隊成員溝通,但有時產品的複雜度較高,必須引用許多外部資料,或與不同單位、系統進行串接,一個看似簡單的流程,背後或許會隱含資訊往來的風險,如果PM能夠將場域的概念融入Flow Chart中,將會更方便團隊其他成員進行後續的進階分析,將可能的風險釐清。

在偶然的機會中接觸到UML(註1)後,我發現其中所使用的swimlane(泳道圖)概念很適合在Flow Chart中輔助呈現。泳道圖顧名思義,就像游泳比賽中,利用浮標將泳池劃分出不同的水道,參賽者只能在規定的水道內前進,觀眾也可以清楚辨識每一位選手的情況。因此,泳道圖可以用來描述誰(部門、場域)在流程中執行哪些操作,藉以劃清權責。

具體的做就就是在原本的流程圖中,利用區塊、顏色的標示,將屬於同一個場域的流程凸顯出來,例如前述的樂透流程,就可以改成像下方那樣。實際操作過幾次後,我發現和工程師之間的溝通變得更加順暢,由於彼此對流程更加清楚,在什麼情況可能會遇到什麼問題,工程師都能很多提供分析回饋。
泳道.PNG

3.流程圖的應用
對於設計師而言,Flow Chart多半只描述了特定的行為動作,但這些行為可能會發生在產品的相同或不同畫面中,因此,為了具體描繪畫面的樣貌,PM還需要與設計師協作完成UI Flow或Wireflow,確保接下來的畫面設計不會出現缺漏。如果我們將前述的樂透流程轉化成UI Flow,大概可以畫成這樣,原本Flow Chart中的處理流程被置換成一個或多個獨立的page。
UI flow.PNG

至於Wireflow,簡單來說,是將UI Flow中的page置換成wireframe的圖示,好處是能將流程與畫面放在一起思考,例如點擊畫面中的哪一個地方,可以接續到下一個畫面。

整體而言,Flow Chart雖然有特定的畫法,最重要的還是能有效表達產品中的某些特定流程,讓設計師、工程師等其他團隊成員延續將產品的其他細節完成。

 

註1 : UML
Unified Modeling Language,統一塑模語言。簡意是指以圖形的方式,將系統功能與結構繪製成圖表或某種模型。UML本身基於物件導向設計,適合各種物件導向軟體開發應用,其定義了許多diagram的繪製基礎,例如較為常見的Use Case diagram。
 

arrow
arrow

    victor 發表在 痞客邦 留言(0) 人氣()