深度解析:關于B端「新人引導」體驗設計

2 評論 13754 瀏覽 79 收藏 10 分鐘

編輯導語:結合引導設計,產品可以讓用戶在初次使用的過程中快速建立對品牌的認知,并上手功能操作,減少這一過程中的用戶流失。而B端產品相對復雜,若想讓用戶快速上手操作B端產品,其引導設計又該遵循哪些設計原則?本篇文章里,作者就B端產品的新手引導設計做了總結,一起來看一下。

本人很早之前曾經做過網絡管理系統的交互設計,各種網絡拓撲結構、配置流程、業務邏輯,搞得真是頭大,最終陷入了業務的汪洋大海。

那么連設計師都頭疼的B端產品,如何去讓用戶快速上手呢?新手引導可以說是不可或缺的設計手段,今天我們就來挖掘一下其中的設計奧秘。

主要內容包括:

  • 新手引導的內容;
  • 柔性引導設計;
  • 引導設計的原則。

一、新手引導的內容

根據內容的顆粒度不同,新手引導可以分為3個層次。

1. 平臺亮點

更多的是用在新用戶首次登錄或者大版本升級的場景中,主要目的是為了展示平臺的核心功能亮點,引導用戶快速建立對產品的品牌認知。一般采用多頁面輪播彈窗的形式,內容上更注重圖文結合,希望通過可視化設計將引導信息傳遞給用戶。

關于B端「新人引導」體驗設計的深度解析

2. 功能曝光

重點功能上線后,為了彰顯功能亮點,也需要通過一定的曝光引導,快速吸引用戶了解使用。

關于B端「新人引導」體驗設計的深度解析

為了更好地演示操作信息,新人引導不再局限于靜態圖片,有時會加入動圖。例如Windows 11中的使用技巧,采用動圖方式更直觀地展示出功能的操作過程,用戶可以不需要查看詳情就可以理解功能操作技巧。

3. 操作指引

為了讓用戶更清晰地了解功能變化,減少用戶自我探索的成本,讓用戶更快地上手操作。最常見的就是采用懸浮提示框就近引導的方式,內容較多時則會分步展開。

操作指引建立在系統界面中,用戶可以更直觀、清晰地了解到功能的頁面位置,操作細節等信息。不過步驟式引導只能展示同一個頁面中功能,無法跨頁面引導。

關于B端「新人引導」體驗設計的深度解析

二、柔性引導

對于復雜B端業務場景,以上常見的引導類型是無法滿足用戶需求的,例如云類產品。因此新人引導需要與業務強綁定,采用更加柔性的方式嵌入在頁面中,建立用戶的專屬學習空間,讓用戶逐步去探索學習相關的業務功能,從而真正地提升產品的用戶體驗。百度云專門增加了新人指引視圖,方便用戶隨時查看。

關于B端「新人引導」體驗設計的深度解析

騰訊云則在業務功能中融入了新手教學。

關于B端「新人引導」體驗設計的深度解析

三、引導設計的原則

新人引導的核心目標是為了展示核心功能或者新功能,降低用戶的認知成本。因此設計上需要簡潔、高效,我們可以總結下交互和視覺層面的原則。

1. 交互層面

1)簡潔

B端產品業務復雜、門檻高,需要真正的幫助用戶,實現業務操作快速上手。但是并不意味著就是簡單的“手把手”的功能教學。太多的引導信息對用戶的耐心是極大的考驗,因此需要將關鍵的核心內容傳遞給用戶即可。

我曾經看過一個產品的新人引導,竟然超過了20步,后來我實在不想繼續點下去了。保守估計會超過30步。過多的引導步驟用戶根本沒耐心看下去,設計的有效性會大打折扣。即使用戶看完了,也很難記住所有的內容,引導的價值很難保證。

2)利益點

利益點通常出現在C端產品中,但是同樣適用于B端產品。

一個功能的發布必須能夠讓用戶感受到對自己的價值,所以新手引導在信息傳遞時,不僅需要告知用戶功能是什么,還要告知通過功能可以獲得什么。例如拼多多新手引導時,為了讓用戶更有意愿綁定第三方店鋪,文案針對性地突出了“大幅度提升店鋪流量”。

關于B端「新人引導」體驗設計的深度解析

3)可控性

新人引導其實是平臺的主動行為,有點類似于頁面彈窗,在一定程度上打斷了用戶的操作流程。因此需要賦予用戶自主控制的權利,隨時中斷引導過程。此外引導信息中還要提示用戶總的引導步數,方便用戶做出決策,并且允許前后自由切換,增加引導的靈活性。

關于B端「新人引導」體驗設計的深度解析

通常新手引導又都是臨時性的,流程結束后就不再出現了。但是對于功能復雜的B端產品,新手引導中的功能并不是立刻能夠用到的。為了有效發揮新手引導的作用,新手引導需要有冗余機制,方便用戶后期再次學習查看。例如巨量引擎中在頁面中會常駐新手引導,便于用戶隨時查看。

關于B端「新人引導」體驗設計的深度解析

而操作系統級別的新手引導,甚至會單獨建立產品應用,例如Windows的使用技巧、iOS的Tips App等。

4)層次性

上文提到新手引導對用戶行為有一定的干擾,用戶為了優先處理自己的工作任務,可能會不查看引導內容直接關閉了引導浮窗。所以為了更好地保證新手引導的有效性,在設計時需要考慮到引導的層次性。

例如在飛書客戶端用戶打開頁面時,并沒有直接強引導,只是在引導內容處增加了動效元素吸引用戶視線。當用戶鼠標移動到熱區后,才會顯示引導內容。這種引導方式,讓用戶從被動接受轉變為主動查看,用戶的閱讀意愿更強,或許可以提高引導的有效性。

關于B端「新人引導」體驗設計的深度解析

2. 視覺層面

B端產品通常是PC端產品,屏幕更大,頁面顯示內容更多。新手引導需要更加注重有效的信息傳遞。

另外有別于C端產品的個性化設計風格,B端產品的新手引導在設計風格上更多的是一致性。

1)優先的視覺層級

大部分新人引導都會優先采用遮罩蒙層形式,讓用戶更好地聚焦引導信息,排除頁面元素對用戶的干擾。即使不采用遮罩的,也會通過強化引導氣泡背景色的形式,將信息從頁面中有效地突出顯示出來。

2)風格一致性

通常情況下,B端產品偏向嚴謹務實的視覺風格,過于個性化的設計反而會影響整體的一致性。

關于B端「新人引導」體驗設計的深度解析

以上就是我對新手引導的思考和總結,歡迎評論區留言討論~

#專欄作家#

子牧先生。公眾號:子牧UXD(HelloDesign),人人都是產品經理專欄作家。產品體驗設計師。8年互聯網行業經驗,擅長體驗設計思維、設計方法論、交互設計研究。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 有些新用戶會因為引導過于繁瑣所以跳過,后面就不知道該如何操作,所以在前面引導時有點小巧思還是挺重要的

    來自廣東 回復
  2. B端產品設計果然很棒,滿滿的引導干貨,沖吖~~~~

    來自河南 回復