從用戶角度進(jìn)行設(shè)計(jì)課件

從用戶的角度進(jìn)行產(chǎn)品設(shè)計(jì)信息咨詢部翟天驕2010.08.312whatwhyhow如果一個(gè)產(chǎn)品很難用，我就不會(huì)經(jīng)常使用如果一個(gè)產(chǎn)品我不需要，我就不會(huì)用不同的人

不同的理解不同的需求不同的設(shè)計(jì)不同的設(shè)計(jì)不同的效果心理模型表現(xiàn)模型實(shí)現(xiàn)模型容易使用，體驗(yàn)良好記憶負(fù)擔(dān)，體驗(yàn)較差最好的技術(shù)是消失在生活當(dāng)中的技術(shù)8whatwhyhow產(chǎn)品設(shè)計(jì)市場(chǎng)調(diào)研需求分析詳細(xì)設(shè)計(jì)研發(fā)發(fā)產(chǎn)品（軟件、網(wǎng)站）建房子土木工程師裝修設(shè)計(jì)師建筑設(shè)計(jì)師程序設(shè)計(jì)ＵＩ設(shè)計(jì)交互設(shè)計(jì)——《軟件設(shè)計(jì)的藝術(shù)》TerryWinograd(2004年度的ACM人機(jī)交互院士)12whatwhyhow設(shè)計(jì)者怎么想需求集合功能集合出水寫字保護(hù)筆芯的筆蓋顏色墨水易擦墨水產(chǎn)品寫字長(zhǎng)久的寫字標(biāo)識(shí)不同內(nèi)容寫新的內(nèi)容用戶能當(dāng)發(fā)簪變形金剛？？？要了解人，從而了解用戶，更要習(xí)慣站在用戶的角度看問題。他們要“隨時(shí)隨地變成用戶”產(chǎn)品功能重排

口碑相傳的產(chǎn)品設(shè)計(jì)之道

