SSD4 Unit1

Computer Programming Courses and Certificates
 SSD1 = Introduction to Information Systems

 SSD2 = Introduction to Computer Systems
 SSD3 = Object-Oriented Programming and Design
 SSD4 = User-Centered Design and Testing
 SSD5 = Data Structures and Algorithms
http://www.icarnegie.com/curriculum/curriculum_
home.html
Software Systems Development Courses and
Certificates
 SSD1 - 5 = Computer Programming courses and

certificate
 SSD6 = System-Level Programming
 SSD7 = Database Systems
 SSD8 = Networks and Distributed Programming
 SSD9 = Software Specification, Test and Maintenance
 SSD10 = Software Project Organization and

Management
SSD4: User-Centered Design and Testing
Course Resource:
 My email address:
xiongqw@yahoo.com.cn (only for Class 1/2/3, Grade 2005)
ooaoodoop@yahoo.com.cn (only for Class 4/5/6, Grade 2005)
xiongqw@gmail.com (only for Nanwangshan)
 Web site for this course materials
http://www.icarnegie.com/
 Web site for this course and Download information:
http://c4se.51.net/ui/index.htm
 Time for questioning and answering:
1.Before or after class
2.When do practice in lab
Lecture and practice arrangement (for class 1/2/3)
Week Contents Week Contents
1 Lecture 10 Lecture
2 Lecture 11 Exercise/Practice/Exam
3 Exercise/Practice/Exam 12 Lecture
9 Exercise/Practice/Exam 18 Review
Lecture and practice arrangement
Week Contents Week Contents
1 Lecture (Class 1/2/3 ONLY) 10 Exercise/Practice/Exam

2 Lecture 11 Lecture
9 Lecture 18 Review
Overview ---- about our course
 teaches programming interactive user interfaces
 teaches methods to improve the usability of those
interfaces
 Emphasize the view that 希望同学们建立这样
的认识
 Interface usability is essential to successful software
design
 Interface usability in fact can have a critical impact on an
application's overall quality and effectiveness
 not merely a matter of "packaging" or aesthetics
overview
 an accurate, fast, and powerful application can
be rendered useless by a poorly-designed user
interface
 poorly-designed user interface :
 the people who might otherwise benefit from the
application find the interface
 frustrating
 Hard to use
 impossible to use
Course Organization
 The course is organized into four units.
 Unit 1. Overview of User-Centered Design and Testing
 Unit 2. Interfaces: Creating with Visual Basic,

Evaluating with Usability Heuristics
 Unit 3. Think-Aloud Usability Testing
 Unit 4. Programming Beyond Controls

Organization- exercises & exams
 Each unit consists of
 a series of topics
 includes multiple-choice quizzes
 practical quizzes
 a few extended exercises
 all of which will help you gain a solid

understanding of the material.
 In addition, the course features 3 in-class exams.
 Finally, we must pass the certificate exam
Score
 Exercise : 20%
 Exam : 30%
 Final Exam : 50%
 Notice:
 All exercise and exam must be finished! Or no score will
be given to you.
Course Text
 Diane Zak, Programming with Microsoft Visual
Basic .Net, Second Edition, published by Course
Technology, 2005; ISBN: 0-619-21718-9.
Course Text (Last version)
 Diane Zak, Programming with Microsoft Visual
Basic 6.0, Enhanced Edition, published by
Course Technology, 2001; ISBN: 0-619-06204-5.
Course Text
 J. Nielsen, Usability Engineering, published by
Academic Press (AP Professional), 1993; ISBN:
0-12-518406-9. (not necessary)
Reference books
 1 、用户界面设计与开发精解
 2 、人本界面：交互式系统设计
 3 、用户界面设计 ——有效的人机交互策略
 4 、人本界面：设计交互式系统的最新指示（英文
版）
 5 、人机界面设计
 6 、界面设计的编码实现
 7 、界面设计与 Visual Basic
 8 、人机交互：以用户为中心的设计和评估
 9 、交互设计 —— 超越人机交互
Other Materials
 The CTE SSD4 Compact Disc (used in

conjunction with Unit 3).
 The "Student Disks" that supplement the Zak
textbook.
 Download from
http://www.course.com/catalog/downloads.cfm?isbn=0-61
 E-books for studying VB
Hardware and Software Requirements
 Microsoft Windows 95, 98, Me, NT, 2000, or XP
 VGA or better color monitor
 Standard keyboard and mouse
 Windows compatible sound card and speakers
and/or headphones
 CD-ROM drive
 Web browser
 Microsoft Internet Explorer 4.01 or later
 Netscape Communicator 4.7—
note* there is one issue with Internet Explorer 6 SP1, Netscape 7.0, and
Mozilla 1.1.
Hardware and Software Requirements
 Microsoft Visual Basic 6.0
 Microsoft Developer Network ( MSDN )
 Microsoft Word or comparable word processor
 Microsoft Visual .Net

 Express version Can download freely from Microsoft
website.
 Microsoft Word or comparable word processor
Outcomes
 The purpose of SSD4 is for students to
 Learn to design usable, human-friendly user interfaces
(UIs).
 Learn to evaluate interface usability empirically with
two usability tools.
 Learn to create interfaces and interface prototypes using
a rapid-prototyping programming language.
Students completing SSD4 will be able to
 I. Produce
 II. Use
 III. Knowledgeably Discuss
 IV. Hold Positions as User Interface Developers
I. Produce
 Designs and implementations
 Visual Basic UIs and prototypes that meet generally
accepted usability standards.
 Judgments about
 how well interface aspects meet the usability criteria
expressed in ten heuristics.
 interface usability based on the findings of a think-
aloud usability study.
 Summarize usability study findings
 Write Usability aspect reports (UARs)
II. Use
 Think-aloud testing methodology and ten
usability heuristics as tools for
 evaluating real-world user interfaces.
 Critical incident analysis to
 analyze the observations of a think-aloud usability
study.
 A basic set of Visual Basic controls to
 create applications and prototypes.
 UAR recommendations to
 implement changes in interface applications.
III. Knowledgeably Discuss
 Discuss with who?
 Discuss what?
 The human capabilities and limitations that are relevant
to interface design in terms of the Information
Processing Model of human cognition.
 The basic features of the iterative design process and
