專業(yè)干貨!3個方法幫你優(yōu)化交互設(shè)計(jì)流程的“閉環(huán)”問題

2016-9-2    周周

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

交互設(shè)計(jì)師有一項(xiàng)很重要的工作就是定義任務(wù)流程。在接到需求之后,設(shè)計(jì)師需要把抽象的需求設(shè)計(jì)成具象的流程,然后再把流程分配到不同的界面,最終形成成品。設(shè)計(jì)流程不難,但是設(shè)計(jì)好的流程非常難。今天主要是從“閉環(huán)”這個角度來講講流程設(shè)計(jì)中的優(yōu)化問題。

舉個簡單的例子,注冊這個流程可以這么定義:

uisdc-4-201609033

這么一看,確實(shí)很簡單。但是這是一個好的流程嗎?比如填寫手機(jī)號碼的時候發(fā)現(xiàn)手機(jī)號碼已經(jīng)注冊了,這個時候需要怎么辦?比如獲取不到驗(yàn)證碼怎么辦?這些細(xì)化的場景如果沒有考慮到的話,流程就會變得很晦澀難用。怎么去尋找細(xì)分的場景一直是流程設(shè)計(jì)中一個難題,這部分以后會談。所以,今天我主要是從“閉環(huán)”這個角度來講講流程設(shè)計(jì)中的優(yōu)化問題。怎么去構(gòu)造交互設(shè)計(jì)的閉環(huán),我主要從以下幾個維度去講:①打通斷頭路;②設(shè)置延長線;③開辟新岔路。每個流程就好比一條路,所以這里借用交通領(lǐng)域的名詞來說明,理解起來更加形象生動。

1、打通斷頭路

斷頭路,顧名思義就是流程走到某個地方,雖然目標(biāo)還沒達(dá)成,但是路徑已經(jīng)中斷了。如果現(xiàn)實(shí)中遇到斷頭路,司機(jī)肯定是一頓怒罵然后沿路返回,再選擇新的路。在流程中,如果用戶遇到斷頭路,有可能用戶會沿路返回,然后去嘗試新的流程,但是也有可能是用戶會直接流失掉。如果流失掉客戶,那么損失可就大了。所以,在做流程設(shè)計(jì)的時候,首先就要看看有沒有斷頭路,然后要把斷頭路都打通。

回到一開始的例子,我們來看看這個例子中可能出現(xiàn)的斷頭路。在填寫完手機(jī)號碼之后,一般都會有個檢驗(yàn)的功能,首先會檢驗(yàn)輸入的是不是11位數(shù)字,接著才會檢驗(yàn)是否已經(jīng)注冊。如果已經(jīng)注冊了,一般至少都會彈出一個toast“該手機(jī)號碼已注冊”。流程如下:

uisdc-4-201609034

△ 注冊流程(增加toast提示)

如果按照這個流程走,就出現(xiàn)了我所說的斷頭路。在注冊/登錄流程,用戶的目的很明確,就是要注冊或者登錄以使用應(yīng)用,如果沒能達(dá)成這兩個目的就中斷,用戶的任務(wù)就無法完成,用戶當(dāng)然會很不爽。所以,如果只是彈出一個toast“該手機(jī)號碼已注冊”,這無疑就中斷了用戶的流程。

那么要怎么進(jìn)行改進(jìn)呢?最簡單的就是把提示文案修改一下“該手機(jī)號碼已注冊,請直接登錄”,通過文案的引導(dǎo),可以讓用戶知道后續(xù)要做什么。不要小看加上去的這幾個字,因?yàn)槲覀儫o法揣摩用戶的狀態(tài),所以我們不能保證用戶時時刻刻都很清楚他在干嘛,他接下來要干嘛。針對這種情況,交互設(shè)計(jì)有一個“可學(xué)習(xí)性”的原則,簡單地說就是,我們要一步步告訴用戶,他應(yīng)該怎么做。其中,文案的作用至關(guān)重要。

當(dāng)然,現(xiàn)在這還不是最好的方式。最好的方式是什么呢?我們來捋一捋現(xiàn)在的場景?,F(xiàn)在是用戶的注冊流程被打斷了,為什么會被打斷呢?因?yàn)橛脩粢呀?jīng)注冊過了。為什么用戶會現(xiàn)在還注冊一遍呢?因?yàn)樗脒M(jìn)入應(yīng)用使用。所以呢,既然我們知道用戶走到了斷頭路,我們也知道用戶想去哪?那么最好的方式就是告訴用戶:“嘿,這條路走不通了,但是這里有捷徑喲”。具體實(shí)施起來就是用一個彈窗進(jìn)行引導(dǎo),如下圖:

