-用戶體驗的概念及理念、行業(yè)現(xiàn)狀和展望

1、編輯課件1Guidelines of User Interface Design第一章第一章 用戶界面設(shè)計中的若干規(guī)則用戶界面設(shè)計中的若干規(guī)則中國信息化培訓(xùn)中心 內(nèi)訓(xùn)專版編輯課件2Why?Why?What is Interface ? What is Interface ? 01“Interface is the contacting point between two systems where an output from one system becomes an input to the other system.Information Processing信息處理信息處理“界面是兩個

2、系統(tǒng)的之間的聯(lián)系紐帶界面是兩個系統(tǒng)的之間的聯(lián)系紐帶,一個系統(tǒng)中的輸出信息通過界面轉(zhuǎn)變成一個系統(tǒng)中的輸出信息通過界面轉(zhuǎn)變成另一系統(tǒng)的輸入信息另一系統(tǒng)的輸入信息.”Input to Man (perception)輸入人腦輸入人腦(感知感知)Output from Machine設(shè)備輸出設(shè)備輸出Output from Man (Operation)人腦輸出（操作）人腦輸出（操作）Input to Machine設(shè)備輸入設(shè)備輸入Interface界面界面編輯課件3Why?Why?What is Interface ? What is Interface ? 01“User Interface Des

3、ign refers to an approach for creating easy-to-understand interface with the application of human beings cognitive characteristics, information processing process which is basis for man-machine interaction problems.”Perception感知Recognition認知Interpretation分析判斷Decision決策Execution執(zhí)行用戶界面設(shè)計方法是指應(yīng)用人的認知特征建立

4、容易理解的界面用戶界面設(shè)計方法是指應(yīng)用人的認知特征建立容易理解的界面.編輯課件4Guidelines of User Interface DesignGuidelines of User Interface Design“There are many general guidelines developed by diverse scholars and for different purposes: web, information appliances.”世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則編輯課件5Guideli

5、nes of User Interface Design- Guidelines of User Interface Design- Jacob NielsenJacob Nielsen“There are many general guidelines developed by diverse scholars and for different purposes: web, information appliances.”1. Visibility視覺效果視覺效果2. Match the system to the real world與現(xiàn)實世界相對應(yīng)與現(xiàn)實世界相對應(yīng)3. User con

6、trol and freedom用戶的控制的自主性用戶的控制的自主性4. Consistency and standards標(biāo)準(zhǔn)和一貫性標(biāo)準(zhǔn)和一貫性5. Error prevention赦免赦免6. Recognition rather tan recall與其記憶不如認知與其記憶不如認知7.flexibility and efficiency of use使用的靈活性和效率使用的靈活性和效率8. Aesthetic and minimalist design美學(xué)的和簡化的美學(xué)的和簡化的9. Help users recognize, diagnose, and recover from er

7、rors幫助用戶認識誤操作，并診斷原因，從誤操作中恢復(fù)幫助用戶認識誤操作，并診斷原因，從誤操作中恢復(fù)10. Help and documentation幫助文件幫助文件咱們的水龍頭咱們的水龍頭e $ i (internet)世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則www.jacobnielsen.dk 編輯課件6Guidelines of User Interface Design- Guidelines of User Interface Design- Jacob NielsenJacob Nielsen杰各布杰各布尼

8、爾森尼爾森 “There are many general guidelines developed by diverse scholars and for different purposes: web, information appliances.”世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則1. Visibility of system status信息的可視性信息的可視性2. Natural Mapping自然映射自然映射3. Consistency連貫性連貫性4. Constraints約束約束5. Simplic

9、ity簡單直接簡單直接6. Knowledge in the world and head常識性常識性7. Design for Error為誤操作而設(shè)計為誤操作而設(shè)計8. Standardization標(biāo)準(zhǔn)化標(biāo)準(zhǔn)化編輯課件7Guidelines of User Interface Design- Guidelines of User Interface Design- Donald A. NormanDonald A. Norman唐唐 諾曼諾曼“There are many general guidelines developed by diverse scholars and for d