the basic concepts of interactive programming.
IV. Hold Positions as User Interface Developers
 Those who certify in this course will be able to
 design and implement human-friendly graphical user
interface applications in Visual Basic,
 critically evaluate the usability of user interfaces,
including those that are not computer-based,
 use heuristic evaluation and think-aloud usability testing,
 report their findings in a systematic fashion
 writing usability aspect reports.
IV. Hold Positions as User Interface Developers
 In a small company, students who certify will be
able to fill the roles of interface designer,
implementer, and evaluator.
 In a larger company where design teams are
staffed by specialists from several disciplines,
students who certify will be able to understand
and work well with these varied specialists.
Unit 1. Overview of User-Centered Design and
Testing
 contents
 introduce the basic principles of user interface design.
 cover 2 facets of UI design:
 the construction of interactive programs
 the design of their behavior.
 grounded on the principles of human psychology
 Apply in the techniques of heuristic evaluation and

think-aloud user testing.
Unit 1. Overview of User-Centered Design and
Testing
 1.1 Foundation for User-Centered Design
and Testing
 1.2 A Tool for Creating User Interfaces:
Visual Basic
 1.3 Tools for Evaluating Usability:
Heuristics and Think-Aloud Testing
1.1Foundation for User-Centered Design and Testing
 Contents
 1.1.1 Iterative Design
 1.1.2 Basic Concepts of Interactive Programming
 1.1.3 Basic Psychology Needed for Interface Design
 Assessments
 Exercise 1
 Multiple-Choice Quiz 1
1.1.1 Iterative Design
 Why Iterative Design?

 Visual Basic
 Heuristic Evaluation
 Think-Aloud Studies
Why Iterative Design?
 The goal of this course is for you to learn to
design and build usable software programs that
people can use
 easily,
 efficiently
 correctly
 As if you use everyday objects like VCRs and

microwave ovens
 Many systems built by talented people are
perfectly functional but nearly unusable. ?why
Why Iterative Design?
 system designers cannot fully anticipate the
usability of their designs
 Remreber : 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.

 So, we must
adopt an iterative approach to system design
 Iterative design with feedback
 Rather than using a Feed-forward, or open-loop,

design approach
iterative approach
 we must include steps to refine the design that
incorporate factors other than our personal
opinion and acumen. 不要自以为是！
 often involves a step to
 analyze a preliminary design according to some "rules of
thumb," and a test that gathers and incorporates user
feedback on what has been built
 This approach raises two major questions:
 1?
 2?
To solve the problem …
1. It's hard enough to build something once; how
can we afford to build things more than once?
-- adopt a rapid prototyping approach
3. How do we accumulate experience and get

feedback from users in a way that yields useful
guidance to further work? 为将来的工作积累
经验，生成指南
-- requires
- a body of knowledge of human psychology and
- techniques for eliciting(induce), recording, and
analyzing user feedback. 设法获取用户的反馈
3 important tools of iterative , user-centered design
 Visual Basic
 user interface programming
 heuristic evaluations
 based on accumulated design experience
 think-aloud usability testing

 empirical 也是数十年的经验形成的一种测试
方法
Visual Basic
 one of the most popular programming languages
拥趸粉丝众多！
 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 触类旁通！
Heuristic Evaluation
 heuristic ( 指导原则 ) means a general principle
or "rule of thumb" that usually leads to a good
answer.
 In this course, you will learn a 10 heuristics that
will help you
 to make good user-interface design decisions
 to learn how to apply them in your work
Think-Aloud Studies
 a powerful method empirically evaluating the
usability of a system
 user is presented with a system or prototype(
system or prototype is OK)
 user is asked to perform a task while "thinking
aloud" the steps and decisions involved
 collection and analysis of think-aloud data
Used these three tools together
 Using these three tools together will
 help you to design usable and successful systems.
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
Direct Manipulation
 a style of interaction
 Modern Graphical User Interfaces(GUI) make use of it
 be 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, E.g. ,
 Turn the speaker on/off,
 trash box ， full or empty
 File management of operation system
 the program is structured so that interactions are performed

(primarily) in terms of those representative images 根据各自代
表的图片来组织
Direct Manipulation(con.)
 highly successful, why?
 provide the illusion of directness
 users feel that they are directly acting on objects,
not working through the intermediary of a computer

 The property of directness not one that an
interface either does or does not have
 direct depending on how much of this feeling of
directness they induce in a user
Direct Manipulation(con.)
 the feeling of directness will vary
 from individual to individual,
 from interface to interface, and
 even between parts of an interface
 Interfaces that exhibit more directnesstend to

be easier to learn and use. E.g.,
 dragging a file icon into a trash can, vs. Menu selectiing
 Note:
 directness can go too far （ joystick in games ）
 operations might be much more efficiently handled in
an indirect or automated fashion.
Affordance and Feedback 提供与反馈
 How to provide and reinforce the feeling of
directness ?
 interface designers often concentrate on
providing 2 particularly key characteristics in an
interface. 两个关键的特征
 Affordances are opportunities to act that are readily
apparent to the user. 非常明显的提供给用户操作的时
机，或改善可操作性的措施， E.g.,
 the handle of a hammer
 Knurling — the series of small ridges often found on knobs
that make their surfaces rough
 Feedback is the response by the system to the actions of
the user.
Affordance
 most objects in a graphical user interface appear only as pictures
on a screen
 the physical affordances that they can offer are limited. (some
game software can offer other way)
 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.
virtual affordance
 we cannot knurl objects on the screen,
 we can provide simulated knurling as illustrated in Figure
 It can be effective simply because it reminds us of our past

experience with many real world objects.
 As a general rule (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. 尽量给用户提供
 如，利用交通信号灯表示某些操作提示（禁止、警告）
Feedback
 has a conceptually similar purpose
 Feedback is the response by the system to the actions of
the user.
 clearly indicates the
 nature
 consequences of their actions
 much easier for users to evaluate whether those actions
are having the desired effect 操作是否起了作用？
 Such as : 可以用下面这些常用手法
 updated visual representations
 be provided in other modalities such as audio 对非法
操作会发出“当”的一声
Feedback
 In the physical world
 in the form of vision, touch, and sound.
 In the virtual world
 such strong and immediate feedback is often lacking
 Solution:
 providing strong and immediate feedback for all user actions
 How to ?
Essential Task and the Event/Redraw Cycle
 providing the appearance of directness is a goal
of much modern user interface design
 not reach directly into the computer and manipulate
computational objects
 use the intermediary of the input devices
provided by the computer
 express their actions with those devices
Essential Task
 an interactive program must do several things.

 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)
