用體驗設(shè)計思維做官網(wǎng):B端產(chǎn)品官網(wǎng)設(shè)計實踐

19 評論 50428 瀏覽 552 收藏 22 分鐘

設(shè)計官網(wǎng),簡單來說就是講故事,讓目標用戶通過這個故事了解產(chǎn)品,對產(chǎn)品產(chǎn)生興趣并最終轉(zhuǎn)化為實際用戶。

作為交互設(shè)計師+半個產(chǎn)品經(jīng)理,筆者經(jīng)歷了數(shù)個網(wǎng)易B端產(chǎn)品從無到有的搭建過程,巧合在于都負責過這些產(chǎn)品的官網(wǎng)設(shè)計。官網(wǎng)設(shè)計能同時考驗交互設(shè)計師的產(chǎn)品思維和信息設(shè)計能力。雖然官網(wǎng)頁面量不多界面交互也不復(fù)雜,但想做好并讓用戶在訪問官網(wǎng)后能完成注冊轉(zhuǎn)化甚至購買,在內(nèi)容和傳達這兩方面有很多值得思考和下苦功的點。

設(shè)計官網(wǎng),簡單來說就是講故事,讓目標用戶通過這個故事了解產(chǎn)品,對產(chǎn)品產(chǎn)生興趣并最終轉(zhuǎn)化為實際用戶。要講好這個故事,其實可以參照行文的思路:言之有物,言之有序,言之有情。

1. 言之有物

君子以言有物,而行有恒。- 《周易·家人》

言之有物,指文章或講話的內(nèi)容具體而充實 ,即官網(wǎng)的內(nèi)容設(shè)計。內(nèi)容是官網(wǎng)的最核心支柱,在內(nèi)容基礎(chǔ)上才能衍生出各種各樣的交互表現(xiàn)形式。官網(wǎng)的內(nèi)容不僅僅要充實具體,還要對用戶有價值,進而能為產(chǎn)品帶來轉(zhuǎn)化。

接下來將詳細論述該如何從無到有確定官網(wǎng)內(nèi)容。

1.1 產(chǎn)品本身的介紹

一般來說最先想到的內(nèi)容是:我們的產(chǎn)品是什么?想回答好這個問題,就要求設(shè)計師對自己的產(chǎn)品非常了解。

“產(chǎn)品提供什么服務(wù),解決什么問題?!?/strong>也即產(chǎn)品的核心價值,圍繞這個中心可以衍生出許多內(nèi)容。比如:

  • 用戶痛點和行業(yè)痛點
  • 用戶使用產(chǎn)品的場景
  • 產(chǎn)品本身的核心功能特性介紹
  • 產(chǎn)品對相關(guān)行業(yè)提供的解決方案
  • 產(chǎn)品價格
  • 產(chǎn)品提供的服務(wù)支持

以下是從網(wǎng)易云信官網(wǎng)中截取的關(guān)于產(chǎn)品本身的內(nèi)容,例如云信提供的功能點,解決方案架構(gòu),技術(shù)支持服務(wù)。

通常多與產(chǎn)品經(jīng)理溝通就能夠很好地輸出以上這些產(chǎn)品相關(guān)的介紹內(nèi)容了。但往往這些內(nèi)容只是達到了及格線,還需我們交互設(shè)計師發(fā)揮體驗設(shè)計思維的優(yōu)勢,繼續(xù)完善和把控內(nèi)容。

1.2 用體驗設(shè)計思路繼續(xù)完善內(nèi)容

官網(wǎng)實際上是用戶與產(chǎn)品的一個接觸點,我們需要把官網(wǎng)內(nèi)容放到一個完整的體驗流程里來看。以下是一個非常粗略的用戶體驗路徑。用戶一定是在某些前置條件之后,開始訪問官網(wǎng)。

了解了官網(wǎng)的內(nèi)容之后,接下來會有進一步的流程或者要達到的目的地。其實就是我們在平時工作中會思考的:一群怎樣的用戶在什么樣的場景下訪問官網(wǎng),并最終要達到什么目標。

場景分析:用戶是帶著怎樣的前提來到官網(wǎng)?

這個前提就是運營推廣和銷售策略。以下是需要了解清楚的一些相關(guān)要點:

  • SEO,搜索詞匯和廣告投放
  • 售前是如何介紹產(chǎn)品的?
  • 市場推廣的側(cè)重點是什么?
  • 來自怎樣的渠道?是否來自運營活動?
  • 用戶是否已有相關(guān)競品的體驗?

