進(jìn)擊的設(shè)計(jì)師(1)——如何為B端產(chǎn)品創(chuàng)造價(jià)值
編輯導(dǎo)語(yǔ):在日常做項(xiàng)目中,設(shè)計(jì)師屬于被動(dòng)的角色,接到后臺(tái)的設(shè)計(jì)需求但卻沒(méi)有參與討論,沒(méi)有表達(dá)出自己的想法;設(shè)計(jì)師應(yīng)該如何化被動(dòng)與主動(dòng),為產(chǎn)品創(chuàng)造價(jià)值?本文作者對(duì)此提出了幾個(gè)層面的方法,我們一起來(lái)看一下。
相信很多傳統(tǒng)UI設(shè)計(jì)師在接到后臺(tái)設(shè)計(jì)需求的時(shí)候,內(nèi)心是抗拒的;表單為主的界面讓我們空有一腔視覺(jué)技法無(wú)處發(fā)揮,而后就是懵逼的,prd里寫的到底是什么鬼?每個(gè)字雖然都認(rèn)識(shí),但是為什么連在一起就看不懂?
在傳統(tǒng)設(shè)計(jì)師擅長(zhǎng)的表現(xiàn)、體驗(yàn)層上,業(yè)務(wù)方意識(shí)里并不看重,立項(xiàng)評(píng)審都沒(méi)有邀約設(shè)計(jì)師的習(xí)慣;在設(shè)計(jì)師不熟悉的業(yè)務(wù)邏輯上,錯(cuò)綜復(fù)雜,牽一發(fā)動(dòng)全身——對(duì)此我們簡(jiǎn)直不敢多說(shuō)話。
弱小、可憐、又無(wú)助可以形容B端設(shè)計(jì)師的被動(dòng)局面了;畢竟,如果不看重視覺(jué)、也不看重用戶體驗(yàn),產(chǎn)品和開(kāi)發(fā)兩個(gè)人其實(shí)也可以商量著把活兒干了,方便、快捷還省事兒。
設(shè)計(jì)師如何在B端產(chǎn)品中獲得更多話語(yǔ)權(quán),從而發(fā)揮更大價(jià)值?
下面我會(huì)分別從戰(zhàn)略層、框架層、交互層、視覺(jué)層分享設(shè)計(jì)師在工作中如何通過(guò)打破職能限制,化被動(dòng)為主動(dòng),推行設(shè)計(jì)想法落地,為產(chǎn)品創(chuàng)造出可量化的價(jià)值的過(guò)程。
一、戰(zhàn)略層——明確目標(biāo),以終為始
牢記自己的目標(biāo)/使命,確信日常所作所為并未與之南轅北撤,并且每天都向著這個(gè)目標(biāo)努力。”——《高效能人士的七個(gè)習(xí)慣》
無(wú)論是To B還是To C ,開(kāi)始動(dòng)手設(shè)計(jì)之前,都應(yīng)該去“找到”產(chǎn)品的目標(biāo);因?yàn)槲覀兒蛨F(tuán)隊(duì)成員所有的努力與溝通都是圍繞“目標(biāo)”來(lái)進(jìn)行的,在設(shè)計(jì)之前如果弄不明白產(chǎn)品整體的目標(biāo),只拘泥于自己的專業(yè)領(lǐng)域,為了1像素還是2像素而糾結(jié),無(wú)異于井底之蛙、管中窺豹。
1. B端產(chǎn)品的目標(biāo)是什么?
之前看過(guò)很多有關(guān)B端設(shè)計(jì)的文章,發(fā)現(xiàn)都會(huì)強(qiáng)調(diào)B端設(shè)計(jì)目標(biāo)是“提升效率”,看完我就笑了,難道所有員工都是流水線上記件結(jié)算的工人嗎?把做完一件工作的時(shí)間從5分鐘縮減到4分鐘就都那么重要?這種一言以概之的認(rèn)知未免也太狹隘了!
以自如配置的產(chǎn)品優(yōu)化舉例,整體產(chǎn)品設(shè)計(jì)的主要功能目標(biāo)其實(shí)有三個(gè):品質(zhì)管理、成本控制、效率提升;由于公司“做超越用戶期待產(chǎn)品”的“北極星”目標(biāo)的要求,目前優(yōu)化都是圍繞“監(jiān)管線下工作,提升出房品質(zhì)”來(lái)做的,效率和成本反而成了次要考慮的部分。
如何去發(fā)現(xiàn)到這些目標(biāo)呢?
我們可以從季度總結(jié)、郵件、講話中知道公司的戰(zhàn)略;除此之外,我們還可以通過(guò)深度參與項(xiàng)目,切身的去洞察,從一個(gè)需求的“接收者”轉(zhuǎn)變?yōu)椤皡⑴c者”再轉(zhuǎn)變?yōu)椤爸贫ㄕ摺薄?/p>
所以,深度參與到項(xiàng)目,應(yīng)該關(guān)注并輸出哪些東西?
2. 設(shè)計(jì)師參與用研時(shí)到底在研究什么?
1)通過(guò)和產(chǎn)品經(jīng)理一起梳理業(yè)務(wù)流程、拆分大的業(yè)務(wù)、流程、操作、目標(biāo)、用戶反饋到“原子級(jí)別”
設(shè)計(jì)是解決問(wèn)題的過(guò)程,當(dāng)設(shè)計(jì)師在面對(duì)一團(tuán)亂麻的時(shí)候,首先面對(duì)的其實(shí)是解決什么問(wèn)題的問(wèn)題;而拆分大問(wèn)題到小問(wèn)題,使無(wú)秩序的客觀世界變?yōu)橛兄刃蚩衫斫獾睦硇杂成洌褪怯绕渲匾牡谝徊健?/p>
結(jié)構(gòu)化思維,就是我們解決問(wèn)題的第一把鑰匙,而且是最關(guān)鍵的一把鑰匙;它可以使你有條不紊、忙而不亂地去應(yīng)付任何問(wèn)題,去尋找其他的鑰匙,而不論這個(gè)問(wèn)題你是否有經(jīng)驗(yàn)。——《解決問(wèn)題的鑰匙》
以我所優(yōu)化的自如配置app舉例,這個(gè)項(xiàng)目其實(shí)有個(gè)1.0版本;但是在接手的時(shí)候,大家都沒(méi)有關(guān)于這個(gè)產(chǎn)品的第一手信息,業(yè)務(wù)流程線繁雜,牽扯很多數(shù)據(jù)、部門以及其他業(yè)務(wù)線——在我們面前的是一個(gè)錯(cuò)綜復(fù)雜的大線團(tuán)。
于是我們發(fā)起了一次針對(duì)“家裝一線人員”的用戶調(diào)研。
在這個(gè)過(guò)程中,作為設(shè)計(jì)師的我與產(chǎn)品經(jīng)理、用戶研究員一起了解并拆解了以下5點(diǎn):
- 拆解了業(yè)務(wù)方的工作流程;
- 拆解了業(yè)務(wù)工作流程中的階段性任務(wù);
- 拆解了完成階段任務(wù)需要做的操作點(diǎn);
- 拆解了用戶意見(jiàn)到具體操作點(diǎn);
- 拆解了階段任務(wù)的階段目標(biāo)/評(píng)價(jià)標(biāo)準(zhǔn)。
2)收集使用意見(jiàn)、了解、拆分使用的場(chǎng)景(5WH)
完成前期的梳理工作之后,對(duì)于業(yè)務(wù)框架、以及階段性目標(biāo)就有了大致的了解和明確。
之后我們還通過(guò)”問(wèn)卷定量收集“使用者”優(yōu)化呼聲 ——邀約使用者深度訪談定性了解詳細(xì)情況——線下走訪使用場(chǎng)景“三步調(diào)研法了解以下3個(gè)信息。
- “使用者”的用戶畫像(who);
- “使用者”的使用場(chǎng)景(when\where\what);
- “使用者”不按照設(shè)計(jì)路徑操作后替代方案(how);
通過(guò)分析(why why 分析法),我們得到“使用者”不使用我們?cè)性O(shè)計(jì)的原因,以及這樣會(huì)對(duì)業(yè)務(wù)目標(biāo)造成的后果,為之后的產(chǎn)品優(yōu)化提供設(shè)計(jì)方向與理論依據(jù)。
3)明確B端真正的用戶是誰(shuí)?
為什么我會(huì)把使用app的人稱為“使用者”而不是“主要用戶”呢?
這又可以引出一個(gè)小問(wèn)題:B端產(chǎn)品真正主要的用戶是誰(shuí)?
在B端產(chǎn)品眾多角色對(duì)于產(chǎn)品的眾多意見(jiàn)中,當(dāng)出現(xiàn)矛盾的時(shí)候,應(yīng)該以誰(shuí)的意見(jiàn)為主?
很明顯,在這點(diǎn)上,B端和C端的側(cè)重點(diǎn)是不同的。
以自如配置app為例,整個(gè)產(chǎn)品波及的角色大概有下面幾種,除了“配置專員”之外,其他角色都不會(huì)使用它;但是也會(huì)毫無(wú)疑問(wèn)受到產(chǎn)品的影響,或者影響產(chǎn)品的設(shè)計(jì)。
之上的角色都是用戶,我們需要考慮他們的意見(jiàn),得到他們的支持,但卻并非我們的“主要用戶”。
判斷“主要用戶”的標(biāo)準(zhǔn)也很簡(jiǎn)單,可以從三個(gè)角度去判斷:“需求、規(guī)則、目標(biāo)”。
所以,這個(gè)B端產(chǎn)品的“主要用戶”是“業(yè)務(wù)方”,因?yàn)闃I(yè)務(wù)方對(duì)其他角色用戶提出了需求(高效率、低成本、高品質(zhì)),需要各個(gè)角色遵守規(guī)則(管理手段讓其他角色的愉悅、恐懼),去達(dá)到業(yè)務(wù)目標(biāo)(多快好省盈利)。
如果是C端產(chǎn)品,使用者很大可能也是“主要用戶”,因?yàn)楫a(chǎn)品需要通過(guò)去解決他們的需求(如購(gòu)物、看新聞、社交等);設(shè)計(jì)需要遵守這些使用者的規(guī)則如:用戶習(xí)慣、人性弱點(diǎn)、心理等(如果我們不遵守這些規(guī)律,他們就會(huì)拋棄我們的產(chǎn)品,從而讓我們恐懼、不爽),去達(dá)到目標(biāo)(購(gòu)買成功、看到最新的新聞、點(diǎn)贊評(píng)論);C端通過(guò)產(chǎn)品達(dá)成用戶的目標(biāo)來(lái)達(dá)成業(yè)務(wù)的目標(biāo)。
經(jīng)過(guò)在戰(zhàn)略層的一番探索,我們有如下幾個(gè)收獲:
- 團(tuán)隊(duì)成員一起梳理了業(yè)務(wù)原有流程 ,團(tuán)隊(duì)成員對(duì)產(chǎn)品的認(rèn)知統(tǒng)一了;
- 通過(guò)調(diào)研,了解了“終端使用者”的使用場(chǎng)景,通過(guò)why\why分析法收集和發(fā)現(xiàn)了目前存在的問(wèn)題;
- 在匯報(bào)交流的過(guò)程中明確了業(yè)務(wù)方的目標(biāo),并拆解了目標(biāo)到具體操作點(diǎn);
- 通過(guò)業(yè)務(wù)方當(dāng)前的重點(diǎn)目標(biāo)明確了優(yōu)先要解決的具體問(wèn)題。
二、框架層——建立一條不漏水的水渠
明確了方向,找到優(yōu)化線索之后,就可以開(kāi)始著手于具體的優(yōu)化,在優(yōu)化的思路上,B端和C端也具有明顯的區(qū)別。
在我看來(lái),B端的設(shè)計(jì)方式就像是修建“人工水渠”——是先得把“水渠”修建好,保證方向正確,不漏水,我們?cè)偻锓拧八保ㄊ褂谜撸?/p>
而C端的設(shè)計(jì)方式是對(duì)“水”的引導(dǎo),河流是本來(lái)就有的;所以我們需要了解目標(biāo)”水流“的方向、走勢(shì)、弱點(diǎn)才能引導(dǎo)他們到我們希望的地方去。
所以, 我們首先要建立一個(gè)不漏水的“水渠”。
在具體的產(chǎn)品設(shè)計(jì)上,每個(gè)需要管理的角色在使用中的“開(kāi)始”、“過(guò)程”、“結(jié)束”都設(shè)計(jì)了相應(yīng)的記錄/績(jī)效壓力。
但是需要注意的是,以管理(恐懼驅(qū)動(dòng))為主,但也需要適當(dāng)?shù)挠鋹偧?lì)才能事半功倍——在激勵(lì)方面可以通過(guò)開(kāi)展PK活動(dòng),每日推送工作數(shù)據(jù),設(shè)立目標(biāo)、獎(jiǎng)項(xiàng)、排名等方式激勵(lì)員工積極工作。
三、交互層——? “堵”不如“疏”,一場(chǎng)清除淤泥的運(yùn)動(dòng)
建好了邊界,但是“淤泥”太多,或者“坡度”太高,不符合“水”流動(dòng)的特性,“水”也無(wú)法按照我們希望它流動(dòng)的方向灌滿水渠;所以,我們還需要對(duì)使用者引導(dǎo),減少他們使用的阻力。
沒(méi)有最好的交互方式,只有最適合的。
用配置app舉例,之前整改操作的交互方式采用“線性流程”的方式——這種交互方式的優(yōu)勢(shì)是每個(gè)頁(yè)面的內(nèi)容少,操作清晰;但是缺點(diǎn)也顯而易見(jiàn),就是一個(gè)操作流程跳轉(zhuǎn)頁(yè)面數(shù)過(guò)多。
當(dāng)時(shí)我們的整改標(biāo)準(zhǔn)多達(dá)50多項(xiàng),每一項(xiàng)都需要跳轉(zhuǎn)3次才能到達(dá)具體的整改項(xiàng),會(huì)讓整個(gè)任務(wù)顯得冗長(zhǎng);這也是前期調(diào)研中,我們分析的用戶反應(yīng)說(shuō)操作很繁瑣的一個(gè)原因 。
原來(lái)“線性工作流程”交互方式
B端的設(shè)計(jì)是基于角色的,但是在角色之外,我們不應(yīng)該忽略的是:他們也是實(shí)實(shí)在在的人,并不是機(jī)器;他們擁有著普通用戶的用戶習(xí)慣,如果操作成本過(guò)大,也會(huì)造成用戶想出對(duì)策來(lái)不按照業(yè)務(wù)規(guī)定操作,從而影響最后的目標(biāo)達(dá)成。
經(jīng)過(guò)討論之后,我和產(chǎn)品確定了多面板布局的交互方式;這種頁(yè)面布局最大的好處是單頁(yè)面可以展示更多的信息量,操作效率高,減少了頁(yè)面的硬跳轉(zhuǎn),符合業(yè)務(wù)整改項(xiàng)目多,信息多的情況。
改版后改用“多面板布局”
但是這種布局的缺點(diǎn)也很明顯,即一個(gè)頁(yè)面承載的信息和層級(jí)都較多,識(shí)別和認(rèn)知難度相比較之前會(huì)難一些;所以,當(dāng)時(shí)也有爭(zhēng)論和糾結(jié)這兩種交互方式的取舍,但是后來(lái)基于兩個(gè)原因,我們認(rèn)為多面板的交互方式是更適合我們產(chǎn)品的方式。
第一個(gè)原因:基于調(diào)研,我們知道我們的產(chǎn)品使用者其實(shí)都非常年輕(25歲左右一、二線城市年輕人)、大學(xué)本科學(xué)歷,所以他們具有一定的認(rèn)知和學(xué)習(xí)能力。
第二個(gè)原因:多面板布局與一二線城市年輕人常用的外賣點(diǎn)餐使用的布局交互一致,從某種程度上來(lái)說(shuō),其他產(chǎn)品已經(jīng)幫助我們教育了用戶。
即使是這樣,并不表示這種交互就是完美的無(wú)阻力的,我們也需要采取一些措施去盡量減少它給用戶達(dá)到目標(biāo)帶來(lái)的阻力。
一方面我們可以通過(guò)UI設(shè)計(jì)讓層級(jí)更加分明,降低視覺(jué)信息上的識(shí)別、學(xué)習(xí)難度。
另一方面,在容易誤操作的地方(比如業(yè)務(wù)是要求用戶得按照每個(gè)房間去檢查,并提交信息保存的,這種限制性的操作和C端常規(guī)的交互方式有所不同);所以,我們會(huì)另外給予文字信息、顏色區(qū)別(未檢查為灰色、通過(guò)為綠色、不通過(guò)為紅色)、toast狀態(tài)提示,盡量減少用戶的犯錯(cuò)機(jī)會(huì);即使出現(xiàn)了誤操作(例如;檢查了房間,但是沒(méi)有提交,就跳到下一個(gè)房間了)也會(huì)替用戶保留數(shù)據(jù),用戶很容易從錯(cuò)誤中恢復(fù)過(guò)來(lái),并不會(huì)出現(xiàn)誤操作導(dǎo)致數(shù)據(jù)丟失的破壞性后果。
在設(shè)計(jì)中,同樣的功能通常可以通過(guò)不同的控件、組件去實(shí)施(我的朋友,在阿里做交互設(shè)計(jì)師的season曾經(jīng)告訴我,交互其實(shí)就是在思考三個(gè)問(wèn)題:功能該使用何種控件實(shí)現(xiàn)、界面內(nèi)如何布局、界面間如何串聯(lián))。
但是我還是想要再補(bǔ)充一下,交互控件、布局、串聯(lián)方式的選擇標(biāo)準(zhǔn)應(yīng)該是以前期調(diào)研或者洞察出的用戶模型和用戶場(chǎng)景為基礎(chǔ)的——沒(méi)有放諸四海都適用的,最好的交互方式,只有最適合的。
四、視覺(jué)層——制造適合的場(chǎng)景氛圍
大家是不是有過(guò)這種感覺(jué):在自習(xí)室/圖書館的時(shí)候效率奇高;一回到家里看見(jiàn)沙發(fā)、床就只想平躺,或者東走走西走走,效率變得奇低。
其實(shí)我們每個(gè)人完成任務(wù)的時(shí)候都需要一個(gè)場(chǎng)景(無(wú)論這個(gè)任務(wù)是購(gòu)買、轉(zhuǎn)發(fā)、點(diǎn)贊、或者專心學(xué)習(xí)),所以我們才需要在視覺(jué)上給予特定的任務(wù)特定的場(chǎng)景氛圍,作為一個(gè)觸發(fā)器(triger)觸發(fā)用戶的情緒,刺激用戶更好的完成任務(wù)。
視覺(jué)層是直接面向于使用者的,它通常會(huì)決定使用者在看到這個(gè)產(chǎn)品后的第一印象;所以產(chǎn)品的視覺(jué)層并非獨(dú)立于上面的“交互層”、“框架層”、“戰(zhàn)略層”,而是應(yīng)該是以上三層的支撐后的外在體現(xiàn);就好像人的外表是基于內(nèi)部的骨骼、血液、組織支撐后外在表現(xiàn)一樣,它為使用者能更好的感知到產(chǎn)品功能、使用產(chǎn)品而服務(wù)。
以配置后臺(tái)為例,前期的調(diào)研發(fā)現(xiàn)使用者多是以男性為主的,接受過(guò)大學(xué)教育,年齡在25歲左右的年輕人,使用手機(jī)的場(chǎng)景是嘈雜的室內(nèi);而B(niǎo)端本質(zhì)上屬于工具型產(chǎn)品,過(guò)度的視覺(jué)設(shè)計(jì)會(huì)干擾使用者對(duì)產(chǎn)品的使用。
所以從用戶模型、使用場(chǎng)景、產(chǎn)品類型三個(gè)角度為抓手,我們可以得出這個(gè)產(chǎn)品大概的視覺(jué)方向:
1)設(shè)計(jì)原則
2)顏色規(guī)范:顏色色值克制、對(duì)比明確、不曖昧
3)字號(hào)層級(jí):字號(hào)大小對(duì)比拉開(kāi),突出重點(diǎn)信息,克制輔助信息
4)間距層級(jí):層級(jí)以5pt為基數(shù),視覺(jué)元素親密性有律可循
5)圖標(biāo)規(guī)范:使用功能性圖標(biāo),扁平化、顏色造型簡(jiǎn)潔克制
五、后設(shè)計(jì)時(shí)期——上線不是設(shè)計(jì)的終結(jié)而是開(kāi)始
在產(chǎn)品優(yōu)化時(shí),我們按照框架層、交互層、視覺(jué)層對(duì)產(chǎn)品進(jìn)行了改版;但是說(shuō)白了,這些都是基于前期了解和經(jīng)驗(yàn)的猜想而已,并沒(méi)有經(jīng)過(guò)實(shí)際的驗(yàn)證會(huì)有好的效果,貿(mào)然一次性做到完美,會(huì)耗費(fèi)很多的成本和資源;尤其是像自如這樣有大量線下業(yè)務(wù)的互聯(lián)網(wǎng)+企業(yè),沒(méi)有經(jīng)過(guò)驗(yàn)證的方案要一次性在線下推廣運(yùn)用,確實(shí)難以取得預(yù)期效果。
當(dāng)在開(kāi)發(fā)資源、時(shí)間有限的情況下,成本最低的方式就是分步上線,從最近的、信任度最高的地區(qū)(北京地區(qū))開(kāi)始測(cè)試;通過(guò)前期確定的指標(biāo)數(shù)據(jù)反饋來(lái)指導(dǎo)下一步的優(yōu)化方向,而不是盲目執(zhí)念于最初的設(shè)計(jì)猜想。
但是,這個(gè)時(shí)候需要產(chǎn)品經(jīng)理/運(yùn)營(yíng)配合,將上線后的數(shù)據(jù)以周報(bào)的形式發(fā)送到每一個(gè)項(xiàng)目團(tuán)隊(duì)成員;設(shè)計(jì)師也需要了解到每一步的過(guò)程信息,從而共同分析原因,并參與討論相應(yīng)的下一步優(yōu)化方向。
所以,對(duì)于設(shè)計(jì)師來(lái)說(shuō),產(chǎn)品優(yōu)化上線只是設(shè)計(jì)初步猜想的落地,完美的設(shè)計(jì)往往不是一次性最好的方案,而是在猜想——修正——猜想——驗(yàn)證中不斷精進(jìn)的那個(gè)。
作者:雨橋同學(xué),微信公眾號(hào):雨橋說(shuō)(ID:yuqiaoshuo)
本文由@雨橋同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 unsplash,基于 CC0 協(xié)議
結(jié)合實(shí)際案例并用“用戶體驗(yàn)5要素”串聯(lián)起整個(gè)流程,邏輯清楚,贊
謝謝支持