Unit 2.

Interfaces: Creating with Visual Basic,

Evaluating with Usability Heuristics
 Unit 2. Interfaces: Creating with Visual Basic, Evaluating with
Usability Heuristics

 2.1 Creating with Labels— Evaluating with Two Heuristics

 2.2 Creating with Buttons — Evaluating with Three Heuristics
 2.3 Creating with Checkboxes and Radio Buttons — Evaluating
with One Heuristic
 2.4 Creating with ListBoxes and ComboBoxes — Evaluating with
One Heuristic
 2.5 Creating with Combinations
 2.6 Creating with Containers — Evaluating with One Heuristic
 2.7 Two More Heuristics for Evaluating Interfaces
 2.8 Menu Controls and Some Example UARs
 Overview of the Windows Date/Time Control Panel
 its implementation vary across the Windows
platforms
 basic function and appearance are same/similar.
 consist of two tabbed pages
 E.g., show the control panel on this machine
 The Date & Time Page — Its Purpose and
Operation
 The Date & Time page allows users to set the
system date and time
 controls
 provided by two frames
 Date frame features a drop-down list for selecting a
month
 a Textbox with up-down arrows for selecting a year

 a clickable graphical calendar for selecting a day

 in some implementations, radio buttons ( change

A.M./P.M. settings)
 The Date & Time Page — Its Purpose and
Operation
 Operation: users set the system time by
manipulating the relevant controls on the page's
Time frame
 Click
 TAB : navigate forwards,

 SHIFT+TAB: navigate backwards

 Ctrl+TAB : move from one tabbed page to the next

 E.g., Operation under MSDOS

 The Time Zone Page — Its Purpose and Operation
 The Time Zone page allows users to set the
system clock to a time zone of their choosing
 Controls
 drop-down box: displays a list of standard time zones
 pictureBox: map

 Checkbox: automatically to reflect changes in daylight

savings
 2.1 Creating with Labels, Shapes, and Lines (VB6) —
Evaluating with Two Heuristics
 2.1.1 Labels
 2.1.2 HE: Match System to Real World
 2.1.3 HE: Visibility of System Status

 Assessments
 Exercise 3
 Multiple-Choice Quiz 4
 2.1.1 Labels

 Label Controls
 Label Controls

 Label Control Properties

 Label Controls- the simplest control
 provides a simple textual message
 Label Control Properties-(name)
 (Name)
 indicates the identifier that your program code
can use to refer to the control
 used as part of the name of the subroutine that
handles events for the control
 it cannot be changed at runtime
 Every control is given a default name when it is
created.
 it's a good idea to change it to something more
meaningful in order to improve the readability of
code.
 demo
 Hints of Property-(name)
 Hint 1 ： VB does not automatically update
code to reflect control names changes
 You should rename controls immediately when they are
created and to think carefully about the names you
choose
 Hint 2 : a control must have the form of a valid
identifier in VB
 a good convention is to capitalize the second and
subsequent words (e.g., "aMultipleWordName").
 Another convention is to separate the words with an
underscore ("_") character (e.g.,
"a_multiple_word_name").
 Label Control Properties
 Text
 The Text property controls what text the Label displays.
 Changing the property (either at design time or at
runtime) changes the text that appears on the screen.
 Label Control Properties
 Location (X, Y), Size(Width, Height)
 They control where the top-left corner of the control appears in a
"container" object,
 its dimensions controlled by - Size(Width, Height).
 By default, these properties use pixels as the unit of measurement.
 When to set
 Under most circumstances, you do not type values into these
properties directly. Instead you typically place and resize the
control interactively (using its handles).
 However occasionally, you might want to use a precise value, or
to ensure that a number of different controls have the same value.
In those cases, it's useful to enter a numeric value directly in one
or more of these properties.
 Label Control Properties
 AutoSize
 takes on a Boolean value (True or False).
 If the AutoSize property's value is True, then the
control's Width and Height properties are automatically
(re)calculated so that the control is the size needed by
whatever text is being displayed. If this property's value
is False, then the control's width and height are fixed,
and text that does not fit within this size is clipped away
and is not visible (though the text is still in the control).
 BackColor, ForeColor
 determine the color used for the background of the
text and the text itself
 Label Control Properties
 BorderStyle
 This property determines the display style of the
control. It determines, for example, whether a
control will display a raised (pseudo-3D) appearance
or a flat appearance. when
 " Fixed3D "

 " FixedSingle "

 Label Control Properties
 Visible
 Determines whether the Label
appears at all in the final display (as
shown below).
 "False" - make the Label disappear.

 "True" - insure that the Label is

displayed.
 Font
 Controls the font used to display the
text of the Label.
 2.1.2 HE: Match system to Real world
 Real-World Concepts
 Real-World Language
 Real-World Conventions
 Cultural Issues
 Date/Time Control Panel Applications of this Heuristic
 Example UAR: Aspect 1 — Date Label is Good, It
Speaks the Users' Language
 Example UAR: Aspect 2 — Map Very Prominent But
Not Interactive, Does Not Follow Real-World
Conventions
 Real-World Concepts
 Many computer systems can benefit from using real-
world concepts in their interfaces --
 In Macintosh and Windows operating systems,--
 ”desktop”
 Folders
 Documents
 trash can
 which are all very familiar to office workers, e.g.,
 users immediately know (based on their knowledge of the real
world) that they can put documents in folders
 also know that they can put either documents or whole folders
into the trash
 can as well as change their minds and take them out again
 Real-World Concepts
 Finding a suitable metaphor for a system requires that
 a design team understand the task domain
 the design team will include a domain expert
 who can guide the search for a suitable real-world metaphor
 it is important to understand that the computer system
is likely to go beyond the real-world concept
 E.g., in an operating system, make a pointer to a document , place
it on the desktop or in many different folders, then you will be
able to access the same document from all of these places
 The real world has no analogous facility, In the real world, you
would have to make many copies of the same document and put
them in all the different places you wanted them in.
 changed one copy, you'd have to make copies of the new version
and replace the copies of the old version in all those places
 the operating system is giving the user a powerful
capability that does not exist in the real world.
 Real-World Concepts
 real-world concepts help the user make contact
between their prior knowledge and the new
system
 it is important to understand that the computer
system is likely to go beyond the real-world
concept, so
 the parallel will not be perfect, nor should it be.
 After all, the computer system will only be better than
the real-world system it is replacing
 to the extent that the computer gives the user
more power than they have in the real world.
 Real-World Language
 "Speak the user's language . "
 computer application should use the same
vocabulary that the user would use to
describe
 concepts
 objects
 processes
 Real-World Language
 Avoid technical jargon that only computer
scientists will understand. E.g.,
 "abort“, common in computer science and had no
negative connotations, stop some process
 in the real world, (especially the United States in
the late 20th century) this word is politically
charged and is seen to be rather violent
 Sensitivity to the real-world meanings of this
term has led to its almost disappearance from the
systems we see today.
 Real-World Language
 example of a violation of this heuristic
 computer systems give error messages that use systems
terms instead of user's language
 an application will quit unexpectedly and a dialog box will
appear that says something like the following:

 user will not know what an "Error of Type 01" is

 user will only be confused by this information
 The information needs to be put into words that
make sense to the user.
 Real-World Conventions
 conventions that make the real world more
manageable
 conventions are what people have come to expect
from their years of living
 conventions should be carried over and
maintained as much as possible in computer
systems
 Common conventions
 Printed matter is read in a specific order (for
English, this is left-to-right, top-to-bottom).
 Things that are the biggest are probably the
most important.
 Things that are visually grouped together
probably have something to do with each other
semantically.
 Things that are separated by white space are less likely
to be related.
 Something that happens right after you do
something is probably caused by what you just
did.
 Cultural Issues
 when you move from users of one culture to
users of another culture, conventions are apt to
change
 cultures defined by
 geographic area,
 language

 age

 E.g., printed matter is ordered in a different way for

