用戶體驗與交互設(shè)計及案例介紹

1、Better User Experience Colourful Future用戶體驗、交互設(shè)計及案例介紹王志軍 2010 /10/23幾張看似不相關(guān)的圖片幾個網(wǎng)站主要內(nèi)容 用戶體驗？交互設(shè)計？設(shè)計？ 實現(xiàn)模型和心理模型 用戶體驗與交互設(shè)計基本原則介紹 交互細節(jié)案例介紹 小任務(wù) 交互設(shè)計所需要技能概念區(qū)分 用戶體驗：UE 用戶體驗并不是指產(chǎn)品本身是如何工作的，而是指產(chǎn)品如何和外界聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾巍敖佑|“或者“使用”它。 Web中的用戶體驗是指用戶在訪問平臺的過程中的全部體驗，它包括平臺是否有用，疑惑或者bug程度，功能是否易用、簡約，界面設(shè)計和交互設(shè)計是否友好等方面。用戶體驗的核

2、心是UCD，即“以用戶為中心的設(shè)計”。 “AJAX之父”的Jesse James Garrett早在2000年就提出了以用戶為中心的Web設(shè)計的流程和用戶體驗的要素交互設(shè)計 交互：用戶通過某種方式發(fā)出指令，且系統(tǒng)對此作出相應(yīng)的反應(yīng) 交互設(shè)計是關(guān)于創(chuàng)建新的用戶體驗的問題，目的在于增強和擴充人們的工作、通信及交互方式，使他們能夠更加有效地進行日常工作和學(xué)習(xí)。UI設(shè)計 User Interface Design 用戶界面設(shè)計，在很大程度上就是在探討如何讓產(chǎn)品的界面更加具有可用性，如何讓用戶有更良好的體驗。這是一種優(yōu)化后的界面，通過這種界面，用戶能更方面地完成任務(wù)，獲得良好的感覺。 例如：一個按鈕的設(shè)

3、計，美工設(shè)計考慮如何好看，而用戶界面設(shè)計師則考慮按鈕如何擺放，上面顯示什么文字，甚至到底要不要這個按鈕的問題。軟件設(shè)計，設(shè)計，交互設(shè)計 軟件設(shè)計的藝術(shù)Terry Winograd (2004年度的ACM人機交互院士)開發(fā)軟件建房子土木工程師裝修設(shè)計師建筑設(shè)計師軟件設(shè)計設(shè)計交互設(shè)計實現(xiàn)模型和心理模型心理模型表現(xiàn)模型實現(xiàn)模型容易使用，體驗良好記憶負擔(dān)，體驗較差最好的技術(shù)是消失在生活當中的技術(shù)幾個通用的原則 就進設(shè)計原則對功能進行恰當?shù)姆诸惡徒M織幫助用戶探索和嘗試允許用戶犯錯誤 讓用戶可以撤銷動作 在執(zhí)行具體的破壞性操作中要求用戶確認。提供實用的幫助 設(shè)計幫助系統(tǒng) 入門和學(xué)習(xí)部分 使用指南 參考手冊

4、 疑難解答 術(shù)語解釋 語言表達：采用具體的例子，幫助用戶理解 表達方式：按照使用流程來。設(shè)計一個優(yōu)秀的向?qū)浇缑鎺椭脩舾咝У赝瓿刹僮髦С峙幚聿僮鳎╣oogle的picasa圖像處理軟件）提高常用操作的效率4A中的作業(yè)模塊布置手工作業(yè)流程使界面符合用戶的使用習(xí)慣 被動調(diào)整策略：例如功能定制，界面定制 主動自適應(yīng)調(diào)整策略：例如sogou拼音輸入法 根據(jù)其他用戶的使用行為來主動進行自適應(yīng)調(diào)整 購物網(wǎng)中，購買這本書的用戶還購買了以下書， 在長尾理論中安德森叫過濾器法則，它是長尾現(xiàn)象形成的一個因素 介于主動自適應(yīng)和被動調(diào)整之間的混合策略減少用戶在使用軟件時出現(xiàn)錯誤（一） 讓用戶能有效地看出或者知道如

