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 realworld 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
it is important to understand that the computer system is likely to go beyond the real-world concept
who can guide the search for a suitable real-world metaphor
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 agepopulations 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
Dialog boxes and messages can be used to
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 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
Dimming or shading a menu option:
keeps users informed about what files are in each window. 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
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
Products adhere to platform conventions may minimize frustration E.g. .
Windows Mac Linux
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)
keyboard shortcuts
keyboard shortcuts should comply with platform and application standards.( ctrl + x, ctrl + o, ctrl + c, ctrl + v)
Messages, warnings, and alarms
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.
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
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:
allows the user to express one of two conditions ("checked" or "unchecked").
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)
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 the control is clicked with a mouse.
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
ListBox Events ComboBox Control Description ComboBox Properties
MultiColumn IntegralHeight Sorted TopIndex SelectionMode Items SelectedIndex
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
IntegralHeight ( 列表 项目是 否允 许部分 显示 )
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. 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:
not apply to ComboBoxes, However,
List, ListCount, ItemData, ListIndex, IntegralHeight, Sorted, and TopIndex. 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
SelelectionLength
The start of the selection. 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 subtask 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,
As shown below, UpDown contruls come in two varieties NumericUpDown
one pointing up and the other pointing down or alternately left and right The user operates the control by pressing one of the buttons.
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
BuddyProperty
specifies which property of the buddy control is to be linked to the UpDown control's value
SyncBuddy
establishes a control that is to be linked to the UpDown control's value
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
PageUp and PageDown keys
take to its minimum and maximum values respectively. make large moves in the negative and positive directions
the arrow keys
make small positive and negative moves.
ScrollBar Properties
Value
Min, Max
contains the integer value corresponding to the current setting of the control. 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
Tabs
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. 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, walkup-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 "contextsensitive" 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
Enabled
determines whether a check mark appears next to the menu item. 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