overall flow of control of an interactive program
 Outputs
 window(ing) system
 window manager
 Inputs
 input event records
 what happened,
 when it happened
 the context of important input devices (where the mouse

was pointing );
 and the status of various modifier keys, SHIFT and
CTRL. 是否用到组合键
graphics library
 可以认为就是一组 API
 supports an abstraction of a series of
independent drawing surfaces
 window system's job
 track current overlap relationships
 modify the outputs actually delivered to the
screen to reflect this structure.
window system
 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. 似乎的 n
多监视器
 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.
input event records
• Events: some significant action ( 什么才叫重要
)
– pressing a keyboard key
– moving the mouse
– the arrival of data on a network connection
 Event queue 管理事件的先来后到
 event records are normally placed in a queue to ensure
they are not lost
 Event handle
 requesting the next event from the input queue
 Interpreting
 Processing
Controls, Model Objects, and Interpreting Events
 Firstly, think about 2 questions:
 how to actually interpret/respond to incoming events ?
 how to structure the output creation process ?
Controls, Model Objects, and Interpreting Events
 Controls toolkit provides
 a much higher-level abstraction of the event/redraw cycle and automates a
number of important steps
 a reusable library of objects that can appear on the screen and be the target of
user input
 Name : widgets 窗口小部件 , interactors 交互因子 , or
interactive component 交互组件 .:
 buttons, sliders, text areas, icons, check boxes, and menus
 In Visual Basic and several other systems, these objects go by the name of
controls
 model object
 maintains the information associated with the object of interest
 E.g., In a Clock app. such as the actual integer value for the minutes
major benefits of using a toolkit
 provides a rich set of such controls
 allows new types of controls to be created when
necessary
 provide a presentation of the objects of interest
to users
 E.g.,
 programmer does not necessarily need to recreate
 a button control, and that all button controls the user sees
will work in the same way
not generally support the detailed semantics of those objects
 Two ways of changing a single modeled value

if change, who draw the screen?
 The answer is : the toolkits !
 The toolkit will then arrange for the actual appearance of
those controls on the screen to be updated as appropriate.
 Notify the toolkit to change, How to do:
 simply changing the properties of the controls
relationship between parts of an interactive system
 model objects have a central organizing role
 accept changes to their modeled information
 either from controls
 from application code
 validate those changes
 updating the properties of any controls related to that

information.
model objects have a central organizing role
 Occasionally it is convenient for controls to
invoke directly application routines, bypassing
the model
 in the case of menus and buttons that represent
"commands" in the application
 the application should normally avoid
manipulating controls directly, without going
through the model
Encapsulation and Accessor Patterns
 information they manage changes －》 model
objects need to be informed
 they need to respond to those changes with
action of their own
 updating various control properties
 Encapsulation:
 they completely control access to their internal data
 not allowing it to be changed without their knowledge
way to ensure encapsulation
 information hiding
 declaring the field or variable to be private
 it cannot be accessed directly
 allow access to the information only through
special accessor methods
Java code example
 public class myModelClass {
private myDataType myDataValue;
public myDataType getMyDataValue() {
return myDataValue;
}
public void setMyDataValue(myDataType val) {
myDataValue = val;
}
}
basic implementations of accessor methods
 The accessor methods in a user-interface model object
would contain additional code
 accessor pattern.:
 the general pattern of using a private field for data
 providing get and set methods to read and write the field's value
 Attention: Visual Basic was not originally designed as
an object-oriented language. When implementing
 the accessor pattern normally involves using individual variables
and access procedures
 not nested inside a class definition
 Unlike its predecessors, VB .Net is a full featured
object-oriented language.
Visual basic code example
Private myDataValue As myDataType
Public Function getMyDataValue() As myDataType
getMyDataValue = myDataValue
End Function
Public Sub setMyDataValue(val As myDataType)
myDataValue = val
End Sub
 Note:
 in Visual Basic Private variables are still accessible inside the
same module,
 so the information hiding here is not a perfect solution
What do the model objects need
 model objects need to perform update actions
whenever their values change
 whenever their set methods are called, they need
to update the properties of all controls that
reflect those values
 E.g.,
 A Label show list’s number
 A List lists all the items
 When item adding or removing

The general pattern implementation code
Public Sub setMyDataValue(val as myDataType)
Dim newPropVal as someType
<Check validity of val, and possibly force into valid range>
If <val is a valid value> Then
If val <> myDataValue Then
myDataValue = val
<Inform any parts of the application that care about the new
value>
End If
<For each control property that depends on myDataValue do the
following>
newPropVal = <prepare new value for the control property based
on myDataValue>
If <control>.someProperty <> newPropVal Then
<control>.someProperty = newPropVal
End If
...
Else
<Ignore new value or perform error handling / feedback action>
End If
End Sub
why these lines are in the code?
 "If val <> myDataValue Then" and "If <control>.someproperty
<> newPropVal Then".
 Answers:
 for correctness as well as for performance
 a simple defensive programming strategy
 avoid having to consider any special cases
 The code which informs other parts of the application of the new
value, may actually be rather time-consuming
 avoided when there are no more true updates to the values of the
variables
 the solution is efficient, easy to implement, and easy to analyze
for correctness
a specific example of applying the model accessor pattern
 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
 display the date/time control as example
1.1.3 Basic Psychology Needed for Interface Design
 Motivation
 Overview
 Perception
 Memory
 Cognitive Processes
 Motor Capabilities
 Errors
Motivation
 Most computer programs are designed to be
used to perform a task
 To design good computer systems, must
understand
 what the task is
 how people work
 how computers work
 this module is to give you

 some basic understanding of
 how people work,
 their capabilities
 their limitations
beyond limitations
 User’s limitations
 cause them to commit errors (which can be costly or even fatal in
safety-critical systems),
 cause them to seek “workarounds” (which are usually inefficient),
环顾左右，无所适从，精力没有集中在工作上
 may cause them to abandon systems (if they have the choice)
 Cause them to resist adopting new systems (if they are forced to
use them).
 designs that augment human capability and help overcome
