2016-9-2 周周
交互設計師有一項很重要的工作就是定義任務流程。在接到需求之后，設計師需要把抽象的需求設計成具象的流程，然后再把流程分配到不同的界面，最終形成成品。設計流程不難，但是設計好的流程非常難。今天主要是從“閉環”這個角度來講講流程設計中的優化問題。
舉個簡單的例子，注冊這個流程可以這么定義：
這么一看，確實很簡單。但是這是一個好的流程嗎？比如填寫手機號碼的時候發現手機號碼已經注冊了，這個時候需要怎么辦？比如獲取不到驗證碼怎么辦？這些細化的場景如果沒有考慮到的話，流程就會變得很晦澀難用。怎么去尋找細分的場景一直是流程設計中一個難題，這部分以后會談。所以，今天我主要是從“閉環”這個角度來講講流程設計中的優化問題。怎么去構造交互設計的閉環，我主要從以下幾個維度去講：①打通斷頭路；②設置延長線；③開辟新岔路。每個流程就好比一條路，所以這里借用交通領域的名詞來說明，理解起來更加形象生動。
斷頭路，顧名思義就是流程走到某個地方，雖然目標還沒達成，但是路徑已經中斷了。如果現實中遇到斷頭路，司機肯定是一頓怒罵然后沿路返回，再選擇新的路。在流程中，如果用戶遇到斷頭路，有可能用戶會沿路返回，然后去嘗試新的流程，但是也有可能是用戶會直接流失掉。如果流失掉客戶，那么損失可就大了。所以，在做流程設計的時候，首先就要看看有沒有斷頭路，然后要把斷頭路都打通。
回到一開始的例子，我們來看看這個例子中可能出現的斷頭路。在填寫完手機號碼之后，一般都會有個檢驗的功能，首先會檢驗輸入的是不是11位數字，接著才會檢驗是否已經注冊。如果已經注冊了，一般至少都會彈出一個toast“該手機號碼已注冊”。流程如下：
△ 注冊流程（增加toast提示）
如果按照這個流程走，就出現了我所說的斷頭路。在注冊/登錄流程，用戶的目的很明確，就是要注冊或者登錄以使用應用，如果沒能達成這兩個目的就中斷，用戶的任務就無法完成，用戶當然會很不爽。所以，如果只是彈出一個toast“該手機號碼已注冊”，這無疑就中斷了用戶的流程。
那么要怎么進行改進呢？最簡單的就是把提示文案修改一下“該手機號碼已注冊，請直接登錄”，通過文案的引導，可以讓用戶知道后續要做什么。不要小看加上去的這幾個字，因為我們無法揣摩用戶的狀態，所以我們不能保證用戶時時刻刻都很清楚他在干嘛，他接下來要干嘛。針對這種情況，交互設計有一個“可學習性”的原則，簡單地說就是，我們要一步步告訴用戶，他應該怎么做。其中，文案的作用至關重要。
當然，現在這還不是最好的方式。最好的方式是什么呢？我們來捋一捋現在的場景。現在是用戶的注冊流程被打斷了，為什么會被打斷呢？因為用戶已經注冊過了。為什么用戶會現在還注冊一遍呢？因為他想進入應用使用。所以呢，既然我們知道用戶走到了斷頭路，我們也知道用戶想去哪？那么最好的方式就是告訴用戶：“嘿，這條路走不通了，但是這里有捷徑喲”。具體實施起來就是用一個彈窗進行引導，如下圖：
△ 彈窗提示直接登錄
然后做的再細致一點，因為用戶已經填寫了手機號碼，登錄的時候就不需要用戶再填寫一遍了。還有，不要忘了登錄頁面的“忘記密碼”選項。
回頭再來看看設計中的斷頭路，還有哪些情況。比如說搜索不到內容，這時候就相當于一個斷頭路。假如這時候提供一些推薦的相關的關鍵詞，就相當于打通了斷頭路。比如說，下載資源沒速度，這也相當于斷頭路。舊版迅雷會推薦相似的資源，這就像打通了斷頭路。再比如說，chrome瀏覽器連接不到網絡，斷頭路又出現了。chrome會推薦一個小游戲給用戶玩，這也相當于打通了斷頭路。
如果說打通斷頭路更多是站在用戶的角度去進行設計，那么設置延長線除了是為用戶考慮之外，還有一部分是為了產品本身考慮的。具體做法就是，當原來的任務已經完成的時候，但這時候又推薦一些任務給你做，流程變得比原來更長了，這個新加入的劉晨就是我所說放入”延長線”。乍一看，這好像違背了交互設計的簡潔性，無端端把流程變長了，就不需要考慮流程的用戶流失率嗎？當然不是，關于這一點，還讓我細細說來。
之前在手機管家實習的時候，正巧是手機管家從5.x到6.x的升級改版項目。這里稍微解釋一下，手機管家是一款工具型應用。你可以把手機管家當成瑞士軍刀，是一堆工具的合集。在5.x的版本遇到有個問題就是，部分功能的滲透率非常低（注：滲透率就是一個功能的使用率）。通過調研分析，得出兩個方法，其中一個就是整合功能，把原先20多項的功能整合到10多項，減少選項的確有助于讓用戶做出選擇。第二種就是這里講的“設置延長線”的方法。具體的做法就是通過高滲透率的功能去帶動低滲透率的功能。比如說，在某個操作完成之后，除了結果反饋以及完成按鈕之外，可以推薦用戶做另外一些操作。通過這種流程的優化去帶動其他的功能，從而提高整體功能的滲透率。如下圖：
△ 完成頁的推薦任務
你可能會說，那這樣不會有問題么？流程不會變得很長很長么？結果反饋頁不會變得很復雜么？
關于結果反饋頁的問題。沒錯，頁面會變復雜，但是頁面簡單并不是我們的目的。我們的目的是通過頁面去引導用戶，所以可以通過頁面內容的大小對比、顏色對比來解決頁面復雜的問題。同時，交互設計是一個平衡用戶需求和商業需求的職位，所以，有時候為了商業需求也需要犧牲一點用戶體驗。
第二個是流程變長的問題。這個問題是這樣子的，用戶可以選擇像之前那樣直接完成任務即可，所以我們只是增加了選擇成本而已。其次，如果我們推薦的功能剛好是用戶需要的，那么用戶當然會很樂意繼續操作下去。最后，不是每一項操作完成之后都會緊跟著一些推薦功能。當流程過長時，我們可以關閉這個“設置延長線”的功能，只留下結果反饋元素和“完成”按鈕。
小結一下，設置延長線相當于把應用不同模塊之間做一個串聯，一是可以提高功能模塊的滲透率，二是如果串聯的功能恰好是用戶需要的，那么同時也會提升用戶體驗。只是，怎么樣“恰好”推薦到用戶喜歡的功能，這個需要多方調研以及用數據做支撐才行。
一般來說，正常的流程應該是線性的，這樣的流程最簡單，用戶使用起來也沒什么壓力和成本。但是，這僅僅只是正常的流程。交互設計需要考慮復雜的異常流程，這也就導致了好的流程更像一張網，有無數的岔路，每個岔路還可能有岔路，岔路走著走著可能又回到原點，最終，所有的路徑都會匯集到一個或者多個終點。
這是普通的情況，但是也有特殊的情況。比如說我現在要講的這個“開辟新岔路”，如果說前面兩個方法都還是為用戶著想的話，現在這個方法更多的是為產品運營方著想的。開辟新岔路是說在正常流程的某個節點，分岔出新的流程，最終分岔的這個流程還會回歸到正常的流程。
如下圖，藍色代表普通的流程，但是現在插進去了一些新的節點，就是橙色的點，這些橙色的點構成的流程就是我所說的新岔路。
△ 新岔路
這么說還是很抽象，我還是通過例子來說明吧。購物車是購物應用里面一個非常常見的功能，用戶在使用購物車的時候流程是這樣子的。
△ 購物車使用流程
但是，真的是這樣么？在查看購物車的界面，其實除了購物車的內容，還有其他的內容。如下圖：
購物車頁面其實還有一個推薦商品的部分，如果用戶恰好在這里發現自己需要的商品，就很有可能會跳轉出去瀏覽，然后再回來購物車進行結賬。流程如下：
△ 京東購物流程
這一個跳出去的動作就是我所說的岔路。在電商這個場景下，岔路的意思就是要讓你多“逛”一下，萬一你再看重別的東西，電商不就多賺一點么？同理，岔路還適用于其他適合“逛”的產品，比如說資訊閱讀類產品等等。對于其他產品，這種方法就要慎重了。因為有可能岔著岔著用戶就不回來了。除此之外，岔路的設置也會使得界面變得更加復雜，用戶有可能會迷失掉。
不過，我們可以從結果推導一下：既然現在電商的購物車普遍都用了這種方法，說明它還是切實有效的。所以，是否選中這種岔路，不僅需要基于自身產品的屬性來考量，更重要的是要從上線之后的數據來觀察。
好了，講到這里，我對于交互設計流程的閉環問題也就講完了。總結一下，閉環實際上是一種“串聯”，把同個功能模塊下的不同流程串聯起來（打通斷頭路），把不同的功能模塊串聯起來（設置延長線），或者是自己把自己串聯起來（開辟新岔路）。這種串聯有為用戶著想的，也有產品方面的考量。但是不管從哪里出發，在設計交互流程對這些閉環進行思考，整個交互流程才會變得更加強大和完整。
藍藍設計( m.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。