English than it is for Japanese
 Cultural Issues
 Computer systems that have a global market
need to be especially sensitive to this issue
throughout the design.
 Generational issues
 designing computer systems for different age-
populations also have to be careful
 Eg. "dial a telephone," instead of "press a telephone“
 Date/Time Control Panel Applications of this
Heuristic
 your first Visual Basic prototype in exercise 3.
 We will examine two aspects of this small
interface
 using the match between system and real world heuristic
 demonstrate how to write UARs for our conclusions
 Example UAR: Aspect 1 — Date Label is Good, It Speaks
the Users' Language
 One aspect of this interface is that it presents the
day's date in straightforward language that is
familiar to users.
 Here a UAR to document this good aspect of the
interface
 Use this first example of a UAR to discuss issues
of how to write a good UAR as well.
 See HE1 demo
Example UAR: Aspect 2 — Map Very Prominent But
Not Interactive, Does Not Follow Real-World
Conventions
 introduction
 This is an example of a violation of the match
between system and real world heuristic.
 In this simple interface simulates the Windows 98
control panel quite closely
 the image of the map is very big, taking up most
of the space in the control panel.
 This implies, through real-world conventions, that it is
very important to the user in understanding and
interacting with the control panel.
 However, in this preliminary prototype, and in the real
control panel, the user cannot actually interact with the
map.
 It doesn't respond when the user clicks it.
 introduction
 In real word standard forms
 a similar control panel on the Macintosh does allow interactivity
—the user can both specify points on the map by clicking on it
and move its view by dragging.)
 In the actual Windows 98 control panel, the map does change
when the user resets the time zone, but only in a very subtle way
—it re-centers around the city or region that the time zone is set to
(you will program this in Visual Basic in a later exercise).
 However, it doesn't indicate the time zone boundaries with any
lines.
 Thus, even the actual control panel has a very impoverished interactivity.
 Thus, even the actual control panel violates this heuristic by ignoring the
real-world convention that the biggest things tend to be the most important.
 See demo
 2.1.3 HE: Visibility of System Status

 Provide Feedback — Keep the User Informed

About the Stages of a Process
 Don’t Make the User Guess
 Date/Time Control Panel Applications of this
Heuristic
 Example UAR: Date Label Is Good — It Shows
the Date the Computer Is Set To
 Provide Feedback — Keep the User Informed About the
Stages of a Process
 Have you meet ?
 initiated a command but there is no immediate activity
 Nothing indicate that the command has been received and is being
executed
 As above,Often Cause users become uncomfortable
 it is important that the user receives informative
feedback whenever a command has been issued
 E.g. opening a file
 selects the File/Open command
 a file dialog box appears
 confirms that the File/Open command has been received
 E.g. Copy/move indicator bar
 showing the progress of the process
 approximately how much information has been transferred
 how much information has yet to be transferred
 Provide Feedback — Keep the User Informed About the
Stages of a Process
 The hourglass and watch hand
 The hourglass and watch hand : common signals that the computer
is doing something
 but they provide no hint about what the something is or how far
along the process is
 Dial-Up process
 following series of messages appears
 dialing *00862768778132…
 verifying username and password
 registering user on network
 …
 it keeps the user informed about the stages of the dial-up
operation
 Feedback methods
 methods
 an icon changing shape,
 a menu item blinking briefly as it is selected,
 a message,
 a dialog box,
 an alarm,
 an audio clip,
 or an animation
 Dialog boxes and messages can be used to
 confirm actions, warn of irreversible actions
 guide users along a multi-step path
 Messages should be in the user’s terminology, not
computerese
 Don’t Make the User Guess
 keeping the user informed
 the stages of a process
 the current task situation

 E.g.,
 Showing the filename on the title bar of a document
 keeps users informed about what files are in each window.
 Dimming or shading a menu option:
 tells users the status of the option—that the option is not
currently available.
 Icons show the presence of applications or documents.
 Date/Time Control Panel Applications of this Heuristic

 examine an aspect of this small interface using

the visibility of system status heuristic
 write a UAR for conclusions.
Example UAR: Date Label Is Good — It Shows the Date the
Computer Is Set To
 See demo
 2.2 Creating with Buttons — Evaluating with Three
Heuristics

 2.2.1 Buttons
 2.2.2 HE: Consistency and Standards.
 2.2.3 HE: User Control and Freedom.
 2.2.4 HE: Flexibility and Efficiency of Use.

 Assessments
 Exercise 4
 Multiple-Choice Quiz 5
 2.2.1 Buttons

 Button Control Description

 Properties
 Text
 TabStop, TabIndex

 Enabled

 Font

 Events
 Button Control Description
 Changes in the colors of lines make a button
appear to be pressed.

 The underlined "P" reminds us of the shortcut

character.
 Sample : ButtonDemo
 The dotted border signifies that the button is in
focus.
 A button can be decorated with an image.
 E.g., the window media player’s buttons
 Properties - Text
 determines the textual label displayed on the button
 shortcut
 character: placing an "&" just before the character
 indicated to the user by an underline and
 can be invoked by holding down the ALT key and pressing the
shortcut character
 It is up to the programmer to ensure that shortcut characters are
unique across all controls.
 note:
 the system provides the same initial default,
 the Text property of a control (which is displayed to the user) is
distinct from
 the name of the control (which is used programmatically).
 Properties
 TabStop
 Determines either allows the focus to stop at the button
or causes the focus to skip over it.
 TabIndex
 The TabIndex values within a form start at zero and
proceed to N-1 (where N is the number of controls in
the form).
 When the Tab key is pressed, the focus moves to the
control with the next highest TabIndex value that also
has its TabStop property set to "True" (wrapping around
from N-1 to zero if necessary).
 Note of TabStop,TabIndex
 Whenever you define a TabIndex property,
Visual Basic automatically renumbers the
TabIndex properties of all other controls in the
form.
 Consequently, TabIndex numbers will always be
within the designated zero to N-1 range.
 If not explicitly specify a TabIndex value, TabIndexes
will be assigned by the system in the order in which
controls were created.

 Note of TabStop,TabIndex
 Current focus is indicated visually, there is no visual
indication given of where the next focus will be.
 Consequently, it is important to set the TabIndex
properties of all controls carefully in order to avoid
behavior that is unexpected by the user.
 As a rule of thumb, focus should move within a
logically related group of controls before moving to an
unrelated group.
 In a group, focus should move in reading order.
 Similarly, when moving between groups, movement in
reading order is often preferred.
 Finally, focus should begin
 either with the default control (see the Default property )
 or with the first control of the first logical group of
controls (in reading order).
 Properties
 Enabled
 Indicates whether the button is enabled.

 Disabled buttons do not operate when clicked

and are drawn to appear "shaded" (as shown
below) to indicate that they have been disabled:

 Font
 controls the font used to display the caption of
the button.
 Events
 Input events that correspond to user
manipulation of input devices are delivered to
the controls of a Visual Basic interface
 Visual Basic should then respond to these input events.
 The controls process the events in order to
 provide visual feedback and
 invoke the actions specified by the programmer.
 Events
 These actions are performed in Visual Basic by
event handler subroutines.
 Note
 the situations that lead to the calling of these subroutines
are also referred to as events.
 Event handler subroutines
 Event handler subroutines for a particular control are
named in a specific way in VB.
 The name of all the event handlers for a given control begin with
the name of the control followed by an underscore character ("_")
and then end with the name of the event they are to respond to.
 E.g., Click a button named "myButton" event.
 the subroutine named "myButton_Click" would be called when
that button was clicked.
 Code responding to the activation of that button would then be
placed in the body of the mybutton_Click subroutine:

Private Sub myButton_Click(ByVal sender as Object, ByVal e
As System.Windows.Forms.MouseEventArgs) Handles
myButton.Click
<put code to respond to button activation here>
End Sub
 Operation in VB.net 2005
 double click on any control, Visual Basic will
automatically create code for the most common event
handler routine associated with that control (if it does
not already exist) and place you in the code editor at
that routine.
 Edit another event handler
 move to the code associated with a particular
