以用戶為中心的產(chǎn)品設(shè)計(jì)流程

1 評(píng)論 21888 瀏覽 697 收藏 15 分鐘

UCD,User Centered Design, 以用戶為中心的設(shè)計(jì)。這個(gè)概念其實(shí)很早就有了:

1955年,《為人的設(shè)計(jì)》

美國(guó)著名工業(yè)設(shè)計(jì)師Henry Dreyfuss寫下了著名的設(shè)計(jì)書《為人的設(shè)計(jì)》(Designing for People)。

《為人的設(shè)計(jì)》(Designing for People)

在書中,他寫道:

當(dāng)產(chǎn)品和用戶之間的連接點(diǎn)變成了摩擦點(diǎn),那么工業(yè)設(shè)計(jì)師的設(shè)計(jì)就是失敗的。

相反,如果產(chǎn)品能讓人們感覺更安全,更舒適,更樂于購(gòu)買,更加高效,甚至只是讓人們單純地更加快樂,那么此處的設(shè)計(jì)師是成功的。

1995: Don Norman,第一個(gè)用戶體驗(yàn)專家

身為電氣工程師和認(rèn)知科學(xué)家的Don Norman加盟蘋果公司之后,幫助這家傳奇企業(yè)對(duì)他們以人為核心的產(chǎn)品線進(jìn)行研究和設(shè)計(jì)。而他的職位則被命名為“用戶體驗(yàn)架構(gòu)師”(User Experience Architect),這也是首個(gè)用戶體驗(yàn)職位。

a2

Don Norman,用戶體驗(yàn)設(shè)計(jì)師鼻祖

在這個(gè)階段,Don Norman 還撰寫了經(jīng)典的設(shè)計(jì)書《設(shè)計(jì)心理學(xué)》(The Design of Everyday Things),直到今天它依然是設(shè)計(jì)師的必讀書。這個(gè)人在TED上有段演講很經(jīng)典,感興趣的童鞋可以看看:http://www.tudou.com/programs/view/nwzOgoOzaFo/

那么,在如今的互聯(lián)網(wǎng)產(chǎn)業(yè)中,隨著產(chǎn)品的同質(zhì)化,用戶體驗(yàn)越來(lái)越被提升到一個(gè)不置可否的高度,這種人與屏幕之間的交互也逐漸變成了一種產(chǎn)業(yè),衍生出互聯(lián)網(wǎng)行業(yè)特有的工作模式:“以用戶為中心的產(chǎn)品設(shè)計(jì)和開發(fā)”。

以用戶為中心的產(chǎn)品設(shè)計(jì)流程

a4

以用戶為中心的產(chǎn)品設(shè)計(jì)流程

從這張圖,也許大家看不出“以用戶為中心”體現(xiàn)在哪里,接下來(lái),就對(duì)每個(gè)步驟做一些詳細(xì)解釋,包括每個(gè)步驟的關(guān)注點(diǎn)和方法等。另外請(qǐng)注意,這8步僅僅是屬于一個(gè)迭代,基于用戶反饋的迭代優(yōu)化也是互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)的精髓。

愿景

愿景是什么?

公司戰(zhàn)略層面需要達(dá)到的目標(biāo),如:搶先占有市場(chǎng),提高市場(chǎng)滲透率,培養(yǎng)用戶習(xí)慣,提升營(yíng)收等等。

這個(gè)最最high-level的戰(zhàn)略層對(duì)于以下的所有活動(dòng)起著決定性作用,任何一步需要做決策的地方,都需要回顧這一決策是否支持公司戰(zhàn)略?

為了幫助理解,在這里,我們舉個(gè)例子,假設(shè)我們成立一家科技公司,計(jì)劃做一個(gè)找圖應(yīng)用,在實(shí)現(xiàn)一定流量后,通過推送廣告來(lái)進(jìn)行流量變現(xiàn),達(dá)到公司營(yíng)收目的。

