5個要素,帶你做好用戶體驗(yàn)
用戶體驗(yàn)是每一個產(chǎn)品經(jīng)理必須要思考的問題,也是一款好產(chǎn)品的取勝關(guān)鍵。那么怎么樣才能做好用戶體驗(yàn),提升產(chǎn)品呢?讓我們看看筆者是怎么說的:
一、糟糕的用戶體驗(yàn)
生活中總是會遇到各式各樣的產(chǎn)品,而我們每一次使用這些產(chǎn)品時都會產(chǎn)生體驗(yàn)。有很多產(chǎn)品,會用得很爽。而有些產(chǎn)品,就是反人類的。
比如這個插座,充分節(jié)省空間的設(shè)計(jì)也是醉人,緊緊將兩個插頭挨在一起,保證你同一時間內(nèi)不可以同時用,超級省電,呵呵。
有時候真想把設(shè)計(jì)師找出來打一頓,問問他是怎么想的,竟然設(shè)計(jì)這種反人類的東西出來。很無奈,現(xiàn)實(shí)中就是有那么多產(chǎn)品,使用的時候讓人極其不爽。而一旦使用不爽的時候,除非你家是壟斷機(jī)構(gòu),否則我一定換另外一個能讓我爽的產(chǎn)品。
當(dāng)企業(yè)意識到產(chǎn)品不是自己生產(chǎn)得爽就行,還得讓用戶用得爽的時候,企業(yè)就意識到了用戶體驗(yàn)的重要性,也因此開始去研究怎么樣的產(chǎn)品設(shè)計(jì)會提升戶體驗(yàn)。
在互聯(lián)網(wǎng)時代,有一個人提出了:網(wǎng)站類產(chǎn)品應(yīng)該從幾個方面來考慮用戶體驗(yàn),這也就是今天在互聯(lián)網(wǎng)界非常知名的《用戶體驗(yàn)要素》。
二、用戶體驗(yàn)要素
今天我們都知道了,網(wǎng)站類的用戶體驗(yàn)要素設(shè)計(jì)分了五層:戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。但每一層具體什么意思,可能就不一定記得了。
首先,我們來說,為什么要分層?
我們倒過來想,網(wǎng)站類產(chǎn)品設(shè)計(jì)出來后,用戶接觸到的肯定是一個網(wǎng)頁,而網(wǎng)頁這個產(chǎn)品是如何交付到用戶手里,讓用戶產(chǎn)生體驗(yàn)的呢?
如果我們只看到——網(wǎng)頁是許多人共同的努力,伴隨著大量的分析、研究、決策,那么我們并沒有真正認(rèn)識到事情的全貌。
將整個事情拆分成小塊一塊一塊地看,我們才能更清晰地了解到網(wǎng)頁類產(chǎn)品是怎么設(shè)計(jì)出來的。
用戶對網(wǎng)頁的體驗(yàn)不僅僅是網(wǎng)頁顏色怎么樣,還包括網(wǎng)頁信息、網(wǎng)址好不好記、網(wǎng)名好聽還是不好聽等等。
顏色是屬于視覺方面的體驗(yàn);而網(wǎng)頁信息、網(wǎng)址、網(wǎng)名等屬于信息方面的體驗(yàn);網(wǎng)站按鈕則屬于功能類的體驗(yàn);為什么這個功能放這里,為什么網(wǎng)頁有10個頁面,9頁為什么不行,這些又屬于網(wǎng)站結(jié)構(gòu)方面的設(shè)計(jì)。
就這樣把一個網(wǎng)頁抽絲剝繭全部拆分后,形成了我們今天看到的用戶體驗(yàn)要素五層:
1. 戰(zhàn)略層
戰(zhàn)略層包括兩個方面:一個是產(chǎn)品目標(biāo),一個是用戶需求。
產(chǎn)品經(jīng)理必須分析用戶能從這個產(chǎn)品中得到什么,也就是產(chǎn)品的用戶價值是什么。同時,產(chǎn)品經(jīng)理要對自己的產(chǎn)品設(shè)定產(chǎn)品目標(biāo),可能是商業(yè)價值也可能是別的東西。如果開發(fā)一個產(chǎn)品沒有目標(biāo),開發(fā)個啥呢。
產(chǎn)品目標(biāo),就是我們能從這個產(chǎn)品中得到什么?
比如有人會選擇商業(yè)目標(biāo),比如實(shí)現(xiàn)一個億營收,OK,也沒問題。
另外呢,我們也要宣傳自己的品牌,讓別人記住我們的品牌,建立我們的產(chǎn)品成功標(biāo)準(zhǔn)。
用戶需求,就是用戶能從我們這里得到什么價值?
可以通過用戶細(xì)分建立不同的用戶群體,然后進(jìn)行用戶研究創(chuàng)建用戶角色,形成用戶故事來確定我們的目標(biāo)用戶和用戶需求,進(jìn)而去分析。當(dāng)我們滿足用戶需求的時候,目標(biāo)用戶就獲得了這樣一個產(chǎn)品價值。
而對于產(chǎn)品經(jīng)理而言,這一層的工作實(shí)際上就是調(diào)研背景、目的以及需求分析。簡單地說,就是我們要在什么背景下做什么事情;達(dá)到什么目的;用戶有什么需求、我們有什么需求,這兩者之間如何平衡。
這一部分就是用戶調(diào)研、需求分析的工作流程。如果形成一個文檔,也就是商業(yè)需求文檔和市場需求文檔,即BRD和MRD。
2. 范圍層
定義好了產(chǎn)品目標(biāo)和用戶需求,那么緊接著我們要做什么呢?
我們根據(jù)用戶調(diào)研知道了用戶有什么需求,而用戶需求非常多,我們到底要做什么不做什么,要提供什么產(chǎn)品來滿足用戶的需求?
當(dāng)我們帶著這樣的思考去想問題的時候,戰(zhàn)略層就進(jìn)入到了范圍層。
已經(jīng)確定好一個范圍了,接下來的時候就是要在這個范圍里干了。對于產(chǎn)品經(jīng)理而言,就是要把之前所有的工作形成一個文檔記錄下來,保證在未來開發(fā)的過程中,避免因?yàn)槟@鈨煽傻臅r候而重新復(fù)盤整個產(chǎn)品。
這里的這個文檔實(shí)際上就是產(chǎn)品需求文檔PRD。
產(chǎn)品需求文檔里應(yīng)該包括哪些東西?
首先,我們要思考——針對用戶的需求,我們應(yīng)該提供一個什么東西來滿足用戶的需求,讓用戶獲得產(chǎn)品價值。這一步是定義需求的關(guān)鍵步驟。當(dāng)需求定義清楚之后,列成一個需求list,也就是需求清單或者需求池,很多產(chǎn)品經(jīng)理會有一個Excel表格來做這個需求清單。
緊接著,考慮需求的優(yōu)先級排序了,先做什么后做什么,明確我們的項(xiàng)目中所要進(jìn)行的全部工作。最終,形成一個產(chǎn)品需求文檔PRD。
3. 結(jié)構(gòu)層
當(dāng)我們有了需求文檔的時候,就要開始很具體地設(shè)計(jì)一個產(chǎn)品的流程了。對于功能型的產(chǎn)品,主要是考慮清楚系統(tǒng)如何配合和響應(yīng)用戶的行為。
比如支付產(chǎn)品,用戶點(diǎn)了收款,然后沒有收款二維碼,這是不行的。而對于內(nèi)容型產(chǎn)品,主要考慮的是如何合理組織有效的信息;比如現(xiàn)在流行的feed流,這些內(nèi)容都是怎么組織起來的,能夠讓用戶看到他們想看的信息。
設(shè)計(jì)一個產(chǎn)品,尤其到了交互設(shè)計(jì)這一階段,首先要解決的是兩個問題:
- 如何組織產(chǎn)品中的頁面
- 如何組織頁面內(nèi)的元素
也就是這個產(chǎn)品要多少個頁面,每個頁面上都怎么樣組織元素。這就是交互設(shè)計(jì)這個環(huán)節(jié)要考慮的事情了。一般會先形成一個概念模型,設(shè)計(jì)好一個用戶通道,然后在用戶操作的路徑上設(shè)定好限制——萬一用戶操作錯了,要有提示,或者根本不給用戶犯錯的機(jī)會。
最后,要讓用戶理解我們的設(shè)計(jì)、如果用戶不知道我們的設(shè)計(jì)是干嘛的,那么做出再好的東西,也無濟(jì)于事。
而對于內(nèi)容型產(chǎn)品,首先是選定一個合適的內(nèi)容展示結(jié)構(gòu),一個合適的結(jié)構(gòu)可以讓用戶一眼就看到他想看的內(nèi)容,而一個好的內(nèi)容也都是結(jié)構(gòu)化呈現(xiàn)的。
總之,內(nèi)容也一定是需求導(dǎo)向。如果提供了沒有用戶看的內(nèi)容,可想而知用戶就不來了。
那么,這一層對應(yīng)的是產(chǎn)品經(jīng)理的哪一部分工作呢?——是業(yè)務(wù)流程圖的繪制和功能框架圖的繪制。
給大家看看兩個圖具體長什么樣子:
功能框架圖
業(yè)務(wù)流程圖
ps:有人說產(chǎn)品結(jié)構(gòu)圖和產(chǎn)品框架圖都差不多,我通過查資料、搜集各種解釋后發(fā)現(xiàn):結(jié)構(gòu)圖一般是PPT做的做匯報(bào)展示用;框架圖一般是思維導(dǎo)圖做的,放在需求文檔里。這倆張圖本質(zhì)描述的是一個事情,都是說產(chǎn)品具備哪些功能點(diǎn)。
4. 框架層
當(dāng)我們設(shè)計(jì)好用戶的路徑、組織好產(chǎn)品中的頁面、確定需要幾個頁面,然后確定好這個頁面里面有什么元素的時候。接下來,我們就需要具體地去設(shè)計(jì)這些元素在這個頁面里的位置,以及這幾個頁面的前后關(guān)聯(lián)了。
在設(shè)計(jì)這些頁面和元素的過程中,不可避免的是文案。用戶很多時候都是靠文案來理解你的產(chǎn)品功能的,因此信息設(shè)計(jì)(文案)在框架層這里要著重注意一下。
文案很重要的,它是產(chǎn)品經(jīng)理傳遞想法給用戶的關(guān)鍵路徑。很多時候,用戶面對的是一個不會說話的產(chǎn)品。而文案,是產(chǎn)品經(jīng)理為數(shù)不多的能夠用語言和用戶溝通的方式。
對于功能型的產(chǎn)品,還有一個點(diǎn)是界面設(shè)計(jì)。當(dāng)用戶操作了功能按鈕、操作了頁面元素之后,頁面要給用戶什么樣的反饋。這其實(shí)就是讓用戶擁有做某些事情的能力。
而在內(nèi)容型的產(chǎn)品里,這個設(shè)計(jì)就變成了導(dǎo)航設(shè)計(jì)。允許用戶在各種內(nèi)容之間穿行,也就是讓用戶擁有去某個地方的能力。
在設(shè)計(jì)的時候,有兩個準(zhǔn)則:
一個是習(xí)慣,不要挑戰(zhàn)用戶的使用習(xí)慣。很多設(shè)計(jì)師會有一種想法——要設(shè)計(jì)一個新的東西。這個新東西如果讓用戶喜歡,那么一定是新的里面帶著大量舊的,用戶從舊的熟悉的東西里面發(fā)現(xiàn)有一點(diǎn)點(diǎn)新奇,這個是用戶喜歡的。而全新的東西是在挑戰(zhàn)用戶的認(rèn)知,用戶對于一個不理解的東西會很有抵觸。所以,設(shè)計(jì)不要挑戰(zhàn)用戶的習(xí)慣,更不要去挑戰(zhàn)用戶的認(rèn)知。
另一個是比喻,恰當(dāng)?shù)厥褂蒙钪械氖挛镒鳛樵O(shè)計(jì)的比喻。比如超市的購物車被
比喻成了各大電商的購物車標(biāo)識,這個設(shè)計(jì)很好地借鑒了生活中的常識。而如果你設(shè)計(jì)了一個非常浮夸的標(biāo)識,用戶根本不知道是啥,想想這個用戶點(diǎn)擊量也不會提高。
5. 表現(xiàn)層
最后,我們還有表現(xiàn)層。在這里所有的產(chǎn)品的關(guān)注點(diǎn)都是一樣的——為最終產(chǎn)品創(chuàng)建感知體驗(yàn)。
用戶對互聯(lián)網(wǎng)的產(chǎn)品,絕大多數(shù)都是通過視覺來感知到的。所以這一層對于互聯(lián)網(wǎng)產(chǎn)品而言,更多的就是視覺設(shè)計(jì)。
這里面包括了幾個準(zhǔn)則:產(chǎn)品內(nèi)部一致性,避免支離破碎感;同時,視覺設(shè)計(jì)對于重點(diǎn)地方要有對比,形成自己的視覺模型、風(fēng)格指南,能讓整個團(tuán)隊(duì)、整個產(chǎn)品都保持一致。這里不做過多贅述,視覺設(shè)計(jì)有一整套的邏輯,以后給大家分享。
這部分是由產(chǎn)品經(jīng)理和UI設(shè)計(jì)師一起來完成的。在實(shí)際的工作流程中,UI設(shè)計(jì)師其實(shí)是產(chǎn)品經(jīng)理在視覺上的執(zhí)行者。本質(zhì)上,產(chǎn)品經(jīng)理要自己想明白,用戶需要個什么東西。憑著感覺說這個好看、這個不好看是不行的,感覺不靠譜,得要有邏輯。
二、總結(jié)
對于產(chǎn)品經(jīng)理而言,在用戶體驗(yàn)要素這方面的設(shè)計(jì),其實(shí)就是產(chǎn)品一系列工作流程的外在體現(xiàn)。各種各樣的決策堆積起來,最終交付到用戶手里形成用戶體驗(yàn)。
戰(zhàn)略層,確定產(chǎn)品目標(biāo)和用戶需求,這是PM設(shè)計(jì)產(chǎn)品的來源,也是做一個產(chǎn)品的開端。
范圍層,當(dāng)我們獲取到用戶需求、明確好產(chǎn)品目標(biāo)后,PM就會想——我們可以提供給用戶什么解決方案來實(shí)現(xiàn)用戶的需求。這時候,我們會寫需求文檔記錄下我們提供的解決方案。
當(dāng)文檔完成后,PM會兼職做UE的工作,也可以找UE一起來做,開始進(jìn)入了結(jié)構(gòu)層的設(shè)計(jì)——這些解決方案要做幾個頁面在哪個頁面呈現(xiàn)。然后UE就去設(shè)計(jì)去了——這個東西用按鈕表示;這個東西用文本框表示;按鈕放在這里表示可以點(diǎn)擊,可以確認(rèn);文本框放在哪里,用戶一眼能看到說明等等。這都是UE的工作,而這就是框架層的工作。
匯總一下:
- 一個產(chǎn)品交付給用戶,實(shí)際上就是PM把一個用戶需求或者一個點(diǎn)子變成最終產(chǎn)品,交付給用戶使用的一套流程。
- 每一層都涉及到各種決策:我們做什么,不做什么;用什么元件,不用什么元件;什么位置,什么顏色。
- 每一個流程上的每一個決策,最終都會交付到用戶那里,當(dāng)用戶使用一次之后,產(chǎn)生用戶體驗(yàn)。
本文由 @大林的小白?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
最后總結(jié)的時候 怎么總結(jié)到第四個要素框架層就沒了?表現(xiàn)層呢???
個人覺得,框架層和結(jié)構(gòu)層的位置應(yīng)該交換一下。先有框架,也就是頁面設(shè)計(jì),界面內(nèi)容,然后再考慮各個頁面之間的交互,信息架構(gòu)
我之前也是認(rèn)為要交換一下的,但是后來多學(xué)習(xí)這個5層,還是先有結(jié)構(gòu)后有框架:結(jié)構(gòu)類似功能圖流程圖,框架則是每個功能每個節(jié)點(diǎn)該有的內(nèi)容框架布局,所以這個順序沒錯。
感謝分享,讓我認(rèn)識到發(fā)現(xiàn)自己的不足
請問您文章用到的圖片是用哪個軟件做的呀
PPT~~
邏輯很清晰,又幫助我把這個方面的思維,進(jìn)行了結(jié)構(gòu)化整理,謝謝
特別想直接回復(fù)樓上的,博主請您來看的嗎?素質(zhì)這么感人,就不要在外面秀下限了!但是我不敢,我慫!
禮貌性商業(yè)互吹 咋不行
用戶體驗(yàn)的要素都被人講爛了。。。
嗯 講爛的概念 舉爛的例子 這篇講用戶體驗(yàn)的文章用戶體驗(yàn)很糟糕啊