10、ifferent purposes: web, information appliances.”世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則世界各地的學(xué)者們都根據(jù)各自的目的，發(fā)展出了不同的設(shè)計準(zhǔn)則1. Metaphors比喻比喻2. Direct Manipulation直接的操作直接的操作3. See-and-Point4. Consistency連貫性連貫性5. WYSIWYG所見即所得（可視化操作）所見即所得（可視化操作）whatyouseeiswhatyouget6. User Control用戶控制用戶控制7. Feedback and Dialog反饋與對話反饋與對話8

11、. Forgiveness赦免赦免9. Perceived Stability感知的穩(wěn)定性感知的穩(wěn)定性10. Aesthetic Integrity美學(xué)美學(xué)編輯課件8Visibility : Visibility : What function is possible?What function is possible?接下來會如何？接下來會如何？ Visualize what function is possible, how to use, where we are and what would be the results, so as to bridge the gulf of exe

12、cution and evaluation我們能做什么，如何做，我們現(xiàn)在在什么位置，結(jié)果會是什么，通過我們能做什么，如何做，我們現(xiàn)在在什么位置，結(jié)果會是什么，通過視覺化的界面將操作的結(jié)果與我們的評估聯(lián)系起來視覺化的界面將操作的結(jié)果與我們的評估聯(lián)系起來編輯課件9Visibility : Visibility : ConstraintConstraint約束約束“Reduce the alternative ways of operation so that user has the only one way of doing right.” 減少沒必要的選擇，這樣用戶就只能沿著唯一正確的操作減少

13、沒必要的選擇，這樣用戶就只能沿著唯一正確的操作直到最后直到最后編輯課件10Visibility : Visibility : ConstraintsConstraints“Reduce the alternative ways of operation so that user has the only one way of doing right.” 減少沒必要的選擇，這樣用戶就只能沿著唯一正確的操作減少沒必要的選擇，這樣用戶就只能沿著唯一正確的操作直到最后直到最后編輯課件11Visibility : Visibility : ConstraintsConstraints“Reduce th

14、e alternative ways of operation so that user has the only one way of doing right.” 減少沒必要的選擇，這樣用戶就只能沿著唯一正確的操作減少沒必要的選擇，這樣用戶就只能沿著唯一正確的操作直到最后直到最后? ?編輯課件12Visibility : Visibility : AffordanceAffordance引導(dǎo)引導(dǎo)“Visualize the clue or properties of interface so that user perceives correctly what function is pos

15、sible.”可視化的狀態(tài)和界面，使用戶知道可能出現(xiàn)的結(jié)果可視化的狀態(tài)和界面，使用戶知道可能出現(xiàn)的結(jié)果編輯課件13Visibility Visibility System StateSystem State系統(tǒng)狀態(tài)系統(tǒng)狀態(tài)“Visualize what is the current system stage and what would be the results, so as to bridge the gulf of execution and evaluation”系統(tǒng)當(dāng)前的狀態(tài)是什么，結(jié)果會是什么，通過視覺化的界面系統(tǒng)當(dāng)前的狀態(tài)是什么，結(jié)果會是什么，通過視覺化的界面將操作的結(jié)果與我們

16、的評估聯(lián)系起來將操作的結(jié)果與我們的評估聯(lián)系起來編輯課件14Visibility Visibility Where are we now?Where are we now?我們在哪？我們在哪？“Visualize where we are now and how further should I go to the end of process.”視覺化顯示我們目前的位置，我們距離終點還有多遠？視覺化顯示我們目前的位置，我們距離終點還有多遠？ 編輯課件15Visibility Visibility Where are we now?Where are we now?我們在哪？我們在哪？ “Vis

17、ualize where we are now and how further should I go to the end of process.” 視覺化顯示我們目前的位置，我們距離終點還有多遠？視覺化顯示我們目前的位置，我們距離終點還有多遠？編輯課件16Simplicity Simplicity Interface StructureInterface Structure 界面結(jié)構(gòu)界面結(jié)構(gòu)“Simplify the interface structure to minimize the effort needed for using a product.”簡化操作界面的結(jié)構(gòu)，讓產(chǎn)品的使用

