我拆解了一套完整的產品設計流程,希望對你也有用

16 評論 20593 瀏覽 182 收藏 16 分鐘

本文筆者用簡明扼要的文字講解了產品的設計全流程,希望能夠給你帶來一定的啟發。

人機交互與產品設計已經在西方國家發展了半個多世紀,已經研究出了相當多的方法理論。國內跟進沒有很久,再加上前幾年野蠻生長,導致很多人對這一領域缺乏系統認知。

而設計流程,又是系統認知中的基礎。這里我根據留英所學和大廠工作經驗,整理了一套在國際上被廣為認可的,而且在國內具有一定可行性的產品設計流程。

大綱目錄

準備階段

1. 定性研究Qualitative Research,針對可能使用你的產品的人,可以是問卷、訪談…

2. 確定人物角色Persona,即產品的典型用戶,可以有一種或幾種。

3. 問題腳本Problem Scenario,羅列人物角色在使用產品時可能遇到的問題,可以整理成一個故事便于別人理解。

4. 動作腳本Action Scenario,像寫故事一樣,寫人物角色在使用你設計好的產品時,發生的細節。注意,這個時候你的產品概念模型已經基本成型了,這個概念模型是通過解決問題腳本里的問題而得出的。

輸出階段

5. 畫線框圖Wireframe,這個線框圖是通過把動作腳本里的概念模型轉化成視覺模型得到的。

6. 交互原型Prototype,做出來好像可以用的東西,有很多原型工具可以利用。

評測階段

7. 專家評測Expert Evaluation,至少兩名設計師或對交互設計比較了解的人通過反復測試原型。找到問題后修改線框圖并更新原型。

8. 用戶評測User Evaluation,讓用戶使用原型,可以給他們一些任務去完成。根據用戶在使用過程中的問題和建議進行進一步修改。

方法

1. 定性研究 Qualitative Research

無論你用何種形式做調查,你的目的是了解用戶的五個方面。假設體驗進階公眾號是一款產品:

  1. 行為Activities,例如用戶多久打開一次體驗進階、一次閱讀多久?
  2. 態度Attitudes,例如:用戶怎樣看待體驗進階?
  3. 資質Aptitudes,例如:體驗進階用戶的學歷背景怎樣?
  4. 動力Motivation,例如:體驗進階用戶為什么使用該產品?
  5. 技能Skills,例如:用戶對同類產品或平臺設備是否熟悉?

2. 人物角色 Persona

如果你的定性研究有所成功,這時你應該對你的用戶有所了解了。

根據上文中的五個方面,你需要挑揀出最典型的一個或幾個形象。例如體驗進階讀者的人物角色可能有:剛上路的設計新人、具有探索欲的產品經理、尋找轉型方向的UI設計師……

你不但要確定這些人物角色(Persona)的主要特點,還要確定他們的需求和目的。為了增加真實性,可以給人物角色(Persona)取名字,選一張照片,細化他們的背景資料。

以下是范例:

上圖來源:https://dribbble.com/shots/6197926-Persona

上圖來源:https://dribbble.com/shots/4864252-Woman-User-Persona-UX

3. 問題腳本 Problem Scenario

基于你對人物角色(Persona)的理解,你應該已經可以設想出他們在使用產品中可能遇到的問題了。

你可以為每一個人物角色列一個問題單,也可以把它們整理到一個簡短的故事里。

以下是一個案例:

Macomb 先生和夫人都是退休老師,現在已經60多歲了。他們的社會保障支票是他們收入的重要組成部分。他們剛剛賣掉了自己的大房子,搬到一間小公寓里。

他們知道,他們現在需要做的許多雜事之一就是告訴社會保障局他們已經搬家了。他們不知道最近的社會保障處在哪里,而且他們走路或開車越來越困難。

如果足夠簡單和安全,他們希望使用計算機將其舉動通知社會保障局。但是,他們對于通過計算機執行這樣的任務有些擔心。他們從未在工作中使用計算機。

然而,他們的兒子 Steve 去年給了他們一臺計算機,為他們安裝了計算機,并向他們展示了如何使用電子郵件和訪問網站。

他們從未去過社會安全管理局的網站,所以他們不知道它的組織方式。此外,他們也不愿在線提供個人信息,因此他們想知道以這種方式告訴代理機構新地址的安全性。

