首先介紹一下本文的背景。本文內(nèi)容翻譯自高級產(chǎn)品設(shè)計(jì)師 Brendan Fagan，現(xiàn)工作于倫敦送餐平臺(tái)Deliveroo。而這篇文章主要講述的是原作者就職于客戶關(guān)系管理平臺(tái)Intercom時(shí)的一個(gè)關(guān)于Intercom的功能優(yōu)化過程。

Intercom是一家提供客戶關(guān)系維護(hù)和營銷自動(dòng)化SaaS服務(wù)的公司，其產(chǎn)品總監(jiān)是曾就職于Facebook和Google的Paul Adams。 本文所要講述的是關(guān)于Intercom的一個(gè)用來和客戶進(jìn)行即時(shí)通訊的功能的改進(jìn)過程（你可以理解為阿里旺旺或者微信之類的產(chǎn)品）。

我們在去年發(fā)布的全新即時(shí)通訊工具（messenger) 的版本中添加了一個(gè)小功能，這個(gè)小功能可以讓客戶（譯者認(rèn)為這里可以理解為商家）創(chuàng)建很豐富的個(gè)人檔案。這樣一來這些客戶所對應(yīng)的用戶（可以理解買家） 就可以知道和他們溝通的是一個(gè)實(shí)實(shí)在在存在的人，并且也可以更加了解這些為他們服務(wù)的人。

結(jié)果呢，壓根沒幾個(gè)人用這個(gè)小功能好嗎？在發(fā)布后不久，僅有13%~15%的客戶填寫全了他們的個(gè)人資料，大部分的人只填寫了一些，另外還有很多人碰都沒碰。

通過與研究分析團(tuán)隊(duì)的溝通，我們得出了如下兩個(gè)主要原因來解釋為何這個(gè)功能的使用率如此之低：

• 1. 可見性，在應(yīng)用中完善個(gè)人資料的入口被隱藏在了可見性相當(dāng)?shù)偷牡胤健?/li>

• 2. 用戶習(xí)慣，人們沒有意識(shí)到在與顧客建立良好關(guān)系的過程中個(gè)人資料所能起到的重要作用。

一、解決方案

因?yàn)閭€(gè)人資料在 Intercom產(chǎn)品中的許多地方都會(huì)用到，所以我們需要讓更多的團(tuán)隊(duì)加入到這個(gè)功能改進(jìn)的過程中來。用戶增長團(tuán)隊(duì)需要把編輯個(gè)人資料這個(gè)動(dòng)作添加到入站流程中去，同時(shí)，產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)需要讓個(gè)人資料編輯的可見性更高。

不過，我們也可以通過利用移動(dòng)端應(yīng)用來大大提高這個(gè)小功能的參與度。據(jù)調(diào)查，大約45%的合作伙伴會(huì)通過Android或者iOS應(yīng)用來和他們的客戶進(jìn)行交談（利用我們的嵌入式通訊工具）。

二、開始優(yōu)化

對于每一個(gè)新項(xiàng)目，Intercom的設(shè)計(jì)師都會(huì)創(chuàng)建一份簡單的高級目標(biāo)列表，這份目標(biāo)列表主要指示著需要設(shè)計(jì)師們嘗試攻克的難題。這樣可以幫助設(shè)計(jì)師們有針對性的去思考解決方案。我們的目標(biāo)列表長這樣：

• 讓沒有完成或只完成了部分個(gè)人資料的用戶，盡量多的去使用這個(gè)功能，提高功能采用率。
• 幫助用戶意識(shí)到個(gè)人資料的重要性。
• 讓用戶隨時(shí)都可以很方便的編輯他們的個(gè)人資料。

1. 系統(tǒng)性思考

開始優(yōu)化工作時(shí)，我們將個(gè)人資料的各項(xiàng)信息分開，這樣可以幫助團(tuán)隊(duì)更好的理解整個(gè)架構(gòu)并且決定哪個(gè)部分需要更高的優(yōu)先級。所以我們將信息組成部分、狀態(tài)和一些規(guī)則繪制成了一個(gè)清單，下面就是一個(gè)掛在我們工作室墻上的一個(gè)例子。

2. 解決方案來自何處