uisdc-4-201609036

△ 彈窗提示直接登錄

然后做的再細(xì)致一點(diǎn),因?yàn)橛脩粢呀?jīng)填寫了手機(jī)號碼,登錄的時候就不需要用戶再填寫一遍了。還有,不要忘了登錄頁面的“忘記密碼”選項(xiàng)。

回頭再來看看設(shè)計(jì)中的斷頭路,還有哪些情況。比如說搜索不到內(nèi)容,這時候就相當(dāng)于一個斷頭路。假如這時候提供一些推薦的相關(guān)的關(guān)鍵詞,就相當(dāng)于打通了斷頭路。比如說,下載資源沒速度,這也相當(dāng)于斷頭路。舊版迅雷會推薦相似的資源,這就像打通了斷頭路。再比如說,chrome瀏覽器連接不到網(wǎng)絡(luò),斷頭路又出現(xiàn)了。chrome會推薦一個小游戲給用戶玩,這也相當(dāng)于打通了斷頭路。

2、設(shè)置延長線

如果說打通斷頭路更多是站在用戶的角度去進(jìn)行設(shè)計(jì),那么設(shè)置延長線除了是為用戶考慮之外,還有一部分是為了產(chǎn)品本身考慮的。具體做法就是,當(dāng)原來的任務(wù)已經(jīng)完成的時候,但這時候又推薦一些任務(wù)給你做,流程變得比原來更長了,這個新加入的劉晨就是我所說放入”延長線”。乍一看,這好像違背了交互設(shè)計(jì)的簡潔性,無端端把流程變長了,就不需要考慮流程的用戶流失率嗎?當(dāng)然不是,關(guān)于這一點(diǎn),還讓我細(xì)細(xì)說來。

之前在手機(jī)管家實(shí)習(xí)的時候,正巧是手機(jī)管家從5.x到6.x的升級改版項(xiàng)目。這里稍微解釋一下,手機(jī)管家是一款工具型應(yīng)用。你可以把手機(jī)管家當(dāng)成瑞士軍刀,是一堆工具的合集。在5.x的版本遇到有個問題就是,部分功能的滲透率非常低(注:滲透率就是一個功能的使用率)。通過調(diào)研分析,得出兩個方法,其中一個就是整合功能,把原先20多項(xiàng)的功能整合到10多項(xiàng),減少選項(xiàng)的確有助于讓用戶做出選擇。第二種就是這里講的“設(shè)置延長線”的方法。具體的做法就是通過高滲透率的功能去帶動低滲透率的功能。比如說,在某個操作完成之后,除了結(jié)果反饋以及完成按鈕之外,可以推薦用戶做另外一些操作。通過這種流程的優(yōu)化去帶動其他的功能,從而提高整體功能的滲透率。如下圖:

uisdc-4-201609035

△ 完成頁的推薦任務(wù)

你可能會說,那這樣不會有問題么?流程不會變得很長很長么?結(jié)果反饋頁不會變得很復(fù)雜么?

關(guān)于結(jié)果反饋頁的問題。沒錯,頁面會變復(fù)雜,但是頁面簡單并不是我們的目的。我們的目的是通過頁面去引導(dǎo)用戶,所以可以通過頁面內(nèi)容的大小對比、顏色對比來解決頁面復(fù)雜的問題。同時,交互設(shè)計(jì)是一個平衡用戶需求和商業(yè)需求的職位,所以,有時候?yàn)榱松虡I(yè)需求也需要犧牲一點(diǎn)用戶體驗(yàn)。

第二個是流程變長的問題。這個問題是這樣子的,用戶可以選擇像之前那樣直接完成任務(wù)即可,所以我們只是增加了選擇成本而已。其次,如果我們推薦的功能剛好是用戶需要的,那么用戶當(dāng)然會很樂意繼續(xù)操作下去。最后,不是每一項(xiàng)操作完成之后都會緊跟著一些推薦功能。當(dāng)流程過長時,我們可以關(guān)閉這個“設(shè)置延長線”的功能,只留下結(jié)果反饋元素和“完成”按鈕。

