以下內容由Mockplus(摹客)團隊翻譯整理,僅供學習交流,Mockplus是更快更簡單的原型設計工具。
使用者體驗擁有一長串專業的術語和可交付內容。當線上檢視UX相關職位描述時,所羅列的這類術語更是全面繁多。而且,隨著時間的流逝和它們自身的不斷演變,其中很大一部分甚至出現了定義上的重複和交疊。所以,為方便設計師,Web/app開發者以及使用者等更加簡單的理解這些術語和可交付內容,我認為是時候該重新整理和定義它們了。
打破它
任務流和使用者流是多年來常聽到的使用者體驗術語。雖然我嘗試通過Google搜尋等方式搜尋其“官方”權威定義,但結果卻是,現存的很多UX術語表並未集中過定義它們。
儘管如此,無論如何,這類“流”都是在描述Web或軟體的“運動”情況。設計師需要考慮如何設計和引導使用者瀏覽一個網站或軟體。建立這類網頁或軟體“流”能夠幫助設計師思考和預估使用者在瀏覽一個頁面之前或之後可能發生的情況,並集中處理其中重要的部分。而且,此外,作為建立可執行原型的第一步,這類“流”的設計也能夠幫助開發人員瞭解,軟體或網頁在交替狀態下是如何運作的。
流程圖
流程圖是一張展示一個複雜系統或活動中人或物動作或行為的順序圖。而,應用到軟體或Web設計中,則表示一張展示使用者一系列頁面活動或行為的順序圖。
任務流與使用者流
任務流和使用者流並非完全不同。因為它們目的都是為了以最小的阻力,幫助使用者完成某項任務。它們都能夠幫助你在設計開發具體軟體或網頁功能之前,深思熟慮一些設計問題。如果你希望能夠更簡單具體地區分它們,也可以如此定義它們:
任務流
任務流是所有使用者為實現某特定操作所完成的單一流程,所有使用者所經歷流程都是相似的,比如網頁或軟體註冊。任務流是一條單一的流程,毫無分支。
使用者流
使用者流則是使用者所遵循的軟體或網頁執行路徑。可以視作是使用者在瀏覽軟體或網頁所經歷的一個個迷你旅程。使用者流不一定是線性的,還可以有分支。通過定義或設計軟體或網頁路徑,你能夠發現其中可能的轉變點和提升點,從而優化使用者體驗。
使用者流可以非常簡單,僅用以幫助設計網頁或軟體的“紅色路徑”——即網頁或軟體主路徑。當涉及和新增更多相關條件和要求時,使用者流也可以變得極其的複雜。總之,在開發產品之前,使用者流可以幫助設計師和開發人員有效地分解複雜的流程,從而加深理解,提升工作效率。
Morgan Brown曾經說過:
“使用者流設計可以為使用者和企業帶來更多實效。”
頁面流程圖
世界聞名的37 signals軟體公司曾對使用者流進行速記,並認為它們存在以下不足:
*在設計過程中,使用者流有時很難解釋並用以交流。
*繪製出流程細節,會非常費時。
*而且隨著介面設計的更迭變化,流程設計很快就不在適用。
雖然使用者流以及頁面流程圖之類“流”存在不足,你也可以在實際的Web或軟體中嘗試使用它們。因為作為一種Web或軟體設計的快速入門方式,它們能夠在時間有限的情況下,滿足你的設計需求。
而且,隨著設計需求的不斷變化,為方便設計師展示和交流其設計理念,一些原型工具,例如簡單快捷的Mockplus, 提供了專業的頁面流程圖功能。設計師一鍵點選即可生成所需Web或軟體頁面流程圖,並根據設計需要設定其顏色,背景以及連線線,新增頁面備註以及匯出為圖片等。能夠幫助設計師極大的提升設計和交流效率。
Wireflows
多年來,我通過建立流程圖來演示和交流Web或軟體中的互動設計。而且為了囊括更多的設計情景,這些流程圖已演變成包含線框圖的“流”設計。而全球知名的使用者體驗研究機構Nielsen Norman Group最近提出了一個全新的術語“Wireflows”來描繪此類使用者體驗的可交付內容。
Nielsen Norman Group這樣定義Wireflows:
Wireflows是一種結合了線框圖風格的頁面佈局格式,採用了一種簡化的流程圖來展示Web或軟體的各種互動設計。
只有線框圖是遠遠不夠的。因為線框圖常常僅僅展示Web或軟體的頁面佈局或靜態內容,並未包含任何動態互動。而流程圖則囊括了Web或軟體的互動細節,但卻忽略了可能發生的應用情景。而Wireflow則能夠幫助設計師儲存複雜的互動設計,並展示這些互動設計中變化的內容和佈局。
Wireflow元素
*入口和出口
*步驟:例如使用者操作,系統操作以及替代路徑
*連線:指示所需的路徑和可能的不同流程
*決策點:使用者必須從兩個或多個選項中選擇。
總結:
瞭解和預估這些“流”可能的應用場景,能夠有效地優化設計體驗。以上所描述的任何“流”都能夠幫助設計師更好的展示和交流各種設計理念,從而提高協作效率。
資源
以下是一些可以加速UX工作流設計的資源,希望能對你有所幫助:
介面工具包資源
*FREEBIE — Flowchart kit for Sketch
——來自Greg Dlubacz設計師的流程圖工具包
這是一個精心製作的Sketch流程圖工具包,可以幫助你輕鬆快捷的建立簡潔直觀的站點地圖。包含的所有元素,包括箭頭等,都是可編輯,可定製的。
*Flowchart Kit Sketch Resource
——來自 Arthur Guillermin Hazan設計師的流程圖工具包
這是一個展示了網頁介面之間互動設計的流程圖工具包。你可以使用它輕鬆地為你的介面新增箭頭以及圖示等元素,自定義你的介面,甚至在其幫助下建立更加精確的站點地圖。
*User Flow Diagram Template
——來自Jarosław Ceborski設計師的使用者流程圖模板
這個使用者使用者流程圖模板能夠幫助你簡單地製作美觀吸睛的圖表。其中包含的所有方塊和箭頭都是便於直接使用的Sketch符號。
*13+ Productive UX Flowchart Templates
——來自Template.net網頁的UX流程圖
Sketch外掛資源
*Sketch plugin — AEFlowchart
——來自Marko Tadic的AEFlowcharts外掛
Sketch提供了多種能夠幫助設計師常見Web或軟體流程圖的外掛。而在簡單檢視這些外掛之後,小編髮現,AEFlowcharts是所有這些外掛中最易用的。
作者:Naema Baskanderi
原文地址:https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d