User-Centered Design and Testing Unit 1

© 2005 iCarnegie, Inc.

1

User-Centered Design and Testing

Unit 1


2

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.

Unit 1. Overview of User-Centered Design and Testing


3

1.1.1 Iterative Design• Why Iterative Design? • Visual Basic• Heuristic Evaluation • Think-Aloud Studies

1.1 Foundation for User-Centered Design and Testing

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-design-cycle/pg-design-cycle.html#wid%23wid

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-design-cycle/pg-design-cycle.html#vb%23vb

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-design-cycle/pg-design-cycle.html#he%23he

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-design-cycle/pg-design-cycle.html#tas%23tas


4

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.

• Why Iterative Design?


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


9

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


10

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


11

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


12

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


13

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


14

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


15

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

Figure : Feed-forward, or open-loop, design approach


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.

Figure 2: Iterative design with feedback


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 BasicHeuristic evaluation of user interfaces based on accumulated design experience, Empirical think-aloud usability testing.


23

Visual BasicVisual 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 useGraphical 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

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-interactive-prog/pg-interactive-prog.html#dm%23dm



http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-interactive-prog/pg-interactive-prog.html#af%23af



http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-interactive-prog/pg-interactive-prog.html#eterc%23eterc

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-interactive-prog/pg-interactive-prog.html#cmoie%23cmoie

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-interactive-prog/pg-interactive-prog.html#eap%23eap

http://www.icarnegie.com/content/SSD/SSD4/2.1.2/normal/pg-overview-of-ucdt/pg-foundation/pg-interactive-prog/pg-interactive-prog.html#eap%23eap


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.


51

• Inputs in modern interactive systems are generally modeled as input event records (often just simply events). Such an event record is a record of some significant action. The most common events record changes in the state of input devices (resulting from user manipulation of the devices) — for example, pressing a keyboard key or moving the mouse. However, other kinds of event records are also possible, such as those recording the arrival of data on a network connection.


52

• Events may record information such as what happened, when it happened, the context of important input devices at the time of the event (for example, where the mouse was pointing when it happened, and the status of various modifier keys, such as SHIFT and CTRL). Finally, events record any data associated with the input (such as the character value associated with a key press event).


53

• Since it is possible for events to be generated by the user faster than the program can respond to them, event records are normally placed in a queue to ensure they are not lost.

Programs operate by requesting the next event from the input queue, interpreting and processing that event, producing any new output that is needed as a result (for example, redrawing the screen), and then returning for the next event.


54

• If there are no events currently waiting in the input queue, the program normally simply waits for the next event to arrive. By modeling all "significant actions" of interest to an interactive program as events (even things such as interprocess communications and asynchronous file I/O), it is possible to support various forms of asynchronous input together using only the control flow outlined above.


55

Controls, Model Objects, and Interpreting Events

• Given the basic event/redraw cycle described above, the central question becomes one of how to actually interpret and respond to incoming events, and how to structure the output creation process. While it is possible to write code that directly responds to events and directly draws as a result, most interactive programs written today (including the ones you will write in Visual Basic) make use of a toolkit to support these operations.


56

• A toolkit provides a much higher-level abstraction of the event/redraw cycle and automates a number of important steps. In particular, toolkits provide a reusable library of objects that can appear on the screen and be the target of user input.

Examples of such objects include the buttons, sliders, text areas, icons, check boxes, and menus familiar to most users. These objects are sometimes called widgets, interactors, or interactive components.


57

• In Visual Basic and several other systems, these objects go by the name of controls. One of the major benefits of using a toolkit is that it provides a rich set of such controls and allows new types of controls to be created when necessary. This means that a programmer does not necessarily need to recreate, for example, a button control, and that all button controls the user sees will work in the same way.


58

• In direct manipulation terms, controls provide a presentation of the objects of interest to users. However, because controls come from a generic library ( 类库 ), they do not generally support the detailed semantics of those objects. For example, in an interface to set the time, a text entry control can represent minutes.


59

•However, the standard text entry control does not have anything built into it that recognizes the fact than the minute value must be an integer between 0 and 59. In addition, it is often the case that one object of interest is represented to the user by several different controls. For example, when providingan interface to minutes, it might be convenient to provide both a text entry control and a set of arrows (what we will later see is an “up-down” control) to increment or decrement the valueas shown in the Figure.