5、何進行正確操作 減少用戶記憶的負擔(dān)； 自然匹配和預(yù)設(shè)用途； 盡可能采取一致性的設(shè)計 采用限制級因素防止用戶出錯減少用戶在使用軟件時出現(xiàn)錯誤（一） 利用某種方式提醒用戶可能出錯 如何設(shè)置出錯信息 不要只告訴用戶操作無法完成或者操作失敗 不要僅僅給出出錯代碼，還應(yīng)當給出該錯誤的含義 不要在出錯信息中使用用戶無法理解的術(shù)語 錯誤要盡可能明確 錯誤信息要有建設(shè)性，要讓用戶看出怎樣才是正確的 不要給出誤導(dǎo)性的出錯信息 向用戶提出解決問題的建議減少用戶的等待感 Robert B miller 1968 Response time in man-computer conversational transac

6、tions 0.1秒鐘、1秒鐘、10秒鐘總結(jié) 就進設(shè)計原則 對功能進行組織和分類 幫助用戶探索和嘗試 允許用戶犯錯 提供實用的幫助 設(shè)計一個優(yōu)秀的向?qū)Ы缑?使界面符合用戶的使用習(xí)慣 減少用戶出錯 減少等待感交互細節(jié)案例介紹案例一 Tecent 交互設(shè)計Dont make me think “返回”的位置和做法很重要：這是整個QQMail的交互的“樞紐”，如同圍棋中的“玉柱”，也定義了郵箱的交互風(fēng)格。 幫用戶自動選中：在輸入獨立密碼或加密folder輸入密碼時錯誤后，應(yīng)該把輸入框內(nèi)的內(nèi)容select上，這樣就可以直接打入而不用清除了 光標定位：之前的點回復(fù)時光標focus到正文的問題改好了,但卻

7、沒有注意到點轉(zhuǎn)發(fā)時光標,反而應(yīng)是在收件人處而不是正文處, 因為一般總要填寫轉(zhuǎn)發(fā)人, 而回復(fù)(包括回復(fù)全部)則是直接輸入內(nèi)容.交互設(shè)計符合用戶習(xí)慣與預(yù)期 先字母排序，再優(yōu)先顯示最近聯(lián)系人，減少鍵盤操作。交互設(shè)計符合用戶習(xí)慣與預(yù)期 兼容客戶端郵件菜單習(xí)慣在用TT或QQ/TM/RTX截屏后的圖,mail原來在寫信時用Ctrl-V可以貼出來，但右鍵則不能。 不隨意去掉用戶正在使用的功能原來mail在做出了“HTML方式查看”后，去掉了“打開”功能 符合用戶預(yù)期點擊其他地方，WEBQQ的浮動窗口隱藏到固定位置交互設(shè)計適時的提醒 沒必要的提醒不需要出現(xiàn) 而適時出現(xiàn)的提示或功能，用得好，不但不會騷擾用戶，還

8、是對用戶的細致的關(guān)懷交互設(shè)計操作便利 QQ魔法表情交互設(shè)計操作便利 問卷星的設(shè)計頁面視覺設(shè)計制定規(guī)范，維持統(tǒng)一 文字使用要規(guī)范，語法，大小，顏色，大小寫都需要注意 能用一個詞表達的，不用一句話。能用一句話表達清楚的，不用兩句話 每個概念都只有唯一一種表達。如”VIP”的概念 能用一種字體顏色的，不多用一種顏色 能用一種字體大小的，不多用一種大小視覺設(shè)計防止不恰當?shù)牡妄g化在追求“簡單”的過程中，QQMail不知不覺的變得“中性”、“成熟”化。當我們更加理性和嚴謹?shù)卦O(shè)計產(chǎn)品的時候，自然會遠離“低齡”傾向?！俺墒臁痹醋院侠淼脑O(shè)計，“低齡”源自不合常理的設(shè)計。 不恰當?shù)牡妄g化交互設(shè)計尋求最佳方案爭執(zhí)：

9、騰訊QQ可以稱得上及時通訊的老大，以前往往看到的是騰訊的界面是多么的友好等等的贊美。但是一次偶爾的操作，發(fā)現(xiàn)騰訊的不完美，也可以說是很大的失敗。在QQ更改密碼的時候出現(xiàn)了要求在同一IP段才能修改，但是我想問下，現(xiàn)在也不是所有互聯(lián)網(wǎng)用戶都會用電信或者網(wǎng)通。其實有很大一部分是用的其他網(wǎng)絡(luò)提供商的寬帶接入。這樣也就導(dǎo)致了隨機IP段產(chǎn)生。那么請問他們怎么修改密碼？他這么做也不在呼就是為了防止盜號的行為，但是即使這樣樣不應(yīng)該犧牲用戶的易操作性。為了防止盜號的行為還有很多其他方法。個人覺得騰訊這樣做不是很好。希望大家發(fā)表一下自己的看法參考地址：http:/ Dont make me think 符合用戶習(xí)

