1、2008年7月,互聯(lián)網(wǎng)產(chǎn)品設(shè)計方法UCD,曾慶瑞,目錄,UCD和UE/UX的概念和分析,1,產(chǎn)品設(shè)計團(tuán)隊的組建和產(chǎn)品設(shè)計流程,2,產(chǎn)品設(shè)計方法和原型、工具的使用,3,為什么UCD如此重要？,UCD（User-centered design ）：以用戶為中心的設(shè)計 在開發(fā)產(chǎn)品的每一個步驟中，都要把用戶列入考慮范圍,UCD是一個口號嗎？ UCD對于實際工作有什么指導(dǎo)和意義呢？ UCD即創(chuàng)建高效的UE方法，與其說UCD是一種方法還不如說是一種互聯(lián)網(wǎng)產(chǎn)品的設(shè)計思想，那么成功的UE（User Experience）用戶體驗又具有什么樣的意義？,理解人們所想和所需： 圍繞用戶需求和心智模型進(jìn)行產(chǎn)品設(shè)計,用

2、戶體驗價值圖,它向我們解釋了積極的、良好的用戶體驗可以增加用戶的回訪、獲得用戶的信任，增加購買的意向，實際上是增加了我們獲得利潤的能力。 即使我們的網(wǎng)站并不是直接靠在線銷售獲得利潤的經(jīng)營模式，但高效的用戶體驗可以提高轉(zhuǎn)換率，實際上是幫我們更快、更穩(wěn)健的達(dá)到我們的商業(yè)目標(biāo)。,UE車輪構(gòu)成用戶體驗的30種要素,這個模型應(yīng)該從內(nèi)部解釋，它從中間開始： 價值是我們想要達(dá)到的目標(biāo)。 從顧客到提供商，正向的用戶體驗是可以實現(xiàn)“雙贏”的 我們通過正向的用戶體驗來實現(xiàn)價值。 用戶體驗由許多方面組成，我們必須重視可尋性、可接近性、合意性、可用性、可靠性和有用性這些方面。 用戶體驗的方面又由許多方面組成，這個模型

3、具體呈現(xiàn)了30種要素。,用戶體驗的要素,戰(zhàn)略層：用戶的需求是什么？網(wǎng)站的目標(biāo)/商業(yè)目的是什么？ 范圍層：什么樣的信息和內(nèi)容滿足用戶的需求？ 結(jié)構(gòu)層：如何組織、導(dǎo)航，并響應(yīng)用戶滿足其需求？ 框架層：如何將 概念模型細(xì)化到具體的界面外觀、布局、導(dǎo)航信息設(shè)計 視覺層：用戶看到的最終表現(xiàn)形式,這不僅僅是用戶體驗的要素組成結(jié)構(gòu)，也總結(jié)了我們的產(chǎn)品設(shè)計過程，試想一下我們的工作將處于哪個層面？,目錄,UCD和UE/UX的概念和分析,1,產(chǎn)品設(shè)計團(tuán)隊的組建和產(chǎn)品設(shè)計流程,2,產(chǎn)品設(shè)計方法和原型、工具的使用,3,產(chǎn)品設(shè)計團(tuán)隊,產(chǎn)品設(shè)計團(tuán)隊： PM（項目經(jīng)理/產(chǎn)品經(jīng)理） BI（商業(yè)情報） UR（用戶體驗分析師）

4、user researcher IA（信息架構(gòu)師）(information architect) ID（交互設(shè)計師） interaction designer CD（內(nèi)容設(shè)計師）Content Designer VD（視覺設(shè)計師） visual designer UID（界面設(shè)計師） user interface designer,把專業(yè)的事交給專業(yè)的人去做，然后專心做自己專業(yè)的事,我們拍一部有10個角色的電影，但我們只有5位演員，我們不會去掉5個角色，而是1個人飾演2個角色,產(chǎn)品經(jīng)理,產(chǎn)品經(jīng)理負(fù)責(zé)整個產(chǎn)品的定位、規(guī)劃、定制發(fā)展方向及策略， 并負(fù)責(zé)團(tuán)隊的激勵和管理： 他應(yīng)該把精力用于產(chǎn)品的“戰(zhàn)