60

• By way of review, the overall relationship between parts of an interactive system is illustrated in the figure below:


61

• Note that, in this organization, model objects have a central organizing role. They accept changes to their modeled information (either from controls or from application code), validate those changes, and respond to them by updating the properties of any controls related to that information. Occasionally it is convenient for controls to invoke application routines directly, bypassing the model. This is particularly so in the case of menus and buttons that represent "commands" in the application. However, the application should normally avoid manipulating controls directly, without going through the model.


62

Encapsulation and Accessor Patterns • Because model objects need to be informed whenever

the information they manage changes and because they need to respond to those changes with action of their own (that is, updating various control properties), it is critical that they maintain encapsulation of that information. That is, it is critical that they completely control access to their internal data, not allowing it to be changed without their knowledge. The normal way to ensure encapsulation is to use some form of information hiding (for example, declaring the field or variable to be private so that it cannot be accessed directly)—and then allow access to the information only through special accessor methods.


63

• Here we have provided only very basic implementations of accessor methods. The accessor methods in a user-interface model object would contain additional.

This general pattern of using a private field for data and providing get and set methods to read and write the field's value together constitute what we will call the accessor pattern. public class myModelClass {

private myDataType myDataValue; public myDataType getMyDataValue(){return myDataValue;} public void setMyDataValue(myDataType val){myDataValue = val;}}


64

• Visual Basic was not originally designed as an object-oriented language. As a result, implementing the accessor pattern normally involves using individual variables and access procedures that are not nested inside a class definition. Some of the Visual Basic code that follows is equivalent to the accessor pattern described above. Note that we don't expect you, at this point, to understand the Visual Basic code entirely, but do try to understand the gist of the code presented in this section.


Public Sub setMinuteValue(min As Integer) Dim minStr As String

'Force into valid range If min < 0 Then min = 0 If min > 59 Then min = 59

'Update internal value If min <> minuteValue Then minuteValue = min ' Nothing in the application to inform in this case End If

'Prepare a two digit string (zero filled) to display minStr = CStr(min) If min < 10 Then minStr = "0" & minStr

' Update the text display if this is a change If MinutesText.Text <> minStr Then MinutesText.Text = minStr End Sub

65


66

1.1.3 Basic Psychology Needed for Interface

• Motivation • Overview • Perception • Memory • Cognitive Processes • Motor Capabilities • Errors • References


67

Motivation( 动机 )

• Most computer programs are designed to be used by people to perform a task.

• Thus, in order for developers to design good computer systems, they must understand :

1) not only how computers work; 2) but also what the task is and how people

work.


68

• Designs that require people to perform beyond their limitations:

1) cause them to commit errors (which can be costly or even fatal in safety-critical systems),

2) cause them to seek "workarounds" (which are usually inefficient),

3) cause them to abandon systems (if they have the choice) or resist adopting new systems (if they are forced to use them).

4) On the other hand, designs that augment human capability and help overcome people's limitations can be truly helpful, cost effective, and pleasurable to use.


69

• Figure: The triad of good system design: understanding the task, the computer technology, and the people


70

• The purpose of this module is to give you some basic understanding of how people work, of their capabilities and of their limitations, in order to help you design better systems. Obviously, there is much more to know about this topic than one module can teach, but this brief presentation is still useful for two reasons.

First, the facts and principles of psychology are embedded in the methods this class teaches (we'll refer back to them as they come up in subsequent materials), so that when you master and use the methods, you will be implicitly applying these basic principles of psychology.


71

Second, you will often be working in interdisciplinary teams where at least one other team member might have extensive training in one of the behavioral sciences (for example, psychology, sociology, anthropology, or organizational behavior). What you will learn in this module will help you work together with these differently trained people to design effective systems.


72

Overview

•When people use computer systems, they engage in many different activities (Figure 2).

•They usually get information from: 1) the computer screen 2) local hard copy like the manual, 3) papers that they have brought with them to work on, 4) other people. •Then, they usually process that information to come up