上文來源:https://www.usability.gov/how-to-and-tools/methods/scenarios.html

4. 動作腳本 Action Scenario

首先你要為已列出的問題想好可能的解決方案,然后寫一個簡短的故事把這些解決方案囊括進去。寫成故事的好處是代入感較強,對別人來說容易理解。國內比較推崇故事版,但是把所有情景畫出來的效率是非常低的。

在畫設計之前把用戶動作通過文字腳本寫出來有一個很大的好處,那就是明確了主要的用戶路徑。

以下是一個案例:

約瑟夫在他的辦公室,需要為他的商務會議預定一家酒店,該酒店將在紐約舉行。商務會議將在四天內舉行。

他很忙,由于他還有很多其他工作要做,因此需要在他逗留期間盡快找到一個可以睡覺的地方。

他打開我們的網站,知道他想去的城市的日期和名稱??吹胶芏鄺l目后,他注意到他想在中心附近的一家旅館里住,因為客戶會議將在該地區舉行。他還需要滿足其他條件:靠近地鐵站,附近有一些餐館。

他找到了一個地方并將其預訂。

他收到確認。

上文來源:https://medium.com/@Kristijan197/hci-method-user-groups-and-scenarios-8904ad706e93

5. 畫線框圖 Wireframe

這個時候你對你的交互方案已經有了一個比較抽象的想法了,現在只要把它具象化就好了。線框圖大家都比較了解,這里就不多說了。

上圖來源:https://dribbble.com/shots/6194759-Upshift-wireframe/attachments

上圖來源:https://dribbble.com/shots/7084851-CRM-System-UX-Process

其實線框圖不一定很糙,有的人甚至喜歡直接上色開始視覺。

6. 交互原型 Prototype

如果是比較重要的項目,可以叫上開發一起來灰度測試。但是即便是這樣,也建議設計稿出來后,就可以立即做一個底成本的交互原型。

可以使用的原型工具還是很多的,例如 Axure RP 、 InVision 等。即便沒有專業工具,用 PPT 也可以搞出來,只要做出一個可以交互的東西就行了。

一個原型是不可能實現所有功能的,所以你要確定幾個可以走通的功能,讓給用戶能夠順利在指定路徑上完成一系列任務。

上圖來源:https://dribbble.com/shots/4757077-Newslist-Interactions

7. 專家評測 Expert Evaluation

原型完成后召集至少兩三個設計師或者對交互比較了解的人,使用并評測原型。你可以將原型所關注的幾個任務列出來,以免專家不知道原型哪部分可交互哪部分不可交互。

比較常用的評測方法是啟發式評估法(Heuristic Evaluation),而這種方法比較常見的標準是尼爾森交互設計法則(Nielsen Heuristic):

  1. 系統狀態是否可見?Visibility of system status
  2. 系統是否符合現實世界的習慣?Match between system and the real world
  3. 用戶是否能自由地控制系統?User control and freedom
  4. 統一與標準?Consistency and standards
  5. 錯誤防范?Error prevention
  6. 減輕低用戶的記憶負擔?Recognition rather than recall
  7. 靈活性和效率?Flexibility and efficiency of use
  8. 美觀簡潔?Aesthetic and minimalist design
  9. 幫助用戶認知、了解錯誤,并從錯誤中恢復?Help users recognize, diagnose, and recover from errors
  10. 幫助文檔?Help and documentation

如何使用啟發式評估法?

  1. 列出問題:專家們各自將自己發現問題列出來,并將之與對應的法則相關聯,或者根據法則來查找問題。例如“系統狀態是否可見”在這一條產品上是否體現完善,有哪些問題?
  2. 各自評估:然后專家們分別給自己的問題進行分級,大家要使用統一的標準;
  3. 統一討論:專家們把問題整合起來一起討論,遇到意見不統一的適合投票表決或者采用平均值。

評級標準非常多,你也可以設計自己的標準。我認為比較簡單好用的是 Jeff Robin 問題分級

  • 4級 ·致命問題:無法使用產品的某一部分
  • 3級 · 重度問題:難以完整使用產品的某一部分
  • 2級 · 中度問題:大部分情況下能夠使用,但需要付出較大努力
  • 1級 ·輕度問題:偶爾發生且容易解決,或者問題并不在產品的主要功能上