10、慣與預(yù)期 做適時的提醒 不強迫用戶 選擇最佳方案 操作便利觀看并點評一下兩個視頻 QQ 概念版http:/ Soso future http:/ 網(wǎng)易郵箱注冊初體驗 注冊一個新的網(wǎng)易郵箱，請分析該郵箱在交互方面做的比較好的點，并指出可以供我們借鑒的地方。 并試著給自己發(fā)送幾個帶圖片的附件的郵件，感受其友好性。網(wǎng)易體驗Amazon重點突出 明確強調(diào)產(chǎn)品搜索和在線購買 一旦建立了網(wǎng)站的產(chǎn)品搜索與網(wǎng)上購物等功能，用戶最有可能想利用這些特性的優(yōu)勢馬上開始搜索。 動態(tài)地定制用戶體驗 亞馬遜使用Cookie來記錄用戶登錄，而對用戶的購物習(xí)慣進行跟蹤并存儲到服務(wù)器端。 它以事先進行搜索，網(wǎng)頁瀏覽，愿望清單添

11、加，評價填寫為基礎(chǔ)，并達到最終購買目的。 相關(guān)產(chǎn)品顯示 基于先前行為的推薦產(chǎn)品 只要瀏覽器的cookies保持不變,這種定制相同類型的內(nèi)容就會在隨后的訪問中一連串出現(xiàn)： 各種”為什么我們購物”的提示 亞馬遜購物體驗充斥著為何用戶應(yīng)該從亞馬遜購買的提醒,而不是充斥著從其他來源（在線或其他方式）的提醒。 與市場零售價對比 用戶早先被通知“免費送貨”逼真圖書的預(yù)覽和內(nèi)部查找功能可定制的歷史推薦瀏覽所有產(chǎn)品的查看歷史記錄都可以修改。 看一看下面的圖片。 方便的導(dǎo)航元素方便的導(dǎo)航元素（1）（2）（5）（3）（4）人性化的PayPhase 輸入一句話 輕松在線支付 買家可以把姓名/地址/付款資料通用一個句

12、子與密碼存儲起來。結(jié)賬時，你只需要輸入你自設(shè)的這個句子與密碼即可 在線購物程序的簡化將會使得用戶更多地使用在線購物方式購買商品。據(jù)調(diào)查，在此之前有半數(shù)以上的網(wǎng)民已經(jīng)將商品放進虛擬購物車，但到最后因為支付過程過于繁瑣而放棄購物。易于篩選和用戶評價比較易于篩選和用戶評價比較 方便地訪問正面和負面評論 讓用戶感到舒適亞馬遜購物體驗總結(jié) 把握住網(wǎng)站的焦點 只要有可能，應(yīng)該為每個用戶提供個性化內(nèi)容。 給予用戶為什么做出次選擇的指導(dǎo)。 讓用戶盡可能多的接觸到產(chǎn)品（內(nèi)容）。 不要讓用戶感到有些產(chǎn)品/服務(wù)正在強迫他們購買 在適當?shù)臅r候可輕松地訪問重要部分。 在任何時候讓顧客感到舒服和可控。Jakob Niel

13、sonJakob Nielson博士交互設(shè)計的十項原則博士交互設(shè)計的十項原則1.讓用戶隨時了解系統(tǒng)的狀態(tài)例如導(dǎo)入導(dǎo)出的提示功能2.系統(tǒng)應(yīng)該與真實世界相符合（使用用戶慣用的詞匯和概念）3.給用戶控制權(quán)和自主權(quán)當系統(tǒng)出錯或者誤操作后能夠緊急退出。4.提倡一致性和標準化相似的任務(wù)提供相似的元素5.幫助用戶診斷、識別和恢復(fù)錯誤。告訴用戶大概的原因和解決辦法6.預(yù)防錯誤7.依賴于識別而不是記憶8強調(diào)實用的靈活性和有效性：輸入搜索內(nèi)容后直接按回車鍵就能搜索而不一定要點擊搜索圖標。 9最小化設(shè)計10.提供幫助及文檔Ben ShneidermanBen Shneiderman交互設(shè)計原則性交互設(shè)計原則性 力求

