以用戶為中心的產品設計流程

1 評論 21919 瀏覽 697 收藏 15 分鐘

UCD,User Centered Design, 以用戶為中心的設計。這個概念其實很早就有了:

1955年,《為人的設計》

美國著名工業設計師Henry Dreyfuss寫下了著名的設計書《為人的設計》(Designing for People)。

《為人的設計》(Designing for People)

在書中,他寫道:

當產品和用戶之間的連接點變成了摩擦點,那么工業設計師的設計就是失敗的。

相反,如果產品能讓人們感覺更安全,更舒適,更樂于購買,更加高效,甚至只是讓人們單純地更加快樂,那么此處的設計師是成功的。

1995: Don Norman,第一個用戶體驗專家

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

a2

Don Norman,用戶體驗設計師鼻祖

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

那么,在如今的互聯網產業中,隨著產品的同質化,用戶體驗越來越被提升到一個不置可否的高度,這種人與屏幕之間的交互也逐漸變成了一種產業,衍生出互聯網行業特有的工作模式:“以用戶為中心的產品設計和開發”。

以用戶為中心的產品設計流程

a4

以用戶為中心的產品設計流程

從這張圖,也許大家看不出“以用戶為中心”體現在哪里,接下來,就對每個步驟做一些詳細解釋,包括每個步驟的關注點和方法等。另外請注意,這8步僅僅是屬于一個迭代,基于用戶反饋的迭代優化也是互聯網產品設計的精髓。

愿景

愿景是什么?

公司戰略層面需要達到的目標,如:搶先占有市場,提高市場滲透率,培養用戶習慣,提升營收等等。

這個最最high-level的戰略層對于以下的所有活動起著決定性作用,任何一步需要做決策的地方,都需要回顧這一決策是否支持公司戰略?

為了幫助理解,在這里,我們舉個例子,假設我們成立一家科技公司,計劃做一個找圖應用,在實現一定流量后,通過推送廣告來進行流量變現,達到公司營收目的。

分析研究

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

a5

分析研究關注點和方法

競品分析

這里可以參考《用戶體驗的要素》里面提到的五個要素進行分析,包括戰略層,范圍層,結構層,框架層,表現層,會分析的很全面。至于具體每一層代表什么意思,大家可以去問度娘,也建議大家能看下這本書,很有指導意義。

例子:前面提到要做一個找圖應用,因此競品我選擇分析“百度圖片”APP。

百度圖片APP

優點:百度自家產品,無論從圖片數量,技術能力,用戶認可度而言都有極高優勢。

缺點:找圖增加了在APP內社交互動的屬性,淡化了“找圖”這一核心屬性;搜索的圖片base在百度圖片庫上,搜索精準度有待提高;圖片質量不高,有水印,圖片模糊等。

機會點:強化“找圖”屬性,提供精準搜索,高質量圖片

a6

百度圖片APP界面

用戶研究

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

這里提到一個方法:人物角色,這里的人不是真實的人,但他們是基于我們觀察到的那些真是的人的行為和動機抽象出來的人物原型。這是一種幫助團隊成員建立同理心的方法,并且也是一種決策依據,幫助大家達成共識。

例子:

A7

人物角色

需求過濾

1

需求過濾的關注點和方法

需求是什么?

什么用戶群,在什么場景下,可以通過產品做什么事?需求也是機會點,用戶的某個場景的痛點未被滿足,便產生了需求

基于場景的需求:

  1. 在關燈的房間,用戶用閱讀軟件閱讀…
  2. 在接完朋友電話,用戶通過通話列表存儲聯系人信息…

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

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

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

功能&數據確定

這一步是將過濾后的需求轉化為功能,這一步也需要你從開發的視角去考慮,這些需求的技術實現難度有多大,如何設定規則既能一定程度滿足用戶需求也符合現有技術能力。如上一步提到的”在發朋友圈的時候,找到合適的圖來配合此刻的心情和文字”這一需求,轉化為功能便是”支持通過關鍵字模糊搜索圖片”,為了實現這個功能,我們需要制定一套搜索機制,包括分詞機制,數據庫內圖片的分類和標簽系統。還需要思考搜索結果的排序和容錯提醒等功能。當然,咱們團隊能做到哪一步,需要你和開發溝通,了解開發現狀,進而規劃產品,保證你的產品是可以實現可以落地的。

