從用戶角度進行產(chǎn)品設(shè)計.ppt

從用戶的角度進行產(chǎn)品設(shè)計 信息咨詢部翟天驕2010 08 31 2 what why how 如果一個產(chǎn)品很難用 我就不會經(jīng)常使用 如果一個產(chǎn)品我不需要 我就不會用 Focusontheuser andallelsewillfollow 以用戶為中心 其他一切紛至沓來 不同的人不同的理解 不同的需求不同的設(shè)計 不同的設(shè)計不同的效果 心理模型 表現(xiàn)模型 實現(xiàn)模型 容易使用 體驗良好 記憶負擔 體驗較差 最好的技術(shù)是消失在生活當中的技術(shù) 8 what why how 以用戶為中心的Web設(shè)計的流程和用戶體驗的要素 AJAX之父 的JesseJamesGarrett在2000年提出 產(chǎn)品設(shè)計 市場調(diào)研需求分析詳細設(shè)計 研發(fā)發(fā)產(chǎn)品 軟件 網(wǎng)站 建房子 土木工程師 裝修設(shè)計師 建筑設(shè)計師 程序設(shè)計 設(shè)計 交互設(shè)計 軟件設(shè)計的藝術(shù) TerryWinograd 2004年度的ACM人機交互院士 名稱解釋 UI userinterfacedesigner 用戶界面設(shè)計人員UE UserExperience 用戶體驗并不是指產(chǎn)品本身是如何工作的 而是指產(chǎn)品如何和外界聯(lián)系并發(fā)揮作用 也就是人們?nèi)绾?接觸 或者 使用 它 是指用戶在訪問平臺的過程中的全部體驗 它包括平臺是否有用 疑惑或者bug程度 功能是否易用 簡約 界面設(shè)計和交互設(shè)計是否友好等方面 UCD UserCenteredDesign 以用戶為中心的設(shè)計 12 what why how 設(shè)計者怎么想 需求集合 功能集合 出水寫字 保護筆芯的筆蓋 顏色墨水 易擦墨水 寫字 長久的寫字 標識不同內(nèi)容 寫新的內(nèi)容 能當發(fā)簪 變形金剛 要了解人 從而了解用戶 更要習慣站在用戶的角度看問題 他們要 隨時隨地變成用戶 產(chǎn)品功能重排 口碑相傳的產(chǎn)品設(shè)計之道 核心能力和速度交互體貼細致 視覺簡潔清爽高端用戶的關(guān)注如何在良好口碑下持續(xù)增加功能 要了解人 從而了解用戶 更要習慣站在用戶的角度看問題 他們要 隨時隨地變成用戶 產(chǎn)品規(guī)劃的流程定義 產(chǎn)品規(guī)劃流程對市場走勢及客戶需求進行分析 創(chuàng)建合理的市場細分規(guī)則 對要投資和取得領(lǐng)先地位的細分市場進行選擇和優(yōu)先級排序 從而制定可執(zhí)行的業(yè)務(wù)計劃 并驅(qū)動新產(chǎn)品包的開發(fā) 用戶需求分析法 例 QQ秀 如何排定產(chǎn)品功能的優(yōu)先級 各個功能本身并無 優(yōu)先級 可言 對一支筆來說 寫字 和 當作發(fā)簪 這兩個需求是平等的 但是產(chǎn)品在不同的階段有不同的目標和不同的現(xiàn)實情況 這就成為判定產(chǎn)品功能優(yōu)先級的唯一標準 市場分析 用戶分析 需求分析 小案例 用戶需求優(yōu)先級排序 QQ發(fā)布第一個版本時 有以下用戶需求 卡通頭像QQ表情聊天記錄管理器看誰在線上安全性傳文件 很小的 exe文件視頻聊天室語音反應速度快 請從中選出最重要的三項 發(fā)布QQ1 0 別讓我思考 Don tMakeMeThink 網(wǎng)站可用性三大定律 人們使用WEB的幾個事實 不是閱讀 而是掃描 總是很忙 不必閱讀所有的內(nèi)容 善于掃描不做最佳選擇 而是滿意即可 總是很忙碌 如同消防員不追根究底 而是勉強應付 如果發(fā)現(xiàn)某個東西能用 我們會一直用它 用戶瀏覽網(wǎng)站不是在閱讀 而是掃描 注意力是有限的 過多的內(nèi)容 不追根究底 而是勉強應付 Krug可用性三大定律 別讓我思考 Don tmakemethink 要點擊多少次都沒關(guān)系 只要每次點擊都是無須思考 明確無誤的選擇 去掉每個頁面上一半的文字 然后把剩下的文字再去掉一半 Krug可用性第一定律 別讓我思考 Don tmakemethink 網(wǎng)頁應該設(shè)計得不言而喻網(wǎng)頁避免強迫用戶思考的地方如果做不到一切不言而喻 起碼做到讓頁面自我解釋 麥當勞兩則 強迫我們思考的地方 1 強迫我們思考的地方 2 卓越網(wǎng)和當當網(wǎng)的搜索框 當當網(wǎng)2006年1月1日首頁快照 什么是頁面的自我解釋 頁面的自我解釋即用戶對頁面稍加學習就可以明白 用戶能夠更加專注于他要做的事情 特別是在進行一些嶄新的 開拓性或者非常復雜的頁面設(shè)計時 也許只能做到自我解釋 Self explanatory 返回 Krug可用性第二定律 要點擊多少次都沒關(guān)系 只要每次點擊都是無須思考 明確無誤的選擇 用戶的挫折感限度不取決于到達相關(guān)網(wǎng)頁所需要的點擊數(shù)而是點擊的困難程度 經(jīng)驗準則 一次需要思考的點擊等于三次無須思考的點擊 例子 Krug可用性第三定律 去掉每個頁面上一半的文字 然后把剩下的文字再去掉一半 有力的文字都是簡潔的 必須消滅歡迎詞 必須消滅指示性文字 MicrosoftTechNet歡迎詞 中國建設(shè)銀行反饋表單指示性文字 可用性實踐中需要注意的問題 導航條 頁頭 頁尾 頁內(nèi) 主頁團隊中可用性的討論 可用性實踐中需要注意的問題 導航條作用幫助找到想要的 告訴我們?nèi)绾问褂镁W(wǎng)站給人固定的感覺告訴我們身在何處注意事項 導航條 頁頭 頁尾 頁內(nèi) Bearlookingatmapofparkwithsign Youarehere 導航條設(shè)計時需要注意 網(wǎng)站的每一頁 表單可能例外 都需要導航次級導航都應該有返回首頁的鏈接頁面名稱應該醒目 自我解釋 要提供簡潔 沒有無關(guān)選項的搜索框優(yōu)秀的導航條示例 Amazon B Amazon COM導航條 B導航條 可用性實踐中需要注意的問題 主頁主頁的作用主頁需要額外考慮的問題 主頁的作用 準確 快速的傳達一個整體形象網(wǎng)站的標識和起點內(nèi)容更新導讀服務(wù)以及搜索的入口返回 準確 快速的傳達一個整體形象 主頁要做到這點必須清晰的回答四個問題這是什么網(wǎng)站 網(wǎng)站上面有什么 我能在這里干什么 為什么我應該在這而不是在別的地方 返回 主頁需要額外考慮的問題 每個人都想占一席之地想要參與的人太多設(shè)計要滿足所有人返回 站點的標識和口號 沒有什么比得上一個好口號每天五分鐘 給思想加油 理性 建設(shè)性 可用性實踐中需要注意的問題 團隊中可用性的討論現(xiàn)狀 無休止的信仰大戰(zhàn)本質(zhì) 浪費時間關(guān)鍵 沒有什么所謂的普通用戶唯一改變的方法 用戶體驗測試 團隊中可用性的討論 可用性最佳實踐 提供增大網(wǎng)頁字體的選項 國內(nèi)網(wǎng)站 為每張圖片增加ALT文本用戶不可能在一個界面中接受過多信息 而且信息量和頁面長度不是正比關(guān)系 為每張圖片增加ALT文本 返回 交互設(shè)計 Don tmakemethink 返回 的位置和做法很重要 這是整個QQMail的交互的 樞紐 如同圍棋中的 玉柱 也定義了郵箱的交互風格 幫用戶自動選中 在輸入獨立密碼或加密folder輸入密碼時錯誤后 應該把輸入框內(nèi)的內(nèi)容select上 這樣就可以直接打入而不用清除了光標定位 之前的點 回復 時光標focus到正文的問題改好了 但卻沒有注意到點 轉(zhuǎn)發(fā) 時光標 反而應是在 收件人 處而不是正文處 因為一般總要填寫轉(zhuǎn)發(fā)人 而回復 包括回復全部 則是直接輸入內(nèi)容 交互設(shè)計 符合用戶習慣與預期 類Outlook客戶端操作 但比它做得更優(yōu)秀先字母排序 再優(yōu)先顯示最近聯(lián)系人 減少鍵盤操作 這么細的體驗 但一旦用上 就覺得別的同類產(chǎn)品很粗糙了 VS 交互設(shè)計 符合用戶習慣與預期 兼容客戶端郵件菜單習慣在用TT或QQ TM RTX截屏后的圖 mail原來在寫信時用Ctrl V可以貼出來 但右鍵則不能 不要隨意去掉用戶正在使用的功能原來mail在做出了 HTML方式查看 后 去掉了 打開 功能符合用戶預期 點擊其他地方 WEBQQ的浮動窗口隱藏到固定位置 交互設(shè)計 適時的提醒 沒必要的提醒不需要出現(xiàn)而適時出現(xiàn)的提示或功能 用得好 不但不會騷擾用戶 還是對用戶的細致的關(guān)懷 當未讀郵件過多時 提示刪除歷史郵件 數(shù)字和字母帳號不同方式 圖片驗證旁提示 不區(qū)分大小寫 細節(jié)中體現(xiàn)體貼 修改前修改后 交互設(shè)計 操作便利 鼠標響應區(qū)域的大小 靈敏度和精確度 直接影響操作體驗示例 QQMail 業(yè)務(wù)導航區(qū) QQ音樂QQ影音的快捷播放按鈕 最初的設(shè)計改為方形擴大點擊區(qū)域 考慮性能去掉按鈕顯示最初的設(shè)計優(yōu)化后最后鼠標動作需要精確的判斷 捕捉用戶意圖 如 QQ影音的鼠標左鍵點擊的精確判斷 左鍵單擊畫面可以移動窗口沒有移動窗口時左鍵彈起才暫停畫面 移動范圍少于一定數(shù)值算暫停右鍵菜單出現(xiàn)后的左擊畫面不執(zhí)行暫停 視為取消右鍵菜單 視覺設(shè)計 制定規(guī)范 維持統(tǒng)一 文字使用要規(guī)范 語法 大小 顏色 大小寫都需要注意能用一個詞表達的 不用一句話 能用一句話表達清楚的 不用兩句話每個概念都只有唯一一種表達 如 VIP 的概念能用一種字體顏色的 不多用一種顏色能用一種字體大小的 不多用一種大小用標準組件能用標準控件的 不自己畫控件 一個button 就有focused selected up down enabled disabled tab順序等多種狀態(tài)要畫和處理 不容易的 而且要考慮瀏覽器兼容 能用文字的 不用圖片 加圖片是要申請的 保持盡可能少的格式式樣維持統(tǒng)一就算字體和行間距等小細節(jié)都應該關(guān)注到英文字體Tahoma 視覺設(shè)計 重點突出 每個頁面 板塊 只有一塊視覺重點 并且 突出重點 不讓用戶去找 原來的設(shè)計排版不對 有一橫條的壓著的情況黃色塊就不能加框 視覺會很繁雜看著不舒服 句號也是多余的原來方案目前方案 Pony 在設(shè)置了獨立密碼的情況下 當?shù)顷懙叫枰斎氇毩⒚艽a時 總是先出來輸入框 此時已可輸入 我經(jīng)常是立刻輸入 但打了幾個字母后上面 才瞬間出現(xiàn)上面的黃色提醒 請輸入獨立保護密碼 而會導致輸入框位置立刻下壓 比較影響輸入 最好能改一改html里的結(jié)構(gòu) 能夠快速讓人立刻輸入 越快越好 的基礎(chǔ)上 其他顯示的可以慢些load到但不應影響其他部件的改變 總結(jié) 需要關(guān)注的用戶體驗 交互設(shè)計Don tmakemethink符合用戶習慣與預期做適時的提醒不強迫用戶選擇最佳方案操作便利視覺設(shè)計傳播產(chǎn)品理念大氣成熟 干凈整潔 工具化規(guī)范與統(tǒng)一重點突出防止不恰當?shù)牡妄g化 產(chǎn)品設(shè)計口碑傳播少即是多兼容性無所不用其極關(guān)注性能和速度抓住高端用戶大氣的設(shè)計滿足用戶個性化需求尋求差異運營不穩(wěn)定會 功虧一簣 跟蹤用戶定位問題抗災容災能力 如何關(guān)注 把自己想象成一個遲鈍 挑剔 易怒的傻瓜來使用產(chǎn)品抓主要矛盾 重點關(guān)注最常使用的交互點產(chǎn)品經(jīng)理有前臺和后臺技術(shù)背景 有助于設(shè)計的