18、變得更加容易簡化操作界面的結(jié)構(gòu)，讓產(chǎn)品的使用變得更加容易Shallow & narrow decision structure操作結(jié)構(gòu)：淺窄操作結(jié)構(gòu)：淺窄Small steps but wide又淺又寬又淺又寬Many steps but selection range is narrow又窄又深又窄又深編輯課件17Simplicity Simplicity Fit to Memory StructureFit to Memory Structure與記憶機制相適應(yīng)與記憶機制相適應(yīng)Simplify the interface so that the amount of informat

19、ion can fit to the capacity of human brain.”簡化界面，合適的信息量以適應(yīng)大腦的記憶機制Fit to memory Structure適應(yīng)記憶機制適應(yīng)記憶機制Short term memory短期記憶短期記憶Dont exceed 5+-2 items that can be stored in short term memory個左右的元素能適應(yīng)短期的記憶機制個左右的元素能適應(yīng)短期的記憶機制Long term memory長期記憶長期記憶Meaningful, easy-to-remember, fit-to-user-model informati

20、onNumber of information which can got attention at once, Chunking smooth perceiving of the result of action有意義的、易于記憶、適當(dāng)?shù)男畔⒘?、醒目的、程序結(jié)構(gòu)分配，有意義的、易于記憶、適當(dāng)?shù)男畔⒘?、醒目的、程序結(jié)構(gòu)分配，有助于對結(jié)果的評估。有助于對結(jié)果的評估。035186078490351 860 7849#88編輯課件18Simplicity Simplicity TechnologyTechnology技術(shù)技術(shù)Take advantage of the relevant technol

21、ogy so that complex task can be simplified.”利用相關(guān)技術(shù)，將復(fù)雜的任務(wù)簡化利用相關(guān)技術(shù)，將復(fù)雜的任務(wù)簡化Technology for simplicity有助于簡化的技術(shù)Unify the operation, and apply Technology for mental aid.Use technology for smooth feed back about product status統(tǒng)一操作模式，運用技術(shù)和心理學(xué)，使信息反饋更加有效統(tǒng)一操作模式，運用技術(shù)和心理學(xué)，使信息反饋更加有效ex) Display例：顯示效果例：顯示效果Technol

22、ogical simplification through automation.Apply technology which changes the property of control itself.實時的系統(tǒng)狀態(tài)顯示實時的系統(tǒng)狀態(tài)顯示ex) View Cam, Digital Watch例：電子表、數(shù)碼相機例：電子表、數(shù)碼相機編輯課件19Simplicity Simplicity Visual SimplicityVisual Simplicity視覺簡化視覺簡化“ Keep the appropriate level of abstraction of visual image an

23、d eliminate unnecessary visual images.”保持圖象的抽象性，果斷地消除冗余的視覺元素保持圖象的抽象性，果斷地消除冗余的視覺元素Visual simplicity視覺簡化視覺簡化Control appropriate level of abstraction of visual image保持圖象的抽象性保持圖象的抽象性Subtractive design: eliminate unnecessary visual images果斷地消除冗余的視覺元素果斷地消除冗余的視覺元素 編輯課件20Simplicity Simplicity Functional Sim

24、plicityFunctional Simplicity功能簡化功能簡化“Keep the number of functions necessary.”僅僅保留需要的功能僅僅保留需要的功能Functional simplicity功能簡化功能簡化Control appropriate number of functions eliminating unnecessary functions有效地控制必要的功能數(shù)量，果斷消除冗余的功能有效地控制必要的功能數(shù)量，果斷消除冗余的功能80/20編輯課件21Natural MappingNatural Mapping自然映射自然映射User shoul

25、d be able to easily understand what the result operation would be by just the appearance of controls. 應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所產(chǎn)生的結(jié)果產(chǎn)生的結(jié)果編輯課件22Natural MappingNatural Mapping自然映射自然映射User should be able to easily understand what the result operation would be by just the

26、appearance of controls. 應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所產(chǎn)生的結(jié)果產(chǎn)生的結(jié)果編輯課件23Natural MappingNatural Mapping自然映射自然映射User should be able to easily understand what the result operation would be by just the appearance of controls. 應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操