control by choosing the control name from the
pull-down list of names at the left.
 move to a particular area of the code (such as
global declarations or functions and subroutines
not associated with events) by selecting items
from these pull-down lists.
 Application routines code
 The code that responds to the activation of a
button normally carries out some action.
 Typically, this involves modifying information in
the model that pertains to the objects of interest
by calling their
 set accessor routines and/or
 one or more of the subroutines that make up the
application.
 Application routines may modify model objects.
 changes model objects by updating the properties of any
controls that are related to them.
 additional information of events
 The Click event for buttons does not have
additional information associated with it.
 Other events, however, may have additional
information.
 E.g., the KeyDown event not only has
 an integer code that indicates which key was pressed
but also
 a second integer code that indicates the states of the
modifier keys (SHIFT, CONTROL, and ALT) at the
time the key was pressed.
 This additional information about the event is passed
as parameters to the particular event handling routine.
 events associated with button
 Private Sub name_Click(ByVal sender as Object, ByVal e As
System.EventArgs)
 invoked whenever the control is activated (by a mouse press and
release).
 Private Sub name_MouseDown(ByVal sender as Object, ByVal e
As System.Windows.Forms.MouseEventArgs)
 Private Sub name_MouseUp(ByVal sender as Object, ByVal e As
System.Windows.Forms.MouseEventArgs)
 invoked when a mouse button is pressed or released over a button
respectively. Information about the state of the mouse when a
button is pressed is accessible via the e parameter.
 E.G., e.Button can be used to determine if the right, left or middle
button was pressed. Similarly, the location of the mouse when the
button was pressed or relased can be determined using e.X and
e.Y
 events associated with button
 Private Sub name_MouseMove(ByVal sender as
Object, ByVal e As
System.Windows.Forms.MouseEventArgs)
 called whenever the mouse moves over the control
 Note
 if no event handler routine is declared for a given event,
it is simply ignored.
 2.2.2 HE: Consistency and Standards
 Don’t Frustrate the User
 Maintain Platform Consistency
 Maintain Application Consistency
 Date/Time Control Panel Applications of this
Heuristic
 Example UAR: Aspect 1 — Button Labels Are
Good
 Example UAR: Aspect 2 — Button Names Are
Very Similar
 Important — When Heuristics Conflict
 Brief introduction before
 Information that is the same should appear to be
the same
 same words
 icons

 positions on the screen

 Information that is different should be expressed

differently.
 This consistency should be maintained within
 a single application
 within a platform (therefore developers need to know
platform conventions).
 Don’t Frustrate the User
 Users become accustomed to certain actions and
sequences
 they become confused or frustrated
 When they encounter unexpected behavior
 users will expect the same series of actions to be
required under similar conditions
 Open file
 Exit application

 help
 Maintain Platform Consistency
 Products should conform to the conventions of the
platform
 Same style
 Windows
 Mac
 Linux
 Products adhere to platform conventions may minimize
frustration
 E.g. .
 The location of the File menu ——leftmost item
 The contents of the File menu ——opening, closing, saving,
printing, and quitting
 Users are able to learn, but they don’t have to
 they can concentrate on learning the commands that are unique to
the product —— the own function of the software
 Maintain Application Consistency
 Consistency within an application is also important
 location consistency(in menu)
 commands should not move around between menus
 commands should not appear and disappear from menus.
 menu items that aren’t available should be dimmed (or shaded)
instead of being removed from the menu.
 keyboard shortcuts
 keyboard shortcuts should comply with platform and application
standards.( ctrl + x, ctrl + o, ctrl + c, ctrl + v)
 Messages, warnings, and alarms
 should be consistent in their wording and in where they appear
 Color semantics
 used as codes, should keep the same meaning throughout
 E.g., red for error , yellow for warn
 Maintain Application Consistency
 Formatting should be kept consistent
 date and time,
 monetary units,
 numbers
 Data presentation should be kept consistent
 data presentation such as,
 labeling,
 capitalization,
 font face, use of bold and italic, and the placement of fields)
 Dialog boxes should be consistent in their presentations
 Terminology
 words used to describe actions, behaviors, and commands should
be kept consistent.
 Date/Time Control Panel Applications of this Heuristic

 The following picture shows what your first

Visual Basic prototype will look like when you
have completed Exercise 4. We will examine two
aspects of this small interface using the
consistency and standards heuristic and write
UARs for our conclusions.
Example UAR: Aspect 1 — Button Labels Are Good
 HE5 - Good Feature
 Example UAR: Aspect 2 — Button Names Are Very Similar

 HE6 - Problem
 Important — When Heuristics Conflict
 heuristic gives conflicting design advice
 the very nature of heuristic evaluation
 it uses heuristics
 heuristics are not guaranteed to lead to a solution

 just point in a direction of a solution

 What to do?
 think hard about whether the conflicting advice makes
any real difference to the user
 do an error analysis
 error analysis
 error analysis suggests that
 the cost of confusing the two buttons
 because their labels do not reflect the actual differences in their
functions is relatively small.
 But other case will be a more severe consequence of
error
 it will be more important to resolve the conflict in some
other way
 it is better to go with the standard labels because there
really are great benefits to be had from adhering to
platform standards.
 Click the image to run the application and analyze
 Rearrange UARs
 Go back and put this error analysis in the UARs
 Record the design decision you have made
 If the question comes up again, you'll know why you
made this decision.
 What shall we do when in more complicate case?
 some case, the error analysis is probably the end
of the controversy
 in other instances
 more severe consequence of error
 more important to resolve the conflict in some other
way.
 E.g.,
 dialog boxes that are more difficult to get back to if you
hit OK mistakenly instead of Apply (and undo doesn't
usually work to get a dialog box back!).
 In these cases, you should use another technique (e.g.,
the think-aloud technique) to get more information about
the issue.
 2.2.3 User Control and Freedom
 Let the User Be in Control
 Provide an Undo Mechanism
 Require Confirmation
 Provide an Escape Route
 Date/Time Control Panel Applications of this Heuristic
 Example UAR: Aspect 1 — Cancel Button Is Good
 Example UAR: Aspect 2 — UARs Sometimes Lead to
More UARs.
 Let the User Be in Control
 "who's in charge "
 strongly affects how a user feels about an application
 Users get frustrated when they don’t feel in control of
the computer
 users should initiate actions, not the computer
 carefully arrange the wording of messages
 their tone should suggest
 the computer is ready and compliant

 not commanding or threatening

 Provide an Undo Mechanism
 The user should be able to
 reverse the steps in a process and
 retreat back to a previous state
 Some of the ways applications implement undo
 An undo command that reverses the most recent command
 The simplest form only allows to reverse the most recent
command
 Some applications allow the user to reverse several steps
 A "Reset" or "Factory Settings" button : reverse certain edits
 The Reset button will reverse settings that have been set in the
current editing session
 The Factor Settings button will cause the settings to be
returned to their out-of-the-box configuration. ( e.g., your cell
phone)
 Require Confirmation
 When initiate an irreversible action
 You should warned the user

 Before allowing an irreversible step to be

set in motion.
 require an explicit confirmation
 Provide an Escape Route
 Users should be able to halt processes.
 Offer a Cancel button at all times
 when canceling a process may leave the
computer in an unstable state, E.g.,
 canceling an install process when only a subset of the
necessary files have been transferred,
 Warn user that canceling could have negative
consequences
 Advise user an alternative way to halt or reverse
the process
Date/Time Control Panel Applications of this
Heuristic
 Example UAR: Aspect 1 — Cancel Button Is Good
 HE7
 Example UAR: Aspect 2 — UARs Sometimes Lead
to More UARs
 HE8
 2.2.4 HE: Flexibility and Efficiency of Use
 Provide Keyboard Shortcuts
 Allow for Customization
 Date/Time Control Panel Applications of this Heuristic
 Example UAR: Button Accelerators Exist
 Not Every Facet of Every Heuristic Applies to Every