提醒:評測完后別忘記依據問題的重要程度修改優化設計稿和原型!

8. 用戶評測 User Evaluation

原型通過專家評測后,你可以找一些典型用戶使用原型。你可以把任務列給他們,讓他們自己嘗試完成任務。中間遇到的問題可以記錄下來,設計師通過觀察來進行評分。

用戶最好是尋找符合人物角色(Persona)的目標人群和真實用戶,這樣得出的結論是最可靠的。不過,大多數情況下,產品的可用性問題都是“功能隱藏太深”、“文字描述不清晰”等通俗問題,一般人也能作為用戶在測試中發現足夠多的問題。

比較常用的用戶評測方法是可用性測試:

  1. 完成任務:讓用戶根據一張任務列表使用產品;
  2. 記錄問題:一名觀察員在旁觀察記錄問題;
  3. 填寫問卷:用戶完成任務后,填寫問卷;
  4. 整理問題:整理記錄下來的問題并分類分級。

除此之外,也有很多其它方式,例如 Focusing Group 、Think Aloud 和 Probing 等,但核心都離不開可用性問題。

那么,還有一個問題,需要多少用戶才能做評測呢?怎么也要幾十上百個?其實只要五名用戶就可以發現80%的可用性問題

如果你不相信,尼爾森在2000年就做過實驗,有數據為證:

數據來源:https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

有趣的是,用戶評測的結果可能和專家評測的結果相差很遠。我以設計師都身份做過很多次可用性測試,每次都能發現意想不到的問題,因為用戶視角和設計視角完全不同。

再次提醒:每次評測完后都要依據問題的重要程度修改優化設計稿和原型!

總結

這個流程也不是單線程的,其中有些步驟,僅僅只是為了進行下一步;另外一些,卻會對后面好幾個步驟產品影響。有幾個環節,是又是可以循環好幾輪來優化方案。

不過,這些東西很難用文字表述出來,最好是自己在實踐中體會。如果一定要展現出來給大家看看,那就是下面這張流程圖了:

如果每次產品上線前都把步驟做好了,測試來幾輪,不一定耗費多少時間,但是效果絕對出乎你的意料。即便是再資深的產品專家和設計大神,都不可能算無遺漏,而數據永遠是可靠的。

如果說實踐才是檢驗真理的唯一標準,那么用戶則是檢驗產品體驗的唯一標準。

 

作者:Z Yuhan,一名前華為騰訊交互設計,在英國學習了人機交互,樂意帶你由淺入深了解產品體驗;公眾號:體驗進階

本文由 @Z Yuhan 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 維度有那么多 怎樣對用戶進行分類呢?

    來自廣東 回復
  2. 非常棒很喜歡,有一處需要修改下:“Macomb 先生和夫人都是退休老師,現在已經20多歲了。” 20多歲應該還當不了教師哦,

    來自山東 回復
    1. 對哦,感謝提醒

      來自廣東 回復
    2. 師范學院畢業21歲就可以教書了 ??

      來自廣東 回復
    3. 才發現是我最后一句說錯了 哈哈哈,應該是20多歲應該不會退休哦

      來自山東 回復
  3. 有道理,樓主何不留個聯系方式weixin

    來自湖南 回復
    1. 我的公眾號里有聯系方式,或者加我微信13163710092

      來自廣東 回復
  4. 從交互設計精髓這本書濃縮出的精華,點贊。

    來自安徽 回復
    1. 謝謝~

      來自廣東 回復
  5. 分享使人進去,的確很棒。

    回復
    1. 使人進步

      回復
  6. 非常棒,感謝分享~~~

    來自廣東 回復
    1. 謝謝

      來自廣東 回復
  7. 動作腳本還應該基于數據分析再進行,也可以進行類似灰度測試,動作腳本整好了錦上添花,整不好畫蛇添足

    回復
    1. 有道理,不過可能這里主要說的是從0到1的過程

      回復
    2. 請問數據分析在產品設計的哪一步比較合適?文中好像沒有單獨提到數據分析,數據分析難到在定性的時候就已經在做了么?

      來自內蒙古 回復