舉個栗子,拿百度圖片來看一下:

2

 

概要設計的關注點和方法

 

信息架構設計

是指將信息變成一個經過組織、歸類、以及具有瀏覽體系的組合結構,這個活特別適合處女座,整理控~ 包括組織系統,導航系統,搜索系統,標簽系統。

(1) 組織系統:用一定的規則,把信息員分堆,并且劃分好之間的關系。組織系統可以由樹形結構來展示,也就是俗稱的面包屑。類目系統和標簽系統也常拿來對前端頁面進行分類展示。

3

微信組織系統

(2) 導航:從一個地方到另一個地方。在原本的組織結構基礎上加上箭頭。組織是房間格局,導航就是門窗。

4

線下的逛商場的實例

藍色標記的瀏覽便可以理解為導航,而綠色標記的詢問可以理解為搜索。

而導航也可以分為全局導航、區域導航、情景導航,其中情景導航是最復雜也是最靈活的導航,沒有規則,不遵循架構層級,由標簽來完成。

5

在設計導航,畫流程圖的時候,關注表現層,而非系統層,只關注用戶看到的界面之間的跳轉。

(3) 搜索:

6

搜索框背后的邏輯

在設計搜索的時候,需要考慮搜索聯想的分類和呈現,搜索結果的排序和高亮,容錯提示,搜索狀態和商業策略。最后一點是搜索引擎賺錢的保證。

(4) 標簽:在導航那里就提到了標簽,這是一種為了迎合用戶需求和設計的一種將網站內容快速分類展示的設計方式。

界面框架設計是對信息架構的進一步細化,常用的方法是原型法,常用的工具有Axure RP,PPT,Word,Sketch等,展現形式有界面圖片,圖片+文字說明,界面流程等,不受限于工具,能表達清楚即可。

關鍵任務流設計是基于任務的,將在不同界面跳轉的過程表現出來。例如,在微信發朋友圈,這是一個任務,用戶需要五步來完成,第一步進入朋友圈,第二步按下頁面右上角的照相機按鈕,長按和短按效果不一樣,第三步選擇圖片或輸入文字,第四步選擇地點和發送的對象,第五步點擊發送。這五步,會在三個到四個界面跳轉,界面+跳轉路徑是任務流設計的常見形式。

細節設計

細節設計可以理解為對線索、操作、反饋的設計。

7

發微博的線索,操作,反饋

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

8

視覺元素的組織來表現線索

再來看看下面這個栗子:

9

大麥網首頁

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

總而言之,就是利用視覺屬性將頁面進行組織分類,區分主次,將用戶關心的信息凸出放大顯示,保證視覺的美觀的基礎上,能引導用戶完成需要他們完成的操作。

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

回想上面發微博的栗子,為了引導用戶操作,需要設計觸發器,保證它容易被識別,容易被理解。

(3) 反饋是對操作的反應,也是下一步的線索。通俗來說,就是讓用戶知道現在神馬情況?結果咧?下一步要做什么?

10

狀態的反饋

需要考慮的狀態:勾選,懸停,移開,進入熱區,拖動,按下,未點擊,左右翻動,上下翻動,flip-flop button(類似開關按鈕),進度條… 做這些設計的主要目的是緩解用戶的焦慮…

研發支持&設計驗收

這兩部分在產品經理的工作中占的比重會相對較少,在完成設計后,需要找程序猿來實現,在實現的過程中,也需要和他們密切溝通,保證他們開發出來的產品和設計的一樣,當然這種情況是很理想的,呵呵,現實總是很骨感。當然,作為一枚產品,如果能了解技術,和猿類有更多共同話題,產品出來的效果會更好。

等到開發測試完成之后,產品經理也需要在生產環境進行驗收,驗收功能開發的完整度。

 

本文系作者@舊無痕 授權發布,未經許可,不得轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 假需求的答案呢?

    回復