27、作所產(chǎn)生的結(jié)果產(chǎn)生的結(jié)果編輯課件24Natural MappingNatural Mapping自然映射自然映射Wrong!User should be able to easily understand what the result operation would be by just the appearance of controls. 應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所產(chǎn)生的結(jié)果產(chǎn)生的結(jié)果編輯課件25Natural MappingNatural Mapping自然映射自然映射User should be a

28、ble to easily understand what the result operation would be by just the appearance of controls.應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的應(yīng)該使用戶在一看到控制端時，就非常自然的理解相應(yīng)的操作所產(chǎn)生的結(jié)果操作所產(chǎn)生的結(jié)果編輯課件26ConsistencyConsistency延續(xù)性延續(xù)性Provide consistency in operation so that user can easily remember and learn how to operate.延續(xù)性的操作能有效幫助用戶記

29、住并學(xué)習(xí)如何操作延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作編輯課件27ConsistencyConsistency延續(xù)性延續(xù)性Provide consistency in operation so that user can easily remember and learn how to operate.延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作編輯課件28ConsistencyConsistency延續(xù)性延續(xù)性Provide consistency in operation so that user can easily remember a

30、nd learn how to operate.延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作編輯課件29ConsistencyConsistency延續(xù)性延續(xù)性Provide consistency in operation so that user can easily remember and learn how to operate.連貫性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作連貫性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作編輯課件30ConsistencyConsistency延續(xù)性延續(xù)性Provide consistency in operat

31、ion so that user can easily remember and learn how to operate.延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作編輯課件31InertialInertial慣性慣性Provide inertial in operation so that user can easily remember and learn how to operate.延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作延續(xù)性的操作能有效幫助用戶記住并學(xué)習(xí)如何操作編輯課件32“Provide users with means to u

32、nderstand the cause of errors so that user can fix the error.”為用戶提供故障產(chǎn)生的原因，意義在于有助于用戶理解故為用戶提供故障產(chǎn)生的原因，意義在于有助于用戶理解故障和解決故障障和解決故障Design for Error: Design for Error: Understanding cause of errorUnderstanding cause of error為錯誤設(shè)計：幫助用戶理解故障的原因為錯誤設(shè)計：幫助用戶理解故障的原因編輯課件33Make errors reversible or undo so that user

33、can recover from errors.”使誤操作可以撤消，這樣用戶就能從誤操作的困境中擺脫使誤操作可以撤消，這樣用戶就能從誤操作的困境中擺脫 Design for Error: Design for Error: Make it reversibleMake it reversible為錯誤設(shè)計：為錯誤設(shè)計：“后悔藥后悔藥”編輯課件34“Prevent users form accidental activation of destructive errors.”保護用戶避免由于誤操作導(dǎo)致致命錯誤，即使是由于偶然的失誤Design for Error: Design for Erro

34、r: Protect against destructive errorProtect against destructive error為錯誤設(shè)計：保護措施為錯誤設(shè)計：保護措施編輯課件35Knowledge in the World and HeadKnowledge in the World and Head現(xiàn)實與認識現(xiàn)實與認識Principle 06 : Knowledge in the World and head規(guī)則：現(xiàn)實與認識規(guī)則：現(xiàn)實與認識Knowledge required for operation should be well allocated to product or

35、 user. The allocation of knowledge should be decided depending on mutual superiorities of user (head) and product (world). 操作系統(tǒng)所需要具備的知識（能力），由用戶和產(chǎn)品共同承擔(dān)。知識的分配，操作系統(tǒng)所需要具備的知識（能力），由用戶和產(chǎn)品共同承擔(dān)。知識的分配，應(yīng)該由產(chǎn)品和用戶相互的優(yōu)勢而定。應(yīng)該由產(chǎn)品和用戶相互的優(yōu)勢而定。Property屬性屬性Knowledge in the World現(xiàn)實知識現(xiàn)實知識Knowledge in the Head大腦認識大腦認識Retrie

36、vability可恢復(fù)性可恢復(fù)性Possible to search anytime if it is visual and oral.有聲有色的東西，總是很容易找到。有聲有色的東西，總是很容易找到。Hard to search. Should depend on the memory to search.記憶中的東西不那么容易尋找。記憶中的東西不那么容易尋找。Learning可學(xué)習(xí)性可學(xué)習(xí)性Needless to learn, just need to interpret the status of product. Depend on how to use the user mental

