Computer Programming Courses and Computer Programming Courses and Certificates Certificates SSD1 = Introduction to Information SSD1 = Introduction to Information Systems Systems SSD2 = Introduction to Computer Systems SSD2 = Introduction to Computer Systems SSD3 = Object-Oriented Programming and SSD3 = Object-Oriented Programming and Design Design SSD4 = User-Centered Design and Testing SSD4 = User-Centered Design and Testing SSD5 = Data Structures and Algorithms SSD5 = Data Structures and Algorithms http://www.icarnegie.com/ http://www.icarnegie.com/ curriculum/curriculum_home.html curriculum/curriculum_home.html
Transcript
Computer Programming Courses and CertificatesComputer Programming Courses and Certificates
SSD1 = Introduction to Information Systems SSD1 = Introduction to Information Systems SSD2 = Introduction to Computer Systems SSD2 = Introduction to Computer Systems SSD3 = Object-Oriented Programming and Design SSD3 = Object-Oriented Programming and Design SSD4 = User-Centered Design and TestingSSD4 = User-Centered Design and Testing SSD5 = Data Structures and AlgorithmsSSD5 = Data Structures and Algorithms
[email protected] (only for Nanwangshan)[email protected] (only for Nanwangshan) Web site for this course materialsWeb site for this course materials
http://www.icarnegie.com/http://www.icarnegie.com/ Web site for this course and Download information: Web site for this course and Download information:
http://c4se.51.net/ui/index.htmhttp://c4se.51.net/ui/index.htm Time for questioning and answering:Time for questioning and answering:
1.Before or after class1.Before or after class
2.When do practice in lab2.When do practice in lab
Lecture and practice arrangementLecture and practice arrangement
Overview ---- about our courseOverview ---- about our course
teaches teaches programmingprogramming interactive user interfacesinteractive user interfaces teaches methods to improve the teaches methods to improve the usabilityusability of those of those
interfaces interfaces EmphasizeEmphasize the view that the view that 希望同学们建立这样的希望同学们建立这样的
认识认识 Interface usabilityInterface usability is essentialis essential to successful software to successful software
designdesign Interface usabilityInterface usability in fact can have a in fact can have a critical impactcritical impact on on
an application's an application's overall quality and effectivenessoverall quality and effectiveness notnot merely a matter of "packaging" or aesthetics merely a matter of "packaging" or aesthetics
overviewoverview
an accurate, fast, and powerful application can an accurate, fast, and powerful application can be rendered be rendered uselessuseless by a by a poorly-designed user poorly-designed user interfaceinterface
poorly-designed user interface :poorly-designed user interface : the people who might otherwise benefit from the the people who might otherwise benefit from the
application find the interface application find the interface frustratingfrustrating Hard to useHard to use impossible to useimpossible to use
Course OrganizationCourse Organization
The course is organized into four units. The course is organized into four units.
Unit 1Unit 1. Overview of User-Centered Design and Testing . Overview of User-Centered Design and Testing
Unit 2. Interfaces: Creating with Visual Basic, Unit 2. Interfaces: Creating with Visual Basic, Evaluating with Usability Heuristics Evaluating with Usability Heuristics
Unit 3. Think-Aloud Usability Testing Unit 3. Think-Aloud Usability Testing
Unit 4. Programming Beyond Controls Unit 4. Programming Beyond Controls
Each unit consists of Each unit consists of a series of topicsa series of topics includes multiple-choice quizzesincludes multiple-choice quizzes practical quizzes practical quizzes a few extended exercises a few extended exercises
all of which will all of which will help you gain a solid help you gain a solid understandingunderstanding of the material. of the material.
In addition, the course features In addition, the course features 33 in-class exams. in-class exams. Finally, we must pass the Finally, we must pass the certificate examcertificate exam
Notice:Notice: AllAll exercise and exam exercise and exam must be finishedmust be finished! Or ! Or no scoreno score will will
be given to you.be given to you.
Course Text Course Text
Diane Zak, Diane Zak, Programming with Microsoft Visual Programming with Microsoft Visual Basic .NetBasic .Net, Second Edition, published by Course , Second Edition, published by Course Technology, 2005; ISBN: 0-619-21718-9.Technology, 2005; ISBN: 0-619-21718-9.
Course Text (Last version)Course Text (Last version)
Diane Zak, Diane Zak, Programming with Microsoft Visual Programming with Microsoft Visual Basic 6.0, Enhanced EditionBasic 6.0, Enhanced Edition, published by , published by Course Technology, 2001; ISBN: 0-619-06204-5. Course Technology, 2001; ISBN: 0-619-06204-5.
Course Text Course Text
J. Nielsen, J. Nielsen, Usability EngineeringUsability Engineering, published by , published by Academic Press (AP Professional), 1993; ISBN: Academic Press (AP Professional), 1993; ISBN: 0-12-518406-9. (not necessary)0-12-518406-9. (not necessary)
Hardware and Software RequirementsHardware and Software Requirements
Microsoft Windows 95, 98, Me, NT, 2000, or XP Microsoft Windows 95, 98, Me, NT, 2000, or XP VGA or better color monitor VGA or better color monitor Standard keyboard and mouse Standard keyboard and mouse Windows compatible sound card and speakers Windows compatible sound card and speakers
Microsoft Internet Explorer 4.01 or later Microsoft Internet Explorer 4.01 or later Netscape Communicator 4.7—Netscape Communicator 4.7—
note*note* there is one issue with Internet Explorer 6 SP1, Netscape 7.0, and there is one issue with Internet Explorer 6 SP1, Netscape 7.0, and Mozilla 1.1. Mozilla 1.1.
Hardware and Software RequirementsHardware and Software Requirements
Microsoft Visual Basic 6.0 Microsoft Visual Basic 6.0 Microsoft Developer Network ( MSDN )Microsoft Developer Network ( MSDN ) Microsoft Word or comparable word processor Microsoft Word or comparable word processor
Microsoft Visual .Net Microsoft Visual .Net Express versionExpress version Can download Can download freelyfreely from Microsoft from Microsoft
website.website. Microsoft Word or comparable word processor Microsoft Word or comparable word processor
OutcomesOutcomes
The purpose of SSD4 is for students toThe purpose of SSD4 is for students to Learn to Learn to designdesign usable, human-friendly user interfaces usable, human-friendly user interfaces
(UIs). (UIs). Learn to Learn to evaluate evaluate interface usability empirically with interface usability empirically with
two usability tools. two usability tools. Learn to Learn to create create interfaces and interface prototypes using interfaces and interface prototypes using
a a rapid-prototypingrapid-prototyping programming language. programming language.
Students completing SSD4 will be able toStudents completing SSD4 will be able to
I. ProduceI. Produce II. UseII. Use III. Knowledgeably DiscussIII. Knowledgeably Discuss IV. Hold Positions as User Interface DevelopersIV. Hold Positions as User Interface Developers
I. ProduceI. Produce
Designs and implementationsDesigns and implementations Visual Basic UIs and prototypes that meet generally Visual Basic UIs and prototypes that meet generally
accepted usability standards. accepted usability standards. Judgments about Judgments about
how well interface aspects meet the usability criteria how well interface aspects meet the usability criteria expressed in ten heuristics. expressed in ten heuristics.
interface usability based on the findings of a think-interface usability based on the findings of a think-aloud usability study. aloud usability study.
Summarize usability study findings Summarize usability study findings Write Usability aspect reports (UARs) Write Usability aspect reports (UARs)
II. UseII. Use
Think-aloud testing methodologyThink-aloud testing methodology and and ten ten usability heuristicsusability heuristics as tools for as tools for evaluating real-world user interfaces. evaluating real-world user interfaces.
Critical incident analysis to Critical incident analysis to analyze the observations of a think-aloud usability analyze the observations of a think-aloud usability
study. study. A basic set of Visual Basic controlsA basic set of Visual Basic controls to to
create applications and prototypes. create applications and prototypes. UAR recommendations to UAR recommendations to
implement changes in interface applications. implement changes in interface applications.
III. Knowledgeably Discuss III. Knowledgeably Discuss
Discuss with who? Discuss with who? Discuss what? Discuss what?
The human capabilities and limitations that are relevant The human capabilities and limitations that are relevant to interface design in terms of the Information to interface design in terms of the Information Processing Model of human cognition. Processing Model of human cognition.
The basic features of the iterative design process and The basic features of the iterative design process and the basic concepts of interactive programming. the basic concepts of interactive programming.
IV. Hold Positions as User Interface DevelopersIV. Hold Positions as User Interface Developers
Those who certify in this course will be able to Those who certify in this course will be able to design and implementdesign and implement human-friendly graphical user human-friendly graphical user
interface applications in Visual Basic, interface applications in Visual Basic, critically critically evaluateevaluate the usability of user interfaces, the usability of user interfaces,
including those that are not computer-based, including those that are not computer-based, use heuristic evaluation and think-aloud usability testing, use heuristic evaluation and think-aloud usability testing,
report their findings in a systematic fashionreport their findings in a systematic fashion writing usability aspect reports. writing usability aspect reports.
IV. Hold Positions as User Interface DevelopersIV. Hold Positions as User Interface Developers
In a small company, students who certify will be In a small company, students who certify will be able to fill the roles of interface designer, able to fill the roles of interface designer, implementer, and evaluator. implementer, and evaluator.
In a larger company where design teams are In a larger company where design teams are staffed by specialists from several disciplines, staffed by specialists from several disciplines, students who certify will be able to understand students who certify will be able to understand and work well with these varied specialists. and work well with these varied specialists.
Unit 1. Overview of User-Centered Design and Unit 1. Overview of User-Centered Design and TestingTesting
contentscontents introduce the basic principles of user interface design.introduce the basic principles of user interface design. cover cover 22 facets of UI design: facets of UI design:
the construction of interactive programsthe construction of interactive programs the design of their behavior. the design of their behavior.
grounded on the grounded on the principles of human psychologyprinciples of human psychology Apply in the techniques of heuristic evaluation and Apply in the techniques of heuristic evaluation and
think-aloud user testing. think-aloud user testing.
1.11.1 Foundation for User-Centered Design Foundation for User-Centered Design and Testing and Testing
1.21.2 A Tool for Creating User Interfaces: A Tool for Creating User Interfaces: Visual BasicVisual Basic
1.31.3 Tools for Evaluating Usability: Tools for Evaluating Usability:
Heuristics and Think-Aloud TestingHeuristics and Think-Aloud Testing
Unit 1. Overview of User-Centered Design and Unit 1. Overview of User-Centered Design and TestingTesting
1.1Foundation for User-Centered Design and Testing1.1Foundation for User-Centered Design and Testing
ContentsContents 1.1.11.1.1 Iterative Design Iterative Design 1.1.21.1.2 Basic Concepts of Interactive Programming Basic Concepts of Interactive Programming 1.1.31.1.3 Basic Psychology Needed for Interface Design Basic Psychology Needed for Interface Design
The goal of this course is for you to The goal of this course is for you to learn to learn to design and builddesign and build usable software programs that usable software programs that people can usepeople can use
As if you use everyday objects like VCRs and As if you use everyday objects like VCRs and microwave ovens microwave ovens
Many systems built by Many systems built by talented peopletalented people are are perfectly functional but perfectly functional but nearly unusablenearly unusable. ?why. ?why
Why Iterative Design?Why Iterative Design?
system designers cannot fully anticipate the system designers cannot fully anticipate the usability of their designs usability of their designs
RemreberRemreber : you are not the user : you are not the user. . This limitation stems from several sources: This limitation stems from several sources:
Users are diverse, while you are a single person. Users are diverse, while you are a single person. Users are (usually) not technical experts, while you are. Users are (usually) not technical experts, while you are. Users do not know what you were thinking when you Users do not know what you were thinking when you
designed the system, while you do.designed the system, while you do. So, we mustSo, we must
adopt an iterative approach to system design adopt an iterative approach to system design
Iterative design with feedback Iterative design with feedback
Rather than using a Feed-forward, or open-loop, Rather than using a Feed-forward, or open-loop, design approach design approach
iterative approachiterative approach
we must include we must include stepssteps to refine the design that to refine the design that incorporate factorsincorporate factors other than our personal other than our personal opinion and acumen. opinion and acumen. 不要自以为是！不要自以为是！
often involves a step to often involves a step to analyze a analyze a preliminary designpreliminary design according to some "rules of according to some "rules of
thumb," and a test that thumb," and a test that gathers and incorporates user gathers and incorporates user feedbackfeedback on what has been built on what has been built
This approach raises two major questions: This approach raises two major questions: 1?1? 2?2?
To solve the problem …To solve the problem …
1.1. It's hard enough to build something once; how It's hard enough to build something once; how can we afford to build things more than once? can we afford to build things more than once? -- adopt a -- adopt a rapid prototyping approachrapid prototyping approach
2.2. How do we accumulate experience and get How do we accumulate experience and get feedback from users in a way that yields useful feedback from users in a way that yields useful guidance to further work? guidance to further work? 为将来的工作积累为将来的工作积累经验，生成指南经验，生成指南-- requires-- requires
- a body of - a body of knowledge of human psychologyknowledge of human psychology and and - techniques for - techniques for eliciting(eliciting(induceinduce), recording, and ), recording, and analyzing user feedbackanalyzing user feedback.. 设法获取用户的反馈设法获取用户的反馈
3 important tools 3 important tools of iterative , user-centered design of iterative , user-centered design
Visual Basic Visual Basic user interface programminguser interface programming
heuristic evaluationsheuristic evaluations based on accumulated design experiencebased on accumulated design experience
one of the one of the most popularmost popular programming languages programming languages 拥趸粉丝众多！拥趸粉丝众多！
supports supports rapid prototypingrapid prototyping of user interfaces of user interfaces making it possible to test many aspects of a making it possible to test many aspects of a
system's usability system's usability beforebefore its implementation is its implementation is completecomplete
Once you have learned to use Visual Basic, you Once you have learned to use Visual Basic, you will also be able to apply this approach to other will also be able to apply this approach to other languages and systems languages and systems 触类旁通！触类旁通！
Heuristic Evaluation Heuristic Evaluation
heuristicheuristic ( ( 指导原则指导原则 ) means a general principle ) means a general principle or "rule of thumb" that usually leads to a good or "rule of thumb" that usually leads to a good answer.answer.
In this course, you will learn aIn this course, you will learn a 10 10 heuristics that heuristics that will help you will help you to make good user-interface design decisionsto make good user-interface design decisions to learn how to apply them in your workto learn how to apply them in your work
Think-Aloud Studies Think-Aloud Studies
a powerful method empirically evaluating the a powerful method empirically evaluating the usability of a systemusability of a system
user is presented with a system or user is presented with a system or prototype( prototype( system or prototype is OKsystem or prototype is OK))
useruser is asked to perform is asked to perform a task while "thinking a task while "thinking aloud" the steps and decisions involvedaloud" the steps and decisions involved
collection and analysis of think-aloud datacollection and analysis of think-aloud data
Used these three tools togetherUsed these three tools together
Using these three tools together will Using these three tools together will help you to design usable and successful systems.help you to design usable and successful systems.
1.1.2 Basic Concepts of Interactive Programming 1.1.2 Basic Concepts of Interactive Programming
Direct Manipulation Direct Manipulation Affordance and Feedback Affordance and Feedback Essential Task and the Event/Redraw Cycle Essential Task and the Event/Redraw Cycle Controls, Model Objects, and Interpreting Events Controls, Model Objects, and Interpreting Events Encapsulation and Accessor Patterns Encapsulation and Accessor Patterns
Direct ManipulationDirect Manipulation
a style of interactiona style of interaction Modern Modern GGraphical raphical UUser ser IInterfaces(nterfaces(GUIGUI) make use of it) make use of it be designed to give the user the illusion be designed to give the user the illusion 提供一种假象提供一种假象
that they are directly manipulating the objects of interest to themthat they are directly manipulating the objects of interest to them The images portrayed to the user indicate the nature and state of The images portrayed to the user indicate the nature and state of
those objects, those objects, E.g.E.g. , , Turn the speaker on/off,Turn the speaker on/off, trash boxtrash box ，， full or emptyfull or empty File management of operation systemFile management of operation system
the program is structured so that interactions are performed the program is structured so that interactions are performed (primarily) in terms of those representative images (primarily) in terms of those representative images 根据各自代根据各自代表的图片来组织表的图片来组织
Direct Manipulation(con.)Direct Manipulation(con.)
highly successful, why?highly successful, why? provide the illusion of directnessprovide the illusion of directness users feel that they are directly acting on objects,users feel that they are directly acting on objects,
not working through the intermediary of a computernot working through the intermediary of a computer The property of directness The property of directness notnot one that an one that an
interface either interface either does or does not havedoes or does not have direct depending on direct depending on how much of this feeling of how much of this feeling of
directnessdirectness they induce in a user they induce in a user
Direct Manipulation(con.)Direct Manipulation(con.)
the feeling of directness will vary the feeling of directness will vary from individual to individual, from individual to individual, from interface to interface, and from interface to interface, and even between parts of an interfaceeven between parts of an interface
Interfaces that exhibit more directnesstend to be Interfaces that exhibit more directnesstend to be easier to learn and use. easier to learn and use. E.g.,E.g., dragging a file icon into a trash can, vs. Menu selectiingdragging a file icon into a trash can, vs. Menu selectiing
Note: Note: directness can go too fardirectness can go too far （（ joystickjoystick in games in games）） operations might be much more efficiently handled in an operations might be much more efficiently handled in an
indirect or automated fashion.indirect or automated fashion.
Affordance and Feedback Affordance and Feedback 提供与反馈提供与反馈 How to provide and reinforce the feeling of How to provide and reinforce the feeling of
directness ? directness ? interface designers often concentrate on interface designers often concentrate on
providing providing 22 particularly particularly key characteristicskey characteristics in an in an interface. interface. 两个两个关键的特征关键的特征 AffordancesAffordances are opportunities to act that are readily are opportunities to act that are readily
apparent to the user. apparent to the user. 非常明显的提供给用户操作的时非常明显的提供给用户操作的时机，或改善可操作性的措施，机，或改善可操作性的措施， E.g.,E.g., the handle of a hammer the handle of a hammer Knurling — the series of small ridges often found on knobs Knurling — the series of small ridges often found on knobs
that make their surfaces rough that make their surfaces rough FeedbackFeedback is the response by the system to the actions of is the response by the system to the actions of
the user.the user.
AffordanceAffordance
most objects in a graphical user interface most objects in a graphical user interface appear only as pictures appear only as pictures on a screenon a screen
the physical affordances that they can the physical affordances that they can offer are limitedoffer are limited. (some . (some game softwaregame software can offer other way) can offer other way)
by properly manipulating by properly manipulating the visual appearances of objectsthe visual appearances of objects we we can still make the (can still make the ( 通过操控对象的视觉外观，将某些信息明确通过操控对象的视觉外观，将某些信息明确的 传达给用户的 传达给用户 ), ), purpose, purpose, state, and state, and opportunities for action opportunities for action
associated with objects apparent to the user. associated with objects apparent to the user. This provides what might be thought of as a This provides what might be thought of as a virtual affordancevirtual affordance. .
virtual affordancevirtual affordance
we cannot knurl objects on the screen,we cannot knurl objects on the screen, we can provide simulated knurling as illustrated in Figure we can provide simulated knurling as illustrated in Figure
It can be effective simply because it It can be effective simply because it reminds us of our past reminds us of our past experienceexperience with many real world objects. with many real world objects.
As a As a general rule (a usability heuristic)general rule (a usability heuristic) a good user interface a good user interface design will design will provide some visual indication of /affordance for the actions provide some visual indication of /affordance for the actions
that the user can carry out with it. that the user can carry out with it. 尽量给用户提供尽量给用户提供 如，利用交通信号灯表示某些操作提示（禁止、警告）如，利用交通信号灯表示某些操作提示（禁止、警告）
FeedbackFeedback
has a conceptually similar purpose has a conceptually similar purpose FeedbackFeedback is the response by the system to the actions of is the response by the system to the actions of
the user. the user. clearly indicatesclearly indicates the the
naturenature consequences of their actionsconsequences of their actions
much easier for users to evaluatemuch easier for users to evaluate whether those actions whether those actions are having the desired effect are having the desired effect 操作是否起了作用？操作是否起了作用？
Such as : Such as : 可以用下面这些常用手法可以用下面这些常用手法 updated updated visual representationsvisual representations be provided in other modalities such as be provided in other modalities such as audio audio 对非法对非法操作会发出“当”的一声操作会发出“当”的一声
FeedbackFeedback
In the physical worldIn the physical world in the form of vision, touch, and sound.in the form of vision, touch, and sound.
In the virtual world In the virtual world such strong and immediate feedback is often such strong and immediate feedback is often lackinglacking
Solution: Solution: providing providing strong and immediatestrong and immediate feedback for all user actions feedback for all user actions How to ?How to ?
Essential Task and the Event/Redraw CycleEssential Task and the Event/Redraw Cycle
providing the appearance of directnessproviding the appearance of directness is a goal is a goal of much modern user interface designof much modern user interface design notnot reach directly into the computer and manipulate reach directly into the computer and manipulate
computational objects computational objects use the intermediary of the use the intermediary of the input devicesinput devices
provided by the computer provided by the computer express their actions with those devicesexpress their actions with those devices
xqw
2004空信7班第一次课
Essential TaskEssential Task
an interactive program must do several things. an interactive program must do several things. Provide visual imagesProvide visual images that represent the objects of that represent the objects of
interest to the user (and indicate how they may be acted interest to the user (and indicate how they may be acted upon, that is, provide good affordances) upon, that is, provide good affordances)
Accept inputsAccept inputs from the available input devices from the available input devices Interpret those inputsInterpret those inputs in the context of the objects on in the context of the objects on
the screen (and other parts of the system) the screen (and other parts of the system) Modify internal structuresModify internal structures modeling the objects of modeling the objects of
interest (and invoke application routines) interest (and invoke application routines) Update the visual displayUpdate the visual display to reflect the consequence of to reflect the consequence of
the users' actions (provide good feedback) the users' actions (provide good feedback)
overall flow of control of an interactive program overall flow of control of an interactive program
OutputsOutputs window(ing) systemwindow(ing) system window managerwindow manager
InputsInputs input event recordsinput event records whatwhat happened, happened, whenwhen it happened it happened the the contextcontext of important input devices ( of important input devices (wherewhere the mouse the mouse
was pointingwas pointing ); ); and the status of various and the status of various modifiermodifier keys, keys, SHIFT and SHIFT and
CTRLCTRL..是否用到组合键是否用到组合键
graphics librarygraphics library
可以认为就是一组可以认为就是一组 APIAPI supports an abstraction of a series of supports an abstraction of a series of
track current overlap relationships track current overlap relationships modify the outputs actually delivered to the modify the outputs actually delivered to the
screen to reflect this structure. screen to reflect this structure.
window systemwindow system
window system may window system may keep copieskeep copies of surface areas of surface areas currently currently overlappedoverlapped by other windows, and by other windows, and automatically redisplay previously hidden material automatically redisplay previously hidden material without involving the program. without involving the program.
Since this can be performed transparently, each Since this can be performed transparently, each program (or even different parts of the same program program (or even different parts of the same program that use different windows) can have the illusion of that use different windows) can have the illusion of directly directly drawing on their own display devicedrawing on their own display device. . 似乎的似乎的 nn多监视器多监视器
This makes This makes drawing code easierdrawing code easier to create and allows to create and allows many independent programs (or parts of the same many independent programs (or parts of the same program) to share the limited resources of a single program) to share the limited resources of a single display device gracefully. display device gracefully.
input event recordsinput event records
• EventsEvents: : some some significantsignificant action ( action ( 什么才叫重要什么才叫重要 ))– pressing a keyboard keypressing a keyboard key– moving the mousemoving the mouse– the arrival of data on a network connectionthe arrival of data on a network connection
Event queue Event queue 管理事件的先来后到管理事件的先来后到 event records are normally placed in a queue to event records are normally placed in a queue to ensure they are ensure they are
not lostnot lost Event handleEvent handle
requesting the next event from the input queuerequesting the next event from the input queue InterpretingInterpreting ProcessingProcessing returning for the next eventreturning for the next event
xqw
123 w1456 w2
Controls, Model Objects, and Interpreting EventsControls, Model Objects, and Interpreting Events
Firstly, think about 2 questions:Firstly, think about 2 questions: how to actually interpret/respond to incoming events ?how to actually interpret/respond to incoming events ? how to structure the output creation process ?how to structure the output creation process ?
Controls, Model Objects, and Interpreting EventsControls, Model Objects, and Interpreting Events
Controls toolkit provides Controls toolkit provides a much a much higher-level abstractionhigher-level abstraction of the event/redraw cycle and automates a of the event/redraw cycle and automates a
number of important steps number of important steps a a reusablereusable library of objects that can appear on the screen and be the target of library of objects that can appear on the screen and be the target of
user input user input
Name : Name : widgetswidgets 窗口小部件窗口小部件 , , interactorsinteractors 交互因子交互因子 , or , or interactive component interactive component 交互组件交互组件 .:.: buttons, sliders, text areas, icons, check boxes, and menus buttons, sliders, text areas, icons, check boxes, and menus In Visual Basic and several other systems, these objects go by the name of In Visual Basic and several other systems, these objects go by the name of
controlscontrols
model object model object maintains the information associated with the object of interest maintains the information associated with the object of interest
E.g.,E.g., In a In a Clock appClock app.. such as the actual integer value for the such as the actual integer value for the minutesminutes
xqw
05本硕联读05网教04软件工程
major benefits of using a toolkit major benefits of using a toolkit
provides a rich set of such controls provides a rich set of such controls allows allows newnew types of types of controlscontrols to to be createdbe created when when
necessary necessary provide a presentation of the objects of interest provide a presentation of the objects of interest
to users to users E.g., E.g.,
programmer does programmer does not necessarilynot necessarily need to need to recreaterecreate a button control, and that a button control, and that allall button button controlscontrols the user sees the user sees
will will work in the same way work in the same way
not generally support the detailed semantics of those objects not generally support the detailed semantics of those objects
Two ways of changing a single modeled value Two ways of changing a single modeled value
if change, who draw the screen?if change, who draw the screen?
The answer is : the toolkits !The answer is : the toolkits ! The The toolkittoolkit will then arrange for the actual appearance of will then arrange for the actual appearance of
those controls on the screen to be updated as appropriate. those controls on the screen to be updated as appropriate. Notify the toolkit to change, How to do:Notify the toolkit to change, How to do:
simply changing the properties of the controlssimply changing the properties of the controls
relationship between parts of an interactive system relationship between parts of an interactive system model objects have a central organizing rolemodel objects have a central organizing role
accept changes to their modeled information accept changes to their modeled information either from controls either from controls from application codefrom application code
validate those changesvalidate those changes updating the properties of any controls related to that updating the properties of any controls related to that
information. information.
model objects have a model objects have a central organizing rolecentral organizing role
OccasionallyOccasionally it is convenient for controls to it is convenient for controls to invoke directly application routines, invoke directly application routines, bypassing bypassing the modelthe model in the case of menus and buttons that represent in the case of menus and buttons that represent
"commands" in the application"commands" in the application the application should the application should normally avoid normally avoid
manipulatingmanipulating controls directly, without going controls directly, without going through the modelthrough the model
Encapsulation and Accessor PatternsEncapsulation and Accessor Patterns
information they manage changesinformation they manage changes －－ 》 》 model model objects need to be informed objects need to be informed
they need to respond to those changes with they need to respond to those changes with action of their ownaction of their own updating various control propertiesupdating various control properties
Encapsulation:Encapsulation: they completely control access to their internal datathey completely control access to their internal data not allowing it to be changed without their knowledgenot allowing it to be changed without their knowledge
way to ensure encapsulationway to ensure encapsulation
information hidinginformation hiding declaring the field or variable to be declaring the field or variable to be privateprivate
it cannot be accessed directlyit cannot be accessed directly allow access to the information only through allow access to the information only through
special accessor methodsspecial accessor methods
Java code exampleJava code example
public class myModelClass { public class myModelClass { private myDataType myDataValue; private myDataType myDataValue; public myDataType getMyDataValue() { public myDataType getMyDataValue() {
return myDataValue;return myDataValue;
} }
public void setMyDataValue(myDataType val) {public void setMyDataValue(myDataType val) {
myDataValue = val;myDataValue = val;
} }
} }
basic implementations of accessor methods basic implementations of accessor methods
The accessor methods in a user-interface model object The accessor methods in a user-interface model object would contain additional code would contain additional code
accessor pattern.:accessor pattern.: the general pattern of using a private field for datathe general pattern of using a private field for data providing providing getget and and setset methods to read and write the field's value methods to read and write the field's value
AAttentionttention: Visual Basic was : Visual Basic was notnot originally designed as originally designed as an object-oriented language. When implementing an object-oriented language. When implementing the accessor pattern normally involves using the accessor pattern normally involves using individual variables individual variables
and access procedures and access procedures not nestednot nested inside a class definition inside a class definition
UnlikeUnlike its predecessors, VB .Net is a its predecessors, VB .Net is a full featured full featured object-oriented languageobject-oriented language. .
Visual basic code exampleVisual basic code example
Private myDataValue As Private myDataValue As myDataTypemyDataType
Public Function getMyDataValue() As Public Function getMyDataValue() As myDataTypemyDataType getMyDataValue = myDataValue getMyDataValue = myDataValue
End Function End Function
Public Sub setMyDataValue(val As Public Sub setMyDataValue(val As myDataTypemyDataType) ) myDataValue = val myDataValue = val
End Sub End Sub NoteNote::
in Visual Basic in Visual Basic PrivatePrivate variables are still accessible inside the variables are still accessible inside the same module, same module,
so the information hiding here is so the information hiding here is notnot a perfect solution a perfect solution
xqw
南望山 w1
What do the model objects need What do the model objects need
model objects need to perform update actions model objects need to perform update actions whenever their values changewhenever their values change
whenever their whenever their set methodsset methods are called, they need are called, they need to update the to update the properties of all controlsproperties of all controls that that reflect those valuesreflect those values
E.g.,E.g., A Label show list’s numberA Label show list’s number A List lists all the itemsA List lists all the items When item adding or removingWhen item adding or removing
The general pattern implementation code The general pattern implementation code Public Sub setMyDataValue(val as myDataType) Public Sub setMyDataValue(val as myDataType)
Dim newPropVal as someType Dim newPropVal as someType <Check validity of val, and possibly force into valid range> <Check validity of val, and possibly force into valid range> If If <val is a valid value><val is a valid value> Then Then
If val <> myDataValueIf val <> myDataValue Then Then myDataValue = val myDataValue = val <Inform any parts of the application that care about the new <Inform any parts of the application that care about the new value> value> End If End If
<For each control property that depends on myDataValue do the <For each control property that depends on myDataValue do the following> following> newPropVal = <prepare new value for the control property based newPropVal = <prepare new value for the control property based on myDataValue> on myDataValue> If If <control>.someProperty <> newPropVal<control>.someProperty <> newPropVal Then Then <control>.someProperty = newPropVal <control>.someProperty = newPropVal End If End If ... ...
Else Else <Ignore new value or perform error handling / feedback action><Ignore new value or perform error handling / feedback action>
End If End If End SubEnd Sub
why these lines are in the code?why these lines are in the code?
"If val <> myDataValue Then" and "If <control>.someproperty "If val <> myDataValue Then" and "If <control>.someproperty <> newPropVal Then".<> newPropVal Then".
Answers:Answers: for for correctnesscorrectness as well as for as well as for performanceperformance a simple defensive programming strategya simple defensive programming strategy avoid having to consider any special casesavoid having to consider any special cases The code which informs other parts of the application of the new The code which informs other parts of the application of the new
value, may actually be value, may actually be rather time-consumingrather time-consuming avoided when there are no more true updates to the values of the avoided when there are no more true updates to the values of the
variablesvariables the solution is efficient, easy to implement, and easy to analyze the solution is efficient, easy to implement, and easy to analyze
for correctnessfor correctness
a specific example of applying the model accessor pattern a specific example of applying the model accessor pattern
Public Sub setMinuteValue(min As Integer) Public Sub setMinuteValue(min As Integer) Dim minStr As String Dim minStr As String
'Force into valid range 'Force into valid range If min < 0 Then min = 0 If min < 0 Then min = 0 If min > 59 Then min = 59 If min > 59 Then min = 59
'Update internal value 'Update internal value If min <> minuteValue Then If min <> minuteValue Then minuteValue = min minuteValue = min ' Nothing in the application to inform in this case ' Nothing in the application to inform in this case End If End If
'Prepare a two digit string (zero filled) to display 'Prepare a two digit string (zero filled) to display minStr = CStr(min) minStr = CStr(min) If min < 10 Then minStr = "0" & minStr If min < 10 Then minStr = "0" & minStr
' Update the text display if this is a change ' Update the text display if this is a change If MinutesText.Text <> minStr Then MinutesText.Text = If MinutesText.Text <> minStr Then MinutesText.Text = minStr minStr End SubEnd Sub display the date/time control as exampledisplay the date/time control as example
1.1.3 Basic Psychology Needed for Interface Design1.1.3 Basic Psychology Needed for Interface Design
Motivation Motivation Overview Overview Perception Perception Memory Memory Cognitive Processes Cognitive Processes Motor Capabilities Motor Capabilities Errors Errors
xqw
05本硕联读05网教04软件工程123 w2
MotivationMotivation
Most computer programs are designed to be Most computer programs are designed to be used to used to perform a taskperform a task
To design good computer systems, must To design good computer systems, must understand understand what the task iswhat the task is how people work how people work how computers work how computers work
this module is to give you this module is to give you some basic understanding ofsome basic understanding of
how people work, how people work, their capabilitiestheir capabilities their limitationstheir limitations
beyond limitationsbeyond limitations
User’s limitationsUser’s limitations cause them to commit errors (which can be cause them to commit errors (which can be costlycostly or even or even fatalfatal in in
safety-critical systems),safety-critical systems), cause them to seek “workarounds” (which are usually inefficient),cause them to seek “workarounds” (which are usually inefficient),环顾左右，无所适从，精力没有集中在工作上环顾左右，无所适从，精力没有集中在工作上
may cause them to abandon systems (if they have the choice)may cause them to abandon systems (if they have the choice) Cause them to resist adopting new systems (if they are forced to Cause them to resist adopting new systems (if they are forced to
use them). use them). designs that designs that augment human capabilityaugment human capability and and help overcome help overcome
people‘s limitations people‘s limitations 扬长避短！扬长避短！ can be truly helpfulcan be truly helpful cost effectivecost effective pleasurable to usepleasurable to use
two reasons for briefly introducing psychology two reasons for briefly introducing psychology
First reasonFirst reason the facts and principles of psychology are the facts and principles of psychology are embeddedembedded in in
the methodsthe methods when you master and use the methods, you will be when you master and use the methods, you will be
implicitly applyingimplicitly applying these basic principles of psychology. these basic principles of psychology.
two reasons for briefly introducing psychologytwo reasons for briefly introducing psychology
Second reasonSecond reason you will often be working in interdisciplinary teams you will often be working in interdisciplinary teams
where at least one other team memberwhere at least one other team member They might have extensive training in one of the They might have extensive training in one of the
help you work together with these differently trained help you work together with these differently trained peoplepeople
to design effective systemsto design effective systems
Ways to get informationWays to get information
from the computer screenfrom the computer screen from local hard copy, like the manualfrom local hard copy, like the manual from papersfrom papers from other peoplefrom other people
Human activities involved when using a computer systemHuman activities involved when using a computer system
Human activities involved when using a computer system
visio graph
Conclusions of decades of psychological researchConclusions of decades of psychological research
Decades of psychological research have Decades of psychological research have produced data and theoriesproduced data and theories can help developers design computer systemscan help developers design computer systems facilitate a user's cycling around this loopfacilitate a user's cycling around this loop enhancing their learning and minimizing their errorsenhancing their learning and minimizing their errors
information processing modelinformation processing model
processorsprocessors
The perceptual processorThe perceptual processor perceives informationperceives information does some processing on that information information does some processing on that information information
related to the activities related to the activities deposits symbols in working memory (WM) that deposits symbols in working memory (WM) that
represent that informationrepresent that information cognitive processorcognitive processor
necessary processing (problem-solving, planning, necessary processing (problem-solving, planning, determining a course of action, etc.).determining a course of action, etc.).
retrieve (recall) additional information from long-term retrieve (recall) additional information from long-term memory (LTM) to help in its processingmemory (LTM) to help in its processing
information from WM can be stored in LTM information from WM can be stored in LTM (learning).(learning).
processorsprocessors
motor processormotor processor deposits a symbol in WM that the motor deposits a symbol in WM that the motor
processor recognizes as a command to do some processor recognizes as a command to do some actionaction
does the action and the cycle begins againdoes the action and the cycle begins again
3 processors work in parallel with each other3 processors work in parallel with each other
NOTE :NOTE : work work in parallelin parallel with each other, a person can with each other, a person can
perceive perceive at the same time as thinking and at the same time as thinking and performing motor actionsperforming motor actions
the cognitive processor the cognitive processor can only do one thing at can only do one thing at a time. a time. a a bottleneckbottleneck in UI design in UI design
For computer systemFor computer system visionvision HearingHearing Sometimes touch , e.g., Motor racing gameSometimes touch , e.g., Motor racing game
Visual Basic makes visual communication very easy to program;Visual Basic makes visual communication very easy to program; So concentrate on the perception of visual signalsSo concentrate on the perception of visual signals
foveafovea
A person can only see detail with a very small area of their eye 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 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 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 can a person see enough detail to read text or discriminate a detailed icon. To see more than 2 degrees of visual angle, the 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 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 changes in the visual field than the fovea. That is, in the rest of the screen, where the person is the screen, where the person is notnot directly looking, changes in directly looking, changes in the display will be very noticeable (e.g., blinking, animation, the display will be very noticeable (e.g., blinking, animation, changes in color). The user's eye is naturally drawn to this changes in color). The user's eye is naturally drawn to this activity in the periphery, making it hard for the user to stay 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. focused on the object he or she was trying to read or decipher. Furthermore, visual perception takes time. It takes about 100 Furthermore, visual perception takes time. It takes about 100 msec for the eye to detect a simple visual signal (like a light 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 coming on) and deposit that fact in WM. It takes about 30 msec for the eye to move to another location on the screen. msec for the eye to move to another location on the screen. There are several design principles that can be derived from There are several design principles that can be derived from these characteristics of eye that we will discuss as they come these characteristics of eye that we will discuss as they come up in the course. up in the course.
Facts for researchingFacts for researching
person is person is notnot directly looking at the rest of the directly looking at the rest of the screenscreen
changes in the display will be very noticeable changes in the display will be very noticeable e.g., e.g., blinking, blinking, animation, animation, changes in colorchanges in color
user's eye is naturally drawn to this activity in the user's eye is naturally drawn to this activity in the peripheryperiphery making it hard for the user to stay focused on the making it hard for the user to stay focused on the
object he or she was trying to read or decipherobject he or she was trying to read or decipher
Facts for researchingFacts for researching
visual perception takes time. It takes about visual perception takes time. It takes about 100 100 msecmsec for the eye to detect a simple visual signal for the eye to detect a simple visual signal (like a light coming on) and deposit that fact in (like a light coming on) and deposit that fact in WMWM
It takes about It takes about 30 msec30 msec for the eye to move to for the eye to move to another location on the screen.another location on the screen.
There are several design principles that can be There are several design principles that can be derived from these characteristics of eye. derived from these characteristics of eye. (discuss later)(discuss later)
Visual searchVisual search Visual searchVisual search : the process by which a : the process by which a
person looks for an object person looks for an object E.g., a word or an icon on a computer E.g., a word or an icon on a computer
displaydisplay.. is is very fastvery fast and easy if the target is and easy if the target is
different, along some dimension, from different, along some dimension, from everything elseeverything else on the computer display on the computer display E.g. target's different inE.g. target's different in
color , orientation, size, curvaturecolor , orientation, size, curvature One feature : it doesn't matter if there is a One feature : it doesn't matter if there is a
cluttered screen or a very sparse screen.cluttered screen or a very sparse screen.
Visual searchVisual search
discriminate multiple features: the visual search discriminate multiple features: the visual search is much slower is much slower
Then aspects of the design like … make a lot of Then aspects of the design like … make a lot of difference in how fast the search can be difference in how fast the search can be completedcompleted screen clutter screen clutter locationlocation display densitydisplay density groupinggrouping
psychologypsychology intense theoretical and empirical debate in the intense theoretical and empirical debate in the
academic psychological communityacademic psychological community for purposes of UI designfor purposes of UI design
we need to know we need to know only a few general thingsonly a few general things about memoryabout memory
not the subtle detailsnot the subtle details academics worry about academics worry about
MemoryMemory there are two important memories: working memory there are two important memories: working memory
(WM) and long-term memory (LTM). (WM) and long-term memory (LTM). WM can be thought of as that part of LTM that is WM can be thought of as that part of LTM that is activeactive
at any time. WM is where the perceptual processor at any time. WM is where the perceptual processor deposits the symbols it perceives and where the cognitive deposits the symbols it perceives and where the cognitive system keeps its intermediate results when processing system keeps its intermediate results when processing information. (information. (computer memorycomputer memory))
LTM is the permanent store of information that holds LTM is the permanent store of information that holds everything the person knows: all facts, procedures, and everything the person knows: all facts, procedures, and history (things that happened to the person). This history (things that happened to the person). This includes vocabulary, procedures for accomplishing tasks, includes vocabulary, procedures for accomplishing tasks, relationships between concepts, etc.(relationships between concepts, etc.(databasedatabase))
information store of WM & LTM information store of WM & LTM
WM stores information in an acoustic form or a visual formWM stores information in an acoustic form or a visual form LTM stores the gist of information instead of the actual LTM stores the gist of information instead of the actual
acoustic or visual formacoustic or visual form E.g.,E.g.,
a person who has just read a story about Jane may confuse a person who has just read a story about Jane may confuse the name with Jean because the names look so similar (all the the name with Jean because the names look so similar (all the same letters) and even sound very similar (the "j" and "n" same letters) and even sound very similar (the "j" and "n" sounds). sounds).
the next week the person may not remember the name at all the next week the person may not remember the name at all only remember that the story was about a girl (the gist).only remember that the story was about a girl (the gist).
3 3 chunks chunks of information at any one timeof information at any one time
WM can hold WM can hold onlyonly a limited amount of a limited amount of information at any one timeinformation at any one time 3 3 chunkschunks
A A chunkchunk is a symbol for a piece of information is a symbol for a piece of information Chunks can be hierarchically organized.Chunks can be hierarchically organized.
property of LTM: seems to be essentially infiniteproperty of LTM: seems to be essentially infinite
seems be infinite, but it is often difficult to seems be infinite, but it is often difficult to retrieve information from itretrieve information from it As a databse , db is OK , but somewrong with its retrieve As a databse , db is OK , but somewrong with its retrieve
mechanismmechanism
property of LTM: Things are remembered more property of LTM: Things are remembered more readily in readily in the contextthe context in which they were learned in which they were learned
if you were asked to recall the items of computer if you were asked to recall the items of computer hardware, it would be very difficult for you to hardware, it would be very difficult for you to remember "mouse“,becauseremember "mouse“,because
you learned it in the you learned it in the context of "animals"context of "animals" and and
were asked to recall it in the were asked to recall it in the context of context of "computer hardware."computer hardware.
property of LTM: property of LTM: similar pieces of information interfere with similar pieces of information interfere with each other's retrievaleach other's retrieval
E.g. ,E.g. , try to recall try to recall the name of the Web browserthe name of the Web browser you typically use you typically use try to recall try to recall the URL of a Web pagethe URL of a Web page you looked at on Tuesday of you looked at on Tuesday of
last weeklast week Since you probably typically use Since you probably typically use only oneonly one Web browser, Web browser,
it is probably it is probably easyeasy for you to recall its name for you to recall its name Since you have probably visited Since you have probably visited a good manya good many Web pages Web pages
since last Tuesday—all of which have URLs that start since last Tuesday—all of which have URLs that start with "http://"—it is probably with "http://"—it is probably difficultdifficult for you to recall for you to recall the URL of a particular page you visited last Tuesday. the URL of a particular page you visited last Tuesday.
property of memory: property of memory: recognition is easier than recallrecognition is easier than recall
E.g.,E.g., if you show someone an item and ask if they have seen it before, 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 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.asked them to name all the items they have seen before.
When you recite those English wordsWhen you recite those English words it would be it would be much easiermuch easier for them for them to recognizeto recognize whether or not whether or not
they have seen the item than they have seen the item than to recallto recall the item from LTM. the item from LTM. The psychological theories differ in their detailed explanations of The psychological theories differ in their detailed explanations of
this phenomenonthis phenomenon but the phenomenon is robust, its occurrence is reliable.but the phenomenon is robust, its occurrence is reliable. the fact: after the fact: after perceptionperception has placed information about an item in has placed information about an item in
WM, that information WM, that information triggerstriggers the LTM the LTM encodingsencodings of the item. of the item.
Note!!!Note!!!
information can get into WM information can get into WM from perception or from perception or from LTMfrom LTM
but information can only get into LTM from WMbut information can only get into LTM from WM This has This has implicationsimplications for for
design and design and the design methodsthe design methods
Cognitive ProcessesCognitive Processes
The cognitive processor does all the "thinking" in this modelThe cognitive processor does all the "thinking" in this model Processe as follows:Processe as follows:
it takes symbols in WM, deposited there it takes symbols in WM, deposited there either from perceptioneither from perception or from LTM retrievalor from LTM retrieval
manipulates those symbols to manipulates those symbols to solve a problemsolve a problem planplan a series of a series of actionsactions in response to that problem in response to that problem
tell the motor processor how to execute those actionstell the motor processor how to execute those actions For UI designFor UI design, there are two important classes of cognitive , there are two important classes of cognitive
is the type of behavior exhibited by a person who knows is the type of behavior exhibited by a person who knows a system wella system well They know all the menu items, commands, dialog boxes, They know all the menu items, commands, dialog boxes,
etcetc They only have to recognize what They only have to recognize what task situationtask situation
(context) they are in and they know exactly what to do.(context) they are in and they know exactly what to do. E.g., Using word to delete a paragraph (e.g., highlight E.g., Using word to delete a paragraph (e.g., highlight
the paragraph and hit the delete key).the paragraph and hit the delete key). When a person has When a person has attained this level of skillattained this level of skill, it is , it is
possible to possible to predict how longpredict how long it will take that person to it will take that person to execute routine tasks with the computer systemexecute routine tasks with the computer system
problem-solvingproblem-solving
when a system is when a system is new to a personnew to a person / when they / when they use it use it only occasionallyonly occasionally usually have to problem-solve to accomplish a taskusually have to problem-solve to accomplish a task
Even when a person Even when a person knows a system wellknows a system well, if it is a , if it is a complex systemcomplex system they usually are skilled in some aspects of it but they usually are skilled in some aspects of it but
novices in othersnovices in others E.g. Using Word, type letter to write , some E.g. Using Word, type letter to write , some
advanced function you may never use and can not advanced function you may never use and can not use.use.
problem-solvingproblem-solving
typical problem-solving behavior:typical problem-solving behavior: When problem-solves, as if When problem-solves, as if searching through a mazesearching through a maze They take their best guess about what to do next and go a They take their best guess about what to do next and go a
short ways down that pathshort ways down that path If it doesn’t look like they are making progress toward If it doesn’t look like they are making progress toward
their goal, they will retrace their steps and try another their goal, they will retrace their steps and try another routeroute
For UI designer: can For UI designer: can either either deliberatelydeliberately design user interfaces to design user interfaces to supportsupport that that
behavior behavior or or inadvertentlyinadvertently produce user interfaces that produce user interfaces that hinderhinder it. it.
Motor CapabilitiesMotor Capabilities
The primary human motor behaviors used in The primary human motor behaviors used in computer systems:computer systems: typing, typing, pointing, pointing, and clickingand clicking
These are also the interaction techniques best These are also the interaction techniques best supported by Visual Basicsupported by Visual Basic
we will concentrate on the psychology of those we will concentrate on the psychology of those actionsactions
motor processormotor processor
motor processor takes information from WM and uses it to act on motor processor takes information from WM and uses it to act on the world.the world.
E.g. When using compuer systemE.g. When using compuer system the cognitive processor may determine that a menu item needs to the cognitive processor may determine that a menu item needs to
be selectedbe selected deposits that menu item into WMdeposits that menu item into WM The motor processor would then see that menu item in WMThe motor processor would then see that menu item in WM move the mouse to that menu item on the screenmove the mouse to that menu item on the screen and click the buttonand click the button Alternatively, if the keyboard shortcut for that menu item is in LTMAlternatively, if the keyboard shortcut for that menu item is in LTM the cognitive processor might deposit that knowledge into WMthe cognitive processor might deposit that knowledge into WM and the motor processor would type the keyboard shortcutand the motor processor would type the keyboard shortcut
TypingTyping
been studied in detail for over a hundred yearsbeen studied in detail for over a hundred years there are many robust phenomena associated there are many robust phenomena associated
with typingwith typing what types of errors people makewhat types of errors people make which type they detect themselveswhich type they detect themselves how long it takes to stop transcription typinghow long it takes to stop transcription typing
for most design purposes, a person's for most design purposes, a person's typing typing speedspeed is the only parameter needed is the only parameter needed This predicts This predicts how longhow long it will take them to enter it will take them to enter
information / use a keyboard shortcutinformation / use a keyboard shortcut
PointingPointing
A motor action that had been studied intensively A motor action that had been studied intensively beforebefore computers came into common use.computers came into common use.
Fitts's Law : a robust psychological law that relates the size and Fitts's Law : a robust psychological law that relates the size and distance of a target to the time it takes to point to itdistance of a target to the time it takes to point to it Tpoint = IM log2 (Distance/Size + 0.5)Tpoint = IM log2 (Distance/Size + 0.5) IM is a constant that is determined empiricallyIM is a constant that is determined empirically. It is not important that . It is not important that
you understand how to compute with this formula, only that you realize 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 that The time required to move the mouse increases as the distance to the target increases or the size of the target decreases. the target increases or the size of the target decreases.
The ratio of distance-to-target to size-of-target is importanThe ratio of distance-to-target to size-of-target is important—such that, t—such that, small and near targets can be just as difficult to hit as targets that are far small and near targets can be just as difficult to hit as targets that are far away. away.
the movement of the hand from the keyboard to the mouse, or vice-the movement of the hand from the keyboard to the mouse, or vice-versa, (called versa, (called hominghoming) has been measured to be about 400 msec.) has been measured to be about 400 msec.
motor execution timesmotor execution times
analysts can make quite accurate predictions analysts can make quite accurate predictions about about motor execution timesmotor execution times typing speedtyping speed Fitts's Law for pointing, Fitts's Law for pointing, clicking the mouse button, clicking the mouse button, and homing—analystsand homing—analysts
these parameters also contribute to some of the these parameters also contribute to some of the design heuristics we'll study later in the classdesign heuristics we'll study later in the class
ErrorsErrors
People make errors—at People make errors—at all stagesall stages of information processing of information processing They will perceive information incompletely (by not seeing it at all) They will perceive information incompletely (by not seeing it at all) or incorrectly (by interpreting what they see incorrectly). or incorrectly (by interpreting what they see incorrectly). They will remember information imperfectly, They will remember information imperfectly, mistaking words for ones that sound alike (if presented aurally), mistaking words for ones that sound alike (if presented aurally), look alike (if present visually), look alike (if present visually), or are similar in meaning (if retrieved from LTM).or are similar in meaning (if retrieved from LTM). They will have incomplete knowledge, so they will retrieve incorrect plans. They will have incomplete knowledge, so they will retrieve incorrect plans. When problem-solving, their "best guess" will be wrong. When problem-solving, their "best guess" will be wrong. Finally, they will "slip" when executing motor actions, hitting the wrong key on Finally, they will "slip" when executing motor actions, hitting the wrong key on
the keyboard, or missing the menu item with the mouse. the keyboard, or missing the menu item with the mouse.
Mistakes are inevitable,Mistakes are inevitable, mostly specific mistakes are unpredictable (though generally mostly specific mistakes are unpredictable (though generally
error-prone situations can be identified ).error-prone situations can be identified ).
The conclusion of basic psychology needed for designing The conclusion of basic psychology needed for designing user interfacesuser interfaces
Present- the simple model of staged information Present- the simple model of staged information processing processing
which describes how people interact with the which describes how people interact with the world, world,
is the basis for many UI design guidelines, is the basis for many UI design guidelines, methods, and predictive analytic techniquesmethods, and predictive analytic techniques
you master and apply the methods, you will be you master and apply the methods, you will be implicitly applying the insights from this implicitly applying the insights from this psychological researchpsychological research
quickly acquaintingquickly acquainting you with some of Visual you with some of Visual Basic’s fundamentalsBasic’s fundamentals
Visual Basic represents Visual Basic represents one of the fastest waysone of the fastest ways to to create applications for the Windows platformscreate applications for the Windows platforms
It allows programmers to build applications It allows programmers to build applications visuallyvisually visuallyvisually—by —by ""drawingdrawing" " controls controls on on form windowsform windows or or
just just formsforms). ). like dragging objects onto forms from the palette-like Visual like dragging objects onto forms from the palette-like Visual
Basic ToolboxBasic Toolbox dragging their corners to resize themdragging their corners to resize them and dragging them from one place on a form to anotherand dragging them from one place on a form to another
What you will learn …What you will learn …
VB, as the programming language for VB, as the programming language for a host of other Windows applicationa host of other Windows application Microsoft Excel, Microsoft Access, and othersMicrosoft Excel, Microsoft Access, and others
What you will learn …What you will learn … the components of the Visual Basic interactive programming the components of the Visual Basic interactive programming
environmentenvironment forms, controls, and forms, controls, and how to write Visual Basic codehow to write Visual Basic code gain skill in debugging Visual Basic code and learn how the gain skill in debugging Visual Basic code and learn how the
Visual Basic 6.0 environment supports this important taskVisual Basic 6.0 environment supports this important task
What you will learn …What you will learn …
notice : some of these lessons are like those you have notice : some of these lessons are like those you have learned in other contexts?JAVA? C++?learned in other contexts?JAVA? C++? the nice things skills learned in one context often transfer readily the nice things skills learned in one context often transfer readily
to anotherto another the differences between languages are sometimes subtlethe differences between languages are sometimes subtle what you know about one language gets you into trouble when what you know about one language gets you into trouble when
you are learning anotheryou are learning another pay particular attention to how that language differs from others pay particular attention to how that language differs from others
you may knowyou may know
The Book The Book
Programming with Microsoft® Visual Basic 6.0Programming with Microsoft® Visual Basic 6.0
All the readings for this module come from this textAll the readings for this module come from this text the module will take advantage of the book’s tutorial formatthe module will take advantage of the book’s tutorial format
the book contains many useful features not utilized explicitly in this the book contains many useful features not utilized explicitly in this coursecourse
it would it would be worthbe worth your while to take time, before starting, to peruse your while to take time, before starting, to peruse the book and examine some of these featuresthe book and examine some of these features
Help?Help? TIPTIP GUI Design Tip(eg. P. VB507 , GUI Design Tip(eg. P. VB507 , a partial list of GUI design and a partial list of GUI design and
program guidelines , as well as on other pages throughout the bookprogram guidelines , as well as on other pages throughout the book))
How to read the textbook How to read the textbook
Begin either with the first selection and work Begin either with the first selection and work forward or with the last selection and work forward or with the last selection and work backward. backward.
Skim introductions and summaries. Skim introductions and summaries. Read section titles. Read section titles. Glance at diagrams, tables, and illustrations. Glance at diagrams, tables, and illustrations. Dip into the text here and there to catch a Dip into the text here and there to catch a
sentence or two, a TIP—or something that just sentence or two, a TIP—or something that just happens to catch your eye. happens to catch your eye.
1.2.1 The Visual Basic Programming Environment1.2.1 The Visual Basic Programming Environment
Installation and Setup Installation and Setup Creating and Changing Projects in the Visual Basic Creating and Changing Projects in the Visual Basic
Interactive Environment Interactive Environment Getting HelpGetting Help
Installation and SetupInstallation and Setup
your textbook comes with a CD that contains a your textbook comes with a CD that contains a "working model""working model" of Visual Basic 6.0 of Visual Basic 6.0
the working model is the working model is limitedlimited: it cannot do every : it cannot do every task the tutorials require (for example, it task the tutorials require (for example, it cannot cannot create EXE filescreate EXE files).).
its its help facility is extremelyhelp facility is extremely limited and does limited and does not not include the MSDN Libraryinclude the MSDN Library
access to the MSDN Online Library access to the MSDN Online Library is freeis free
Suggestion : install the Suggestion : install the enterpriseenterprise version of VB version of VB 6 for study to use the advanced tools of it6 for study to use the advanced tools of it
Creating and Changing Projects in the Visual Basic Creating and Changing Projects in the Visual Basic Interactive Environment Interactive Environment
how to start and exit Visual Basichow to start and exit Visual Basic the components of the Visual Basic display.the components of the Visual Basic display. how to set object propertieshow to set object properties how to create, save, run, and stop applicationshow to create, save, run, and stop applications how to open new and existing projectshow to open new and existing projects
Use Student Disks, work through Lesson A. Use Student Disks, work through Lesson A. Use the Lesson’ summary and questions to Use the Lesson’ summary and questions to
review those learnedreview those learned try the Lesson’stry the Lesson’s exercisesexercises
Getting HelpGetting Help
Microsoft Development Network (MSDN) Microsoft Development Network (MSDN) LibraryLibrary
Assigned readingAssigned reading
Zak, pages xv–xvi.(Zak, pages xv–xvi.(P21P21) Remark: Complete this part ) Remark: Complete this part of the reading after reading the "Installation and of the reading after reading the "Installation and Setup" section below. Setup" section below.
Zak, Tutorial 1, Lesson A, pages 17–34, including the Zak, Tutorial 1, Lesson A, pages 17–34, including the summary and questions. Remark: Complete this summary and questions. Remark: Complete this part of the reading after reading the "Creating & part of the reading after reading the "Creating & Changing Projects in the Visual Basic Interactive Changing Projects in the Visual Basic Interactive Environment" section below. Environment" section below.
Zak, Tutorial 1, Lesson B, pages 39–50, including the Zak, Tutorial 1, Lesson B, pages 39–50, including the summary and questions; Discovery Exercises, pages summary and questions; Discovery Exercises, pages 54–6. Remark: Complete this part of the reading 54–6. Remark: Complete this part of the reading after reading the "Getting Help" section below. after reading the "Getting Help" section below.
•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 CodeForms, Controls, and Writing & Editing Visual Basic Code
The Visual Basic Programming LanguageThe Visual Basic Programming Language
the syntax and elements of several useful the syntax and elements of several useful statementsstatements
how to create local, form-level, and global how to create local, form-level, and global variablesvariables
set data typesset data types assign data to these variablesassign data to these variables concatenate string dataconcatenate string data write Visual Basic equationswrite Visual Basic equations
Control Structures, Etc.Control Structures, Etc.
condition-sensitive functionscondition-sensitive functions If then elseIf then else For NextFor Next, , Do WhileDo While Do UntilDo Until
String ManipulationString Manipulation
RightRight, , LeftLeft MidMid InstrInstr
Assigned readingAssigned reading Zak, Tutorial 1, Lesson C, pages 57–81, including the summary Zak, Tutorial 1, Lesson C, pages 57–81, including the summary
and questions but not the exercises. Remark: Complete this part of and questions but not the exercises. Remark: Complete this part of the reading after reading the "Forms, Controls, and Writing & the reading after reading the "Forms, Controls, and Writing & Editing Visual Basic Code" section below. Editing Visual Basic Code" section below.
Zak, Tutorial 2, Lessons A, B, and C, pages 89–107, 109–24, 129–Zak, Tutorial 2, Lessons A, B, and C, pages 89–107, 109–24, 129–51, including the summary and questions but not the exercises; 51, including the summary and questions but not the exercises; Tutorial 3, Lessons A and B, pages 161–88 and 190–209, including Tutorial 3, Lessons A and B, pages 161–88 and 190–209, including the summary and questions but not the exercises. Remark: the summary and questions but not the exercises. Remark: Complete this part of the reading after reading the "The Visual Complete this part of the reading after reading the "The Visual Basic Programming Language" section below. Basic Programming Language" section below.
Zak, Tutorial 4, Lesson A, pages 237–74, including the summary Zak, Tutorial 4, Lesson A, pages 237–74, including the summary and questions but not the exercises; Tutorial 5, Lessons A, B, and 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 C, pages 337–66, 371–88, and 391–403, including the summary and questions but not the exercises. Remark: Complete this part of the questions but not the exercises. Remark: Complete this part of the reading after reading the "Control Structures, Etc." section below. reading after reading the "Control Structures, Etc." section below.
Zak, Tutorial 6, Lesson C, pages 491–507, including the summary Zak, Tutorial 6, Lesson C, pages 491–507, including the summary and questions but not the exercises. Remark: Complete this part of and questions but not the exercises. Remark: Complete this part of the reading after reading the "String Manipulation" section below. the reading after reading the "String Manipulation" section below.
Listing, Verifying, Finding, and Replacing Trapping Errors and Using the MsgBox Statement Using the Debug Menu: Stepping, Breakpoints, and Watches
Listing, Verifying, Finding, and ReplacingListing, Verifying, Finding, and Replacing
Trapping Errors and Using the MsgBox StatementTrapping Errors and Using the MsgBox Statement
error trappingerror trapping MsgBoxMsgBox
Using the Debug Menu: Stepping, Breakpoints, and WatchesUsing the Debug Menu: Stepping, Breakpoints, and Watches
Assigned readingAssigned reading
Zak, the debugging sections on pages 87–8, 159–60, Zak, the debugging sections on pages 87–8, 159–60, 234–6, 334–5, 410–2, and 514–6. Remark: Complete 234–6, 334–5, 410–2, and 514–6. Remark: Complete this part of the reading after reading the "Listing, this part of the reading after reading the "Listing, Verifying, Finding and Replacing" section below. Verifying, Finding and Replacing" section below.
Zak, the debugging sections on pages 572–5 and Zak, the debugging sections on pages 572–5 and 642–3. Remark: Complete this part of the reading 642–3. Remark: Complete this part of the reading after reading the "Trapping Errors and Using the after reading the "Trapping Errors and Using the MsgBox Statement" section below. MsgBox Statement" section below.
Zak, the debugging sections on pages 713–5 and Zak, the debugging sections on pages 713–5 and 794–800. Remark: Complete this part of the 794–800. Remark: Complete this part of the reading after reading the "Using the Debug Menu: reading after reading the "Using the Debug Menu: Stepping, Breakpoints and Watches" section below. Stepping, Breakpoints and Watches" section below.
Exercise 2Exercise 2
1.3 Tools for Evaluating Usability: Heuristics and 1.3 Tools for Evaluating Usability: Heuristics and Think-Aloud TestingThink-Aloud Testing
1.3.1 Basic Heuristic Evaluation 1.3.1 Basic Heuristic Evaluation 1.3.2 Basic Think-Aloud Usability Testing 1.3.2 Basic Think-Aloud Usability Testing 1.3.3 How to Write a Usability Aspect Report (UAR)1.3.3 How to Write a Usability Aspect Report (UAR)
Heuristic Evaluation Heuristic Evaluation Overview of Procedure for Using Heuristics Overview of Procedure for Using Heuristics Heuristics-A brief DiscussionHeuristics-A brief Discussion
Visibility of System Status Visibility of System Status Match Between System and the Real World Match Between System and the Real World User Control and Freedom User Control and Freedom Consistency and Standards Consistency and Standards Error Prevention Error Prevention Recognition Rather Than RecallRecognition Rather Than Recall Flexibility and Efficiency of UseFlexibility and Efficiency of Use Aesthetics and Minimalist DesignAesthetics and Minimalist Design Help Users Recognize, Diagnose, and Recover from ErrorsHelp Users Recognize, Diagnose, and Recover from Errors Help and DocumentationHelp and Documentation
developed by researchers in Denmark a decade developed by researchers in Denmark a decade agoago
established from the practice of UI design and established from the practice of UI design and evaluationevaluation embody a compilation of embody a compilation of goodgood design practices design practices known design known design failuresfailures that have arisen in the UI design that have arisen in the UI design
field over the last 30 yearsfield over the last 30 years not not derivedderived from the information-processing from the information-processing
a technique for analyzing the usability of an a technique for analyzing the usability of an interface design interface design at at early stages of developmentearly stages of development.. to create an informal, tractable, and teachable way to to create an informal, tractable, and teachable way to
look at an interface designlook at an interface design form an opinion about what is good and bad about itform an opinion about what is good and bad about it
In this overview, give a brief descriptionIn this overview, give a brief description how the technique is usedhow the technique is used each of the heuristics and each of the heuristics and their relations to the information-processing theorytheir relations to the information-processing theory
Overview of Procedure for Using Heuristics Overview of Procedure for Using Heuristics
The basic procedureThe basic procedure come up with a UI designcome up with a UI design have several people examine that designhave several people examine that design respect to whether it violates any of the heuristicsrespect to whether it violates any of the heuristics If it violates a heuristic, fix the design If it violates a heuristic, fix the design
The design can be The design can be at any stageat any stage in the in the developmentdevelopment as preliminary as paper and pencil sketchesas preliminary as paper and pencil sketches a partially operational prototype written in Visual Basica partially operational prototype written in Visual Basic a fully operational systema fully operational system
Overview of Procedure for Using Heuristics Overview of Procedure for Using Heuristics
the earlierthe earlier that usability problems are found, that usability problems are found, the the cheapercheaper it is to fix them it is to fix them
HE is probably HE is probably most valuablemost valuable when it is used on when it is used on very earlyvery early sketches or prototypes. sketches or prototypes.
How many evaluators will join in?How many evaluators will join in?
research has shown that research has shown that different people will find different different people will find different violationsviolations So, So, severalseveral evaluators will do a HE review of a design evaluators will do a HE review of a design
For a very simple system, For a very simple system, four or fivefour or five evaluators are sufficient evaluators are sufficient Eg. ATM only a half a dozen functionsEg. ATM only a half a dozen functions
For more complicated systems, more evaluators may be For more complicated systems, more evaluators may be necessary necessary
A simple technique to learn and useA simple technique to learn and use not difficult to find not difficult to find development team membersdevelopment team members who will perform who will perform
this functionthis function even even one or twoone or two people doing the evaluation will find some people doing the evaluation will find some
usability problemsusability problems use heuristics implicitly as you design, these heuristics can inspire use heuristics implicitly as you design, these heuristics can inspire
some of the details of a UI design some of the details of a UI design
HE1 : Visibility of System StatusHE1 : Visibility of System Status
Brief explanation :Brief explanation : should should keepkeep the the user informeduser informed about what is going on about what is going on– the computer has received what input it the computer has received what input it – what processing it is currently doingwhat processing it is currently doing– what the results of processing arewhat the results of processing are
• Relationship to the information-processing Relationship to the information-processing modelmodel– supply information to the user through sight or soundsupply information to the user through sight or sound– otherwise, the user will not understand what is otherwise, the user will not understand what is
happeninghappening
HE2 : Match Between System and the Real World HE2 : Match Between System and the Real World
Brief explanationBrief explanation should use concepts, language, and real-world conventions that should use concepts, language, and real-world conventions that
are familiar to the userare familiar to the user E.g. Menu, radiobox, and so onE.g. Menu, radiobox, and so on
developers need to understand the task the system is going to developers need to understand the task the system is going to perform perform — from the point of view of the user— from the point of view of the user
makes makes cultural issuescultural issues relevant for the design of systems that are relevant for the design of systems that are expected to expected to be used globallybe used globally
Relationship to the information-processing modelRelationship to the information-processing model make use of knowledge already in a user’s long-term memorymake use of knowledge already in a user’s long-term memory
Familiar concepts, language, and real-world conventions in the Familiar concepts, language, and real-world conventions in the interfaceinterface
their experience with the task domaintheir experience with the task domain
HE3 : User Control and Freedom HE3 : User Control and Freedom
Brief explanationBrief explanation Allow the Allow the user to have controluser to have control of the interaction of the interaction Users should be Users should be able to undoable to undo their actions easily their actions easily exit from any interaction quickly at any timeexit from any interaction quickly at any time not be forcednot be forced into a series of actions controlled by the into a series of actions controlled by the
computercomputer Relationship to the information-processing Relationship to the information-processing
model.model. Users will make errors Users will make errors they will need easy ways to recover from them.they will need easy ways to recover from them.
HE4 : Consistency and Standards HE4 : Consistency and Standards
Brief explanationBrief explanation Information that is the same should appear to be the sameInformation that is the same should appear to be the same
same words, icons, and positions on the screensame words, icons, and positions on the screen consistency should be maintained within a single application and consistency should be maintained within a single application and
within a platformwithin a platform Developers therefore need to know platform conventionsDevelopers therefore need to know platform conventions E.g.E.g. The The file menu bar ,help menu barfile menu bar ,help menu bar in any window-based in any window-based
applicationapplication Relationship to the information-processing modelRelationship to the information-processing model
As with the Match Between System and the Real World heuristicAs with the Match Between System and the Real World heuristic makes use of a user’s prior knowledge and experiencemakes use of a user’s prior knowledge and experience with with other other
parts of the same applicationparts of the same application as well as with other applications on as well as with other applications on the same platformthe same platform
As much as possibleAs much as possible, prevent errors from happening , prevent errors from happening in the first placein the first place help users help users selectselect among among legal actionslegal actions / rather than allowing them to / rather than allowing them to
perform any action and telling them after making an errorperform any action and telling them after making an error This could be considered 1st This could be considered 1st heuristicheuristic ( visibility of system status )( visibility of system status )
E.g.,E.g., what input the computer system is ready to acceptwhat input the computer system is ready to accept is so is so importantimportant and so and so often violatedoften violated that it warrants its own heuristic that it warrants its own heuristic
Relationship to the information-processing.Relationship to the information-processing. Errors can come from Errors can come from
users make mistakes in perceptionusers make mistakes in perception lack knowledge about what to do nextlack knowledge about what to do next recall the gist of a command rather than the exact detailsrecall the gist of a command rather than the exact details slip when they type or pointslip when they type or point
these mistakes can be prevented by showing only those actions that are these mistakes can be prevented by showing only those actions that are acceptable acceptable
caught as soon as the user performscaught as soon as the user performs E.g.E.g.
graying out inappropriate buttonsgraying out inappropriate buttons not accepting an incorrect abbreviation of a US state in an address formnot accepting an incorrect abbreviation of a US state in an address form
HE6 : Recognition Rather Than RecallHE6 : Recognition Rather Than Recall
Brief explanationBrief explanation Show all objects and actions available to the user Show all objects and actions available to the user Do not require them to rememberDo not require them to remember information from one information from one
screen of the application to another screen of the application to another
Relationship to the information-processing Relationship to the information-processing modelmodel direct application of theories of human memory direct application of theories of human memory much easier for someone to recognize much easier for someone to recognize
HE7 : Flexibility and Efficiency of Use HE7 : Flexibility and Efficiency of Use
Brief explanationBrief explanation have acceleratorshave accelerators to allow skilled users to speed up their to allow skilled users to speed up their
be able to be able to tailor interfacetailor interface to speed up frequent actions to speed up frequent actions Relationship to the information-processing model Relationship to the information-processing model the the
motor processes of the usermotor processes of the user Typing single keys is faster than switching the hand Typing single keys is faster than switching the hand
between the keyboard and the mouse and pointingbetween the keyboard and the mouse and pointing skilled users will skilled users will develop plansdevelop plans of action whose of action whose
executed frequentlyexecuted frequently
tailoringtailoring can capture these plans in the interface can capture these plans in the interface
HE8 : Aesthetics and Minimalist Design HE8 : Aesthetics and Minimalist Design
Relationship to the information-processing modelRelationship to the information-processing model relates to the visual search aspect of perception and also relates to the visual search aspect of perception and also
to memoryto memory The more clutter, the more information the eyes must The more clutter, the more information the eyes must
search through to find the desired informationsearch through to find the desired information the more information coming in through perception as the more information coming in through perception as
the visual search proceeds, the more this information the visual search proceeds, the more this information interferes with the retrieval from long-term memoryinterferes with the retrieval from long-term memory of of the information that is actually relevant to the task at the information that is actually relevant to the task at handhand
HE9 : Help Users Recognize, Diagnose, and Recover from HE9 : Help Users Recognize, Diagnose, and Recover from ErrorsErrors
Brief explanationBrief explanation Error messages should be written in plain languageError messages should be written in plain language tell the user what the problem istell the user what the problem is give constructive advice about how to recover from the give constructive advice about how to recover from the
errorerror this could be considered a subset of the first heuristic , this could be considered a subset of the first heuristic ,
but it is so but it is so importantimportant and so and so often violatedoften violated that it that it warrants its own heuristicwarrants its own heuristic
Relationship to the information-processing Relationship to the information-processing model model give the user sufficient information to understand the give the user sufficient information to understand the
situationsituation
HE10 : Help and DocumentationHE10 : Help and Documentation
Brief explanationBrief explanation system need help and documentationsystem need help and documentation should be always available, easily searchable, and give should be always available, easily searchable, and give
concrete advice applicable to users’ tasksconcrete advice applicable to users’ tasks Relationship to the information-processing modelRelationship to the information-processing model
an admonition an admonition to give the user sufficient information to to give the user sufficient information to understand the applicationunderstand the application
should allow information to be found by asking for the should allow information to be found by asking for the gist of the meaninggist of the meaning
rather than only the exactly right keywordrather than only the exactly right keyword people will remember only the gist, not the exact words people will remember only the gist, not the exact words
(if they ever knew them).(if they ever knew them).
Summary Summary
keep these ten heuristics in mindkeep these ten heuristics in mind
system will be more usable than those violates system will be more usable than those violates themthem
As early as possibleAs early as possible e.g.e.g., with sketches or a prototype, have several people , with sketches or a prototype, have several people
examine the UI design using these heuristics to discover examine the UI design using these heuristics to discover violations and give you plenty of time to fix them.violations and give you plenty of time to fix them.
an an empiricalempirical technique for assessing the usability of a prototype technique for assessing the usability of a prototype of an interfaceof an interface
"may be the single most valuable usability engineering method ""may be the single most valuable usability engineering method " The essence of the techniqueThe essence of the technique
ask a user to think aloud while performing a task on your system;ask a user to think aloud while performing a task on your system; you watch silently and learn you watch silently and learn
how the user thinks about the taskhow the user thinks about the task where the user has problems using your systemwhere the user has problems using your system
this technique is usually performed this technique is usually performed after a prototype is builtafter a prototype is built Although it is Although it is possiblepossible to do a think-aloud test to do a think-aloud test with a paper with a paper
prototypeprototype it is much easier and more realistic to use a running prototypeit is much easier and more realistic to use a running prototype
Differences of two toolsDifferences of two tools Heuristic evaluation: Heuristic evaluation:
an analyst, often a developer of the system, can an analyst, often a developer of the system, can apply a few design heuristics successfully to predict apply a few design heuristics successfully to predict usability problemsusability problems
require the analyst think "like a user“require the analyst think "like a user“ requires analyst to know the task domain of the userrequires analyst to know the task domain of the user "speak the user's language""speak the user's language" requires the analyst to know what the user considers requires the analyst to know what the user considers
consistent andconsistent and requires the analyst to know what other standard requires the analyst to know what other standard
interfaces they already know.interfaces they already know.
Differences of two toolsDifferences of two tools think-aloud usability testingthink-aloud usability testing
assumes the analyst can no longer "think like a user“assumes the analyst can no longer "think like a user“ the analyst knows too much about the system (and the analyst knows too much about the system (and
sometimes too little about the task domain).sometimes too little about the task domain). representative users actually interact with a prototyperepresentative users actually interact with a prototype discover what a typical user might think or do with discover what a typical user might think or do with
the systemthe system These two techniques will discover different These two techniques will discover different
usability problems, usability problems, use both techniquesuse both techniques in designing a system. in designing a system.
The procedure for doing an effective TA usability testThe procedure for doing an effective TA usability test
1st, typical tasks are created that typical users might do with 1st, typical tasks are created that typical users might do with your system.your system.
2nd, users are identified who represent the types of people you 2nd, users are identified who represent the types of people you expect to use your systemexpect to use your system they should have they should have similar educational backgrounds and computer similar educational backgrounds and computer
experienceexperience to your intended users to your intended users InviteInvite them into a labthem into a lab informinform them about the purpose and procedure of the test them about the purpose and procedure of the test traintrain them to think aloud them to think aloud
They are allowed to use the system They are allowed to use the system in any wayin any way that they can to that they can to accomplish the task accomplish the task without interruption or helpwithout interruption or help
3th, the videotapes are analyzed for "critical incidents“, that are 3th, the videotapes are analyzed for "critical incidents“, that are clues to clues to what is problematic and what is problematic and needs to be fixedneeds to be fixed in the next version of in the next version of
the systemthe system what is easy to use and should be what is easy to use and should be preservedpreserved in the next version in the next version
UsersUsers can voice their thoughtscan voice their thoughts can speak aloud the contents of their working can speak aloud the contents of their working
memory as they work on a taskmemory as they work on a task
Speaking aloud the contents of working memory Speaking aloud the contents of working memory is easiest to do with the linguistic contents of is easiest to do with the linguistic contents of working memoryworking memory
it it doesn't interfere muchdoesn't interfere much with the performance with the performance of the taskof the task
It is possible for people to voice the nonlinguistic It is possible for people to voice the nonlinguistic contents of working memorycontents of working memory E.g.,E.g., searching for a specific blue in a color-selection control searching for a specific blue in a color-selection control
panelpanel doing so doing so typically slows down their performancetypically slows down their performance of the of the
tasktask
people people cannot put voice to the processingcannot put voice to the processing they are doing they are doing on the contents of working memoryon the contents of working memory
they mention the concepts or objects they are working they mention the concepts or objects they are working on but on but not the rapid cognitive processesnot the rapid cognitive processes they are they are performing. performing.
What UI designer do?What UI designer do? interface designers who listen to their thoughts can interface designers who listen to their thoughts can
learn a lotlearn a lot about what the users are thinking. about what the users are thinking. learnlearn
which commands or which menu items make sense to users which commands or which menu items make sense to users and how those commandsand how those commands
menu items connect to the users' task domainmenu items connect to the users' task domain which items the user sees and attends to and which he or she which items the user sees and attends to and which he or she
misses entirelymisses entirely which procedures in the interface are easy to figure outwhich procedures in the interface are easy to figure out which are totally misunderstoodwhich are totally misunderstood how the interface leads a user down a wrong pathhow the interface leads a user down a wrong path how the user recognizes an error and backs uphow the user recognizes an error and backs up how the interface helps or hinders explorationhow the interface helps or hinders exploration
How to do?How to do?
asking a user to think aloudasking a user to think aloud just watching the interaction —just watching the interaction —without without
"helping" the user"helping" the user
1.3.3 How to Write a Usability Aspect Report (UAR) 1.3.3 How to Write a Usability Aspect Report (UAR)
Usability Aspect Reports Usability Aspect Reports The Elements of a UAR Report The Elements of a UAR Report
UAR Identifier UAR Identifier Succinct Description of the Usability Aspect Succinct Description of the Usability Aspect Evidence for the Aspect Evidence for the Aspect Explanation of the Aspect Explanation of the Aspect Severity of the Problem or Benefit of the Good Feature Severity of the Problem or Benefit of the Good Feature Possible Solutions and Potential Trade-Offs Possible Solutions and Potential Trade-Offs Relationship to Other Usability Aspects Relationship to Other Usability Aspects
IMPORTANT: Always Step Back and Try to See IMPORTANT: Always Step Back and Try to See the Bigger Picture! the Bigger Picture!
xqw
2005
Usability Aspect ReportsUsability Aspect Reports
find aspects of the interfacefind aspects of the interface problems for users (which you will want to fix in the problems for users (which you will want to fix in the
next versionnext version helpful to usershelpful to users
help to make that next version more usablehelp to make that next version more usable Writing a clear, useful report of these aspects (called a Writing a clear, useful report of these aspects (called a
usability aspect report or UAR)usability aspect report or UAR) In project developmentIn project development
write these reports for write these reports for other membersother members of development of development team who team who have not seenhave not seen the usability issue the usability issue
reports must be clear and complete : reports must be clear and complete : clarity and completeness will help you understand each report clarity and completeness will help you understand each report
six monthssix months after you write it after you write it
The Elements of a UAR ReportThe Elements of a UAR Report
UAR Identifier UAR Identifier Succinct Description of the Usability Aspect Succinct Description of the Usability Aspect Evidence for the Aspect Evidence for the Aspect Explanation of the Aspect Explanation of the Aspect Severity of the Problem or Benefit of the Good Severity of the Problem or Benefit of the Good
Feature Feature Possible Solutions and Potential Trade-Offs Possible Solutions and Potential Trade-Offs Relationship to Other Usability Aspects Relationship to Other Usability Aspects
UAR Identifier UAR Identifier
be a unique identifier for the purposes of filingbe a unique identifier for the purposes of filing Identifier could contain letters and numbersIdentifier could contain letters and numbers
E.g.E.g. Chris Smith and Jan Koo are both doing an analysis Chris Smith and Jan Koo are both doing an analysis identifier might be CS1 or JK75identifier might be CS1 or JK75
both a heuristic evaluation and a think-aloud usability both a heuristic evaluation and a think-aloud usability study were used, study were used, identifiers might be HE6 or TA89.identifiers might be HE6 or TA89.
UAR Identifier UAR Identifier
If the report If the report pertains to a usability problempertains to a usability problem of the of the interface,follow the unique identifier with the word interface,follow the unique identifier with the word ""ProblemProblem" " Eg. “HE23 – Problem” Eg. “HE23 – Problem”
if it describes an aspect of the interface you feel if it describes an aspect of the interface you feel should should be preserved in any redesignbe preserved in any redesign, follow the unique , follow the unique identifier with the word " identifier with the word " Good FeatureGood Feature" " Eg. “HE25 -- Good Feature ” Eg. “HE25 -- Good Feature ”
Succinct Description of the Usability AspectSuccinct Description of the Usability Aspect
be be used as the "name" of this UARused as the "name" of this UAR when you talk about when you talk about its relation to other UARsits relation to other UARs
Make the name Make the name as short as possibleas short as possible (about three to five (about three to five words) words)
but still descriptive and but still descriptive and distinguishabledistinguishable from other from other aspects of the systemaspects of the system
Succinct Description of the Usability AspectSuccinct Description of the Usability Aspect
When UAR is about a problem When UAR is about a problem make sure you have a name that describes the problem, make sure you have a name that describes the problem, rather than a solution.rather than a solution. E.g. "Press-Me label too small"E.g. "Press-Me label too small" // // "Press-Me label should be 24 "Press-Me label should be 24
point" point" to leave room for the possibility that you might find to leave room for the possibility that you might find
several problems that are similar and that several problems that are similar and that suggest one suggest one common solutioncommon solution
if solve each individual problem individually and give if solve each individual problem individually and give individual solution in the name of its UAR, individual solution in the name of its UAR, may not see may not see the similaritiesthe similarities in the problems in the problems
Evidence for the AspectEvidence for the Aspect
the the objective supporting materialobjective supporting material that justifies that justifies your identifying the aspectyour identifying the aspect
needs to needs to contain enough informationcontain enough information for a reader for a reader of this UAR to understand what triggered the of this UAR to understand what triggered the reportreport
Evidence for the AspectEvidence for the Aspect
E.g.E.g. an HE report could be an HE report could be an image of a an image of a cluttered screencluttered screen and the heuristic about and the heuristic about aesthetics and minimalist designaesthetics and minimalist design
E.g.E.g. When not have keyboard shortcuts and the When not have keyboard shortcuts and the heuristic about providing shortcuts: heuristic about providing shortcuts: it could be a it could be a list of menu items list of menu items
E.g.E.g. a think-aloud study this is a think-aloud study this is a screen shota screen shot or or descriptiondescription, or , or a brief animationa brief animation what was on the screenwhat was on the screen what the user did (keystrokes, mouse movements), what the user did (keystrokes, mouse movements), what the system did in response to any user actions, and what the system did in response to any user actions, and what the user saidwhat the user said
Explanation of the AspectExplanation of the Aspect
interpretationinterpretation of the evidence of the evidence E.g. "the button label, XYZ, is a standard programming E.g. "the button label, XYZ, is a standard programming
term, but the user didn't seem to know that term" term, but the user didn't seem to know that term" E.g., "the system was in editing mode, but the user E.g., "the system was in editing mode, but the user
thought it was in run mode because there isn't a thought it was in run mode because there isn't a noticeable difference between the modes on the screen."noticeable difference between the modes on the screen."
This should be written in a tone that This should be written in a tone that analyzes what analyzes what happenedhappened with the system aspect, with the system aspect,
NOT in a tone that suggestsNOT in a tone that suggests an evaluation an evaluation provide enough contextprovide enough context in this explanation for the in this explanation for the
reader to understand the problem—even if they reader to understand the problem—even if they do not do not knowknow the system or domain as well as you do the system or domain as well as you do
Severity of the Problem or Benefit of the Good Severity of the Problem or Benefit of the Good FeatureFeature
reasoning about how important it is reasoning about how important it is either fix this problem either fix this problem Or preserve this good featureOr preserve this good feature
includes includes how frequentlyhow frequently the users will experience the users will experience this aspectthis aspect whether they are likely to learn how it workswhether they are likely to learn how it works whether it will affect new users, casual users, whether it will affect new users, casual users,
experienced usersexperienced users
Possible Solutions and Potential Trade-offsPossible Solutions and Potential Trade-offs
When a When a problemproblem : this is the place to propose a solution : this is the place to propose a solution not necessary to have a solution as soon as you identify a not necessary to have a solution as soon as you identify a
problemproblem problem—you might find after analyzing the whole problem—you might find after analyzing the whole
interface that interface that many problems are relatedmany problems are related can all be fixed by can all be fixed by making a single broad changemaking a single broad change instead instead
of making several small changesof making several small changes report report anyany potential design trade-offs potential design trade-offs E.g.E.g.
no keyboard shortcuts for items on a menu in a mail system and you no keyboard shortcuts for items on a menu in a mail system and you propose propose CTRL-S for SENDCTRL-S for SEND
But But CTRL-S might CTRL-S might already be usedalready be used for another menu item (SAVE) for another menu item (SAVE) all shortcut keys need to be all shortcut keys need to be examined before any design examined before any design
changeschanges are made are made
Relationship to Other Usability AspectsRelationship to Other Usability Aspects
It is It is oftenoften the case that UARs are related to each other the case that UARs are related to each other where you record which UARs this one is related to and where you record which UARs this one is related to and
a statement about a statement about how it is relatedhow it is related Make sure that all the Make sure that all the related UARs point to each otherrelated UARs point to each other.. E.g.E.g.
if UAR #1 related to UAR #30, then UAR #30 should 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 #1 in this section and UAR #1 should point to UAR #30 in its version of this sectionpoint to UAR #30 in its version of this section
common common mistakemistake:: to enter the pointer into a newly created UAR, to enter the pointer into a newly created UAR, neglect to go back to the previous ones that it relates to neglect to go back to the previous ones that it relates to
and update their UARsand update their UARs
IMPORTANT: Always Step Back and Try to See the Bigger IMPORTANT: Always Step Back and Try to See the Bigger Picture! Picture!
stepping back and looking for patterns in the usability stepping back and looking for patterns in the usability problemsproblems
do this at several times during the analysisdo this at several times during the analysis When each UAR is created, you should When each UAR is created, you should
look back to the previous UARs and see if they are look back to the previous UARs and see if they are related to the new onerelated to the new one
When you have completed all UARs, When you have completed all UARs, you should go back and look again for you should go back and look again for patternspatterns
Why do this?Why do this? detect larger problems in the interface that might have a detect larger problems in the interface that might have a
solution that fixes many small problems with only one solution that fixes many small problems with only one changechange