分析研究

這里的分析研究大概可以分為兩類:競(jìng)品分析和用戶研究。

a5

分析研究關(guān)注點(diǎn)和方法

競(jìng)品分析

這里可以參考《用戶體驗(yàn)的要素》里面提到的五個(gè)要素進(jìn)行分析,包括戰(zhàn)略層,范圍層,結(jié)構(gòu)層,框架層,表現(xiàn)層,會(huì)分析的很全面。至于具體每一層代表什么意思,大家可以去問度娘,也建議大家能看下這本書,很有指導(dǎo)意義。

例子:前面提到要做一個(gè)找圖應(yīng)用,因此競(jìng)品我選擇分析“百度圖片”APP。

百度圖片APP

優(yōu)點(diǎn):百度自家產(chǎn)品,無(wú)論從圖片數(shù)量,技術(shù)能力,用戶認(rèn)可度而言都有極高優(yōu)勢(shì)。

缺點(diǎn):找圖增加了在APP內(nèi)社交互動(dòng)的屬性,淡化了“找圖”這一核心屬性;搜索的圖片base在百度圖片庫(kù)上,搜索精準(zhǔn)度有待提高;圖片質(zhì)量不高,有水印,圖片模糊等。

機(jī)會(huì)點(diǎn):強(qiáng)化“找圖”屬性,提供精準(zhǔn)搜索,高質(zhì)量圖片

a6

百度圖片APP界面

用戶研究

用戶研究的目的:挖掘出用戶特征 + 需求

這里提到一個(gè)方法:人物角色,這里的人不是真實(shí)的人,但他們是基于我們觀察到的那些真是的人的行為和動(dòng)機(jī)抽象出來(lái)的人物原型。這是一種幫助團(tuán)隊(duì)成員建立同理心的方法,并且也是一種決策依據(jù),幫助大家達(dá)成共識(shí)。

例子:

A7

人物角色

需求過濾

1

需求過濾的關(guān)注點(diǎn)和方法

需求是什么?

什么用戶群,在什么場(chǎng)景下,可以通過產(chǎn)品做什么事?需求也是機(jī)會(huì)點(diǎn),用戶的某個(gè)場(chǎng)景的痛點(diǎn)未被滿足,便產(chǎn)生了需求

基于場(chǎng)景的需求:

  1. 在關(guān)燈的房間,用戶用閱讀軟件閱讀…
  2. 在接完朋友電話,用戶通過通話列表存儲(chǔ)聯(lián)系人信息…

在過濾需求之前,我們通過頭腦風(fēng)暴發(fā)散出任何能想到的基于場(chǎng)景的需求,還是沿用之前的例子,列出所有的需求:

  1. ?在發(fā)朋友圈的時(shí)候,找到合適的圖來(lái)配合此刻的心情和文字
  2. ?圖片質(zhì)量要高,不能有水印,不能太模糊
  3. 可以支持圖片的自定義處理
  4. 智能的通過篩選本地圖片來(lái)推薦用戶配哪張圖
  5. 搜索按鈕旁邊設(shè)置一個(gè)高級(jí)搜索條件

這些需求里面有一些是假需求,大家可以試著猜一下,答案在最末尾公布。在過濾假需求和技術(shù)無(wú)法滿足的需求后,剩下的這些需求,可以嘗試使用storyboard的形式表達(dá)出來(lái),即”用戶+場(chǎng)景”來(lái)表達(dá)。

功能&數(shù)據(jù)確定