people‘s limitations 扬长避短！
 can be truly helpful
 cost effective
 pleasurable to use
two reasons for briefly introducing psychology
 First reason
 the facts and principles of psychology are embedded in
the methods
 when you master and use the methods, you will be
implicitly applying these basic principles of psychology.
two reasons for briefly introducing psychology
 Second reason
 you will often be working in interdisciplinary teams
where at least one other team member
 They might have extensive training in one of the
behavioral sciences, E.g.
 psychology,
 sociology,
 anthropology, or
 organizational behavior
 help you work together with these differently trained
people
 to design effective systems
Ways to get information
 from the computer screen
 from local hard copy, like the manual
 from papers
 from other people
Human activities involved when using a computer system
Human
activities
involved
when using a
computer
system
 visio graph
Conclusions of decades of psychological research
 Decades of psychological research have
produced data and theories
 can help developers design computer systems
 facilitate a user's cycling around this loop
 enhancing their learning and minimizing their errors

information processing model
processors
 The perceptual processor
 perceives information
 does some processing on that information
information related to the activities
 deposits symbols in working memory (WM) that
represent that information
 cognitive processor
 necessary processing (problem-solving, planning,
determining a course of action, etc.).
 retrieve (recall) additional information from long-
term memory (LTM) to help in its processing
 information from WM can be stored in LTM
(learning).
processors
 motor processor
 deposits a symbol in WM that the motor
processor recognizes as a command to do some
action
 does the action and the cycle begins again
3 processors work in parallel with each other
 NOTE :
 work in parallel with each other, a person can
 perceive
 at the same time as thinking and
 performing motor actions
 the cognitive processor can only do one thing at
a time. a bottleneck in UI design
Perception
 Type
 Vision
 Hearing
 Touch
 Smell
 taste
 For computer system

 vision
 Hearing
 Sometimes touch , e.g., Motor racing game
 Visual Basic makes visual communication very easy to program;

 So concentrate on the perception of visual signals
fovea
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). The user's eye is naturally drawn to this
activity in the periphery, making it hard for the user to stay
focused on the object he or she was trying to read or decipher.
Furthermore, visual perception takes time. It takes about 100
msec for the eye to detect a simple visual signal (like a light
coming on) and deposit that fact in WM. It takes about 30
msec for the eye to move to another location on the screen.
There are several design principles that can be derived from
these characteristics of eye that we will discuss as they come
up in the course.
Facts for researching
 person is not directly looking at the rest of the
screen
 changes in the display will be very noticeable e.g.,
 blinking,
 animation,
 changes in color
 user's eye is naturally drawn to this activity in the

periphery
 making it hard for the user to stay focused on the
object he or she was trying to read or decipher
Facts for researching
 visual perception takes time. It takes about 100
msec for the eye to detect a simple visual signal
(like a light coming on) and deposit that fact in
WM
 It takes about 30 msec for the eye to move to
another location on the screen.
 There are several design principles that can be
derived from these characteristics of eye.
(discuss later)
Visual search
 Visual search : the process by which a
person looks for an object
 E.g., a word or an icon on a computer
display.
 is very fast and easy if the target is
different, along some dimension, from
everything else on the computer display
 E.g. target's different in
color , orientation, size, curvature
 One feature : it doesn't matter if there is a
cluttered screen or a very sparse screen.
Visual search
 discriminate multiple features: the visual search
is much slower
 Then aspects of the design like … make a lot of
difference in how fast the search can be
completed
 screen clutter
 location
 display density
 grouping
psychology
 intense theoretical and empirical debate in the
academic psychological community
 for purposes of UI design
 we need to know only a few general things
about memory
 not the subtle details academics worry about
Memory
 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. (computer memory)
 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.(database)
information store of WM & LTM
 WM stores information in an acoustic form or a visual form
 LTM stores the gist of information instead of the actual
acoustic or visual form
 E.g.,
 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).
 the next week the person may not remember the name at all
 only remember that the story was about a girl (the gist).
3 chunks of information at any one time
 WM can hold only a limited amount of
information at any one time
 3 chunks
 A chunk is a symbol for a piece of information
 Chunks can be hierarchically organized.
property of LTM: seems to be essentially infinite
 seems be infinite, but it is often difficult to
retrieve information from it
 As a databse , db is OK , but somewrong with its retrieve
mechanism
property of LTM: Things are remembered more readily in
the context in which they were learned
 E.g.,
Dog Cat
Mouse Rat
Horse Squirrel
Pig Cow
Sheep
if you were asked to recall the items of computer
hardware, it would be very difficult for you to
remember "mouse“,because
you learned it in the context of "animals" and
were asked to recall it in the context of
"computer hardware.
property of LTM: similar pieces of information interfere with
each other's retrieval
 E.g. ,
 try to recall the name of the Web browser you typically use
 try to recall the URL of a Web page you looked at on Tuesday of
last week
 Since you probably typically use only one Web browser,
it is probably easy for you to recall its name
 Since you have probably visited a good many Web pages
since last Tuesday—all of which have URLs that start
with "http://"—it is probably difficult for you to recall
the URL of a particular page you visited last Tuesday.
property of memory: recognition is easier than recall
 E.g.,
 if you show someone an item and ask if they have seen it before, it
will be much easier for them to answer "yes" or "no" than if you
asked them to name all the items they have seen before.
 When you recite those English words
 it would be much easier for them to recognize whether or not

they have seen the item than to recall the item from LTM.
 The psychological theories differ in their detailed explanations of
this phenomenon
 but the phenomenon is robust, its occurrence is reliable.
 the fact: after perception has placed information about an item in
WM, that information triggers the LTM encodings of the item.
Note!!!
 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

Cognitive Processes
 The cognitive processor does all the "thinking" in this model
 Processe as follows:
 it takes symbols in WM, deposited there
 either from perception
 or from LTM retrieval
 manipulates those symbols to
 solve a problem
 plan a series of actions in response to that problem
 tell the motor processor how to execute those actions
 For UI design, there are two important classes of cognitive

processor activities:
 routine skill
 problem-solving
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.
 E.g., Using word to delete a paragraph (e.g., highlight
the paragraph and hit the delete key).
 When a person has attained this level of skill, it is
possible to predict how long it will take that person to
execute routine tasks with the computer system
problem-solving
 when a system is new to a person / when they