以云信為例,云信前期的用戶拉新工作主要分為兩塊,一塊是網(wǎng)站SEO的優(yōu)化和搜索詞匯互聯(lián)網(wǎng)廣告的投放。用戶會通過搜索關(guān)鍵詞或者廣告進入官網(wǎng)。我們的網(wǎng)站就應(yīng)當與搜索詞或廣告內(nèi)容相匹配。還有一塊是線下推廣,比如參加相關(guān)技術(shù)的線下論壇,發(fā)放優(yōu)惠,吸引用戶進入網(wǎng)站。這時候我們的網(wǎng)站就要有明顯的優(yōu)惠的兌現(xiàn)方式。

所以搭建官網(wǎng)時,要密切與運營市場的同事配合。由此產(chǎn)出了一些新的內(nèi)容,包括但不止于:

  • 產(chǎn)品品牌背書
  • 運營推廣內(nèi)容落地
  • 營銷承諾兌現(xiàn)
  • 內(nèi)容的統(tǒng)一話術(shù)

用戶分析:他們是誰?他們關(guān)注什么?

B端產(chǎn)品相較于C端產(chǎn)品有一個比較特殊的點,即用戶角色會有明顯的劃分,分為決策者和使用者。使用者不用說,是真正使用產(chǎn)品的人。而決策者卻能夠決定一個企業(yè)是否采購我們的產(chǎn)品。

很明顯,B端產(chǎn)品的官網(wǎng)主要目標用戶是決策者。那這些決策者有哪些不同呢?主要是對產(chǎn)品的關(guān)注點不一樣。使用者可能更關(guān)注易用性,而決策者卻需要站在更高的角度來評估產(chǎn)品,比如是否能提高企業(yè)整體工作效率,性價比,后續(xù)的服務(wù)支持等等。所以我們的官網(wǎng)需要針對這群人的關(guān)注點提供相應(yīng)的內(nèi)容。

以筆者正在參與的一個針對傳統(tǒng)行業(yè)的孵化產(chǎn)品為例。官網(wǎng)面對的主要決策者是行業(yè)中的企業(yè)高層管理人員。他們需要站在企業(yè)角度考慮產(chǎn)品能帶來多少價值(簡單來說就是效率和利潤)。而且所處的傳統(tǒng)行業(yè)對新鮮事物接受度不高,所以他們會尤其在意互聯(lián)網(wǎng)中企業(yè)資料的安全性。

因此,在這個孵化產(chǎn)品的官網(wǎng)中就專門加入了針對資料安全性所做的介紹。

所以在官網(wǎng)上針對目標用戶的關(guān)注點要有相應(yīng)的內(nèi)容承載。例如:

  • 企業(yè)既得利益
  • 投入產(chǎn)出比
  • 產(chǎn)品的后續(xù)服務(wù)支持
  • 相關(guān)敏感信息呈現(xiàn)

目標分析:拆分用戶目標和產(chǎn)品目標。?

用戶在前面所提到的場景下來到網(wǎng)站,肯定是有他們要達成的目的。比如通過搜索關(guān)鍵詞來到網(wǎng)站,會需要強相關(guān)的產(chǎn)品內(nèi)容和更詳細的資料,而通過運營銷售渠道進入,則可能更需要活動承諾的兌現(xiàn)。

而產(chǎn)品目標很直接,就是希望能夠提高轉(zhuǎn)化。可以通過注冊引導(dǎo),預(yù)留銷售線索,產(chǎn)品試用等等內(nèi)容來達成。

所以官網(wǎng)上還需要一些用來達成用戶目標和產(chǎn)品目標的內(nèi)容。比如:

  • 相關(guān)資料下載
  • 產(chǎn)品試用下載
  • 客服咨詢
  • 潛在客戶線索獲取
  • 注冊轉(zhuǎn)化

1.3 內(nèi)容匯總

在上文中,我們已經(jīng)輸出了產(chǎn)品本身價值的介紹內(nèi)容,同時,在分析用戶體驗路徑過程中又梳理出的一些需要額外補充的內(nèi)容。官網(wǎng)整體包含的內(nèi)容可以匯總?cè)缦拢?/p>

那么就這樣簡單地將全部的內(nèi)容堆砌在官網(wǎng)上就可以了嗎?