這些系統(tǒng)文檔可以幫助整個(gè)團(tuán)隊(duì)在早期對一些有技術(shù)限制的問題進(jìn)行更好的討論，因?yàn)榧幢阍谠缙冢_發(fā)團(tuán)隊(duì)也許會(huì)提出一些設(shè)計(jì)團(tuán)隊(duì)所想不到的問題。比如，有一些人提到，我們可以直接提取已有的數(shù)據(jù)用來填寫個(gè)人資料中的相關(guān)信息。當(dāng)用戶登錄應(yīng)用時(shí)，我們已經(jīng)獲取到了用戶的名字，那么就可以直接將其搬到個(gè)人資料中進(jìn)行顯示而不用用戶浪費(fèi)時(shí)間手動(dòng)去輸入了。

在草擬了幾個(gè)方向后，我們見了產(chǎn)品設(shè)計(jì)總監(jiān)Emmet，希望得到一些建議以及之后的具體措施。如下便是我們提出的4個(gè)選項(xiàng)：

這里面的重點(diǎn)是打斷了創(chuàng)建賬號的過程，并在其中加入了引導(dǎo)為了讓用戶通過引導(dǎo)來完善個(gè)人資料。我們并不希望這個(gè)引導(dǎo)被輕易取消，因?yàn)槲覀冃枰胤絹砀嬷脩敉晟苽€(gè)人資料的重要性以及個(gè)人資料包含的內(nèi)容。同時(shí)，我們也很清楚這個(gè)打斷動(dòng)作意味著會(huì)帶來更多的厭惡（用戶通常會(huì)跳過），所以我們要讓引導(dǎo)的步驟盡可能的少。最后，我們決定使用簡單的功能引導(dǎo)方式（第一種選項(xiàng)），以下就是我們在會(huì)議中的決定。

1. 我們應(yīng)該集中注意力在功能引導(dǎo)上（簡單引導(dǎo)），它可以幫助我們解決功能使用率偏低的問題（第一種選項(xiàng)）。

2. 沒有必要在兩個(gè)地方做創(chuàng)建個(gè)人資料的界面。

3. 當(dāng)前功能可加入到現(xiàn)在的導(dǎo)航欄中，并在以下兩種情況下觸發(fā)對應(yīng)的流程：a.在啟動(dòng)時(shí)更新了應(yīng)用；b.在頂部點(diǎn)按了個(gè)人資料。

4. 抬高跳過操作的難度：我們應(yīng)該鼓勵(lì)用戶為他們自己的客戶提供更多的價(jià)值。

5. 確定一些有趣的因素，讓用戶在一些特定的情況下會(huì)想要查看平臺(tái)。

三、設(shè)計(jì)解決方案

到了這一步，我們已經(jīng)決定了兩件事。在應(yīng)用啟動(dòng)時(shí)加入簡單引導(dǎo)流程用來讓用戶填寫缺失的個(gè)人資料（打斷啟動(dòng)過程并培養(yǎng)用戶習(xí)慣）。我們還有一個(gè)目標(biāo)是為了能夠達(dá)到讓用戶“隨時(shí)都可以編輯資料”的目的。我們決定在現(xiàn)在的導(dǎo)航面板中加入一個(gè)簡單的編輯圖標(biāo)，點(diǎn)擊這個(gè)圖標(biāo)就可以觸發(fā)相關(guān)流程。

注意點(diǎn)：在Intercom我們有一條核心價(jià)值觀，那就是：大膽思考，小心行事。我們已經(jīng)計(jì)劃了一段時(shí)間的導(dǎo)航欄更新，將其從抽屜菜單中移動(dòng)到了標(biāo)簽欄，這樣做帶來了很多好處，但需要一定的開發(fā)時(shí)間，所以需要加快進(jìn)度。

在系統(tǒng)層面上，我們?yōu)橛脩艚⒘巳N狀態(tài)好讓他們明白在流程中所處的位置。從更高層面上來說，我們希望這個(gè)流程所包含的三個(gè)主要步驟（如下）越簡潔越好。

從系統(tǒng)設(shè)計(jì)層面來說流程相當(dāng)簡單，不過是從頭到尾的固定流程，然而當(dāng)考慮到更多用戶的狀態(tài)時(shí)邏輯就會(huì)變得復(fù)雜多了。我們更希望的是用戶直接跳到最重要的部分而不是強(qiáng)制用戶去走完整個(gè)流程。當(dāng)然一些平臺(tái)的特有步驟也是需要考慮到的，比如申請攝像頭權(quán)限之類的，并不是每一個(gè)步驟都需要新的一屏界面。

再一次的，這些圖表被打印出來掛在工作室的墻上。工程師們經(jīng)常在墻上查看流程，有幾次他們發(fā)現(xiàn)了一些極限情況就找了我們一起對流程做了修改。

四、執(zhí)行