use it only occasionally
 usually have to problem-solve to accomplish a
task
 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
 E.g. Using Word, type letter to write , some
advanced function you may never use and can
not use.
problem-solving
 typical problem-solving behavior:
 When problem-solves, as if 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
 For UI designer: can
 either deliberately design user interfaces to support that
behavior
 or inadvertently produce user interfaces that hinder it.
Motor Capabilities
 The primary human motor behaviors used in
computer systems:
 typing,
 pointing,
 and clicking
 These are also the interaction techniques best

supported by Visual Basic
 we will concentrate on the psychology of those
actions
motor processor
 motor processor takes information from WM and uses it to act
on the world.
 E.g. When using compuer system
 the cognitive processor may determine that a menu item needs to
be selected
 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

Typing
 been studied in detail for over a hundred years
 there are many robust phenomena associated
with typing
 what types of errors people make
 which type they detect themselves
 how long it takes to stop transcription typing
 for most design purposes, a person's typing

speed is the only parameter needed
 This predicts how long it will take them to enter
information / use a keyboard shortcut
Pointing
 A motor action that had been studied intensively before
computers came into common use.
 Fitts's Law : a robust psychological law that relates the size and
distance of a target to the time it takes to point to it
 Tpoint = IM log2 (Distance/Size + 0.5)
 IM is a constant that is determined empirically. It is not important that
you understand how to compute with this formula, only that you realize
that The time required to move the mouse increases as the distance to
the target increases or the size of the target decreases.
 The ratio of distance-to-target to size-of-target is important—such that,
small and near targets can be just as difficult to hit as targets that are far
away.
 the movement of the hand from the keyboard to the mouse, or vice-
versa, (called homing) has been measured to be about 400 msec.
motor execution times
 analysts can make quite accurate predictions
about motor execution times
 typing speed
 Fitts's Law for pointing,
 clicking the mouse button,
 and homing—analysts
 these parameters also contribute to some of the

design heuristics we'll study later in the class
Errors
 People make errors—at all stages of information processing
 They will perceive information incompletely (by not seeing it at all)
 or incorrectly (by interpreting what they see incorrectly).
 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).
 They will have incomplete knowledge, so they will retrieve incorrect plans.
 When problem-solving, their "best guess" will be wrong.
 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,
 mostly specific mistakes are unpredictable (though generally
error-prone situations can be identified ).
The conclusion of basic psychology needed for designing
user interfaces
 Present- the simple model of staged information
processing
 which describes how people interact with the
world,
 is the basis for many UI design guidelines,
methods, and predictive analytic techniques
 you master and apply the methods, you will be
implicitly applying the insights from this
psychological research
Assessments
 Exercise 1
1.2 A Tool for Creating User Interfaces: Visual Basic
 1.2.1 The Visual Basic Programming

Environment
 1.2.2 Writing Visual Basic Code
 1.2.3 Debugging Visual Basic
 Assessments
 Exercise 2
Module Overview
 quickly acquainting you with some of Visual
Basic’s fundamentals
 Visual Basic represents one of the fastest ways to
create applications for the Windows platforms
 It allows programmers to build applications
visually
 visually—by "drawing" controls on form windows or
just forms).
 like dragging objects onto forms from the palette-like Visual
Basic Toolbox
 dragging their corners to resize them
 and dragging them from one place on a form to another

What you will learn …
 VB, as the programming language for
 a host of other Windows application
 Microsoft Excel, Microsoft Access, and others
 What you will learn …
 the components of the Visual Basic interactive programming
environment
 forms, controls, and
 how to write Visual Basic code
 gain skill in debugging Visual Basic code and learn how the
Visual Basic 6.0 environment supports this important task
What you will learn …
 notice : some of these lessons are like those you have
learned in other contexts?JAVA? C++?
 the nice things skills learned in one context often transfer readily
to another
 the differences between languages are sometimes subtle
 what you know about one language gets you into trouble when
you are learning another
 pay particular attention to how that language differs from others
you may know
The Book
 Programming with Microsoft® Visual Basic 6.0
 All the readings for this module come from this text
 the module will take advantage of the book’s tutorial
format
 the book contains many useful features not utilized

explicitly in this course
 it would be worth your while to take time, before
starting, to peruse the book and examine some of these
features
How to read the textbook
 Begin either with the first selection and work
forward or with the last selection and work
backward.
 Skim introductions and summaries.
 Read section titles.
 Glance at diagrams, tables, and illustrations.
 Dip into the text here and there to catch a
sentence or two, a TIP—or something that just
happens to catch your eye.
1.2.1 The Visual Basic Programming Environment
 Installation and Setup
 Creating and Changing Projects in the Visual Basic
Interactive Environment
 Getting Help
Installation and Setup
 your textbook comes with a CD that contains a
"working model" of Visual Basic 6.0
 the working model is limited: it cannot do every
task the tutorials require (for example, it cannot
create EXE files).
 its help facility is extremely limited and does not
include the MSDN Library
 access to the MSDN Online Library is free
 Suggestion : install the enterprise version of VB

6 for study to use the advanced tools of it
Creating and Changing Projects in the Visual Basic
Interactive Environment
 how to start and exit Visual Basic
 the components of the Visual Basic display.
 how to set object properties
 how to create, save, run, and stop applications
 how to open new and existing projects
 Use Student Disks, work through Lesson A.

 Use the Lesson’ summary and questions to
review those learned
 try the Lesson’s exercises
Getting Help
 Microsoft Development Network (MSDN)
Library
Assigned reading
 Zak, pages xv–xvi.(P21) Remark: Complete this
part of the reading after reading the "Installation
and Setup" section below.
 Zak, Tutorial 1, Lesson A, pages 17–34, including
the summary and questions. Remark: Complete this
part of the reading after reading the "Creating &
Changing Projects in the Visual Basic Interactive
Environment" section below.
 Zak, Tutorial 1, Lesson B, pages 39–50, including
the summary and questions; Discovery Exercises,
pages 54–6. Remark: Complete this part of the
reading after reading the "Getting Help" section
1.2.2 Writing Visual Basic Code
•Forms, Controls, and Writing & Editing Visual

Basic Code
•The Visual Basic Programming Language
•Control Structures, Etc.
•String Manipulation
Forms, Controls, and Writing & Editing Visual Basic Code
The Visual Basic Programming Language
 the syntax and elements of several useful