這一步是將過濾后的需求轉(zhuǎn)化為功能,這一步也需要你從開發(fā)的視角去考慮,這些需求的技術(shù)實(shí)現(xiàn)難度有多大,如何設(shè)定規(guī)則既能一定程度滿足用戶需求也符合現(xiàn)有技術(shù)能力。如上一步提到的”在發(fā)朋友圈的時(shí)候,找到合適的圖來(lái)配合此刻的心情和文字”這一需求,轉(zhuǎn)化為功能便是”支持通過關(guān)鍵字模糊搜索圖片”,為了實(shí)現(xiàn)這個(gè)功能,我們需要制定一套搜索機(jī)制,包括分詞機(jī)制,數(shù)據(jù)庫(kù)內(nèi)圖片的分類和標(biāo)簽系統(tǒng)。還需要思考搜索結(jié)果的排序和容錯(cuò)提醒等功能。當(dāng)然,咱們團(tuán)隊(duì)能做到哪一步,需要你和開發(fā)溝通,了解開發(fā)現(xiàn)狀,進(jìn)而規(guī)劃產(chǎn)品,保證你的產(chǎn)品是可以實(shí)現(xiàn)可以落地的。

舉個(gè)栗子,拿百度圖片來(lái)看一下:

2

 

概要設(shè)計(jì)的關(guān)注點(diǎn)和方法

 

信息架構(gòu)設(shè)計(jì)

是指將信息變成一個(gè)經(jīng)過組織、歸類、以及具有瀏覽體系的組合結(jié)構(gòu),這個(gè)活特別適合處女座,整理控~ 包括組織系統(tǒng),導(dǎo)航系統(tǒng),搜索系統(tǒng),標(biāo)簽系統(tǒng)。

(1) 組織系統(tǒng):用一定的規(guī)則,把信息員分堆,并且劃分好之間的關(guān)系。組織系統(tǒng)可以由樹形結(jié)構(gòu)來(lái)展示,也就是俗稱的面包屑。類目系統(tǒng)和標(biāo)簽系統(tǒng)也常拿來(lái)對(duì)前端頁(yè)面進(jìn)行分類展示。

3

微信組織系統(tǒng)

(2) 導(dǎo)航:從一個(gè)地方到另一個(gè)地方。在原本的組織結(jié)構(gòu)基礎(chǔ)上加上箭頭。組織是房間格局,導(dǎo)航就是門窗。

4

線下的逛商場(chǎng)的實(shí)例

藍(lán)色標(biāo)記的瀏覽便可以理解為導(dǎo)航,而綠色標(biāo)記的詢問可以理解為搜索。

而導(dǎo)航也可以分為全局導(dǎo)航、區(qū)域?qū)Ш?、情景?dǎo)航,其中情景導(dǎo)航是最復(fù)雜也是最靈活的導(dǎo)航,沒有規(guī)則,不遵循架構(gòu)層級(jí),由標(biāo)簽來(lái)完成。

5

在設(shè)計(jì)導(dǎo)航,畫流程圖的時(shí)候,關(guān)注表現(xiàn)層,而非系統(tǒng)層,只關(guān)注用戶看到的界面之間的跳轉(zhuǎn)。

(3) 搜索:

6

搜索框背后的邏輯

在設(shè)計(jì)搜索的時(shí)候,需要考慮搜索聯(lián)想的分類和呈現(xiàn),搜索結(jié)果的排序和高亮,容錯(cuò)提示,搜索狀態(tài)和商業(yè)策略。最后一點(diǎn)是搜索引擎賺錢的保證。

(4) 標(biāo)簽:在導(dǎo)航那里就提到了標(biāo)簽,這是一種為了迎合用戶需求和設(shè)計(jì)的一種將網(wǎng)站內(nèi)容快速分類展示的設(shè)計(jì)方式。

界面框架設(shè)計(jì)是對(duì)信息架構(gòu)的進(jìn)一步細(xì)化,常用的方法是原型法,常用的工具有Axure RP,PPT,Word,Sketch等,展現(xiàn)形式有界面圖片,圖片+文字說(shuō)明,界面流程等,不受限于工具,能表達(dá)清楚即可。