with a plan of action either by formulating a new plan or using one they have used before. They then execute the planned actions and process the computer's response.


73

• Throughout these activities people are learning (in the form of acquiring new knowledge or practicing old skills), and they are also committing and detecting errors.

• Decades of psychological research have produced data and theories that can help developers design computer systems that facilitate a user's cycling around this loop, enhancing their learning and minimizing their errors.


74

Human activities involved when using a computer system


75

•A way to think about how people perform these activities that will help us understand some issues in computer interface design is called an information processing model (Figure below).

•This model assumes that a person is like three separate computer processors:

1 ） a perceptual processor, 2 ） a cognitive processor, 3 ） and a motor processor. •The perceptual processor perceives information in the

outside world, does some processing on that information related to the activities in Figure below (reading, listening, visual search, etc.), and deposits symbols in working memory (WM) that represent that information.

An information processing model


76

• Figure : The staged information processing model of people performing activities in the world


77

• Once information is in WM, the cognitive processor can do the necessary processing (problem-solving, planning, determining a course of action, etc.). The cognitive processor can also retrieve (recall) additional information from long-term memory (LTM) to help in its processing, and information from WM can be stored in LTM (learning). When the cognitive processor determines that some action needs to be taken in the outside world (e.g., type a command, use the mouse to select a menu item, scroll the screen, etc.), it deposits a symbol in WM that the motor processor recognizes as a command to do some action.


78

• The motor processor then does the action and the cycle begins again. These processors can work in parallel with each other, which reflects the fact that a person can perceive at the same time as thinking and performing motor actions. For example, when you drive you are looking at the road, thinking about where you will need to turn next, and steering the car—all at the same time. However, the cognitive processor can only do one thing at a time, so there is a bottleneck in the model that is very important in UI design.


79

Perception•Modern computer systems communicate to the user

primarily through 1 ） The user‘s sense of Vision ；2 ） Hearing （ is becoming more important as speech

interfaces mature). 3 ） Some computer systems communicate to the user

through touch, e.g., a computer racing car arcade game that shakes the seat more violently for a bumpy road than for a smooth straightaway.

*Neither smell nor taste has been brought into commercial use in computer systems yet.

• Visual Basic makes visual communication very easy to program; therefore, we will concentrate on the perception of visual signals.


80

• A person can only see detail with a very small area of their eye called the fovea. The fovea sees only about 2 degrees of visual angle. Only when the fovea is pointing at an area on the screen can a person see enough detail to read text or discriminate a detailed icon. To see more than 2 degrees of visual angle, the eye has to move. The rest of the eye is much more sensitive to changes in the visual field than the fovea. That is, in the rest of the screen, where the person is not directly looking, changes in the display will be very noticeable (e.g., blinking, animation, changes in color).


81

• The fovea （小凹） can perceive detail in 2 degrees of visual angle. To read the whole screen, the eye would have to move the fovea around the screen. The eye is very sensitive to changes in the display area outside the foveal region


82

• Visual search is the process by which a person looks for an object such as a word or an icon on a computer display. Visual search is very fast and easy if the target is different, along some dimension, from everything else on the computer display. For example, the target's color, orientation, size, or curvature could be different from that of other objects on the screen. In this case, the target "pops-out" at a person visually, and it doesn't matter if there is a cluttered screen or a very sparse screen.


83

• If the target requires a person to discriminate multiple features, then the visual search is much slower because a person has to look at one item at a time to decide if it is the thing they are looking for. Then aspects of the design like screen clutter, location, display density, and grouping make a lot of difference in how fast the search can be completed. Again, these facts of visual searching bear on the design principles we'll talk about later in the class.


84

Memory• for purposes of UI design, we need to know only a few

general things about memory. • As we learned earlier, there are two important memories:

working memory (WM) and long-term memory (LTM). • WM can be thought of as that part of LTM that is active at

any time. WM is where the perceptual processor deposits the symbols it perceives and where the cognitive system keeps its intermediate results when processing information.

• LTM is the permanent store of information that holds everything the person knows: all facts, procedures, and history (things that happened to the person). This includes vocabulary, procedures for accomplishing tasks, relationships between concepts, etc.


9 5 3 1 6 4 8 7 5 0 5 4 2