小結(jié)一下,設(shè)置延長線相當(dāng)于把應(yīng)用不同模塊之間做一個串聯(lián),一是可以提高功能模塊的滲透率,二是如果串聯(lián)的功能恰好是用戶需要的,那么同時也會提升用戶體驗(yàn)。只是,怎么樣“恰好”推薦到用戶喜歡的功能,這個需要多方調(diào)研以及用數(shù)據(jù)做支撐才行。

3、開辟新岔路

一般來說,正常的流程應(yīng)該是線性的,這樣的流程最簡單,用戶使用起來也沒什么壓力和成本。但是,這僅僅只是正常的流程。交互設(shè)計(jì)需要考慮復(fù)雜的異常流程,這也就導(dǎo)致了好的流程更像一張網(wǎng),有無數(shù)的岔路,每個岔路還可能有岔路,岔路走著走著可能又回到原點(diǎn),最終,所有的路徑都會匯集到一個或者多個終點(diǎn)。

這是普通的情況,但是也有特殊的情況。比如說我現(xiàn)在要講的這個“開辟新岔路”,如果說前面兩個方法都還是為用戶著想的話,現(xiàn)在這個方法更多的是為產(chǎn)品運(yùn)營方著想的。開辟新岔路是說在正常流程的某個節(jié)點(diǎn),分岔出新的流程,最終分岔的這個流程還會回歸到正常的流程。

如下圖,藍(lán)色代表普通的流程,但是現(xiàn)在插進(jìn)去了一些新的節(jié)點(diǎn),就是橙色的點(diǎn),這些橙色的點(diǎn)構(gòu)成的流程就是我所說的新岔路。

uisdc-4-201609037

△ 新岔路

這么說還是很抽象,我還是通過例子來說明吧。購物車是購物應(yīng)用里面一個非常常見的功能,用戶在使用購物車的時候流程是這樣子的。

uisdc-4-201609032

△ 購物車使用流程

但是,真的是這樣么?在查看購物車的界面,其實(shí)除了購物車的內(nèi)容,還有其他的內(nèi)容。如下圖:

uisdc-4-201609038

購物車頁面其實(shí)還有一個推薦商品的部分,如果用戶恰好在這里發(fā)現(xiàn)自己需要的商品,就很有可能會跳轉(zhuǎn)出去瀏覽,然后再回來購物車進(jìn)行結(jié)賬。流程如下:

uisdc-4-201609031

△ 京東購物流程

這一個跳出去的動作就是我所說的岔路。在電商這個場景下,岔路的意思就是要讓你多“逛”一下,萬一你再看重別的東西,電商不就多賺一點(diǎn)么?同理,岔路還適用于其他適合“逛”的產(chǎn)品,比如說資訊閱讀類產(chǎn)品等等。對于其他產(chǎn)品,這種方法就要慎重了。因?yàn)橛锌赡懿碇碇脩艟筒换貋砹?。除此之外,岔路的設(shè)置也會使得界面變得更加復(fù)雜,用戶有可能會迷失掉。

不過,我們可以從結(jié)果推導(dǎo)一下:既然現(xiàn)在電商的購物車普遍都用了這種方法,說明它還是切實(shí)有效的。所以,是否選中這種岔路,不僅需要基于自身產(chǎn)品的屬性來考量,更重要的是要從上線之后的數(shù)據(jù)來觀察。

好了,講到這里,我對于交互設(shè)計(jì)流程的閉環(huán)問題也就講完了??偨Y(jié)一下,閉環(huán)實(shí)際上是一種“串聯(lián)”,把同個功能模塊下的不同流程串聯(lián)起來(打通斷頭路),把不同的功能模塊串聯(lián)起來(設(shè)置延長線),或者是自己把自己串聯(lián)起來(開辟新岔路)。這種串聯(lián)有為用戶著想的,也有產(chǎn)品方面的考量。但是不管從哪里出發(fā),在設(shè)計(jì)交互流程對這些閉環(huán)進(jìn)行思考,整個交互流程才會變得更加強(qiáng)大和完整。

藍(lán)藍(lán)設(shè)計(jì)m.820esy.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ù)。

 

 

分享本文至:

日歷

鏈接

個人資料

存檔