User-Centered Design and Testing Unit 1

1. User-Centered Design and TestingUnit 1

2. Unit 1. Overview of User-Centered Design and Testing In this unit, we introduce: • the basic principles of user interface design. We cover two facets of UI (User Inteface) design: • the construction of interactive programs • the design of their behavior. It is grounded on the principles of human psychology and carried out through the techniques of heuristic evaluation and think-aloud user testing.

3. 1.1 Foundation for User-Centered Design and Testing 1.1.1 Iterative Design • Why Iterative Design? • Visual Basic • Heuristic Evaluation • Think-Aloud Studies

4. Why Iterative Design? The goal of this course : to learn to design and build usable software • Programs that people can use easily, efficiently, and correctly. • Experiences with commercial software, and everyday objects like VCRs(Video Cassette Records) and microwave ovens, should convince us that this is not an easy task. • Many systems built by talented people are perfectly functional but nearly unusable.

5. The fundamental our course based is: that system designers cannot fully anticipate the usability of their designs. In simpler terms: you are not the user. This limitation stems from several sources: • Users are diverse, while you are a single person. • Users are (usually) not technical experts, while you are. • Users do not know what you were thinking when you designed the system, while you do.

6. 重要概念－ 用户（USER） 用户类型： 新手用户、普通用户、专家用户、偶然用户

7. 用户日常生活的经验： • 从操作对象的外形可以看出其功能和使用方法 • 操作基本都靠手脚，属体力操作工具 • 操作对象的行为过程都是透明的 • 操作步骤比较少，一段时间后可以十分熟练－－操作自动化

8. 1、新手用户 特点： • 过去观察体力工具功能的经验基本失效； • 长期积累的体力工具操作经验基本失效； • 计算机的操作方式是不透明，不知所措； • 计算机的操作方式十分繁杂，过程十分冗长，任何一步出错，遗忘任何一步，都会导致整个操作过程失败。

9. 另一方面新手用户经常对计算机有许多担心和想象：另一方面新手用户经常对计算机有许多担心和想象： • 对计算机的功能、行为方式、操作方式有许多想象； • 不敢用计算机，害怕操作时损坏计算机，在操作时又往往容易犯错； • 他们学计算机的过程是一个很复杂的知识获取的认知过程，很自然反映出人的日常行动心里特征； • 往往提出一些使计算机专家无法或难于解答的问题。

10. 为什么会有这样的问题 • 谁错了呢？ • 机器为本而非以人为本 • 计算机专家常说：“计算机是一种工具，它提供了一种新的行为方式” 计算机是一种认知工具，但它存在许多问题，不符合人的知觉特性、思维方式和动作特征，以至给人的使用造成严重的思维负担和精神压力。

11. 2、普通用户 又叫一般用户。 特点: • 基本能自己完成一个操作，但不熟练； • 长时间不操作，就会忘记； • 只会正常操作； • 硬件和软件的升级换代往往会给他们带来许多困难和麻烦。

12. 3、专家用户 又叫经验用户。 特点： • 不仅熟悉计算机，而且熟知同类计算机的主要型号及生产厂家等； • 关注思考过认知动作与计算机操作不适应的问题，他们积累了许多经验、有成套的操作方式、喜欢用快捷键； • 能评价一个软件的操作性能，且与其它同类软件相比较； • 了解计算机发展历史，主要计算机公司和软件公司的历史，了解当前人们关注的问题、可能的发展趋势。

13. 在计算机的某个领域有较长的知识链； • 往往花费很多时间和精力去琢磨一个软件的使用，许多技能已成为自动化的过程； • 能够发觉深层信息的含义、有较高的信息分类和综合能力。花费很多时间去思考解决问题。不单单从自己的角度，而从广泛用户角度考虑解决问题，能讲出用户习惯和共同面临的问题； • 心理学普遍认为专家用户是在某个领域具有10年以上经验的用户。实践表明，计算机领域不需这么长时间； • 往往能够对一个系统或软件进行改进创新，或提出改进创新的意见。

14. 4、偶然用户 这类人偶尔使用计算机。 特点： • 不愿意使用计算机； • 没有计算机知识，没有键盘、鼠标的使用经验。

15. In order to deal with this issue, we must adopt an iterative approach to system design. Rather than using a feed-forward (oropen-loop) approach, as in the diagram below.

16. It include steps to refine the design that incorporate factors other than our personal opinion and acumen(聪明). • A step to analyze a preliminary design according to some "rules of thumb." • A test that gathers and incorporates user feedback on what has been built.