5、略層”、“范圍層”，他不一 定對每一個領(lǐng)域都精通，但一定具有全局觀和把控能力。 產(chǎn)品經(jīng)理的產(chǎn)品管理能力，體現(xiàn)在具體工作： 負(fù)責(zé)產(chǎn)品概念設(shè)計的把關(guān) 撰寫市場需求文檔（MRD）和產(chǎn)品需求文檔（PRD） 進(jìn)行競爭狀況分析 規(guī)劃產(chǎn)品路線圖 制作產(chǎn)品演示PPT 分析產(chǎn)品數(shù)據(jù)等 組織溝通、注重細(xì)節(jié)、商業(yè)嗅覺、整體規(guī)劃,信息架構(gòu)師,IA（信息架構(gòu)師）(information architect) 網(wǎng)站的信息組織系統(tǒng)、標(biāo)識系統(tǒng)、導(dǎo)航系統(tǒng)和搜索系統(tǒng),組織方式,分類體系,順序排列,結(jié)構(gòu)設(shè)計,確定網(wǎng)站的結(jié)構(gòu)類型，層級？矩陣？線性？,讓用戶在信息空間中很清楚自己的位置和達(dá)到目的地的途徑,設(shè)計信息環(huán)境、組織結(jié)構(gòu),對信息

6、的系統(tǒng)分類，以符合用戶的思維模型,對信息進(jìn)行順序設(shè)計、讓用戶在合適的時間、合適的位置獲取應(yīng)該得到的信息,一個有效的信息架構(gòu)可以讓人們按照邏輯直觀的，毫無阻礙的一步步地接近他們需要的信息,信息構(gòu)架,節(jié)點的結(jié)構(gòu)方式：層級？矩陣？線性？ 組織原則：按照網(wǎng)站目標(biāo)和用戶需求分類 控制性詞典：控制信息一致性 元數(shù)據(jù)：信息的屬性 導(dǎo)航系統(tǒng)：導(dǎo)航設(shè)計 位置和標(biāo)識 交付物：構(gòu)架圖、線框圖,交互設(shè)計師,交互設(shè)計師以目標(biāo)為導(dǎo)向的設(shè)計，最早屬于界面設(shè)計的范疇，交互設(shè)計的過程主要是“任務(wù)分解”的過程，簡單來說就是“我們把產(chǎn)品功能按照用戶的具體需求組合成典型任務(wù)場景，然后對每個任務(wù)進(jìn)行詳細(xì)的使用流程設(shè)計”。決定交互設(shè)計有

7、多少工作的并非多少界面，而是有多少任務(wù)。 我們的交互設(shè)計師通常只做： 行為設(shè)計： 用戶點擊之后反饋什么樣的結(jié)果？ 可以拖拽操作嗎？ 用什么樣的語言和用戶交互？ 界面設(shè)計： 使用按鈕還是圖標(biāo)？ TAB如何表現(xiàn)？ 錯誤處理 交付物：產(chǎn)品線框圖（Wireframes）、產(chǎn)品特性清單（Feature List） ,交互設(shè)計師需要具備憑空想象復(fù)雜行為的能力,觀點： 1、交互設(shè)計師不要把全部的精力用于交互設(shè)計的表現(xiàn)層面，而要更多的去考慮交互思想、交互理念的設(shè)計。 2、用戶3步完成一項任務(wù)一定比5步完成這項任務(wù)更加具有可用性嗎？,交互設(shè)計任務(wù)分解舉例,從招聘廣告看交互設(shè)計師,界面交互信息構(gòu)架？,從招聘廣告看

8、用戶體驗分析師,產(chǎn)品設(shè)計流程參考,通過數(shù)據(jù)分析研究，定位產(chǎn)品和用戶,確定用戶群體特征，研究用戶目標(biāo)和行為的關(guān)鍵因素,產(chǎn)品的理念、定位、整體性結(jié)構(gòu)、用戶需求核心,通過用戶調(diào)研，結(jié)合定量、定性分析，為不同目標(biāo)用戶制定不同的產(chǎn)品策略,1、市場研究,2、用戶定位分析,3、產(chǎn)品概念設(shè)計,4、用戶細(xì)分,產(chǎn)品設(shè)計流程,設(shè)計人物角色，建立檔案,針對目標(biāo)用戶，分析功能模塊，確定做什么和不做什么,信息空間的結(jié)構(gòu)、組織、導(dǎo)航、標(biāo)識。通過任務(wù)分解（場景設(shè)計），設(shè)計互動流程,通過用戶現(xiàn)場操作、低保真原型操作等方式做產(chǎn)品的可用性測試,5、人物角色創(chuàng)建,6、功能需求分析,7、信息構(gòu)架、交互設(shè)計,8、可用性測試,產(chǎn)品設(shè)計過程

9、中的交付物,概念階段（concept）階段的交付物：概念文檔（concept document）或者是概念原型（concept prototype） 探索階段（discover） 階段的交付物：提案文檔（Proposal Document） 定義階段（definition） 的交付物：需求文檔（Product Requirement Document），產(chǎn)品概念設(shè)計（Concept Design Meterials） 細(xì)化階段（refinement） 的交付物：產(chǎn)品線框圖（Wireframes）、產(chǎn)品特性清單（Feature List）、最終的原型設(shè)計（可以是任何版本的，例如 HTML、Fla