當然是不行的。

產(chǎn)品故事的內(nèi)容有了,接下來是考驗交互設(shè)計師如何讓用戶能聽懂這個產(chǎn)品的故事。

2. 言之有序

言有序,悔亡。- 《周易·艮》

言之有序,說話和寫文章很有條理易于理解,也就是傳達設(shè)計:如何把內(nèi)容有效的傳達出去,如何讓用戶更容易接收內(nèi)容和理解消化內(nèi)容。

筆者認為可以從三個方面著手。內(nèi)容重組,內(nèi)容展現(xiàn),文案傳達。

2.1 內(nèi)容重組

人們接受新的事物和信息,都會按照由淺入深、由概括到具體的順序來。官網(wǎng)中的內(nèi)容也可以按照這樣的順序呈現(xiàn)給用戶:形成印象,大致了解,選擇性深入,轉(zhuǎn)化行為。以下可以說是一種“套路”來按序展示官網(wǎng)的內(nèi)容。將上述已有的零散的官網(wǎng)內(nèi)容按照用戶的認知順序,進行逐一分配,就可以規(guī)劃出內(nèi)容大致的展現(xiàn)順序了。

但是值得注意的是,“套路”不一定適合所有產(chǎn)品。為什么這么說呢?以筆者做過的兩個B端項目舉例,一個是網(wǎng)易云信,一個是網(wǎng)易孵化產(chǎn)品。以下是兩個官網(wǎng)的對比。

我們會發(fā)現(xiàn),這個右側(cè)的這個孵化產(chǎn)品的官網(wǎng)比云信官網(wǎng)多增加了一個行業(yè)案例,且將這個模塊放置在了很前面的位置。

這種差異性,是產(chǎn)品本身的特性和不同目標用戶的特點導(dǎo)致的。

云信這款產(chǎn)品是B端的技術(shù)導(dǎo)向型PaaS(平臺即服務(wù)的商業(yè)模式)產(chǎn)品,所處互聯(lián)網(wǎng)行業(yè)相對成熟開放。且他們的用戶是,中小型研發(fā)團隊對自身痛點和需求非常明確,看重功能和技術(shù)細節(jié)。所以在官網(wǎng)重要位置放置功能是毋庸置疑的。

而另一款孵化產(chǎn)品,是B端的泛工具產(chǎn)品,所處行業(yè)較為傳統(tǒng)封閉,用戶傳統(tǒng)PC軟件使用者用戶較難意識到自身的痛點,對解決方案的理解也比較模糊。所以需要淺顯易懂的行業(yè)領(lǐng)先案例作為號召和說明,更能讓這群用戶容易地認知產(chǎn)品。

以上舉例是想說明,我們在做具體的內(nèi)容的組織上還需要考慮到以下兩點:產(chǎn)品特性和用戶特征。

2.2 內(nèi)容展現(xiàn)

內(nèi)容展現(xiàn)形式大家都比較熟悉,主要是這四種:文字、圖片、視頻、直接功能試用。在官網(wǎng)上要多種形式配合來傳達內(nèi)容,有些內(nèi)容適合用文字圖片進行描述即可,而有些內(nèi)容過于復(fù)雜,可能就需要通過視頻來介紹。比較討巧的一些網(wǎng)站還會提供具體功能的直接試用,讓用戶第一時間接觸到產(chǎn)品。

至于要選擇什么樣的形式來展現(xiàn)內(nèi)容,筆者認為可以從四個緯度來考慮,比如認知效率上,對于復(fù)雜的業(yè)務(wù)流程想要傳達給用戶,可能就需要視頻,但考慮到傳播和推廣成本,視頻又不一定能夠比圖文更好。需要根據(jù)具體情況具體考慮。

以下是幾個比較典型的官網(wǎng)上的產(chǎn)品介紹形式可供參考,不多贅述。

2.3 文案傳達

將這些內(nèi)容寫成可讀的文案需要始終記得,需要站在用戶的角度描述,要使用用戶能懂的詞匯,而非功能術(shù)語的簡單堆砌。以市面上各大網(wǎng)盤的PC同步盤這個概念為例,當你需要向你的用戶介紹這款軟件時,你該怎么描述呢?特別是當目標用戶是一個在傳統(tǒng)行業(yè)執(zhí)業(yè)多年又不太能接受新鮮事物的人。我們可能需要對這個詞做拆分,直至用戶能夠在他的認知范圍內(nèi)明白。