核心能力和速度交互體貼細(xì)致，視覺簡(jiǎn)潔清爽高端用戶的關(guān)注如何在良好口碑下持續(xù)增加功能要了解人，從而了解用戶，更要習(xí)慣站在用戶的角度看問題。他們要“隨時(shí)隨地變成用戶”產(chǎn)品規(guī)劃的流程定義產(chǎn)品規(guī)劃流程對(duì)市場(chǎng)走勢(shì)及客戶需求進(jìn)行分析，創(chuàng)建合理的市場(chǎng)細(xì)分規(guī)則，對(duì)要投資和取得領(lǐng)先地位的細(xì)分市場(chǎng)進(jìn)行選擇和優(yōu)先級(jí)排序，從而制定可執(zhí)行的業(yè)務(wù)計(jì)劃，并驅(qū)動(dòng)新產(chǎn)品包的開發(fā)。過程交付件對(duì)應(yīng)產(chǎn)品階段用戶需求收集產(chǎn)品候選概念用戶需求分析和PK階段市場(chǎng)分析市場(chǎng)評(píng)估報(bào)告制定規(guī)劃產(chǎn)品路標(biāo)規(guī)劃書制定綜合FeatureList和規(guī)劃PPT例撰寫策劃產(chǎn)品需求規(guī)格說明書產(chǎn)品需求說明書例制定業(yè)務(wù)計(jì)劃產(chǎn)品業(yè)務(wù)計(jì)劃書開發(fā)階段？用戶需求分析法（例：QQ秀）要素細(xì)分項(xiàng)目對(duì)應(yīng)騰訊產(chǎn)品的元素$價(jià)格設(shè)計(jì)、可生產(chǎn)性、技術(shù)、原材料、生產(chǎn)、供應(yīng)商、制造、元件、人力成本、管理費(fèi)用、裝備付費(fèi)Item的價(jià)格/包月價(jià)格A安全/質(zhì)量行銷、銷售、渠道、分配、交貨期、廣告、配置、定價(jià)、客戶定制客服/投訴的響應(yīng)P性能功能、吸引力、規(guī)格、功率、速度、容量、適應(yīng)性、多功能、尺寸用得爽不爽P包裝風(fēng)格、尺寸、數(shù)量、幾何設(shè)計(jì)、模塊性、體系結(jié)構(gòu)、界面、機(jī)械結(jié)構(gòu)、同一性、圖形、包含的/不包含的頁面好看不好看E易用用戶友好、操縱控制、顯示、人類工程學(xué)、培訓(xùn)、文檔、幫助系統(tǒng)、人為因素、接口、操作UI（界面操作性）A可獲得性可靠性、質(zhì)量、安全性、誤差極限、完整性、強(qiáng)度、適應(yīng)性、動(dòng)態(tài)特性、負(fù)荷量、冗余Q幣購(gòu)買/充值渠道L生命周期成本壽命、正常運(yùn)行/停工時(shí)間、保險(xiǎn)、責(zé)任、可維護(hù)性、服務(wù)、備件、移植通道、標(biāo)準(zhǔn)化、基礎(chǔ)設(shè)施、運(yùn)轉(zhuǎn)成本、安裝成本Item有效期S社會(huì)接受程度間接影響、顧問、采購(gòu)代理商、標(biāo)準(zhǔn)組織、政府、社會(huì)認(rèn)可程度、法律關(guān)系、政治、股東、管理層、工人、工作場(chǎng)所同齡人認(rèn)可度/流行度市場(chǎng)分析用戶分析小案例：用戶需求優(yōu)先級(jí)排序QQ發(fā)布第一個(gè)版本時(shí)，有以下用戶需求：卡通頭像QQ表情聊天記錄管理器看誰在線上安全性傳文件很小的.exe文件視頻聊天室語音反應(yīng)速度快請(qǐng)從中選出最重要的三項(xiàng)，發(fā)布QQ1.0。？別讓我思考(Don’tMakeMeThink)網(wǎng)站可用性三大定律用戶瀏覽網(wǎng)站不是在閱讀，而是掃描注意力是有限的過多的內(nèi)容。。。不追根究底，而是勉強(qiáng)應(yīng)付Krug可用性三大定律別讓我思考(Don'tmakemethink)要點(diǎn)擊多少次都沒關(guān)系，只要每次點(diǎn)擊都是無須思考，明確無誤的選擇。

去掉每個(gè)頁面上一半的文字，然后把剩下的文字再去掉一半。Krug可用性第一定律別讓我思考(Don'tmakemethink)網(wǎng)頁應(yīng)該設(shè)計(jì)得不言而喻網(wǎng)頁避免強(qiáng)迫用戶思考的地方如果做不到一切不言而喻，起碼做到讓頁面自我解釋麥當(dāng)勞兩則強(qiáng)迫我們思考的地方(1)強(qiáng)迫我們思考的地方(2)卓越網(wǎng)和當(dāng)當(dāng)網(wǎng)的搜索框當(dāng)當(dāng)網(wǎng)2006年1月1日首頁快照什么是頁面的自我解釋？頁面的自我解釋即用戶對(duì)頁面稍加學(xué)習(xí)就可以明白，用戶能夠更加專注于他要做的事情。特別是在進(jìn)行一些嶄新的，開拓性或者非常復(fù)雜的頁面設(shè)計(jì)時(shí)，也許只能做到自我解釋(Self-explanatory)。返回Krug可用性第二定律要點(diǎn)擊多少次都沒關(guān)系，只要每次點(diǎn)擊都是無須思考，明確無誤的選擇。用戶的挫折感限度不取決于到達(dá)相關(guān)網(wǎng)頁所需要的點(diǎn)擊數(shù)而是點(diǎn)擊的困難程度。經(jīng)驗(yàn)準(zhǔn)則：一次需要思考的點(diǎn)擊等于三次無須思考的點(diǎn)擊。例子Krug可用性第三定律去掉每個(gè)頁面上一半的文字，然后把剩下的文字再去掉一半。有力的文字都是簡(jiǎn)潔的。必須消滅歡迎詞，必須消滅指示性文字。MicrosoftTechNet

歡迎詞中國(guó)建設(shè)銀行反饋表單指示性文字可用性實(shí)踐中需要注意的問題導(dǎo)航條(頁頭，頁尾，頁內(nèi))主頁團(tuán)隊(duì)中可用性的討論可用性實(shí)踐中需要注意的問題導(dǎo)航條作用幫助找到想要的，告訴我們?nèi)绾问褂镁W(wǎng)站給人固定的感覺告訴我們身在何處注意事項(xiàng)導(dǎo)航條(頁頭，頁尾，頁內(nèi))Bearlookingatmapofparkwithsign"Youarehere"導(dǎo)航條設(shè)計(jì)時(shí)需要注意網(wǎng)站的每一頁(表單可能例外)都需要導(dǎo)航次級(jí)導(dǎo)航都應(yīng)該有返回首頁的鏈接頁面名稱應(yīng)該醒目(自我解釋)要提供簡(jiǎn)潔，沒有無關(guān)選項(xiàng)的搜索框優(yōu)秀的導(dǎo)航條示例:Amazon,BAmazon.COM導(dǎo)航條B導(dǎo)航條可用性實(shí)踐中需要注意的問題主頁主頁的作用主頁需要額外考慮的問題主頁的作用準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象網(wǎng)站的標(biāo)識(shí)和起點(diǎn)內(nèi)容更新導(dǎo)讀服務(wù)以及搜索的入口返回準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象主頁要做到這點(diǎn)必須清晰的回答四個(gè)問題這是什么網(wǎng)站？網(wǎng)站上面有什么？我能在這里干什么？為什么我應(yīng)該在這而不是在別的地方？返回主頁需要額外考慮的問題每個(gè)人都想占一席之地想要參與的人太多設(shè)計(jì)要滿足所有人返回站點(diǎn)的標(biāo)識(shí)和口號(hào)沒有什么比得上一個(gè)好口號(hào)每天五分鐘，給思想加油。()理性，建設(shè)性。()可用性實(shí)踐中需要注意的問題團(tuán)隊(duì)中可用性的討論現(xiàn)狀：無休止的信仰大戰(zhàn)本質(zhì)：浪費(fèi)時(shí)間關(guān)鍵：沒有什么所謂的普通用戶唯一改變的方法：用戶體驗(yàn)測(cè)試團(tuán)隊(duì)中可用性的討論可用性最佳實(shí)踐提供增大網(wǎng)頁字體的選項(xiàng)(國(guó)內(nèi)網(wǎng)站…)為每張圖片增加ALT文本用戶不可能在一個(gè)界面中接受過多信息，而且信息量和頁面長(zhǎng)度不是正比關(guān)系為每張圖片增加ALT文本<imgsrc="" alt="鳳凰網(wǎng)網(wǎng)站圖標(biāo)LOGO"/>返回交互設(shè)計(jì)—Don'tmakemethink“返回”的位置和做法很重要：這是整個(gè)QQMail的交互的“樞紐”，如同圍棋中的“玉柱”，也定義了郵箱的交互風(fēng)格。幫用戶自動(dòng)選中：在輸入獨(dú)立密碼或加密folder輸入密碼時(shí)錯(cuò)誤后，應(yīng)該把輸入框內(nèi)的內(nèi)容select上，這樣就可以直接打入而不用清除了光標(biāo)定位：之前的點(diǎn)"回復(fù)"時(shí)光標(biāo)focus到正文的問題改好了,但卻沒有注意到點(diǎn)"轉(zhuǎn)發(fā)"時(shí)光標(biāo),反而應(yīng)是在"收件人"處而不是正文處,因?yàn)橐话憧傄顚戅D(zhuǎn)發(fā)人,而回復(fù)(包括回復(fù)全部)則是直接輸入內(nèi)容.交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期類Outlook客戶端操作，但比它做得更優(yōu)秀先字母排序，再優(yōu)先顯示最近聯(lián)系人，減少鍵盤操作。這么細(xì)的體驗(yàn)，但一旦用上，就覺得別的同類產(chǎn)品很粗糙了！VS交互設(shè)計(jì)—符合用戶習(xí)慣與預(yù)期兼容客戶端郵件菜單習(xí)慣在用TT或QQ/TM/RTX截屏后的圖,mail原來在寫信時(shí)用Ctrl-V可以貼出來，但右鍵則不能。不要隨意去掉用戶正在使用的功能原來mail在做出了“HTML方式查看”后，去掉了“打開”功能符合用戶預(yù)期，點(diǎn)擊其他地方，WEBQQ的浮動(dòng)窗口隱藏到固定位置交互設(shè)計(jì)—適時(shí)的提醒沒必要的提醒不需要出現(xiàn)而適時(shí)出現(xiàn)的提示或功能，用得好，不但不會(huì)騷擾用戶，還是對(duì)用戶的細(xì)致的關(guān)懷（當(dāng)未讀郵件過多時(shí)，提示刪除歷史郵件）數(shù)字和字母帳號(hào)不同方式；圖片驗(yàn)證旁提示“不區(qū)分大小寫”，細(xì)節(jié)中體現(xiàn)體貼;

修改前修改后交互設(shè)計(jì)—操作便利鼠標(biāo)響應(yīng)區(qū)域的大小，靈敏度和精確度，直接影響操作體驗(yàn)示例：QQMail，業(yè)務(wù)導(dǎo)航區(qū)，QQ音樂QQ影音的快捷播放按鈕：最初的設(shè)計(jì)改為方形擴(kuò)大點(diǎn)擊區(qū)域，考慮性能去掉按鈕顯示

最初的設(shè)計(jì)優(yōu)化后最后鼠標(biāo)動(dòng)作需要精確的判斷，捕捉用戶意圖（如：QQ影音的鼠標(biāo)左鍵點(diǎn)擊的精確判斷）左鍵單擊畫面可以移動(dòng)窗口沒有移動(dòng)窗口時(shí)左鍵彈起才暫停畫面，移動(dòng)范圍少于一定數(shù)值算暫停右鍵菜單出現(xiàn)后的左擊畫面不執(zhí)行暫停，視為取消右鍵菜單視覺設(shè)計(jì)—制定規(guī)范，維持統(tǒng)一文字使用要規(guī)范，語法，大小，顏色，大小寫都需要注意能用一個(gè)詞表達(dá)的，不用一句話。能用一句話表達(dá)清楚的，不用兩句話每個(gè)概念都只有唯一一種表達(dá)。如”VIP”的概念能用一種字體顏色的，不多用一種顏色能用一種字體大小的，不多用一種大小用標(biāo)準(zhǔn)組件能用標(biāo)準(zhǔn)控件的，不自己畫控件

（一個(gè)button，就有focused,selected,up/down,enabled/disabled,tab順序等多種狀態(tài)要畫和處理，不容易的，而且要考慮瀏覽器兼容）能用文字的，不用圖片（加圖片是要申請(qǐng)的）保持盡可能少的格式式樣維持統(tǒng)一就算字體和行間距等小細(xì)節(jié)都應(yīng)該關(guān)注到英文字體Tahoma視覺設(shè)計(jì)—重點(diǎn)突出每個(gè)頁面（板塊）只有一塊視覺重點(diǎn)。并且，突出重點(diǎn)，不讓用戶去找。原來的設(shè)計(jì)排版不對(duì)，有一橫條的壓著的情況黃色塊就不能加框，視覺會(huì)很繁雜看著不舒服，句號(hào)也是多余的原來方案目前方案·Pony：在設(shè)置了獨(dú)立密碼的情況下,當(dāng)?shù)顷懙叫枰斎氇?dú)立密碼時(shí),總是先出來輸入框,此時(shí)已可輸入,我經(jīng)常是立刻輸入,但打了幾個(gè)字母后上面,才瞬間出現(xiàn)上面的黃色提醒"請(qǐng)輸入獨(dú)立保護(hù)密碼",而會(huì)導(dǎo)致輸入框位置立刻下壓,比較影響輸入.最好能改一改html里的結(jié)構(gòu),能夠快速讓人立刻輸入(越快越好)的基礎(chǔ)上,其他顯示的可以慢些load到但不應(yīng)影響其他部件的改變.總結(jié)：需要關(guān)注的用戶體驗(yàn)交互設(shè)計(jì)Don'tmakemethink符合用戶習(xí)慣與預(yù)期做適時(shí)的提醒不強(qiáng)迫用戶選擇最佳方案操作便利視覺設(shè)計(jì)傳播產(chǎn)品理念大氣成熟，干凈整潔，工具化規(guī)范與統(tǒng)一重點(diǎn)突出防止不恰當(dāng)?shù)牡妄g化產(chǎn)品設(shè)計(jì)口碑傳播少即是多兼容性無所不用其極關(guān)注性能和速度抓住高端用戶大氣的設(shè)計(jì)滿足用戶個(gè)性化需求尋求差異運(yùn)營(yíng)不穩(wěn)定會(huì)“功虧一簣”跟蹤用戶定位問題抗災(zāi)容災(zāi)能力如何關(guān)注把自己想象成一個(gè)遲鈍、挑剔、易怒的傻瓜來使用產(chǎn)品抓主要矛盾，重點(diǎn)關(guān)注最常使用的交互點(diǎn)產(chǎn)品經(jīng)理有前臺(tái)和后臺(tái)技