10、sh或者是專用的原型制作工具）,某工作小組的產(chǎn)品策劃流程,各個階段的交付物形式,舉例：YAHOO產(chǎn)品設(shè)計流程,團(tuán)隊組建 產(chǎn)品經(jīng)理（product manager） 用戶體驗研究員(user researcher) 信息架構(gòu)師(information architect) 視覺設(shè)計師(visual designer)、界面設(shè)計師（user interface designer） 互動設(shè)計師(interaction designer) 工程師(web developer)/ engineer 工作流程 1、產(chǎn)品經(jīng)理制定產(chǎn)品整體構(gòu)架，產(chǎn)品發(fā)展方向等，做全局把控 2、以上人員共同參與產(chǎn)品討論，制定時間

11、表以及任務(wù)分工 3、用戶體驗研究員作產(chǎn)品和用戶等調(diào)查研究 4、信息架構(gòu)師設(shè)計產(chǎn)品信息架構(gòu)、內(nèi)容架構(gòu) 5、互動設(shè)計師設(shè)計互動流程 6、視覺設(shè)計師(visual designer)和user interface designer做視覺設(shè)計 7、web developer把設(shè)計模型通過編寫程序(html, dhtml, JavaScript)等再 現(xiàn)，最后交給工程師 8、用戶體驗研究員需要做用戶測試 9、QA(Quality assurance) 需要測驗產(chǎn)品的操作步驟，確認(rèn)產(chǎn)品的使用質(zhì)量,產(chǎn)品設(shè)計中的棘手問題,我們公司沒有UED、IA、ID、VD，更別說什么UR了，我們?nèi)绾伍_展產(chǎn)品設(shè)計工作？ 網(wǎng)站

12、的行文、界面文字誰來把關(guān)、是PM還是ID，還是誰？ PM和UE的關(guān)系如何界定？ 誰，何時，需要加入產(chǎn)品設(shè)計的概念性階段？ 產(chǎn)品設(shè)計規(guī)范如何確定和執(zhí)行？ 為什么我們產(chǎn)品設(shè)計時間總是不夠用？,缺乏高效的溝通、團(tuán)隊成員對于目標(biāo)的不明確，會導(dǎo)致整體效率的下降，我們要讓團(tuán)隊的成員都清楚： 產(chǎn)品目標(biāo)、工作流程、設(shè)計規(guī)范、日程安排,目錄,UCD和UE/UX的概念和分析,1,產(chǎn)品設(shè)計團(tuán)隊的組建和產(chǎn)品設(shè)計流程,2,產(chǎn)品設(shè)計方法和原型、工具的使用,3,以用戶為中心的設(shè)計方法舉例,卡片分類(Card Sorting)觀察用戶是如何理解內(nèi)容和組織信息，用來幫助你的網(wǎng)站(產(chǎn)品)更合理的組織信息。 情境訪談(Contex

13、tual Interviews)走進(jìn)用戶的現(xiàn)實環(huán)境，讓你了解你的用戶的工作方式，生活環(huán)境等等情況。 焦點小組(Focus Groups)組織一組的用戶進(jìn)行討論，讓你更了解用戶的理解、想法、態(tài)度和想要什么。 啟發(fā)式評估(Heuristic Evaluation)可用性的檢查方法，讓一些行內(nèi)專家對網(wǎng)站產(chǎn)品進(jìn)行指導(dǎo)。,以用戶為中心的設(shè)計方法舉例,單獨訪談(Individual Interviews)一對一的用戶討論,讓你了解某個用戶是如何工作,使你知道用戶的感受,想要什么和他的經(jīng)歷。 平行設(shè)計(Parallel Design)對同一個網(wǎng)站(產(chǎn)品)進(jìn)行分開的設(shè)計，從而比較選擇一個最佳方案。 角色模型(

14、Personas)構(gòu)建一個虛構(gòu)的人來代表大部分用戶，設(shè)計團(tuán)隊圍繞這個虛擬人物設(shè)計開發(fā)產(chǎn)品。 原型(Prototyping)利用簡單網(wǎng)站(產(chǎn)品)原型進(jìn)行相關(guān)的測試，從而節(jié)約后期大量的成本。,以用戶為中心的設(shè)計方法舉例,問卷調(diào)查(Surveys)利用網(wǎng)上或紙張的問題list對用戶進(jìn)行發(fā)放填寫，從而收集用戶對網(wǎng)站(產(chǎn)品)的反饋意見。 任務(wù)分析(Task Analysis)通過任務(wù)分析了解用戶使用你網(wǎng)站(產(chǎn)品)時的目標(biāo)和操作方式，習(xí)慣。 可用性測試(Usability Testing)請用戶來試用你的網(wǎng)站(產(chǎn)品)，有任務(wù)性的完成測試。從而得到你所想要的東西。 用例(Use Cases)描述某個用戶使用