文案讓用戶能懂,能讓你的內(nèi)容傳達效率達到60%。但是如何做到出彩,讓用戶更容易理解和記憶,可能需要另外一個技巧:跨界,也就是使用貼近用戶實際場景的話術(shù)。

具體思路是,首先抽取當前產(chǎn)品的優(yōu)勢,這些優(yōu)勢可以用一個用戶最能理解的現(xiàn)有的詞來類比,接著將這個詞與現(xiàn)有產(chǎn)品結(jié)合形成新的文案。最終的這個文案,是用戶能夠理解的同時又能反映出產(chǎn)品優(yōu)勢的。

其實到這里,官網(wǎng)的內(nèi)容已經(jīng)搭建了80,90%。我們的故事已經(jīng)飽滿充實又易懂,但還需要最后的一點點情緒的催化劑,讓我們的聽眾也就是用戶能更好地認同和記住這個故事(達成轉(zhuǎn)化)。

3. 言之有情

誘之以利,動之以情,曉之以理。- 《論語》

言之有情,指用感情來?打動別人的心,其實就是情感化設(shè)計:如何打動用戶,讓他產(chǎn)生難忘的印象并且促進轉(zhuǎn)化。筆者認為這是一個貫穿始終的過程。在做上述內(nèi)容設(shè)計和傳達設(shè)計時,都應(yīng)該結(jié)合情感來考慮。

3.1 情感體驗的過程

以下是我們設(shè)想或者說期望的用戶在官網(wǎng)上的情感體驗過程。首先會對產(chǎn)品形成一個好的印象,這個印象包括產(chǎn)品氣質(zhì)和視覺感受。接著讓用戶帶著這個印象去接收內(nèi)容,為了讓他能夠讀下去,需要讓他產(chǎn)生興趣,就是喚起他的興奮點。接下來在內(nèi)容中讓他感受到共鳴這一類的感受。最后推他一把,讓他信任我們,從而轉(zhuǎn)化。

3.2 官網(wǎng)整體印象的塑造

官網(wǎng)需要成為為用戶與產(chǎn)品之間情感化的紐帶。第一印象是非常重要的,我們要向用戶傳達產(chǎn)品的品牌價值觀強調(diào)。

舉個例子,釘釘和teambition。

這兩家都是做工作協(xié)同工具的。但是兩者的氣質(zhì)非常不同。釘釘現(xiàn)在面對的是用戶市場是中小型創(chuàng)業(yè)團隊,他們與傳統(tǒng)行業(yè)很不一樣,充滿年輕和活力,所以釘釘?shù)膕logan是酷公司用釘釘。并且配套短視頻也是表現(xiàn)獨特的工作種類等等。

而teambition,則認為他們在幫用戶尋找理想的工作方式,輕松簡單明快,這是他們整個官網(wǎng)的調(diào)性,包括品牌宣傳視頻也是如此。

可以看到這兩個產(chǎn)品,從一開始的產(chǎn)品印象,就可以打中他們目標用戶的心。

3.3 喚起興趣

有了這樣的印象之后,要接著引導(dǎo)用戶往下看。喚起他們的興趣。可以參考男默女淚的標題黨。

  • 李彥宏給年輕人的20句忠告
  • 喬布斯認為年輕人最重要的品質(zhì)是……
  • 慘不忍睹!快告訴你身邊的人要小心……
  • 20條經(jīng)驗總結(jié)5000年文化精華,不看后悔!

雖然這些標題黨名不符實,但是要給我們一些思路。他們可能用權(quán)威代表來吸引用戶,可能用夸張的負面消息吸引眼球,還會用看起來真實的數(shù)據(jù)來充當標題。確實很有效果。點擊率很高的這些標題其實都是在嘗試尋找用戶的的興奮點。

在孵化項目中,我們也用用行業(yè)領(lǐng)軍的企業(yè)合作案例來吸引目標用戶。不僅吸引眼球也能達到一定的口碑傳播效應(yīng)。

3.4 產(chǎn)生共鳴

引起了用戶的興趣之后呢,就要開始讓用戶產(chǎn)生共鳴并認可我們。簡單的方法是通過踩中他們的痛點并且描述詳盡的痛點細節(jié),當用戶感同深受的時候,再告知他我們能解決,用戶就能較為容易地認可我們的解決方案,且難忘。用戶會記住這個場景這個細節(jié),同時也就記住了我們。