Interface
 Provide Keyboard Shortcuts
 Keyboard shortcuts provide alternative ways of issuing
commands
 using a keyboard shortcut is faster than using the
mouse
 when a user uses a keyboard shortcut, their hands need not leave
the keyboard.
 Using the mouse: keyboard > mouse > target > clicking >
keyboard
 E.g.,
 MAC: the button outlined in bold can be "pressed" by hitting the
RETURN key
 WIN: Ctrl + O , Ctrl + C , Ctrl + V
 The underlined letter of a menu item letter together, Alt + F , Alt
+H
 When open a file :
 Alt + f > Alt+ O
 Ctrl + O
 Allow for Customization
 users control how their computer looks and
behaves
 allows users to tailor their environment to suit
their preferences
 gives users a sense of being in charge
 allows users with special needs to adapt their
computing environment to meet their needs
 Allow for Customization
 E.g.,
 Convenience: a user with difficulty using their left hand can
move important keyboard shortcuts to the right side of the
keyboard.
 Speed: Power users want to maximize speed, typically by adding
keyboard shortcuts in order to reduce the amount of time they use
the mouse.
 Appearance: Giving users control over secondary menus and
toolbars within an application as well as icon placement on the
background.
 Readability: Giving users control over the computer’s
background, font face and size, and other display settings allows
users to adapt these according to their needs and preferences.
 -> MS Office , Winamp
 Date/Time Control Panel Applications of this
Heuristic
 The following picture shows what your first
Visual Basic prototype will look like when you
have completed Exercise 4. We will examine one
aspect of this small interface using the flexibility
and efficiency of use heuristic and write a UAR
for our conclusions.
 Example UAR: Button Accelerators Exist
 HE9
 Not Every Facet of Every Heuristic Applies to Every
Interface
 See example below:
 there is no way for users to tailor their frequent actions in this
control panel.
 However, this facet of the flexibility and efficiency of use
heuristic doesn't apply to this control panel.
 First, this is a control panel that won't be used very
often, so users will not really have "frequent actions. "
 Second, the actions on this control panel are so simple
that they are already quite efficient.
 question: whether every facet of
a heuristic applies or not
 Answer: often be "no"
 Take Assessment
 Exercise 3
 Multiple-Choice Quiz 4
 Exercise 4
 Multiple-Choice Quiz 5
 2.3 Creating with Checkboxes and Radio Buttons —
Evaluating with One Heuristic

 2.3.1 Checkboxes and Radio Buttons

 2.3.2 HE: Error Prevention
 2.3.1 Checkboxes and Radio Buttons
 CheckBox Control Description
 CheckBox Properties
 CheckBox Events
 Radio Button Control Description
 Radio Button Properties
 Radio Button Events
 CheckBox Control Description
 The CheckBox control provides a "two state" toggle
 allows the user to express one of two conditions ("checked" or
"unchecked").
 CheckBoxes may receive the focus (when TabStop
property is set to True).
 When focused , it may be checked or unchecked by pressing the
space key
 Programmatically, CheckBoxes can have one of three
values:
 0-Unchecked,
 1-Checked
 2-Grayed , only be set by the system
 Usages:
 most widely used to allow users to turn options that are part of a
larger interface on or off
 It is not normally used to initiate actions
 CheckBox Properties
 Checked
 contains
the current setting of the CheckBox
("Unchecked" or "Checked").
 CheckedState
 contains
the current state of the CheckBox
("Unchecked", "Checked", or "Indeterminate").
 CheckAlign
 determines where the CheckBox appears in
relation to the textual caption
 CheckBox Properties
 Enabled
 determines whether the control accepts user input.
 When disabled, it is drawn with its caption and box
grayed and does not accept inputs from the user.
 TabStop, TabIndex
 determines whether the control is eligible to hold the
focus, and either allows the focus to stop at the control
or causes the focus to skip over it.
 The order in which controls receive the focus is
determined by their TabIndex properties.
 ThreeState
 determines whether the control can have an
indeterminate (grayed) CheckedState.
 CheckBox Events
 Private Sub name_Click(ByVal sender As System.Object, ByVal
e As System.EventArgs)
 invoked when the control is clicked with a mouse.
 Private Sub name_CheckedChange(ByVal sender As
System.Object, ByVal e As System.EventArgs)
 invoked whenever the control's checked state changes.
 Private Sub name_MouseDown(ByVal sender as Object, ByVal e
As System.Windows.Forms.MouseEventArgs)
 Private Sub name_MouseUp(ByVal sender as Object, ByVal e
As System.Windows.Forms.MouseEventArgs)
 invoked when a mouse button is depressed or released over the control,
respectively.
 Private Sub name_MouseMove(ByVal sender as Object, ByVal e
As System.Windows.Forms.MouseEventArgs)
 called whenever the mouse moves over the control (whether a button is
pressed or not).
 Radio Button Control Description
 the radio button control (called OptionButton in
Visual Basic) provides a two-state toggle.
 Radio buttons are designed to be used in
exclusive groups—that is groups in which only
one of the radio buttons is selected at a time.
 Radio Button Control Description
 operation
 When the radio button is the current focus, it can be
selected by pressing the SPACEBAR key.
 Unselecting a radio button can only be done by
selecting a different radio button.
 Notice : When a radio button in a group is the current
focus, pressing the TAB key will move the focus to the
next control outside the group (not within the radio
button group).
 Arrow keys be used to move within the radio
button group.
 Ensure that the TabIndexes of all radio buttons
in a group are numbered consecutively
 Radio Button Control Description
 Radio buttons are most widely used to allow users to
select one option from a set of options that are part of a
larger interface.
 They are not normally used to initiate actions
 Programmatically, radio buttons can be set to one of
two values:
 "True" when they are selected,
 "False" otherwise.
 Groups of radio buttons can be created in the
conventional manner by dragging a radio button from
the VB Toolbox palette onto a form.
 The radio buttons placed on a form or within a
container control function as a group.
 Radio Button Properties
 Checked
 indicates whether the control is
 selected ("True") or
 unselected ("False").

 TextAlign
 determines whether the radio button appears
 to the left of the textual caption
 to the right.
 Radio Button Events
 Click handler routine is the primary handler for
radio buttons and is called when a radio button
is selected.
 Radio Button event handlers vs. CheckBoxes
and buttons event handlers
 the same event handlers
 The primary difference : radio buttons are normally
placed in groups.
 2.3.2 HE: Error Prevention

 Prevent Errors
 Warn Users about Potentially Destructive
Actions and Require Confirmation
 Date/Time Control Panel Applications of this
Heuristic
 When Interface Aspects Are Repeated
 Example UAR: Automatic Adjustment of
Daylight Savings Time Is Good
 Prevent Errors
 People explore interfaces and learn by trial and error
 As much as possible, disallow illegal actions
 E.g., both MacOS and Windows dim (or gray) and disable illegal
actions.
 Dimming an action is preferable to removing the action
from a menu or dialog box, because when an action is
dimmed, its position on the interface menu doesn’t
change, only its availability. E.g.,
 in a file dialog box, only files that an application is capable of
opening are listed.
 The other files in the folder that the application cannot open are
not shown, reducing the chance that the user will attempt to open
them
 Warn Users about Potentially Destructive Actions and
Require Confirmation
 Warning messages should be written in the
user’s language
 provide the user with the option of canceling the
command.
 Avoid double negatives in messages, especially in
warnings.
 E.g, the message "If you don’t want this to not be saved,
click YES" requires careful reading to determine what
the consequences of clicking YES would.
 Warn Users about Potentially Destructive Actions and
Require Confirmation
 Make sure warnings clearly state the
consequences of continuing with the action.
 Destructive actions should require explicit
confirmation.
 Date/Time Control Panel Applications of this
Heuristic
 Example UAR: Automatic Adjustment of
Daylight Savings Time Is Good
 HE10
 When Interface Aspects Are Repeated
 E.g., the buttons at the bottom follow the