15、你網(wǎng)站(產(chǎn)品)時的情況，包括目標(biāo)和行動。,用戶研究人物角色創(chuàng)建,人物角色（Personas）作為UCD方法中最重要的一個工具 ，是通過創(chuàng)建典型用戶來代表具有不同目標(biāo)的用戶從而滿足具有類似目標(biāo)和需求的用戶群”，介紹了通過角色，產(chǎn)品設(shè)計者可以站在用戶的角度考慮問題，從而把設(shè)計者的注意力集中在用戶需求和目標(biāo)上,用戶研究人物角色創(chuàng)建,用戶定性研究,細(xì)分用戶群,為細(xì)分群體 創(chuàng)建角色,用戶訪談 現(xiàn)場調(diào)查 用例測試 ,用目標(biāo)細(xì)分 用使用周期細(xì)分 用行為和觀點,介紹一種最簡單的人物角色創(chuàng)建方法定性人物角色：,除了定性分析法之外，還有： 經(jīng)定量驗證的定性人物角色 完全的定量人物角色,建立檔案 展示人物角色 融入

16、角色 ,用戶研究人物角色創(chuàng)建,不經(jīng)過分類、邏輯分析的原始用戶數(shù)據(jù)、訪談?wù){(diào)查表本身并沒有什么意義，往往會讓我們陷入細(xì)節(jié)并得到錯誤的結(jié)論 創(chuàng)建角色：人物角色可以時刻提醒我們，要把時間用在滿足我們的目標(biāo)用戶群體上 人物角色可以避免我們基于自己的想法做決策,太夸張,太漂亮,太隱藏,太多干擾,人物角色形象要具有普通代表性，并和人物特性相符合,原型設(shè)計：故事板,* 紙板用于屏幕； * 郵票式張貼用于菜單、對話框和其他的屏幕元素； * 透明的幻燈片用于臨時項目或用戶輸入； * 隱藏的帶子或者其它用于用戶輸入的帶子； * 筆和標(biāo)記（可擦寫標(biāo)記用戶輸入或臨時信息）； * 用來擦除輸入的水； * ,原型設(shè)計，主要

17、是設(shè)計產(chǎn)品的功能、用戶流程、信息架構(gòu)、交互細(xì)節(jié)、頁面元素等 ，它更多的向產(chǎn)品設(shè)計團(tuán)隊的每一位成員傳遞著產(chǎn)品的設(shè)計理念、核心功能、網(wǎng)站結(jié)構(gòu)、基本布局等，但經(jīng)常不包括視覺設(shè)計。原型設(shè)計主要形式：紙質(zhì)、交互式卡片、線框圖、圖形、html、flash等，主要工具有word、visio、DW、photoshop、Axure RP等,紙質(zhì)原型,優(yōu)勢 * 技術(shù)壁壘消失* 更少的辯論時間* 傳達(dá)產(chǎn)品感覺不錯* 比Visual Basic 或者HTML原型制作快速* 廉價* 人人都可以參加設(shè)計紙質(zhì)原型 用戶可以協(xié)同設(shè)計原型或參加之后的測試部分 缺點 *有限的交互不是所有的交互問題可以被充分的測試（例如，某些功能

18、，例如鼠標(biāo)劃過事件給用戶一個反饋無法模擬） *不能評價的響應(yīng)時間* 不得在實際系統(tǒng)中制造模擬數(shù)據(jù)* 不能評估視覺* 需要擺弄大量的紙* 超過3個人的演示是不合適的,圖形原型設(shè)計,VISIO制作的圖形原型（visio、photoshop、illustrator） 優(yōu)點： 效果美觀、清晰 適合做電子歸檔 。 缺點： 制作時間長 不適合現(xiàn)場互動研討 。,線框圖設(shè)計,線框圖(Wireframes)是信息架構(gòu)和交互設(shè)計最重要的交付物之一 ，往往模型設(shè)計要依據(jù)于線框圖。 HTML原型 低保真原型容易制作，用來展示基本交互作用，例如靜態(tài)的html 。它可以用來與用戶“彩排”。 HTML的原型比紙原型更適合檢查設(shè)計的動態(tài)過程；這里的”高保真”的html樣機(jī)已經(jīng)包含視覺設(shè)計的元素,線框圖(Wireframes)是信息架構(gòu)和交互設(shè)計最重要的交付物之一,產(chǎn)品設(shè)計過程的工具使用舉例,產(chǎn)品從設(shè)計到發(fā)布的六個階段,概念階段,concept,discov