statements
 how to create local, form-level, and global
variables
 set data types
 assign data to these variables
 concatenate string data
 write Visual Basic equations
Control Structures, Etc.
 condition-sensitive functions
 If then else
 For Next,
 Do While
 Do Until
String Manipulation
 Right,
 Left
 Mid
 Instr
Assigned reading
 Zak, Tutorial 1, Lesson C, pages 57–81, including the
summary and questions but not the exercises. Remark:
Complete this part of the reading after reading the
"Forms, Controls, and Writing & Editing Visual Basic
Code" section below.
 Zak, Tutorial 2, Lessons A, B, and C, pages 89–107,
109–24, 129–51, including the summary and questions
but not the exercises; Tutorial 3, Lessons A and B, pages
161–88 and 190–209, including the summary and
questions but not the exercises. Remark: Complete this
part of the reading after reading the "The Visual Basic
Programming Language" section below.
 Zak, Tutorial 4, Lesson A, pages 237–74, including the
summary and questions but not the exercises; Tutorial
5, Lessons A, B, and C, pages 337–66, 371–88, and 391–
403, including the summary and questions but not the
1.2.3 Debugging Visual Basic
Listing, Verifying, Finding, and Replacing

Trapping Errors and Using the MsgBox Statement
Using the Debug Menu: Stepping, Breakpoints, and Watches
Listing, Verifying, Finding, and Replacing
Trapping Errors and Using the MsgBox Statement
 error trapping
 MsgBox
Using the Debug Menu: Stepping, Breakpoints, and Watches
Assigned reading
 Zak, the debugging sections on pages 87–8, 159–
60, 234–6, 334–5, 410–2, and 514–6. Remark:
Complete this part of the reading after reading
the "Listing, Verifying, Finding and Replacing"
section below.
 Zak, the debugging sections on pages 572–5 and
642–3. Remark: Complete this part of the
reading after reading the "Trapping Errors and
Using the MsgBox Statement" section below.
 Zak, the debugging sections on pages 713–5 and
794–800. Remark: Complete this part of the
Exercise 2
1.3 Tools for Evaluating Usability: Heuristics and
Think-Aloud Testing
 1.3.1 Basic Heuristic Evaluation

 1.3.2 Basic Think-Aloud Usability Testing
 1.3.3 How to Write a Usability Aspect Report
(UAR)
 Assessments
1.3.1 Basic Heuristic Evaluation
 Heuristic Evaluation
 Overview of Procedure for Using Heuristics
 Heuristics-A brief Discussion
 Visibility of System Status
 Match Between System and the Real World
 User Control and Freedom
 Consistency and Standards
 Error Prevention
 Recognition Rather Than Recall
 Flexibility and Efficiency of Use
 Aesthetics and Minimalist Design
 Help Users Recognize, Diagnose, and Recover from Errors
 Help and Documentation
Heuristic Evaluation - usability principles
 developed by researchers in Denmark a decade
ago
 established from the practice of UI design and
evaluation
 embody a compilation of good design practices
 known design failures that have arisen in the UI design
field over the last 30 years
 not derived from the information-processing
psychological theory
Heuristic Evaluation - usability principles
 a technique for analyzing the usability of an
interface design at early stages of development.
 to create an informal, tractable, and teachable way to
look at an interface design
 form an opinion about what is good and bad about it
 In this overview, give a brief description

 how the technique is used
 each of the heuristics and
 their relations to the information-processing theory
Overview of Procedure for Using Heuristics
 The basic procedure
 come up with a UI design
 have several people examine that design
 respect to whether it violates any of the heuristics
 If it violates a heuristic, fix the design
 The design can be at any stage in the

development
 as preliminary as paper and pencil sketches
 a partially operational prototype written in Visual Basic
 a fully operational system
Overview of Procedure for Using Heuristics
 the earlier that usability problems are found, the
cheaper it is to fix them
 HE is probably most valuable when it is used on
very early sketches or prototypes.
How many evaluators will join in?
 research has shown that different people will find different
violations
 So, several evaluators will do a HE review of a design
 For a very simple system, four or five evaluators are sufficient
 Eg. ATM only a half a dozen functions
 For more complicated systems, more evaluators may be

necessary
 A simple technique to learn and use
 not difficult to find development team members who will perform
this function
 even one or two people doing the evaluation will find some
usability problems
 use heuristics implicitly as you design, these heuristics can inspire
some of the details of a UI design
HE1 : Visibility of System Status
 Brief explanation :
 should keep the user informed about what is going on
– the computer has received what input it
– what processing it is currently doing
– what the results of processing are
• Relationship to the information-processing

model
– supply information to the user through sight or sound
– otherwise, the user will not understand what is
happening
HE2 : Match Between System and the Real World
 Brief explanation
 should use concepts, language, and real-world conventions that
are familiar to the user
 E.g. Menu, radiobox, and so on
 developers need to understand the task the system is going to

perform — from the point of view of the user
 makes cultural issues relevant for the design of systems that are
expected to be used globally
 Relationship to the information-processing model
 make use of knowledge already in a user’s long-term memory
 Familiar concepts, language, and real-world conventions in the
interface
 their experience with the task domain
HE3 : User Control and Freedom
 Allow the user to have control of the interaction
 Users should be able to undo their actions easily
 exit from any interaction quickly at any time
 not be forced into a series of actions controlled by the

computer
 Relationship to the information-processing
model.
 Users will make errors
 they will need easy ways to recover from them.
HE4 : Consistency and Standards
 Information that is the same should appear to be the same
 same words, icons, and positions on the screen
 consistency should be maintained within a single application and
within a platform
 Developers therefore need to know platform conventions
 E.g. The file menu bar ,help menu bar in any window-based
application
 As with the Match Between System and the Real World heuristic
 makes use of a user’s prior knowledge and experience with other
parts of the same application as well as with other applications on
the same platform
HE5 : Error Prevention
 As much as possible, prevent errors from happening in the first place
 help users select among legal actions / rather than allowing them to
perform any action and telling them after making an error
 This could be considered 1st heuristic ( visibility of system status )
 E.g., what input the computer system is ready to accept
 is so important and so often violated that it warrants its own heuristic
 Relationship to the information-processing.
 Errors can come from
 users make mistakes in perception
 lack knowledge about what to do next
 recall the gist of a command rather than the exact details
 slip when they type or point
 these mistakes can be prevented by showing only those actions that are