37、model and limits.無須學(xué)習(xí)，只需修改產(chǎn)品的參數(shù)。取決于無須學(xué)習(xí)，只需修改產(chǎn)品的參數(shù)。取決于如何利用用戶的智力。如何利用用戶的智力。Much learning needed. If the learning is meaningful and well agree with user mental model, learning could be easier.需要學(xué)習(xí)，如果學(xué)習(xí)是有意義的，并且與需要學(xué)習(xí)，如果學(xué)習(xí)是有意義的，并且與用戶的智力模型相適應(yīng)，學(xué)習(xí)將變得容易。用戶的智力模型相適應(yīng)，學(xué)習(xí)將變得容易。Efficiency of use使用的效能使用的效能A bit slow

38、 because it is needed to understand and interpret the product information有點慢，因為他需要理解并依照產(chǎn)品規(guī)則。有點慢，因為他需要理解并依照產(chǎn)品規(guī)則。Effective, because it is needed to remember just once.有效的，因為他只需要一次就能記住有效的，因為他只需要一次就能記住Ease of use at first encounter首次使用的易用性首次使用的易用性Effective because beginners rely on the product informati

39、on about the control.非常有效的，因為初學(xué)者可以參照產(chǎn)品關(guān)非常有效的，因為初學(xué)者可以參照產(chǎn)品關(guān)于控制的說明。于控制的說明。Ineffective because beginners cant remember the control information easily.低效的，因為初學(xué)者不能輕松地記住所有低效的，因為初學(xué)者不能輕松地記住所有的操作說明。的操作說明。Aesthetics美學(xué)的美學(xué)的Could be complex to indicate all the control information on the product itself.產(chǎn)品本身可以通過復(fù)雜的

40、設(shè)計顯示所有的產(chǎn)品本身可以通過復(fù)雜的設(shè)計顯示所有的操作信息。操作信息。User should remember all the control knowledge so, the product shape is simple and free.用戶需要記住所有的控制知識，所以產(chǎn)品用戶需要記住所有的控制知識，所以產(chǎn)品的形態(tài)最好是簡單靈活的。的形態(tài)最好是簡單靈活的。編輯課件36StandardizationStandardization標(biāo)準(zhǔn)化標(biāo)準(zhǔn)化Principle 08 : Standardization標(biāo)準(zhǔn)化設(shè)計標(biāo)準(zhǔn)化設(shè)計If it is difficult to apply all the

41、 user interface principles and some interface should be arbitrarily designed, standardize them to make them easy to use and effective after once user learn them.如果很難統(tǒng)一所有用戶對截面規(guī)則的認同，有時候就需要專斷地統(tǒng)一界面的設(shè)如果很難統(tǒng)一所有用戶對截面規(guī)則的認同，有時候就需要專斷地統(tǒng)一界面的設(shè)計，使之標(biāo)準(zhǔn)化。這樣可以讓用戶在第一次使用后就能有效地記?。ㄒ?guī)則）計，使之標(biāo)準(zhǔn)化。這樣可以讓用戶在第一次使用后就能有效地記?。ㄒ?guī)則） Stop

42、PauseRecordAudio DubbingSlowMotionStillEject編輯課件37StandardizationStandardization標(biāo)準(zhǔn)化標(biāo)準(zhǔn)化Principle 08 : Standardization標(biāo)準(zhǔn)化設(shè)計標(biāo)準(zhǔn)化設(shè)計If it is difficult to apply all the user interface principles and some interface should be arbitrarily designed, standardize them to make them easy to use and effective after once user learn them.如果很難統(tǒng)一所有用戶對截面規(guī)則的認同，有時候就需要專斷地統(tǒng)一界面的設(shè)如果很難統(tǒng)一所有用戶對截面規(guī)則的認同，有時候就需要專斷地統(tǒng)一界面的設(shè)計，使之標(biāo)準(zhǔn)化。這樣可以讓用戶在第一次使用后就能有效地記?。ㄒ?guī)則）計，使之標(biāo)準(zhǔn)化。這樣可以