Windows Design Guide (UAR# HE5),
 the OK and Apply labels may be confusing to users
(UAR# HE6).
 The Cancel button provides an emergency exit (UAR#
HE7) but it may not provide enough feedback about
when it will actually cancel changes (UAR# HE8)..
 when following a standard, it is not necessary to
write up separate UARs for each occurrence of
the standard.
 When Interface Aspects Are Repeated
 In a real-world project, you could do just as we
did here.
 Start with a single screen and write separate UARs for
each aspect of that screen.
 When you go to the next screen and discover that the
same standards are followed, you can write a set of
UARs for the application concerning the standard in
general (that is, generalized versions of UARs # HE5-9).
 then write one UAR for the consistency of the system's
own interface
 Take Assessment
 Practical Quiz 1
 2.4 Creating with ListBoxes and ComboBoxes —
Evaluating with One Heuristic.

 2.4.1 ListBoxes and ComboBoxes

 2.4.2 HE: Aesthetics and Minimalist Design

 Assessments
 Exercise 5
 Multiple-Choice Quiz 6
 2.4.1 ListBoxes and ComboBoxes
 ListBox Control Description
 ListBox Properties
 MultiColumn
 IntegralHeight
 Sorted
 TopIndex
 SelectionMode
 Items
 SelectedIndex
 ListBox Events
 ComboBox Control Description
 ComboBox Properties
 DropDownStyle
 Text
 SelectionStart, SelectionLength, SelectedText
 ComboBox Events
 ListBox Control Description
 ListBox can be used for selecting from a set of
alternatives.
 display a list of items
 allow the user to select one or more of them.

 ListBoxes are typically used in cases

 where the number of items being selected from would be too
large to implement with an array of CheckBoxes or radio
buttons
 list entries can be determined at run time.
 ListBox Control Description
 ListBoxes can display a set of list items in a
number of different ways, depending on
property settings.
 When more list items are available than fit in the
space provided, a ScrollBar is automatically
added to allow other list elements to be viewed.
 Use MultiColumn property
 ListBox Control Description
 ListBoxes can hold the focus.
 While the ListBox get focus , the arrow keys can
be used to move the focus between particular
items and the SPACEBAR (but not the ENTER
key) can be used to select or unselect items.
 ListBoxes allow efficient selection of items
using the keyboard.
 If a letter key is pressed, the selection of the ListBox
will move to the next entry in the list that starts with
that character.
 This allows rapid access to long lists without scrolling.
 ListBox Control Description(vb6)
 It is also possible to set the Style property to
display list items with CheckBoxes next to them

 Note : when CheckBoxes are used, the highlighting is

independent of the CheckBox's status for that item.

 In vb net
 Aother control 
 ListBox Control Description
 ListBoxes can hold the focus.
 The TAB key moves the focus to and from a ListBox.
 While the focus resides in the ListBox, the arrow keys can be used
to move the focus between particular items and the SPACEBAR
(but not the ENTER key) can be used to select or unselect items.
 In addition to the normal focus mechanism, ListBoxes
also allow efficient selection of items using the
keyboard.
 If a letter key is pressed, the selection of the ListBox will move to
the next entry in the list that starts with that character.
 allows rapid access to long lists without deliberate scrolling.
 ListBox Properties
 MultiColumn
 determines whether scrolling across items
 False - using a vertical ScrollBar and a single column of items
 True - using a horizontal ScrollBar and a series of columns.
 IntegralHeight ( 列表 项目是 否允 许部分 显示 )
 determines whether an integral number of items or columns is
always displayed.
 False - partial items or columns may be displayed
 True - only complete items or columns are shown
 Sorted
 This property determines whether the items in the list are
automatically sorted alphabetically .
 ListBox Properties
 TopIndex
 determines which item is currently shown as the first visible one in the list.
 Changing this item causes the list to scroll so that the given index item is the
first shown.
 Note: this property is not available at design time, only at edit time.
 it does not appear in the property list editor
 only be set programmatically with code.
 SelectionMode
 determines whether the ListBox supports only one selected item or multiple
selected items.
 "One," - only one selection at a time is allowed.
 "MultiSimple”- multiple selections are allowed, and items are toggled "On" and
"Off" by simple clicks (or by using the focus mechanism).
 "MultiExtended," then multiple selections are allowed.
 simple clicks reset the selection to one item.
 Clicks with the SHIFT key held down perform a contiguous range of selections that
extend from the previous selection to the point of the click.
 Clicks with the CTRL key held down toggle an individual item "On" or "Off."
 ListBox Properties
 Items
 contains an array of text strings making up the list items.
 The number of items currently in this list is maintained via
Items.Count (not available at design time).
 其实它是一个 Icollection 对象（可使用 add,insert, remove,
clear 方法）
 可以加入任意对象，显示 displayMember 指定的属性值
 SelectedIndex
 hold the index of selected item.
 If multiple items are selected, SelectedtIndex will contain the
index of the item currently within the highlight rectangle (used
for indicating focus) —whether that item is selected or not.
 ListBox Properties
 SelectedIndices 集合
 SelectedItems 集合
 ListBox Events
 Private Sub
name_SelectedIndexChanged(ByVal sender
As System.Object, ByVal e As
System.EventArgs)
 As with most controls this event handler is the
most commonly used one and is invoked when
the user completes a selection (or range
selection).
 The SelectedIndex propertie can be used to
determine which selections have been completed.
 CheckedListBox 控件
 ListBox 控件的 变体（ VB6 中两者 是同一个
）
 继承自 ListBox
 不支持多个选中 ( 与多个 checked 区别 )
 SelectionMode 属性只能选取 one 或 none
 CheckedItems 集合（对比 ListBox ）
 CheckedIndices 集合（对比 ListBox ）
 ComboBox Control Description
 The ComboBox control is related in functionality to the
ListBox.
 It allows the user to select an item from a list of potential items.
 In its default form, the ComboBox also allows the user
to alternately type in a completely new entry in a text
entry field.
 The term "combo box" in fact comes from the notion of
combining a text entry field with the functionality of a
single selection ListBox.
 ComboBoxes are also more compact—they normally
take up only a little more than one item's height on the
screen.
 The full set of items is normally accessed by pulling
down the list portion of the ComboBox.
 ComboBox Control Description
 ComboBoxes come in three styles (as determined
by the DropDownStyle property):
 ComboBox Control Description
 In dropdown and dropdown list forms, a
ComboBox displays a small downward arrow
button.
 If this button is pressed, the item list drops down and
becomes visible.
 Items may then be selected from the list by clicking
them, at which point the text for the item is placed in the
ComboBox text area and the dropdown list is
disappears.
 In the dropdown and simple forms, the user may
also type arbitrary text into the text entry area.

 ComboBox Properties

 Many properties of the ComboBox are shared

with the ListBox and operate in the same way as
a single selection ListBox. include:
 List, ListCount, ItemData, ListIndex, IntegralHeight,
Sorted, and TopIndex.
 not apply to ComboBoxes, However,
 the Columns, MultiSelect, Selected, and SelCount
 这里教程有误， 请同学们查 查 msdn 看看错
在哪
 ComboBox Properties

 DropDownStyle
 determines which of the three possible styles a
ComboBox uses. Valid values are:
 Dropdown
 Simple, and

 DropdownList

 Text
 contains the current text appearing in the textbox portion
of the ComboBox.
 ComboBox Properties
 SelectionStart, SelectionLength, SelectedText
 runtime-only properties and do not appear in the property sheet.
 contain information about the current textual selection in the
textbox portion of the ComboBox (or allow the selection to be
set).
 SelelectionStart
 The start of the selection.
 SelelectionLength
 indicates the length of the current selection (SelLength will be 0 when the
selection is an insertion point rather than a selected range of text).
 SelectedText
 contains the actual text string corresponding to the selection (and allows the
selection to be replaced by a new text string).
 ComboBox Events
 Private Sub name_TextChanged(ByVal sender
As System.Object, ByVal e As
System.EventArgs)
 occurs whenever the text associated with the ComboBox
changes.
 This event handler, rather than the Click handler, is often
the primary one used for handling modifications to a
ComboBox.
 2.4.2 HE: Aesthetics and Minimalist Design
 Minimalist Design
 Date/Time Control Panel Applications of this Heuristic
 Example UAR — TimeZone ListBox Is Not Good
 Sometimes an Interface Aspect Will Violate Many
Heuristics
 Minimalist Design
 novice computer users, are easily overwhelmed
by a screen that is full of tabs, buttons, dialogs,
and menu items.
 A minimalist design
 directs the user’s attention to the current task
 minimizes the presence of irrelevant information.
 In a process having several steps, a minimalist
design presents only information important to
the current step:
 Make strategic use of white space to focus the
user's attention on critical areas.
 Minimalist Design
 Limit the numbers of widgets (boxes, buttons,
menus, tabs, etc.) that the user must focus on at
one time.
 Reduce the number of choices the user must
handle at one time.
 Group related tasks together.
 Example

E.g.,
the Windows Display Control
Panel features several areas
(Background, Screen Saver,
Appearance, Plus!, and Settings),
each of which contains parameters
that users can adjust. If, however,
the panel featured only one large
window that contained all the
parameters, many users would
likely be overwhelmed.

The tabs focus the user on one sub-

task and reduce the amount of
information on the screen at one
 Date/Time Control Panel Applications of this Heuristic

 Example UAR — Time Zone ListBox Is Not

Good
 HE18
 Take Assessment
 Exercise 5
 2.5 Creating with Combinations

 2.5.1 UpDown and Scrollbar Controls

 2.5.2 TextBox Controls
 2.5.1 UpDown and Scrollbar Controls
 UpDown Control Description
 UpDown Properties
 Value, Text

 Min, Max, Increment

 Wrap

 UpDown Events
 Scrollbar Control Description
 Scrollbar Properties
 Value

 Minmum, Maximum

 SmallChange, LargeChange

 Scrollbar Events
 Controls Extend the VB capability
 strengths of Visual Basic
 it can be extended with new controls and other components
 a large library of controls is available that work with the Visual
Basic system
 work in Visual Basic like any other control
 Controls
 mostly interactive
 more computational
 providing an interactive and/or programmatic interface to
 some software package,
 hardware capability, or
 network service
 A suitable way for iterative development, via a Visual
Basic control
 Making a software package or other capability accessible in an
interactive environment
 UpDown Control Description(vb6)
 In visual basic 6
 not one of the default controls
 It must be loaded from a library

 How to get it ?
 choose "Components..." from the "Project" menu
 press the corresponding checkbox and pressing OK

 Load the "Microsoft Windows Common Controls-2 6.0"

library

 In VB net , on the toolbox

 Operation demo in VB
 UpDown Control Description(vb6)
 allows specification of a value within a range
 supports only a limited set of interactions
 Vs. the Scrollbar control ( )
 not provide any indication of the value it
maintains
 is almost always used in conjunction with another
control, to display its value ,Ex.
 TextBox
 label
 UpDown Control Description
 The UpDown control appears as two arrows,
 one pointing up and the other pointing down
 or alternately left and right
 The user operates the control by pressing one of the buttons.
 As shown below, UpDown contruls come in two varieties
 NumericUpDown
 controls are used for numeric data
 DomainUpDown
 normally used for text, Other than the data type, these controls
operate in the same way and use the same properties.
 UpDown Properties(vb6)
 Value
 contains the integer value corresponding to the current setting
 Orientation
 determines whether the UpDown control appears in a horizontal
or vertical orientation.
 "0-cc2OrientationVertical“
 "1-cc2OrientationHorizontal"
 Min, Max, Increment, Wrap
 determine the range of values the UpDown control's value
 the value is changed when pressing the up or down button,
 When wrap: the value wraps around when it reaches 0 or its
maximum.
 UpDown Properties-buddy, working together(vb6)
 BuddyControl
 establishes a control that is to be linked to the UpDown control's
value
 BuddyProperty
 specifies which property of the buddy control is to be linked to the
UpDown control's value
 SyncBuddy
 When set to True, the value of the UpDown control is copied to
the BuddyControl and BuddyProperty properties.
 be used to enable automatic display of the control's value.
 Alignment
 where the UpDown appears with respect to its buddy control.
 "0-cc2AlignmentLeft"
 "1-cc2AlignmentRight"
 UpDown Properties
 Value, Text
 contains the integer value corresponding to the current
setting of the control.
 NumericUpDown uses the value property
 DomainUpDown uses the text property

 Min, Max, Increment

 determine the range of values the NumericUpDown
control's value may take on, the amount the value is
changed when pressing the up or down button.
 Wrap
 determines whether the value wraps around when it
reaches its minimum or its maximum
 UpDown Events
 Private Sub name_Click(ByVal sender As
System.Object, ByVal e As System.EventArgs)
 This event occurs when the user clicks the down button.
 ScrollBar Control Description
 specify a value within a range.
 E.g. specify the position of a scrolled page or list
 used for inputting of an integer value.
 do not directly display their integer value
 have a wider range than the number of pixels available
to them to specify the value,
 not used for particular or exact values are needed.
 E.g, they are typically employed in situations where a user needs
to adjust a quantitive value relatively
 degree (as in the saturation of a color setting) or
 position (as in the visible portion of page in a window relative to the page's
beginning).
 ScrollBar Control Description
 As shown below, ScrollBars come in vertical and
horizontal varieties that are represented by the
 VScrollBar
 HScrollBar

 Other than their orientation, these controls

operate in the same way and use the same
properties and events.
 ScrollBar Control Description
 manipulate a ScrollBar in three ways.
 press one of the arrow buttons to perform a small
movement.
 grab the center handle of the ScrollBar and drag it to an
arbitrary position.
 press in the area between an arrow button and the thumb
in order to make a large move
 the distances moved for a small controlled by the SmallChange
properties
 the distances moved for a Large controlled by the
LargeChange properties.
 ScrollBar Control Description
 Scrollbars can hold the focus.
 When hold the focus, the thumb is displayed with a
different pattern and the user may move the ScrollBar
using the arrow keys as well as the HOME, END,
PageUp, and PageDown keys.
 HOME and END keys
 take to its minimum and maximum values respectively.
 PageUp and PageDown keys
 make large moves in the negative and positive directions
 the arrow keys
 make small positive and negative moves.
 ScrollBar Properties
 Value
 contains the integer value corresponding to the current
setting of the control.
 Min, Max
 These properties determine that range of values the
control's value may take on.
 SmallChange, LargeChange
 determine SmallChange
 determine LargeChange.
 ScrollBar Events
 Private Sub name_ValueChanged(ByVal sender
As System.Object, ByVal e As
System.EventArgs)
 invoked whenever the value of the ScrollBar changes.
 Note that no Click event handler is supported for
ScrollBars.
 2.5.2 TextBox Controls
 TextBox Control Description
 Properties
 Text
 TextAlign
 Font
 BorderStyle
 PasswordChar
 MultiLine
 MaxLength
 Scrollbars
 ReadOnly
 SelectionStart, SelectionLength, SelectedText
 Events
 TextBox Control Description
 provides a small area for entering and editing text.
 support entering text with the keyboard when focused
 support editing text using conventional mouse selection
 may be limited to
 single line
 multi-line text
 display text in any available font
 may be set to hide their characters for use in password
entry.
 support ScrollBars to hold more text than fits within
their own bounds.
 TextBoxes are most commonly used to allow users to
enter free form textual data.
 If provided, they can limited input nature, such as numbers only.
 Properties
 Text
 contains the current text being displayed in the textbox.
 Alignment
 determines how the text appearing in the textbox is
aligned.
 0-Left Justify
 1-Right Justify
 2-Center

 Font
 controls the typeface, size, and style (i.e., bold, italic,
etc.) that text within the textbox appears in.
 Properties
 BorderStyle
 determines whether a border is drawn around the
textbox.
 "0-None“
 "1-Fixed Single".

 PasswordChar
 If set, characters typed will be shown as the character
value rather than actually typed.
 used for fields that contain passwords or other sensitive
data that should not be divulged.
 MultiLine
 determines whether the control will accept multiple
lines of text
"True“ for multiline
 "False“ for one line
 Properties
 MaxLength
 indicates a maximum number of characters that may be
entered into the control.
 "0" indicates that no limit is to be imposed.
 Scrollbars
 indicates whether include scrollbars
 "0-None",
 "1-Horizontal",
 "2-Vertical",
 "3-Both".
 Properties
 ReadOnly
 When True, locks the text cannot be altered by the user.
 SelectionStart, SelectionLength, SelectedText
 runtime-only properties
 contain information about the current textual selection
 SelectionStart indicated The start of the selection.
 SelectionLength indicates the length of the current
selection (SelectionLength will be zero when the
selection is an insertion point rather than a selected range
of text).
 SelectedText contains the actual text string
corresponding to the selection (and allows the selection
to be replaced by a new text string).
 Events

 Private Sub name_TextChanged(ByVal sender

As Object, ByVal e As System.EventArgs)
 invoked whenever the text within the textbox changes.
 The Text property can be used to determine the contents
of the textbox after the change.
2.6 Creating with Containers — Evaluating with
One Heuristic

 2.6.1 Frame Controls ( 应为 GroupBox )

 2.6.2 Tabbed Dialog Controls
 2.6.3 HE: Recognition Rather than Recall
 2.6.1 GroupBox Controls
 GroupBox Control
Description
 Properties
 BorderStyle
 Events
 GroupBoxes Control Description

 The Frame control is the simplest example of a

container.
 containers (including Frames) can be placed
inside other containers.
 allows hierarchical organization of the interface
 GroupBoxes Control Description
 GroupBoxes are normally used to group
logically related sets of interface components so
that users can mentally categorize them - this
tends to make learning them easier.
 By default, GroupBoxes appear with a border
and a caption.
 How to place controls into a container?

 This can be done in two ways.

 A new control will be placed inside a container if it is
initially "drawn" completely within that container.
 move an existing control into a container
 cutting and pasting
 How to determine whether a control is inside a container

 The status of a control can be determined in one

of two ways
 by moving the container
 controls inside the container will move with it, others will not
 by moving the control
 a control will be limited to stay within the bounds of its parent
container and will not move outside it
 Properties
 BorderStyle （ Frame Control In VB6 ）
 This property may be set to
 "None" to make a Frame with no border (or caption)
 "Single Fixed" to obtain the default appearance shown above.
 Events
 Normally, GroupBoxes do not respond to inputs.
 For implement special purpose behavior,
GroupBoxes can respond to some of the common
event types - such as
 Click
 MouseDown

 MouseMove

 MouseUp
 2.6.2 Tabbed Dialog Controls

 Tabbed Dialog Control Description

 Properties
 TabIndex
 TabPages, Multiline

 Events
 Tabbed Dialog Control Description(vb6)
 Where to get ?
 is not one of the default controls that appear in the toolbox palette

 To load
 choose "Project“ >>> "Components..."
 Load the "Microsoft Tabbed Dialog Control 6.0" control
 often used when more options or other interface
elements are needed than will comfortably fit in a single
Frame.
 The Tabbed Dialog control provides a series of different
views that appear to be stacked on top of one another.
 Each of these views is actually a separate container that
can contain a series of controls.
 Tabbed Dialog Control Description(vb6)
 A series of tabs with captions (designed to look
like file folder tabs) are provided,
 one for each of the containers.
 Clicking on a particular labeled tab brings the container
associated with that tab to the front. These containers
are sometimes referred to as tabs, and sometimes they
are called panes.
 Tabbed Dialog Control Description
 is a container that is often used when more options or
other interface elements are needed than will
comfortably fit in a single Frame.
 provides a series of different views that appear to be
stacked on top of one another.
 Each of these views is actually a separate container that
can contain a series of controls.
 A series of tabs with captions (designed to look like file
folder tabs) are provided, one for each of the
containers.
 Clicking on a particular labeled tab brings the container
associated with that tab to the front.
 These containers are referred to as TabPages.
 Tabbed Dialog Control Description
 At design time, a Tabbed Dialog control can be
manipulated by pressing on a particular labeled
tab, which brings forward the container
associated with that tab—which can then be
edited like any other container by placing
controls inside it, moving the controls inside it,
or deleting controls inside it.
 Demo
 Properties (vb6)
 Tab
 This property controls which tab is active (appears to be
on top of the stack of containers). When a particular tab
is active, the Caption property refers to the caption for
that particular tab. Note that tabs are numbered from
zero to N-1, where N is the number of tabs.
 Tabs
 The Tabs property determines how many different tabs
the Tabbed Dialog control has.
 TabsPerRow
 The TabsPerRow determine how many tabs can appear
in one row of tabs without creating another row.
 Properties (vb6)
 TabHeight, TabMaxWidth, WordWrap
 These properties control the size of the labeled tab. TabHeight determines the
height of each tab. Tab change width to accommodate their labels.
 The TabMaxWidth property determines how wide a tab gets before it starts
clipping its label, or wrapping the label text to another line.
 The WordWrap property determines whether clipping or wrapping of the long
labels occurs.
 TabOrientation
 This property can be set to place the tabs of the dialog box along different
edges.
 "0-ssTabOrientationTop" places the tabs at the top
 "1-ssTabOrientationBottom" places them at the bottom of the dialog box
 "2-ssTabOrientationLeft" place the tabs along the left edges
 "3-ssTabOrientationRight"' place the tabs along the right edges
 Note that not all fonts support rotation, so use of the left and right orientation
may be limited in practice by the font chosen for labels
 Properties
 TabIndex
 controls which tab is active (appears to be on top of the
stack of containers).
 When a particular tab is active, the Caption property
refers to the caption for that particular tab.
 tabs are numbered from zero to N-1, where N is the
number of tabs.
 TabPages, MultiLine
 determines how many different tabs the Tabbed Dialog
control has. The MultiLine determine whether tabs can
appear in more than one row.
 Events
 The Tabbed Dialog control normally handles the
inputs necessary to switch between its containers
internally.
 event handlers are not normally used with
Tabbed Dialog controls themselves.
 It is possible to handle various standard events
"manually" in order to implement special
effects.
 例如，在切换 tab 时做输入的合法性检查等

 2.6.3 HE: Recognition Rather than Recall
 Show All Objects and Actions that are Available
 Reduce Demands on Memory
 Date/Time Control Panel Applications of this Heuristic
 Example UAR — Presentation of Time Zone Setting is
Good.
 Show All Objects and Actions that are Available
 People are better at recognition than they are at
unaided recall.
 E.g., there are people who can't remember landmarks
well enough to write down directions for driving from
their house to a place across town, but can themselves
drive to that place easily.
 That is because, at each stage of the journey, they
recognize landmarks that help them remember the next
stage of the journey (e.g., turn left at the post office,
turn right at the park, go straight until the bridge, etc.).
 E.g., Learn English words , hard to recall / easily read

 E.g., 描述人物面部特征 v.s. 照片指认

 Show All Objects and Actions that are Available
 To think of this heuristic :
 "out of sight, out of mind."
 In UI design:
 Keeping all possible legal actions prominent and visible
（可视并且突出显示） to the user
 saves the user the trouble of having to search through
their long-term memory moment to moment in order to
recall which actions are legal for the task at hand.
 Reduce Demands on Memory
 when uses an application, two types of memory being
exercised
 Long-term memory retains concepts, learned over time
 such as what a "file" or "disk" is
 what it means to "open," "save," or "print" a file, and
so on.
 Working memory holds recently acquired information,
such as,
 what is currently on the screen, from vision
 what has just been heard, and so on. From hearing
 Reduce Demands on Memory
 FACT :
 People can generally hold three or so items
(called "chunks") in working memory for a
limited amount of time — after which the
information fades unless it is refreshed.
 An implication this has for designers of
interfaces
 We should avoid designing interfaces that burden
users' working memory unduly.
 How to do?
 Not require users to remember information from
one screen to the next.
 Not rely on a user's ability to recall, but show all
possible legal actions
 Limit the number of items the user must respond
to at any given moment
 Default value
 Confirm button
 Date/Time Control Panel Applications of this
Heuristic
 Most GUI interfaces follow the recognition
rather than recall heuristic quite well.
 The heuristic is violated in many command-line
or text-entry interfaces, though, which require
the user to remember command names or the
correct format for data entry.
 This control panel does not make those errors:
 all legal actions are available through the visible buttons,
ListBoxes, or tabs.
Example UAR — Presentation of Time Zone Setting
is Good
 HE22
 2.7 Two More Heuristics for Evaluating Interfaces

 2.7.1 HE: Help and Documentation

 2.7.2 HE: Help Users Recognize, Diagnose, and
Recover from Errors

 Assessments
 Exercise 6
 Multiple-Choice Quiz 7
 2.7.1 HE: Help and Documentation
 Help vs. Documentation
 Always Available
 Easily Searchable
 Relevant to the Task
 Date/Time Control Panel Applications of this
Heuristic
 Example UAR: Aspect 1 — Some Help
Messages Are Imprecise
 Example UAR: Aspect 2 — Help Availability
 We have introduced ……
 If the system is not an extremely simple, walk-
up-and-use application
 help and documentation should be always
 Available
 easily searchable

 give concrete advice applicable to users and tasks

 Help vs. Documentation
 Help and documentation are related but not the same.
 Documentation provides general descriptive information about the system.
Includes
 an overview
 instructions for specific aspects of the system.
 When you ask for help? help is commonly useful when users have
problems.
 Help often takes the form of a trouble-shooting section with a table of
common problems
 FAQs (Frequently Asked Questions) list the problems that many users
have encountered and the solutions for those problems.
 help tries to anticipate the problems users might have and
provide concrete solutions for those problems.
 The difficulty lies in anticipating with reasonable precision
what problems users will commonly encounter.
 Help vs. Documentation
 Documentation and help must combine
 general information
 suggestions on fixing problems.
 E.g., the color settings of a monitor
 documentation will include both a general description of
what the color settings are and specific instructions on
how to adjust them.
 Help will extend the documentation's coverage of this
topic to address common problems users might
encounter while changing monitor color settings.
 E.g., a help might warn users that not all
monitors accept all possible color settings and
that it is possible to choose settings that will not
work on their monitors.
 Always Available
 Consistently putting the help and documentation entry
points in locations where they are commonly found in
other software greatly aids users in finding them.
 E.g.,
 in Windows, help is always the rightmost item on the top menu
 in Macintosh, help is always located on the Apple menu.
 For multi-stage processes (such as an install process)
 Users should always be able to access help in every step of the
process
 be able to access both help and documentation from anywhere in
an interface.
 Easily Searchable
 Providing documentation and help with alphabetized
indexes is a good start, but it is not sufficient:
 users will not necessarily frame their questions in the
language the authors of these facilities use.
 user’s language different from
 Software designer’s language
 E.g., color settings
 when a user wishes to change a monitor's background color
 searches the indexes for the topic "background color."
 if the help and documentation facilities index those instructions
under "settings" and not under "background color," the user may
not find them.
 Easily Searchable
 A good search facility help users quickly and
efficiently locate the answer they want .
 E.g.,
 A good search facility will allow the user to search for
the string "background color" and will display the page
numbers of the passages containing that string—among
which would be the instructions the user is looking for.
 Relevant to the Task
 help and documentation should be "context-
sensitive"
 the information they offer should be relevant to the
situation the user is currently in.
 Demo in Visual studio 2005

 E.g., Window Date/Time control panel

 Date/Time Control Panel Applications of this
Heuristic
 In the top right corner,
there are two small
buttons. The ? button
gives the user access to
on-line help.
 Example UAR: Aspect 1
— Some Help Messages
Are Imprecise
 HE23
 HE24
 More UARs
 There could be many more UARs concerning
help
 the lack of a search facility,
 the fact that only interface elements can be queried (what
if the user is trying to do something that is not obviously
associated with an element?), etc.
 Several more appear in the complete set of
UARs.
 2.7.2 HE: Help Users Recognize, Diagnose, and Recover
from Errors
 Keep the User Informed About Errors and How
to Recover From Them.
 UAR Summary.
 What We have introduced

 Error messages should be written in plain

language, tell the user what the problem is
 Give constructive advice about how to recover
from the error.
 This could be considered a subset of the first
heuristic
 visibility of system status,
 It is so important and so often violated, that it
warrants its own heuristic.
 Keep the User Informed About Errors and How to Recover

 An interface designer’s goal

 design interfaces preventing users from making errors.
 In the impossible event, it is vitally important to arrange
a process to help the user understand and recover from
the error.
 E.g.,
 if an application cannot open a file, the application
should provide an error message stating the problem and
suggesting a solution in non-technical language.
 Good example
 Good example , In window system
 when the copy to a floppy disk and the diskette becomes
full, a window pops up that displays the statements:
 The disk in destination drive is full.
 Insert a new disk to continue.

 Why it is good?
 The pop-up window helps the user recognize that
something needs attention.
 The window's first statement ("The disk in destination
drive is full") diagnoses the problem.
 The window's second statement ("Insert a new disk to
continue") gives instructions for recovering from the
error.
 On a Macintosh
 the system first checks to see if there is enough
room on the floppy disk for the materials being
copied,
 if there is not, it doesn't start the copying
process.
 This heuristic doesn’t apply to this prototype
 Why?
 The Date/Time control panel prevents errors so
effectively that there is never a need for it to display
error messages
 No chance to make a mistake and misunderstand
 Take Assessments
 Exercise 6
 Multiple-Choice Quiz 7
 2.8 Menu Controls and Some Example UARs
 2.8.1 Menu Controls
 2.8.2 Example UARs

 Assessments
 Practical Quiz 2
 2.8.1 Menu Controls

 Menu Control Description

 Properties
 Checked
 Enabled

 Shortcut

 Events
 Menu Control Description
 The Menu control
 Provides a set of pull-down menus that can be attached
to a form.
 consist of a set of top-level textual captions displayed
horizontally at the top of a window.
 Pressing on a caption causes a menu to drop down that
consists of a series of menu items that have textual
labels.
 Hierarchical menus that support submenus "under" a
menu item are also supported.
 Shortcut and Separator lines
 shortcut
 placing an "&" before the desired shortcut character in the item's
caption.
 menu items can have shortcut keys accessible to the user using the
SHIFT, CONTROL, function keys, and other keys.
 shortcut keys are specified in the Shortcut property.
 Separator lines
 allow the menu items to be segregated into logical groupings.
 help provide a structure that allows users to
 organize the concepts of a menu
 make learning menu items easier.
 How to place A separator line?
 creating an item whose caption is a single minus sign ("-").
 Properties
 Checked
 determines whether a check mark appears next to the
menu item.
 Enabled
 When False, the Menu is disabled and is drawn in a gray
color
 Shortcut
 indicates the shortcut character for the menu item.
 Include
 a letter key modified by SHIFT and/or CONTROL,
 a function key
 a function key modified by SHIFT and/or CONTROL
 a few other keys.
 Events
 Private Sub name_Click(ByVal sender As
Object, ByVal e As System.EventArgs)
 The only event generated by Menus is the Click event,
which is invoked when the menu item is clicked.
 2.8.2 Example UARs

 All these UARs can be found in the Appendix

 Please read them carefully
 Take Assessments
 Practical Quiz 2
 Exam2 (week 15)
 Multiple-choice quiz
 Practical quiz