acceptable
 caught as soon as the user performs
 E.g.
 graying out inappropriate buttons
 not accepting an incorrect abbreviation of a US state in an address form
HE6 : Recognition Rather Than Recall
 Show all objects and actions available to the user
 Do not require them to remember information from one
screen of the application to another

model
 direct application of theories of human memory
 much easier for someone to recognize
HE7 : Flexibility and Efficiency of Use
 have accelerators to allow skilled users to speed up their
interaction
 E.g. keyboard shortcuts
 be able to tailor interface to speed up frequent actions
 Relationship to the information-processing model the
motor processes of the user
 Typing single keys is faster than switching the hand
between the keyboard and the mouse and pointing
 skilled users will develop plans of action whose
executed frequently
tailoring can capture these plans in the interface
HE8 : Aesthetics and Minimalist Design
 Eliminate irrelevant screen clutter

 relates to the visual search aspect of perception and also
to memory
 The more clutter, the more information the eyes must
search through to find the desired information
 the more information coming in through perception as
the visual search proceeds, the more this information
interferes with the retrieval from long-term memory of
the information that is actually relevant to the task at
hand
HE9 : Help Users Recognize, Diagnose, and Recover from
Errors
 Error messages should be written in plain language
 tell the user what the problem is
 give constructive advice about how to recover from the

error
 this could be considered a subset of the first heuristic ,
but it is so important and so often violated that it
warrants its own heuristic
model
 give the user sufficient information to understand the
situation
HE10 : Help and Documentation
 system need help and documentation
 should be always available, easily searchable, and give

concrete advice applicable to users’ tasks
 an admonition to give the user sufficient information to
understand the application
 should allow information to be found by asking for the
gist of the meaning
 rather than only the exactly right keyword
 people will remember only the gist, not the exact words
(if they ever knew them).
Summary
 keep these ten heuristics in mind
 system will be more usable than those violates

them
 As early as possible
 e.g., with sketches or a prototype, have several people
examine the UI design using these heuristics to discover
violations and give you plenty of time to fix them.
1.3.2 Basic Think-Aloud Usability Testing
 an empirical technique for assessing the usability of a prototype
of an interface
 "may be the single most valuable usability engineering method "
 The essence of the technique
 ask a user to think aloud while performing a task on your system;
 you watch silently and learn
 how the user thinks about the task
 where the user has problems using your system
 this technique is usually performed after a prototype is built

 Although it is possible to do a think-aloud test with a paper
prototype
 it is much easier and more realistic to use a running prototype
Differences of two tools
 Heuristic evaluation:
 an analyst, often a developer of the system, can
apply a few design heuristics successfully to predict
usability problems
 require the analyst think "like a user“
 requires analyst to know the task domain of the user
 "speak the user's language"
 requires the analyst to know what the user considers
consistent and
 requires the analyst to know what other standard
interfaces they already know.
Differences of two tools
 think-aloud usability testing
 assumes the analyst can no longer "think like a user“
 the analyst knows too much about the system (and
sometimes too little about the task domain).
 representative users actually interact with a prototype
 discover what a typical user might think or do with
the system
 These two techniques will discover different
usability problems,
 use both techniques in designing a system.
The procedure for doing an effective TA usability test
 1st, typical tasks are created that typical users might do with
your system.
 2nd, users are identified who represent the types of people you
expect to use your system
 they should have similar educational backgrounds and computer
experience to your intended users
 Invite them into a lab
 inform them about the purpose and procedure of the test
 train them to think aloud
 They are allowed to use the system in any way that they can to
accomplish the task without interruption or help
 3th, the videotapes are analyzed for "critical incidents“, that are
clues to
 what is problematic and needs to be fixed in the next version of
the system
 what is easy to use and should be preserved in the next version
The basic psychological concept behind think-aloud testing
 Users
 can voice their thoughts
 can speak aloud the contents of their working
memory as they work on a task
 Speaking aloud the contents of working memory

is easiest to do with the linguistic contents of
working memory
 it doesn't interfere much with the performance
of the task
The basic psychological concept behind think-aloud testing
 It is possible for people to voice the nonlinguistic
contents of working memory
 E.g., searching for a specific blue in a color-selection control
panel
 doing so typically slows down their performance of the
task
 people cannot put voice to the processing they are doing

on the contents of working memory
 they mention the concepts or objects they are working
on but not the rapid cognitive processes they are
performing.
What UI designer do?
 interface designers who listen to their thoughts can
learn a lot about what the users are thinking.
 learn
 which commands or which menu items make sense to users
and how those commands
 menu items connect to the users' task domain
 which items the user sees and attends to and which he or she
misses entirely
 which procedures in the interface are easy to figure out
 which are totally misunderstood
 how the interface leads a user down a wrong path
 how the user recognizes an error and backs up
 how the interface helps or hinders exploration

How to do?
 asking a user to think aloud
 just watching the interaction —without
"helping" the user
1.3.3 How to Write a Usability Aspect Report (UAR)
 Usability Aspect Reports
 The Elements of a UAR Report
 UAR Identifier
 Succinct Description of the Usability Aspect
 Evidence for the Aspect
 Explanation of the Aspect
 Severity of the Problem or Benefit of the Good Feature
 Possible Solutions and Potential Trade-Offs
 Relationship to Other Usability Aspects
 IMPORTANT: Always Step Back and Try to See