關(guān)鍵任務(wù)流設(shè)計(jì)是基于任務(wù)的,將在不同界面跳轉(zhuǎn)的過程表現(xiàn)出來(lái)。例如,在微信發(fā)朋友圈,這是一個(gè)任務(wù),用戶需要五步來(lái)完成,第一步進(jìn)入朋友圈,第二步按下頁(yè)面右上角的照相機(jī)按鈕,長(zhǎng)按和短按效果不一樣,第三步選擇圖片或輸入文字,第四步選擇地點(diǎn)和發(fā)送的對(duì)象,第五步點(diǎn)擊發(fā)送。這五步,會(huì)在三個(gè)到四個(gè)界面跳轉(zhuǎn),界面+跳轉(zhuǎn)路徑是任務(wù)流設(shè)計(jì)的常見形式。

細(xì)節(jié)設(shè)計(jì)

細(xì)節(jié)設(shè)計(jì)可以理解為對(duì)線索、操作、反饋的設(shè)計(jì)。

7

發(fā)微博的線索,操作,反饋

(1) 線索的視覺屬性:包括形狀,尺寸,顏色,位置,紋理,方向

8

視覺元素的組織來(lái)表現(xiàn)線索

再來(lái)看看下面這個(gè)栗子:

9

大麥網(wǎng)首頁(yè)

“猜你喜歡”顏色和”今日推薦”,”即將開售/預(yù)售”不同,表示當(dāng)前頁(yè)。海報(bào)最吸引眼球,所以尺寸比文字大很多。價(jià)格的顏色最為凸顯,也是用戶會(huì)優(yōu)先關(guān)注的元素。上方的Tab框用灰色細(xì)線包圍,表示與下方內(nèi)容的隔離,并且上方的信息顯然比下方更重要。

總而言之,就是利用視覺屬性將頁(yè)面進(jìn)行組織分類,區(qū)分主次,將用戶關(guān)心的信息凸出放大顯示,保證視覺的美觀的基礎(chǔ)上,能引導(dǎo)用戶完成需要他們完成的操作。

(2) 操作是施加在對(duì)象上的行為,是一種輸入過程。

回想上面發(fā)微博的栗子,為了引導(dǎo)用戶操作,需要設(shè)計(jì)觸發(fā)器,保證它容易被識(shí)別,容易被理解。

(3) 反饋是對(duì)操作的反應(yīng),也是下一步的線索。通俗來(lái)說(shuō),就是讓用戶知道現(xiàn)在神馬情況?結(jié)果咧?下一步要做什么?

10

狀態(tài)的反饋

需要考慮的狀態(tài):勾選,懸停,移開,進(jìn)入熱區(qū),拖動(dòng),按下,未點(diǎn)擊,左右翻動(dòng),上下翻動(dòng),flip-flop button(類似開關(guān)按鈕),進(jìn)度條… 做這些設(shè)計(jì)的主要目的是緩解用戶的焦慮…

研發(fā)支持&設(shè)計(jì)驗(yàn)收

這兩部分在產(chǎn)品經(jīng)理的工作中占的比重會(huì)相對(duì)較少,在完成設(shè)計(jì)后,需要找程序猿來(lái)實(shí)現(xiàn),在實(shí)現(xiàn)的過程中,也需要和他們密切溝通,保證他們開發(fā)出來(lái)的產(chǎn)品和設(shè)計(jì)的一樣,當(dāng)然這種情況是很理想的,呵呵,現(xiàn)實(shí)總是很骨感。當(dāng)然,作為一枚產(chǎn)品,如果能了解技術(shù),和猿類有更多共同話題,產(chǎn)品出來(lái)的效果會(huì)更好。

等到開發(fā)測(cè)試完成之后,產(chǎn)品經(jīng)理也需要在生產(chǎn)環(huán)境進(jìn)行驗(yàn)收,驗(yàn)收功能開發(fā)的完整度。

 

本文系作者@舊無(wú)痕 授權(quán)發(fā)布,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 假需求的答案呢?

    回復(fù)