用體驗設(shè)計思維做官網(wǎng):B端產(chǎn)品官網(wǎng)設(shè)計實踐
![](http://image.woshipm.com/wp-files/img/104.jpg)
設(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é)議
非常專業(yè),學(xué)習了
非常感謝 我是新手 突然交給我一個寫功能文檔的工作
點贊
正在設(shè)計公司的官網(wǎng),滿滿的啟發(fā)
最近正在搞官網(wǎng),想文案想到頭都要炸了 ?
謝謝您
?? 干貨滿滿,收藏個
寫的很好!學(xué)習了!
寫的很好
寫的真好 ??
?? 分析的很透徹
謝謝作者!
正準備更新公司官網(wǎng)設(shè)計,從文中獲取了很多靈感!
系統(tǒng),干貨,讓人耳目一新,謝謝作者的親情奉獻。
能把產(chǎn)品做到這么細,點贊。不過,這是事前就有這么細致的思路,還是事后的總結(jié)?
干貨滿滿,細讀中。
看的我熱血沸騰
學(xué)習了! 跟我司領(lǐng)導(dǎo)的:骨架,邏輯,情感,表達體系不謀而合。
作為產(chǎn)品經(jīng)理設(shè)計產(chǎn)品的時候,是應(yīng)該多多考慮交互這個方面,功能并不是僅僅體現(xiàn)在使用,也體現(xiàn)在感官的一個邏輯吧
很專業(yè),厲害,還在細品中ing ??