the Bigger Picture!
Usability Aspect Reports
 find aspects of the interface
 problems for users (which you will want to fix in the
next version
 helpful to users
 help to make that next version more usable

 Writing a clear, useful report of these aspects (called a
usability aspect report or UAR)
 In project development
 write these reports for other members of development
team who have not seen the usability issue
 reports must be clear and complete :
 clarity and completeness will help you understand each report
six months after you write it
The Elements of a UAR Report
 UAR Identifier
 Succinct Description of the Usability Aspect
 Evidence for the Aspect
 Explanation of the Aspect
 Severity of the Problem or Benefit of the Good

Feature
 Possible Solutions and Potential Trade-Offs
 Relationship to Other Usability Aspects

UAR Identifier
 be a unique identifier for the purposes of filing
 Identifier could contain letters and numbers
 E.g. Chris Smith and Jan Koo are both doing an analysis
 identifier might be CS1 or JK75
 both a heuristic evaluation and a think-aloud usability
study were used,
 identifiers might be HE6 or TA89.
UAR Identifier
 If the report pertains to a usability problem of the
interface,follow the unique identifier with the word
"Problem"
 Eg. “HE23 – Problem”
 if it describes an aspect of the interface you feel should
be preserved in any redesign, follow the unique
identifier with the word " Good Feature"
 Eg. “HE25 -- Good Feature ”
Succinct Description of the Usability Aspect
 be used as the "name" of this UAR when you talk about
its relation to other UARs
 Make the name as short as possible (about three to five
words)
 but still descriptive and distinguishable from other
aspects of the system
Succinct Description of the Usability Aspect
 When UAR is about a problem
 make sure you have a name that describes the problem,
 rather than a solution.
 E.g. "Press-Me label too small" // "Press-Me label should be 24
point"
 to leave room for the possibility that you might find
several problems that are similar and that suggest one
common solution
 if solve each individual problem individually and give
individual solution in the name of its UAR, may not see
the similarities in the problems
Evidence for the Aspect
 the objective supporting material that justifies
your identifying the aspect
 needs to contain enough information for a reader
of this UAR to understand what triggered the
report
Evidence for the Aspect
 E.g. an HE report could be an image of a
cluttered screen and the heuristic about
aesthetics and minimalist design
 E.g. When not have keyboard shortcuts and the
heuristic about providing shortcuts: it could be a
list of menu items
 E.g. a think-aloud study this is a screen shot or
description, or a brief animation
 what was on the screen
 what the user did (keystrokes, mouse movements),
 what the system did in response to any user actions, and
 what the user said
Explanation of the Aspect
 interpretation of the evidence
 E.g. "the button label, XYZ, is a standard programming
term, but the user didn't seem to know that term"
 E.g., "the system was in editing mode, but the user
thought it was in run mode because there isn't a
noticeable difference between the modes on the screen."
 This should be written in a tone that analyzes what
happened with the system aspect,
 NOT in a tone that suggests an evaluation
 provide enough context in this explanation for the
reader to understand the problem—even if they do not
know the system or domain as well as you do
Severity of the Problem or Benefit of the Good
Feature
 reasoning about how important it is
 either fix this problem
 Or preserve this good feature
 includes how frequently the users will experience

this aspect
 whether they are likely to learn how it works
 whether it will affect new users, casual users,
experienced users
Possible Solutions and Potential Trade-offs
 When a problem : this is the place to propose a solution
 not necessary to have a solution as soon as you identify
a problem
 problem—you might find after analyzing the whole
interface that many problems are related
 can all be fixed by making a single broad change instead
of making several small changes
 report any potential design trade-offs
 E.g.
 no keyboard shortcuts for items on a menu in a mail system and
you propose CTRL-S for SEND
 But CTRL-S might already be used for another menu item
(SAVE)
 all shortcut keys need to be examined before any design
Relationship to Other Usability Aspects
 It is often the case that UARs are related to each other
 where you record which UARs this one is related to and
a statement about how it is related
 Make sure that all the related UARs point to each other.
 E.g.
 if UAR #1 related to UAR #30, then UAR #30 should
point to UAR #1 in this section and UAR #1 should
point to UAR #30 in its version of this section
 common mistake:
 to enter the pointer into a newly created UAR,
 neglect to go back to the previous ones that it relates to

and update their UARs
IMPORTANT: Always Step Back and Try to See the Bigger
Picture!
 stepping back and looking for patterns in the usability
problems
 do this at several times during the analysis
 When each UAR is created, you should
 look back to the previous UARs and see if they are
related to the new one
 When you have completed all UARs,
 you should go back and look again for patterns
 Why do this?
 detect larger problems in the interface that might have a
solution that fixes many small problems with only one
change
Exam 1

SSD4 Unit1

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

SSD4 Unit1

Caricato da

Copyright:

Formati disponibili

Computer Programming Courses and Certificates

 SSD1 = Introduction to Information Systems

 SSD3 = Object-Oriented Programming and Design

 SSD4 = User-Centered Design and Testing

 SSD5 = Data Structures and Algorithms

 SSD1 - 5 = Computer Programming courses and

 SSD7 = Database Systems

 SSD8 = Networks and Distributed Programming

 SSD9 = Software Specification, Test and Maintenance

 SSD10 = Software Project Organization and

1 Lecture (Class 1/2/3 ONLY) 10 Exercise/Practice/Exam

 Unit 1. Overview of User-Centered Design and Testing

 Unit 2. Interfaces: Creating with Visual Basic,

 Unit 3. Think-Aloud Usability Testing

 Unit 4. Programming Beyond Controls

 a few extended exercises

 all of which will help you gain a solid

 The CTE SSD4 Compact Disc (used in

 Microsoft Visual .Net

 the construction of interactive programs

 the design of their behavior.

 grounded on the principles of human psychology

 Apply in the techniques of heuristic evaluation and

 1.1.3 Basic Psychology Needed for Interface Design

 Why Iterative Design?

 As if you use everyday objects like VCRs and

 This limitation stems from several sources:

 Users do not know what you were thinking when you

designed the system, while you do.

 Rather than using a Feed-forward, or open-loop,

3. How do we accumulate experience and get

 think-aloud usability testing

 trash box ， full or empty

 File management of operation system

 the program is structured so that interactions are performed

not working through the intermediary of a computer

 even between parts of an interface

 Interfaces that exhibit more directnesstend to

 opportunities for action

associated with objects apparent to the user.

 It can be effective simply because it reminds us of our past

 an interactive program must do several things.

 Interpret those inputs in the context of the objects on

 the context of important input devices (where the mouse

 Two ways of changing a single modeled value

 either from controls

 from application code

 validate those changes

 updating the properties of any controls related to that

 When item adding or removing

 a simple defensive programming strategy

 avoid having to consider any special cases

 this module is to give you

 enhancing their learning and minimizing their errors

 For computer system

 Sometimes touch , e.g., Motor racing game

 Visual Basic makes visual communication very easy to program;

 user's eye is naturally drawn to this activity in the

 it would be much easier for them to recognize whether or not

 the design methods

 either from perception

 or from LTM retrieval