85


86

• WM stores information in an acoustic form or a visual form. • LTM, on the other hand, stores the gist of information instead

of the actual acoustic or visual form. This is an important fact because it predicts the type of mistakes people will make.

• For example, a person who has just read a story about Jane may confuse the name with Jean because the names look so similar (all the same letters) and even sound very similar (the "j" and "n" sounds). However, the next week the person may not remember the name at all, but only remember that the story was about a girl (the gist) .

• WM can hold only a limited amount of information at any one time, about 3 chunks .


87

• LTM seems to be essentially infinite, but it is often difficult to retrieve information from it. Things are remembered more readily in the context in which they were learned.

• Another property of LTM is that similar pieces of information interfere with each other's retrieval.

• A third important property of memory is that recognition is easier than recall.

• Finally, here again is the figure we encountered in the section of this page titled “Overview” ：


88

• Note that information can get into WM from perception or from LTM, but information can only get into LTM from WM. This has implications for design and the design methods we will encounter later in the course.


89

Cognitive Processes

• The cognitive processor does all the "thinking" in this model.

That is, it takes symbols in WM (deposited there either from perception or from LTM retrieval) and manipulates those symbols to solve a problem, plan a series of actions in response to that problem, and tell the motor processor how to execute those actions. For UI design, there are two important classes of cognitive processor activities: routine skill and problem-solving.


90

• Routine skill is the type of behavior exhibited by a person who knows a system well. They know all the menu items, commands, dialog boxes, etc. They only have to recognize what task situation (context) they are in and they know exactly what to do.

• For instance, when using your word processor and determining that you want to delete a paragraph, you probably know exactly how to accomplish that .


91

• On the other hand, when a system is new to a person, or when they use it only occasionally, they usually have to problem-solve to accomplish a task.

(Note: Even when a person knows a system well, if it is a complex system, they usually are skilled in some aspects of it but novices in others. For instance, you may know very well how to use your word processor to write documents, but you might not know how to merge a document with a database of addresses to print address labels and write customized form letters.)


92

• When a person problem-solves, it is as if they are searching through a maze(迷宫 ).

They take their best guess about what to do next and go a short ways down that path. If it doesn’t look like they are making progress toward their goal, they will retrace their steps and try another route.

This is typical problem-solving behavior—and we can either deliberately design user interfaces to support that behavior or inadvertently produce user interfaces that hinder it.


93

Motor Capabilities

• The primary human motor behaviors used in computer systems today are typing, pointing, and clicking. These are also the interaction techniques best supported by Visual Basic, so we will concentrate on the psychology of those actions.


94

•In Figure, we see that the motor processor takes information from WM and uses it to act on the world. For instance, the cognitive processor may determine that a menu item needs to be selected and deposits that menu item into WM. The motor processor would then see that menu item in WM, move the mouse to that menu item on the screen, and click the button. Alternatively, if the keyboard shortcut for that menu item is in LTM, the cognitive processor might deposit that knowledge into WM, and the motor processor would type the keyboard shortcut.


95

Errors• People make errors—at all stages of information processing. 1) They will perceive information incompletely (by not seeing it at

all) or incorrectly (by interpreting what they see incorrectly). 2) They will remember information imperfectly, mistaking words

for ones that sound alike (if presented aurally), look alike (if present visually), or are similar in meaning (if retrieved from LTM).

3) They will have incomplete knowledge, so they will retrieve incorrect plans. When problem-solving, their "best guess" will be wrong.

4) Finally, they will "slip" when executing motor actions, hitting the wrong key on the keyboard, or missing the menu item with the mouse.

• Mistakes are inevitable, and, mostly, specific mistakes are unpredictable (though generally error-prone situations can be identified).


96

• This concludes the module on the basic psychology needed for designing user interfaces.

• In summary, the simple model of staged information processing presented in this module, which describes how people interact with the world, is the basis for many UI design guidelines, methods, and predictive analytic techniques—including many of those found later in this course. Therefore, as was mentioned earlier, when you master and apply the methods taught in this course, you will be implicitly applying the insights from this psychological research.

User-Centered Design and Testing Unit 1

Documents

Transcript of User-Centered Design and Testing Unit 1