14、一致性：高度一致性的界面能夠給人清晰和整體的感覺。 提供明確的反饋 設(shè)計對話，告訴用戶任務(wù)已經(jīng)完成 提供錯誤預(yù)防和簡單的糾錯功能 應(yīng)該方便用戶取消某個操作 用戶應(yīng)掌握控制權(quán)（授課計劃的跳過該動畫） 減輕用戶的記憶負擔(dān)小任務(wù) 請根據(jù)前面提到的原則，找出4A或者是學(xué)習(xí)超市設(shè)計上存在的一到兩個問題，截圖并加以文字說明，以作品發(fā)布的形式發(fā)表在序列化活動中。交互設(shè)計需要哪些能力和技術(shù)？ 交互設(shè)計師 Interaction Designer1.有相關(guān)工作經(jīng)歷和作品者優(yōu)先；2.對各種常用軟件有強烈興趣并有靈敏觸覺，富有創(chuàng)造力和激情，并有動手實踐良好習(xí)慣；3.邏輯思維能力強，熟練掌握業(yè)務(wù)需求分析、產(chǎn)品需求分解

15、的技巧；4.有大局觀，可以在復(fù)雜的約束條件下找到平衡或創(chuàng)新的方法；5.主動性高，具優(yōu)秀的理解、溝通與協(xié)調(diào)能力，很強的文字表達能力；個性樂觀開朗，善于和各種背景的人合作；6.對交互設(shè)計過程有深入了解，能熟練應(yīng)用站點結(jié)構(gòu)圖、流程圖等交互設(shè)計方法；7.有相關(guān)崗位的技術(shù)和技能，如視覺設(shè)計、XHTML/CSS等；8.熟悉動畫制作、高仿真原型制作者優(yōu)先；9.主動性高，具優(yōu)秀的理解、溝通與協(xié)調(diào)能力，文字表達能力強；10.有良好的英文閱讀能力，英文六級優(yōu)先；11.工業(yè)設(shè)計、計算機、軟件工程、心理學(xué)等相關(guān)專業(yè)本科及以上學(xué)歷。工作職責(zé)：1.參與產(chǎn)品規(guī)劃構(gòu)思和創(chuàng)意過程；2.分析業(yè)務(wù)需求，并加以分解和歸納出產(chǎn)品人機交

16、互界面需求；3.設(shè)計軟件的人機交互界面結(jié)構(gòu)、用戶操作流程等；4.參與公司前瞻性產(chǎn)品的創(chuàng)意設(shè)計；5.制作相關(guān)仿真原型。1. 交互設(shè)計的經(jīng)驗，或多或少，當然經(jīng)驗豐富者優(yōu)先。 2. 給出高質(zhì)量的產(chǎn)品原型，流程圖，線框圖，清晰的表達自己的設(shè)計方案。 3. 優(yōu)秀的溝通和協(xié)調(diào)能力，能準確的挖掘用戶需求，結(jié)合商業(yè)目標，快速調(diào)整設(shè)計方案，并獲得最終的認可。 4. 良好的視覺設(shè)計能力，Photoshop，Dreamweaver等設(shè)計工具熟練運用，能給出高保真度的原型。熟悉XHTML，Javascript，ActionScript 者優(yōu)先。 5. 基本的程序開發(fā)知識，確保你在前期設(shè)計時能綜合開發(fā)成本，給出高效可行

17、的設(shè)計方案。 6. 人機交互，軟件工程，工業(yè)設(shè)計，視覺傳達，或者相關(guān)設(shè)計學(xué)科的學(xué)歷。我們并不注重學(xué)歷，當然高學(xué)歷者優(yōu)先。 7. 英文，能閱讀專業(yè)資料，能應(yīng)付日常工作中和外籍同事的交流。（日文也可以，我們也在招日文站的設(shè)計師。） 8. 在各個有趣的網(wǎng)站都有自己的注冊帳號。眼界是能力的基礎(chǔ)。 9. 最重要的一條：學(xué)習(xí)的心態(tài)！參考資料Jesse James Garrett著,范曉燕譯.用戶體驗的要素M.北京:機械工業(yè)出版社.2007,(9)Blackboard NG網(wǎng)站OL . http:/ Alan Cooper. Robert Reimann. David Cronin . About Face3: The Essentials of Interaction DesignM.電子工業(yè)出版社.2008(11)Robert Hoekman，Jr著，何瀟譯