在釘釘官網(wǎng)的盒馬生鮮案例中,使用了這樣一個細節(jié):員工經(jīng)常要處理海鮮,手被水泡過后,指紋很難辨認,導(dǎo)致上下班打卡困難。使用釘釘?shù)膚ifi打卡功能就解決了這個問題。如果直接向用戶介紹這個打卡功能,用戶可能一聽而過。但通過這個細節(jié)場景,用戶感同身受,將會記憶很久。

3.5 信任

最后一點是信任。如何獲取用戶的信任,不僅僅是保證內(nèi)容的真實性,更要讓用戶感受到。所以在很多官網(wǎng)中可見視頻這種形式,拍攝真實的案例,真實的現(xiàn)場,真實的用戶來講述他們使用產(chǎn)品的過程。會大大增加用戶對我們的信任感。同時會進行相關(guān)的背書,比如權(quán)威機構(gòu)的認證,行業(yè)領(lǐng)先企業(yè)的合作等等。

可以發(fā)現(xiàn),情感化的設(shè)計其實會涉及官網(wǎng)內(nèi)容設(shè)計和具體的傳達設(shè)計。

4. 總結(jié)

到這里,用戶已經(jīng)完成了整個官網(wǎng)的體驗,經(jīng)歷了從期待到信任的過程后,用戶轉(zhuǎn)化已經(jīng)不會有問題了。我們的官網(wǎng)設(shè)計也就完成了。

簡單總結(jié)一下搭建一個產(chǎn)品官網(wǎng)的整個設(shè)計思考過程,是分為以下三個方面:內(nèi)容設(shè)計、傳達設(shè)計、情感化設(shè)計。

經(jīng)過上文的分析過程,可以發(fā)現(xiàn)其實官網(wǎng)設(shè)計思考是比較復(fù)雜的。但萬變不離其宗,我們使用的設(shè)計思路是共通的。實際上就是分析用戶場景目標,以合適的展現(xiàn)形式,結(jié)合情感化,讓用戶理解和認同。

 

作者:?胡熠楓,網(wǎng)易UEDC交互設(shè)計師。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC,作者@胡熠楓

題圖來自 unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 非常專業(yè),學(xué)習了

    來自浙江 回復(fù)
  2. 非常感謝 我是新手 突然交給我一個寫功能文檔的工作

    回復(fù)
  3. 點贊

    來自浙江 回復(fù)
  4. 正在設(shè)計公司的官網(wǎng),滿滿的啟發(fā)

    來自上海 回復(fù)
  5. 最近正在搞官網(wǎng),想文案想到頭都要炸了 ?

    來自浙江 回復(fù)
  6. 謝謝您

    來自重慶 回復(fù)
  7. ?? 干貨滿滿,收藏個

    來自廣東 回復(fù)
  8. 寫的很好!學(xué)習了!

    來自江蘇 回復(fù)
  9. 寫的很好

    回復(fù)
  10. 寫的真好 ??

    來自北京 回復(fù)
  11. ?? 分析的很透徹

    來自廣東 回復(fù)
  12. 謝謝作者!
    正準備更新公司官網(wǎng)設(shè)計,從文中獲取了很多靈感!

    來自廣東 回復(fù)
  13. 系統(tǒng),干貨,讓人耳目一新,謝謝作者的親情奉獻。

    回復(fù)
  14. 能把產(chǎn)品做到這么細,點贊。不過,這是事前就有這么細致的思路,還是事后的總結(jié)?

    來自香港 回復(fù)
  15. 干貨滿滿,細讀中。

    來自浙江 回復(fù)
  16. 看的我熱血沸騰

    回復(fù)
  17. 學(xué)習了! 跟我司領(lǐng)導(dǎo)的:骨架,邏輯,情感,表達體系不謀而合。

    來自湖北 回復(fù)
  18. 作為產(chǎn)品經(jīng)理設(shè)計產(chǎn)品的時候,是應(yīng)該多多考慮交互這個方面,功能并不是僅僅體現(xiàn)在使用,也體現(xiàn)在感官的一個邏輯吧

    來自廣東 回復(fù)
  19. 很專業(yè),厲害,還在細品中ing ??

    來自山東 回復(fù)