現(xiàn)在我們已經(jīng)有了整個(gè)骨架，可以填充里面的各個(gè)部分了。在視覺和交互設(shè)計(jì)同時(shí)進(jìn)行的情況下我們就應(yīng)該做好準(zhǔn)備我們需要對界面做持續(xù)調(diào)整了。我們發(fā)現(xiàn)應(yīng)該盡快的將一些復(fù)雜的交互細(xì)節(jié)和動(dòng)效方案定下來（這也是為什么高保真原型很重要） ，因?yàn)楹罄m(xù)要修改這些就會(huì)困難，不會(huì)像單純的修改視覺方面的屬性、顏色這些要素這門容易了。

我們用Framer JS框架來為早期的交互想法做原型，然后和工程師討論哪些部分可以實(shí)現(xiàn)，我們一共做了12次原型。

從視覺設(shè)計(jì)的角度來說，我們的移動(dòng)端應(yīng)用已經(jīng)遵守了我們的品牌調(diào)性。任何新的設(shè)計(jì)都需要遵守這種品牌設(shè)計(jì)語言和重用各種所需要的模塊。所以我們讓我們一流的品牌設(shè)計(jì)團(tuán)隊(duì)來為引導(dǎo)界面和確認(rèn)界面做了相應(yīng)的插畫設(shè)計(jì)。

內(nèi)容對于功能引導(dǎo)來說至關(guān)重要。我們需要用一種簡單的方式去解釋為什么個(gè)人資料非常重要。我們和我們的內(nèi)容策劃師Elizabeth McGuane 討論了很多，主要是為了能夠創(chuàng)建一個(gè)更加吸引人的內(nèi)容并且能夠真正幫助用戶理解為什么個(gè)人資料很重要。

五、測試和調(diào)整

我們很清楚用戶引導(dǎo)對于整個(gè)流程的打斷會(huì)讓多少人跳過它，即便我們添加了一個(gè)提示用來告訴用戶可以在之后再編輯他們的個(gè)人資料。所以對當(dāng)前完成的部分設(shè)定一個(gè)指標(biāo)是很重要的，同時(shí)，我們也需要有個(gè)準(zhǔn)備就是在β版本期間根據(jù)結(jié)果反饋數(shù)據(jù)去做調(diào)整。

六、構(gòu)建一個(gè)用戶真正在使用的功能

對于我們的第一個(gè)β版本，剛開時(shí)的使用率是很低的，特別是在Android平臺(tái)上，我們在設(shè)計(jì)上做了許多調(diào)整，比如改變了稍后提示的按鈕樣式，去掉了按鈕的突出感，改變了布局并調(diào)整了內(nèi)容，讓內(nèi)容更加的有趣并且減少了引導(dǎo)。

經(jīng)過一周的調(diào)整和使用情況跟蹤，功能使用率迅速攀升。這里要感謝各個(gè)團(tuán)隊(duì)的付出，我們的個(gè)人資料的完成率在一個(gè)月內(nèi)從14%上升到了46%。在這個(gè)上升過程中移動(dòng)端應(yīng)用起到了很大的作用。我們同時(shí)從這次的工作中總結(jié)了一些要點(diǎn)，讓我們可以運(yùn)用到下一次的項(xiàng)目中去：

• 讓團(tuán)隊(duì)中所有的利益相關(guān)人士都清楚問題到底是什么。
• 在對問題做研究和設(shè)置指標(biāo)時(shí)，用高標(biāo)準(zhǔn)去指引你的解決方案。
• 不管你在構(gòu)建什么，一定要大膽思考，然后小心行事。
• 設(shè)計(jì)需要盡早和開發(fā)人員溝通，這樣可以獲取更多的想法并驗(yàn)證一些觀念是否可行。
• 交互設(shè)計(jì)方案必須盡早的給出，因?yàn)樗薷钠饋肀刃薷囊曈X方案方便多了。
• 知道你目標(biāo)的指標(biāo)在哪里，朝著指標(biāo)去做努力并確保留有時(shí)間去做調(diào)整。

跟著一個(gè)邏輯極為清晰的工作流程去執(zhí)行會(huì)大大提升我們能做出一個(gè)用戶真正在使用的功能的成功率。雖然在一開始會(huì)有很多的細(xì)節(jié)，但一旦你建立起了這種習(xí)慣再做第二次時(shí)就會(huì)變得很自然了。

原文：https://www.intercom.com/blog/design-principles-what-to-do-when-nobody-is-using-your-feature/

譯文：學(xué)UI網(wǎng)