17. The rules of thumb ( 单凭经验的方法) we use in the smaller feedback loop often embody(包含） design wisdom accumulated through the years and attained through many past errors and tests. • In the testing step, we get feedback from users on the system's actual usability, and incorporate that information into subsequent rounds of analysis, design, and construction.

18. This approach raises two major questions: • It's hard enough to build something once; how can we afford to build things more than once? • How do we accumulate experience and get feedback from users in a way that yields useful guidance to further work?

19. The key to answering the first question is to adopt a rapid prototyping approach. • To implement enough of a design to allow testing, without committing the effort needed to create a complete product. For example, one might mock up the various displays seen by a user, without writing all of the code required to create them and navigate among them. Or,

20. To write code that works for just a single execution case, limiting the choices available to a user at any time. Once user feedback is obtained for the aspects of a system that have been prototyped, design choices for those aspects can be narrowed down, and other aspects can be prototyped and tested.

21. The answer to the second question requires a body of knowledge and technique. Good user testing relies on: • some knowledge of human psychology. • good techniques for eliciting（引出）, recording, and analyzing user feedback.

22. This course provides you with three important tools of iterative, user-centered design: • User interface programming in Visual Basic • Heuristic evaluation of user interfaces based on accumulated design experience, • Empirical think-aloud usability testing.

23. Visual Basic Visual Basic is one of the most popular programming languages in use today, especially in the area of user interfaces. • It supports rapid prototyping of user interfaces, making it possible to test many aspects of a system's usability before its implementation is complete. • Once you have learned to use Visual Basic, you will also be able to apply this approach to other languages and systems，such as Power Builder, Develop 2000,etc. • Some supplement knowledge about UI and GUI.

24. What is UI(User Interface)? All applications include two parts: • User interface: It is the contents a application display on the screen. • Program: a group of Instructions which can finish specific tasks. It runs behind the computer. Every application has its UI form, User interacts with applications by UI. all interactions happened between user and application are finished by UI.

25. What is a good User Interface? Three necessary conditions: • Ease to learn • Ease to use • Attractive Character-based system:commands, inconvenience, time consumption,difficult to learn and use Graphical User Interface(GUI):What you see is what you get.

26. Visual programming Design and visual programming design environment • Aim : supply user with an intuitionistic and ease-using interface • A visual programming environment has all parts needs by GUI development. Programmer uses these user-friendly parts or widgets(控件）,such as windows,menu,button,and list boxes,etc.

27. Advantages of visual programming design • It is an ease-using and ease-learning GUI ,visual development • Programmer can display controller or widgets easily without writing codes • They can move,change size,or delete it ,if neccesary. • These is no limitation to the number of widgets in a window. • Programmers create UI by their vision.

28. Disadvantages of visual programming design • Larger harddisk content • Larger RAM(random access memory) • Even larger processor • Limitation: visual development environment can only use GUI operating system, such as windows.

29. Heuristic Evaluation • A process that designers use to estimate the usability of their designs prior to submitting them to actual user testing. In this context, the word heuristic means a general principle or "rule of thumb" that usually leads to a good answer. • In this course, you will learn a small set of heuristics that will help you to make good user-interface design decisions, and also learn how to apply them in your work.

30. Think-Aloud Studies • The think-aloud approach is a powerful method empirically evaluating the usability of a system. In this method, a user is presented with a system or prototype and asked to perform a task while "thinking aloud" the steps and decisions involved. The collection and analysis of think-aloud data requires a disciplined approach, which you will learn in this course. Used together, these three tools will help you to design usable and successful systems.

31. 1.1.2 Basic Concepts of Interactive Programming • Direct Manipulation（直接操控） • Affordance （示能性、功能可见性） and Feedback • Essential Task and the Event/Redraw Cycle • Controls, Model Objects, and Interpreting Events • Encapsulation（封装） and Accessor Patterns

32. Direct Manipulation • Modern graphical user interfaces make use of a style of interaction called direct manipulation. • Direct manipulation interfaces are designed to give the user the illusion that they are directly manipulating the objects of interest to them. • The images portrayed to the user indicate the nature and state of those objects, and the program is structured so that interactions are performed (primarily) in terms of those representative images.

33. For example, In a desktop interface of a typical personal computer, files and folders are represented to the user by • a series of icons : small representative images placed in windows • windows : overlapping regions that are designed to be analogous to sheets of paper sitting on a desktop • The icons representing folders are shaped to remind the user of physical file folders, and the user may manipulate file system objects by moving them about, putting them in folders, etc.

34. Direct manipulation interfaces have been highly successful because they provide the illusion of directness—they operate so that users feel that they are directly acting on objects, not working through the intermediary of a computer.  • The property of directness is not one that an interface either does or does not have.  Instead, interfaces can be more or less direct depending on how much of this feeling of directness they induce in a user.  

35. Further, the feeling of directness will vary from individual to individual, from interface to interface, and even between parts of an interface.  For example, the action of dragging a file icon into a trash can icon to delete it is likely to seem more direct for most users than acting on the file by selecting a command from a menu. 

36. Interfaces that exhibit more directness for a majority of their intended user population are typically preferable because they tend to be easier to learn and use.  (However, it is important to note that directness can go too far when it requires users to be direct in cases where operations might be much more efficiently handled in an indirect or automated fashion.)

37. Affordance and Feedback • In order to provide and reinforce the feeling of directness, interface designers often concentrate, among other things, on providing two particularly key characteristics in an interface: affordance and feedback.  • Affordances are opportunities to act that are readily apparent to the user. 

38. For example, the handle of a hammer provides an affordance for grasping it in the hand (in a particular way that is useful for its intended purpose).  Another example is knurling—the series of small ridges often found on knobs that make their surfaces rough, as shown in Figure below. Because knurling increases friction, it provides a good affordance for gripping an object with the fingers.

39. Figure: Knurling provides affordance for gripping. Figure : Simulated knurling invites the user to "grip" with the mouse.

40. Because most objects in a graphical user interface appear only as pictures on a screen, the physical affordances that they can offer are limited.  However, by properly manipulating the visual appearances of objects, we can still make the purpose, state, and opportunities for action associated with objects apparent to the user.  This provides what might be thought of as a virtual affordance.   For example, while we cannot knurl objects on the screen, we can provide simulated knurling as illustrated in Figure above.

41. Here we see the "resize handle" in the corner of a window in the Microsoft Windows standard user interface.  It appears to have raised ridges much like a knurled surface.  As a result, it reminds us of the affordance for grip found in the physical world, and hence invites us to act using the graphical user interface analog of grip (pressing and holding the mouse button over the area, in preparation for dragging).  Since the ridges are oriented diagonally, this in particular invites us to "grip" and drag towards the southeast—which is appropriate for resizing a window. 

42. Note that we don't have to understand what knurling is, or that it affords grip, in order for this appearance to be effective as an affordance for "grip" in the interface.  It can be effective simply because it reminds us of our past experience with many real world objects.

43. By manipulating the visual appearance of objects to provide proper affordances (or technically, to remind the user of affordances from their past experience, which typically has the same practical effect), we make the operation of interfaces more apparent, and we reduce the effort needed to learn them and perceive their important properties.  As a general rule (which we will see later in the form of a usability heuristic) a good user interface design will provide some visual indication of (affordance for) the actions that the user can carry out with it.

44. The important concept of feedback has a conceptually similar purpose. Feedback is the response by the system to the actions of the user.  This often comes in the form of updated visual representations, but can also be provided in other modalities such as audio.  If a system provides immediate feedback that clearly indicates the nature and consequences of their actions, it is much easier for users to evaluate whether those actions are having the desired effect. 

45. In the physical world, we normally get direct and strong feedback about the objects we manipulate in the form of vision, touch, and sound.  In the virtual world, however, such strong and immediate feedback is often lacking because computational actions are normally invisible and silent.  One of the best ways to increase the apparent directness of an interface is by providing strong and immediate feedback for all user actions.

46. Essential Task and the Event/Redraw Cycle • Although providing the appearance of directness is a goal of much modern user interface design, the user, of course, can never reach directly into the computer and manipulate computational objects.  They must use the intermediary of the input devices provided by the computer and express their actions with those devices.

47. To provide the user with the feeling of directly manipulating the objects of interest, an interactive program must do several things.  It must: • Provide visual images that represent the objects of interest to the user (and indicate how they may be acted upon, that is, provide good affordances) • Accept inputs from the available input devices • Interpret those inputs in the context of the objects on the screen (and other parts of the system) • Modify internal structures modeling the objects of interest (and invoke application routines) • Update the visual display to reflect the consequence of the users' actions (provide good feedback)

48. This structure is so common in fact, that it is in most cases provided for you by various interactive systems (including Visual Basic which will be used here), and, hence, in many cases you must use this basic control flow for your program.

49. Output on the screen is produced by a series of calls to a graphics library, which is normally part of a window(ing) system, or window manager.  As will be considered in later sections, a window system supports an abstraction of a series of independent drawing surfaces.  Although these drawing surfaces appear to the programmer as independent drawing spaces, they are normally presented to the user in a (potentially) overlapping fashion in the familiar form of windows.  It is the window system's job to internally track current overlap relationships and modify the outputs actually delivered to the screen to reflect this structure. 

50. Similarly, in some cases the window system may keep copies of surface areas currently overlapped by other windows, and automatically redisplay previously hidden material without involving the program.  Since this can be performed transparently, each program (or even different parts of the same program that use different windows) can have the illusion of directly drawing on their own display device.  This makes drawing code easier to create and allows many independent programs (or parts of the same program) to share the limited resources of a single display device gracefully.