unit 2. interfaces: creating with visual basic, evaluating with usability heuristics

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

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

2.12.1 Creating with Labels— Evaluating with Two Heuristics Creating with Labels— Evaluating with Two Heuristics 2.22.2 Creating with Buttons — Evaluating with Three Heuristics Creating with Buttons — Evaluating with Three Heuristics 2.32.3 Creating with Checkboxes and Radio Buttons — Evaluating Creating with Checkboxes and Radio Buttons — Evaluating

with One Heuristic with One Heuristic 2.42.4 Creating with ListBoxes and ComboBoxes — Evaluating with Creating with ListBoxes and ComboBoxes — Evaluating with

One Heuristic One Heuristic 2.52.5 Creating with Combinations Creating with Combinations 2.62.6 Creating with Containers — Evaluating with One Heuristic Creating with Containers — Evaluating with One Heuristic 2.72.7 Two More Heuristics for Evaluating Interfaces Two More Heuristics for Evaluating Interfaces 2.82.8 Menu Controls and Some Example UARs Menu Controls and Some Example UARs

Overview of the Windows Date/Time Control Panel Overview of the Windows Date/Time Control Panel

its implementation vary across the Windows its implementation vary across the Windows platformsplatforms

basic function and appearance are same/similar.basic function and appearance are same/similar. consist of two tabbed pagesconsist of two tabbed pages E.g.,E.g., show the control panel on this machineshow the control panel on this machine

The Date & Time Page — Its Purpose and The Date & Time Page — Its Purpose and OperationOperation

The Date & Time page allows users to set the The Date & Time page allows users to set the system date and timesystem date and time

controlscontrols provided by provided by two framestwo frames Date frame features a Date frame features a drop-down listdrop-down list for selecting a for selecting a

monthmonth a a TextboxTextbox with with up-down arrowsup-down arrows for selecting a year for selecting a year a clickable graphical calendar for selecting a daya clickable graphical calendar for selecting a day in some implementations, in some implementations, radio buttonsradio buttons (( change change

A.M./P.M. settings)A.M./P.M. settings)

The Date & Time Page — Its Purpose and The Date & Time Page — Its Purpose and OperationOperation

Operation: users set the system time by Operation: users set the system time by manipulating the relevant controls on the page's manipulating the relevant controls on the page's Time frameTime frame ClickClick TAB : navigate forwards, TAB : navigate forwards, SHIFT+TAB: navigate backwardsSHIFT+TAB: navigate backwards Ctrl+TAB : move from one tabbed page to the nextCtrl+TAB : move from one tabbed page to the next

E.g., Operation under MSDOSE.g., Operation under MSDOS

The Time Zone Page — Its Purpose and OperationThe Time Zone Page — Its Purpose and Operation

The Time Zone page allows users to set the The Time Zone page allows users to set the system clock to a time zone of their choosingsystem clock to a time zone of their choosing

Controls Controls drop-down boxdrop-down box: displays a list of standard time zones: displays a list of standard time zones pictureBoxpictureBox: map : map CheckboxCheckbox: automatically to reflect changes in daylight : automatically to reflect changes in daylight

savingssavings

2.1 Creating with Labels, 2.1 Creating with Labels, Shapes, and Lines (VB6)Shapes, and Lines (VB6) — — Evaluating with Two HeuristicsEvaluating with Two Heuristics

2.1.1 Labels2.1.1 Labels 2.1.2 HE: Match System to Real World 2.1.2 HE: Match System to Real World 2.1.3 HE: Visibility of System Status 2.1.3 HE: Visibility of System Status

Assessments Assessments Exercise 3 Exercise 3 Multiple-Choice Quiz 4Multiple-Choice Quiz 4

Label Controls Label Controls Label Controls Label Controls Label Control Properties Label Control Properties

2.1.1 Labels2.1.1 Labels

Label Controls- the simplest control Label Controls- the simplest control

provides a simple textual messageprovides a simple textual message

Label Control Properties-(name)Label Control Properties-(name)

(Name) (Name) indicates the indicates the identifieridentifier that your that your program code program code

can usecan use to refer to the control to refer to the control used as part of the used as part of the namename of the subroutine that of the subroutine that

handles eventshandles events for the control for the control it it cannotcannot be changed be changed at runtime at runtime Every control is Every control is given a default namegiven a default name when it is when it is

created.created. it's a good idea to change it to something it's a good idea to change it to something more more

meaningfulmeaningful in order to in order to improve the readabilityimprove the readability of of code.code.

demodemo

Hints of Property-(name)Hints of Property-(name)

Hint 1Hint 1 ：： VB does VB does not not automatically update automatically update codecode to reflect control names changes to reflect control names changes You should You should rename controls immediatelyrename controls immediately when they are when they are

created and to think carefully about the names you created and to think carefully about the names you choosechoose

Hint 2 : a control must have the form of a Hint 2 : a control must have the form of a validvalid identifieridentifier in VB in VB a good convention is to capitalize the second and a good convention is to capitalize the second and

subsequent words (e.g., "subsequent words (e.g., "aMultipleWordNameaMultipleWordName")."). Another convention is to separate the words with an Another convention is to separate the words with an

underscore ("_") character (e.g., underscore ("_") character (e.g., ""a_multiple_word_namea_multiple_word_name").").

Label Control PropertiesLabel Control Properties

Text Text The Text property controls what text the Label displays. The Text property controls what text the Label displays. Changing the property (either at design time or at Changing the property (either at design time or at

runtime) changes the text that appears on the screen.runtime) changes the text that appears on the screen.


Location (X, Y), Size(Width, Height) Location (X, Y), Size(Width, Height) They control where the top-left corner of the control appears in a They control where the top-left corner of the control appears in a

"container" object, "container" object, its dimensions controlled by - Size(Width, Height). its dimensions controlled by - Size(Width, Height). By default, these properties use By default, these properties use pixelspixels as the unit of measurement. as the unit of measurement.

When to setWhen to set Under Under most circumstancesmost circumstances, you , you do not type valuesdo not type values into these into these

properties directly. Instead you typically place and resize the properties directly. Instead you typically place and resize the control interactively (using its handles). control interactively (using its handles).

However However occasionallyoccasionally, you might want to , you might want to use a precise valueuse a precise value, or , or to ensure that a number of different controls have the same value. 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 In those cases, it's useful to enter a numeric value directly in one or more of these properties. or more of these properties.

AutoSizeAutoSize takes on a Boolean value (True or False).takes on a Boolean value (True or False). If the AutoSize property's value is True, then the If the AutoSize property's value is True, then the

control's Width and Height properties are automatically control's Width and Height properties are automatically (re)calculated so that the control is the size needed by (re)calculated so that the control is the size needed by whatever text is being displayed. If this property's value whatever text is being displayed. If this property's value is False, then the control's width and height are fixed, is False, then the control's width and height are fixed, and text that does not fit within this size is and text that does not fit within this size is clippedclipped away away and is not visible (though the text is still in the control).and is not visible (though the text is still in the control).

BackColor, ForeColorBackColor, ForeColor determine the color used for the background of the determine the color used for the background of the

text and the text itselftext and the text itself


BorderStyleBorderStyle This property determines the display style of the This property determines the display style of the

control. It determines, for example, whether a control. It determines, for example, whether a control will display a raised (pseudo-3D) appearance control will display a raised (pseudo-3D) appearance or a flat appearance. when or a flat appearance. when

" Fixed3D " " Fixed3D "

" FixedSingle "" FixedSingle "



Visible Visible Determines whether the Label Determines whether the Label

appears at all in the final display (as appears at all in the final display (as shown below). shown below).

"False" - make the Label disappear. "False" - make the Label disappear. "True" - insure that the Label is "True" - insure that the Label is

displayed.displayed. Font Font

Controls the font used to display the Controls the font used to display the text of the Label. text of the Label.

2.1.2 HE: Match system to Real world2.1.2 HE: Match system to Real world

Real-World Concepts Real-World Concepts Real-World Language Real-World Language Real-World Conventions Real-World Conventions Cultural Issues Cultural Issues Date/Time Control Panel Applications of this Heuristic Date/Time Control Panel Applications of this Heuristic Example UAR: Aspect 1 — Date Label is Good, It Example UAR: Aspect 1 — Date Label is Good, It

Speaks the Users' Language Speaks the Users' Language Example UAR: Aspect 2 — Map Very Prominent But Example UAR: Aspect 2 — Map Very Prominent But

Not Interactive, Does Not Follow Real-World Not Interactive, Does Not Follow Real-World Conventions Conventions

Real-World ConceptsReal-World Concepts

Many computer systems can benefit from using real-Many computer systems can benefit from using real-world concepts in their interfaces --world concepts in their interfaces -- In Macintosh and Windows operating systems,--In Macintosh and Windows operating systems,--

””desktop”desktop” FoldersFolders DocumentsDocuments trash cantrash can

which are all very familiar to office workers, which are all very familiar to office workers, e.g.,e.g., users immediately know (based on their knowledge of the real users immediately know (based on their knowledge of the real

world) that they can put documents in foldersworld) that they can put documents in folders also know that they can put either documents or whole folders also know that they can put either documents or whole folders

into the trashinto the trash can as well as change their minds and take them out againcan as well as change their minds and take them out again

Real-World ConceptsReal-World Concepts Finding a suitable metaphor for a system requires thatFinding a suitable metaphor for a system requires that

a design team understand the task domaina design team understand the task domain the design team will include a domain expertthe design team will include a domain expert

who can guide the search for a suitable real-world metaphorwho can guide the search for a suitable real-world metaphor it is important to understand that the computer system it is important to understand that the computer system

is likely to is likely to go beyondgo beyond the real-world concept the real-world concept E.g., in an operating system, make a E.g., in an operating system, make a pointerpointer to a document , place to a document , place

it on the desktop or in many different folders, then you will be it on the desktop or in many different folders, then you will be able to able to accessaccess the same document the same document from all of these placesfrom all of these places

The real world has The real world has no analogous facilityno analogous facility, In the real world, you , In the real world, you would have to would have to make many copiesmake many copies of the same document and of the same document and put put them in all the different placesthem in all the different places you wanted them in. you wanted them in.

changedchanged one copy, you'd have to one copy, you'd have to make copies of the new versionmake copies of the new version and and replace the copiesreplace the copies of the old version in all those places of the old version in all those places

the operating system is giving the user a powerful the operating system is giving the user a powerful capability that capability that does not existdoes not exist in the real world. in the real world.

Real-World ConceptsReal-World Concepts

real-world concepts help the user make contact real-world concepts help the user make contact between their between their prior knowledgeprior knowledge and and the new the new systemsystem

it is important to understand that the computer it is important to understand that the computer system is likely to system is likely to go beyondgo beyond the real-world the real-world concept, soconcept, so the parallel will not be perfect, nor should it be. the parallel will not be perfect, nor should it be. After all, the computer system will After all, the computer system will only be betteronly be better than than

the real-world system it is replacingthe real-world system it is replacing to the extent that the computer gives the user to the extent that the computer gives the user

more powermore power than they have in the real world. than they have in the real world.

Real-World LanguageReal-World Language

"Speak the user's language . ""Speak the user's language . " computer application should use the same computer application should use the same

vocabulary that the user would use to vocabulary that the user would use to describe describe conceptsconcepts objectsobjects processesprocesses


Avoid technical jargon that only computer Avoid technical jargon that only computer scientists will understand. scientists will understand. E.g.,E.g., "abort“, common in computer science and had no "abort“, common in computer science and had no

negative connotations, stop some processnegative connotations, stop some process in the real world, (especially the United States in in the real world, (especially the United States in

the late 20th century) this word is politically the late 20th century) this word is politically charged and is seen to be rather violentcharged and is seen to be rather violent

Sensitivity to the real-world meanings of this Sensitivity to the real-world meanings of this term has led to its almost term has led to its almost disappearancedisappearance from the from the systems we see today.systems we see today.


example of a violation of this heuristicexample of a violation of this heuristic computer systems give error messages that use systems computer systems give error messages that use systems

terms instead of user's languageterms instead of user's language an application will quit unexpectedly and a dialog box will an application will quit unexpectedly and a dialog box will

appear that says something like the following:appear that says something like the following:

user will not know what an "Error of Type 01" is user will not know what an "Error of Type 01" is user will only be confused by this informationuser will only be confused by this information The information needs to be The information needs to be put into words that put into words that

make sense to the usermake sense to the user..

Real-World ConventionsReal-World Conventions

conventions that make the real world more conventions that make the real world more manageablemanageable

conventions are what people have come to expect conventions are what people have come to expect from their years of livingfrom their years of living

conventions should be conventions should be carried overcarried over and and maintained as much as possible maintained as much as possible in computer in computer systemssystems

Common conventionsCommon conventions

Printed matter is read in a specific order (for Printed matter is read in a specific order (for English, this is left-to-right, top-to-bottom). English, this is left-to-right, top-to-bottom).

Things that are the Things that are the biggestbiggest are probably the are probably the most most importantimportant. .

Things that are visually grouped together Things that are visually grouped together probably probably have something to do with each otherhave something to do with each other semantically. semantically. Things that are separated by white space are less likely Things that are separated by white space are less likely

to be related. to be related. Something that happens right after you do Something that happens right after you do

something is probably something is probably causedcaused by what you just by what you just did.did.

Cultural IssuesCultural Issues

when you when you movemove from users of one culture to from users of one culture to users of another culture, conventions are apt to users of another culture, conventions are apt to changechange

cultures defined by cultures defined by geographic area, geographic area, languagelanguage ageage E.g.,E.g., printed matter is ordered in a different way for printed matter is ordered in a different way for

English than it is for JapaneseEnglish than it is for Japanese

Cultural IssuesCultural Issues

Computer systems that have Computer systems that have a global marketa global market need to be need to be especially sensitiveespecially sensitive to this issue to this issue throughout the design.throughout the design.

Generational issuesGenerational issues designing computer systems for designing computer systems for different age-different age-

populationspopulations also have to be also have to be carefulcareful Eg. "dial a telephone," instead of "press a telephone“Eg. "dial a telephone," instead of "press a telephone“

Date/Time Control Panel Applications of this Date/Time Control Panel Applications of this HeuristicHeuristic

your first Visual Basic prototype in exercise 3.your first Visual Basic prototype in exercise 3. We will examine two aspects of this small We will examine two aspects of this small

interfaceinterface using the match between system and real world heuristicusing the match between system and real world heuristic demonstrate how to write UARs for our conclusionsdemonstrate how to write UARs for our conclusions

Example UAR: Aspect 1 — Date Label is Good, It Speaks Example UAR: Aspect 1 — Date Label is Good, It Speaks the Users' Languagethe Users' Language

One aspect of this interface is that it presents the One aspect of this interface is that it presents the day's date day's date in straightforward language that is in straightforward language that is familiar to usersfamiliar to users. .

Here a UAR to document this good aspect of the Here a UAR to document this good aspect of the interface interface

Use this first example of a UAR to discuss issues Use this first example of a UAR to discuss issues of of how to write a good UARhow to write a good UAR as well. as well.

See HE1 See HE1 demodemo

Example UAR: Aspect 2 — Map Very Prominent But Example UAR: Aspect 2 — Map Very Prominent But Not Interactive, Does Not Follow Real-World Not Interactive, Does Not Follow Real-World

ConventionsConventions

introductionintroduction

This is an example of a This is an example of a violationviolation of the match of the match between system and real world heuristic. between system and real world heuristic.

In this simple interface simulates the In this simple interface simulates the Windows 98Windows 98 control panel quite closely control panel quite closely

the image of the map is very big, taking up most the image of the map is very big, taking up most of the space in the control panel. of the space in the control panel. This implies, through real-world conventions, that it is This implies, through real-world conventions, that it is

very important to the user in understanding and very important to the user in understanding and interacting with the control panel. interacting with the control panel.

However, in this preliminary prototype, and in the real However, in this preliminary prototype, and in the real control panel, the user cannot actually interact with the control panel, the user cannot actually interact with the map. map.

It doesn't respond when the user clicks it. It doesn't respond when the user clicks it.

introductionintroduction

In real word standard formsIn real word standard forms a similar control panel on the Macintosh does allow interactivitya similar control panel on the Macintosh does allow interactivity

—the user can both specify points on the map by clicking on it —the user can both specify points on the map by clicking on it and move its view by dragging.)and move its view by dragging.)

In the actual In the actual Windows 98 Windows 98 control panel, the map does change control panel, the map does change when the user resets the time zone, but only in a very subtle waywhen 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 —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). (you will program this in Visual Basic in a later exercise).

However, it doesn't indicate the time zone boundaries with any However, it doesn't indicate the time zone boundaries with any lines. lines.

Thus, even the actual control panel has a very impoverished interactivity. Thus, even the actual control panel has a very impoverished interactivity. Thus, even the actual control panel Thus, even the actual control panel violatesviolates this heuristic by ignoring the this heuristic by ignoring the

real-world convention that real-world convention that the biggest things tend to be the most importantthe biggest things tend to be the most important..

See See dedemomo

2.1.3 HE: Visibility of System Status 2.1.3 HE: Visibility of System Status

Provide Feedback — Keep the User Informed Provide Feedback — Keep the User Informed About the Stages of a Process About the Stages of a Process

Don’t Make the User Guess Don’t Make the User Guess Date/Time Control Panel Applications of this Date/Time Control Panel Applications of this

Heuristic Heuristic Example UAR: Date Label Is Good — It Shows Example UAR: Date Label Is Good — It Shows

the Date the Computer Is Set To the Date the Computer Is Set To

Provide Feedback — Keep the User Informed About the Provide Feedback — Keep the User Informed About the Stages of a ProcessStages of a Process

Have you meet ?Have you meet ? initiated a command but there is no immediate activityinitiated a command but there is no immediate activity Nothing indicate that the command has been received and is being Nothing indicate that the command has been received and is being

executedexecuted As above,Often Cause users become As above,Often Cause users become uncomfortableuncomfortable it is importantit is important that the user that the user receives informative receives informative

feedbackfeedback whenever a command has been issued whenever a command has been issued E.g. opening a file E.g. opening a file

selects the File/Open commandselects the File/Open command a file dialog box appearsa file dialog box appears confirms that the File/Open command has been receivedconfirms that the File/Open command has been received

E.g. Copy/move indicator bar E.g. Copy/move indicator bar showing the progress of the processshowing the progress of the process approximately how much information has been transferredapproximately how much information has been transferred how much information has yet to be transferredhow much information has yet to be transferred

Provide Feedback — Keep the User Informed About the Provide Feedback — Keep the User Informed About the Stages of a ProcessStages of a Process

The hourglassThe hourglass and watch handand watch hand The hourglassThe hourglass and watch hand : common signals that the and watch hand : common signals that the

computer is doing somethingcomputer is doing something but they provide but they provide no hintno hint about what the something is or how far about what the something is or how far

along the process isalong the process is Dial-Up processDial-Up process

following series of messages appearsfollowing series of messages appears dialing *00862768778132…dialing *00862768778132… verifying username and passwordverifying username and password registering user on networkregistering user on network ……

it keeps the user informed about the stages of the dial-up it keeps the user informed about the stages of the dial-up operationoperation

Feedback methods Feedback methods

methodsmethods an icon changing shape, an icon changing shape, a menu item blinking briefly as it is selected,a menu item blinking briefly as it is selected, a message, a message, a dialog box, a dialog box, an alarm, an alarm, an audio clip, an audio clip, or an animationor an animation

Dialog boxes and messages can be used toDialog boxes and messages can be used to confirm actions, warn of confirm actions, warn of irreversibleirreversible actions actions guide users along a multi-step pathguide users along a multi-step path

Messages should be in the Messages should be in the user’s terminologyuser’s terminology, not , not computeresecomputerese

Don’t Make the User GuessDon’t Make the User Guess

keeping the user informedkeeping the user informed the stages of a processthe stages of a process the current task situationthe current task situation

E.g.,E.g., Showing the filename on the title bar of a document Showing the filename on the title bar of a document

keeps users informed about what files are in each window.keeps users informed about what files are in each window. Dimming or shading a menu option: Dimming or shading a menu option:

tells users the status of the option—that the option is not tells users the status of the option—that the option is not currently available. currently available.

Icons show the presence of applications or documents. Icons show the presence of applications or documents.

Date/Time Control Panel Applications of this HeuristicDate/Time Control Panel Applications of this Heuristic

examine an aspect of this small interface using examine an aspect of this small interface using the visibility of system status heuristicthe visibility of system status heuristic

write a UAR for conclusions. write a UAR for conclusions.

Example UAR: Date Label Is Good — It Shows the Date the Example UAR: Date Label Is Good — It Shows the Date the Computer Is Set ToComputer Is Set To

See See demodemo

2.2 Creating with Buttons — Evaluating with Three 2.2 Creating with Buttons — Evaluating with Three Heuristics Heuristics

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

Assessments Assessments Exercise 4 Exercise 4 Multiple-Choice Quiz 5 Multiple-Choice Quiz 5

2.2.1 Buttons2.2.1 Buttons

Button Control Description Button Control Description Properties Properties

Text Text TabStop, TabIndex TabStop, TabIndex Enabled Enabled Font Font

Events Events

Changes in the colors of lines make a button Changes in the colors of lines make a button appear to be pressed. appear to be pressed.

The underlined "P" reminds us of the shortcut The underlined "P" reminds us of the shortcut character.character.

Sample : Sample : ButtonDemoButtonDemo The dotted border signifies that the button is in The dotted border signifies that the button is in

focus. focus. A button can be decorated with an image. A button can be decorated with an image. E.g., the window media player’s buttonsE.g., the window media player’s buttons

Button Control DescriptionButton Control Description

Properties - Properties - TextText

determines the textual label displayed on the buttondetermines the textual label displayed on the button shortcut shortcut

character: placing an "&" just before the character character: placing an "&" just before the character indicated to the user by an underline and indicated to the user by an underline and can be invoked by holding down the ALT key and pressing the can be invoked by holding down the ALT key and pressing the

shortcut charactershortcut character It is up to the programmer to It is up to the programmer to ensureensure that shortcut characters are that shortcut characters are

uniqueunique across all controls. across all controls. note:note:

the system provides the the system provides the same initial defaultsame initial default, , the Text property of a controlthe Text property of a control (which is displayed to the user) is (which is displayed to the user) is

distinct from distinct from the name of the controlthe name of the control (which is used programmatically). (which is used programmatically).

PropertiesProperties

TabStopTabStop Determines either allows the focus to stop at the button Determines either allows the focus to stop at the button

or causes the focus to skip over it. or causes the focus to skip over it. TabIndexTabIndex

The TabIndex values within a form start at zero and The TabIndex values within a form start at zero and proceed to N-1 (where N is the number of controls in proceed to N-1 (where N is the number of controls in the form). the form).

When the Tab key is pressed, the focus moves to the When the Tab key is pressed, the focus moves to the control with the next highest TabIndex value that also control with the next highest TabIndex value that also has its TabStop property set to "True" (wrapping around has its TabStop property set to "True" (wrapping around from N-1 to zero if necessary). from N-1 to zero if necessary).

Note of Note of TabStop,TabIndexTabStop,TabIndex

Whenever you define a TabIndex property, Whenever you define a TabIndex property, Visual Basic Visual Basic automatically renumbersautomatically renumbers the the TabIndex properties of all other controls in the TabIndex properties of all other controls in the form. form.

Consequently, TabIndex numbers will Consequently, TabIndex numbers will alwaysalways be be within the designated within the designated zero to N-1 rangezero to N-1 range. . If not explicitly specify a TabIndex value, TabIndexes If not explicitly specify a TabIndex value, TabIndexes

will be assigned by the system will be assigned by the system in the orderin the order in which in which controls controls were createdwere created. .

Note of Note of TabStop,TabIndexTabStop,TabIndex

Current focus is indicated visually, there is Current focus is indicated visually, there is no visual no visual indication givenindication given of where of where the next focusthe next focus will be. will be. Consequently, it is important to set the TabIndex Consequently, it is important to set the TabIndex

properties of all controls carefully in order to properties of all controls carefully in order to avoid avoid behavior that is unexpected by the userbehavior that is unexpected by the user. .

As a rule of thumb, focus should move within a As a rule of thumb, focus should move within a logically related group of controlslogically related group of controls before moving to an before moving to an unrelated group. unrelated group. In a group, focus should move in reading order. In a group, focus should move in reading order. Similarly, when moving between groups, movement in Similarly, when moving between groups, movement in

reading order is often preferred. reading order is often preferred. Finally, focus should begin Finally, focus should begin

either with the either with the default controldefault control (see the (see the Default propertyDefault property ) ) or with the or with the first controlfirst control of the of the first logical groupfirst logical group of of

controls (in reading order). controls (in reading order).


Enabled Enabled Indicates whether the button is enabled. Indicates whether the button is enabled. Disabled buttons do not operate when clicked Disabled buttons do not operate when clicked

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

Font Font controls the font used to display the caption of controls the font used to display the caption of

the button.the button.

EventsEvents

Input events that correspond to Input events that correspond to user user manipulation of input devicesmanipulation of input devices are delivered to are delivered to the controls of a Visual Basic interface the controls of a Visual Basic interface Visual Basic Visual Basic should then respond to these input eventsshould then respond to these input events. .

The controls process the events in order to The controls process the events in order to provide visual feedback and provide visual feedback and invoke the actions specified by the programmer. invoke the actions specified by the programmer.

EventsEvents

These actions are performed in Visual Basic by These actions are performed in Visual Basic by event handlerevent handler subroutinessubroutines. .

Note Note the situations that lead to the calling of these subroutines the situations that lead to the calling of these subroutines

are also referred to as are also referred to as eventsevents. .

Event handler subroutinesEvent handler subroutines Event handler subroutines for a particular control are Event handler subroutines for a particular control are

named in a specific way in VB. named in a specific way in VB. The name of all the event handlers for a given control begin with The name of all the event handlers for a given control begin with

the the name of the controlname of the control followed by an underscore character (" followed by an underscore character ("__") ") and then end with and then end with the name of the eventthe name of the event they are to respond to. they are to respond to.

E.g.,E.g., ClickClick a button named "myButton" event. a button named "myButton" event. the subroutine named "myButton_Click" would be called when the subroutine named "myButton_Click" would be called when

that button was clicked. that button was clicked. Code responding to the activation of that button would then be Code responding to the activation of that button would then be

placed in the body of the mybutton_Click subroutine: placed in the body of the mybutton_Click subroutine:

Private Sub myButton_Click(ByVal sender as Object, ByVal e Private Sub myButton_Click(ByVal sender as Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles As System.Windows.Forms.MouseEventArgs) Handles myButton.ClickmyButton.Click

<put code to respond to button activation here><put code to respond to button activation here> End SubEnd Sub

Operation in VB.net 2005Operation in VB.net 2005

double clickdouble click on any control, Visual Basic will on any control, Visual Basic will automatically create code for the most common event automatically create code for the most common event handler routine associated with that control (if it does handler routine associated with that control (if it does not already exist) and place you in the code editor at not already exist) and place you in the code editor at that routine. that routine.

Edit another event handlerEdit another event handler

move to the code associated with a particular move to the code associated with a particular control by control by choosing the control name from the choosing the control name from the pull-down list of names at the leftpull-down list of names at the left. .

move to a particular area of the code (such as move to a particular area of the code (such as global declarations or functions and subroutines global declarations or functions and subroutines not associated with events) by selecting items not associated with events) by selecting items from these pull-down lists. from these pull-down lists.

Application routines codeApplication routines code

The code that responds to the activation of a The code that responds to the activation of a button normally carries out some action. button normally carries out some action.

Typically, this involves modifying information in Typically, this involves modifying information in the the modelmodel that pertains to the objects of interest that pertains to the objects of interest by calling theirby calling their setset accessor routines and/or accessor routines and/or one or more of the subroutines that make up the one or more of the subroutines that make up the

application. application. Application routines may modify model objects. Application routines may modify model objects.

changes model objects by updating the properties of any changes model objects by updating the properties of any controls that are related to them. controls that are related to them.

additional information of eventsadditional information of events The The ClickClick event for buttons does event for buttons does not have not have

additional informationadditional information associated with it. associated with it. Other events, however, may have additional Other events, however, may have additional

information. information. E.g.,E.g., the the KeyDownKeyDown event not only has event not only has

an integer code that indicates which key was pressed an integer code that indicates which key was pressed but also but also

a second integer code that indicates the states of the a second integer code that indicates the states of the modifier keys (SHIFT, CONTROL, and ALT) at the modifier keys (SHIFT, CONTROL, and ALT) at the time the key was pressed. time the key was pressed.

This additional information about the event is passed This additional information about the event is passed as parameters to the particular event handling routine. as parameters to the particular event handling routine.

events associated with buttonevents associated with button Private Sub name_Click(ByVal sender as Object, ByVal e As Private Sub name_Click(ByVal sender as Object, ByVal e As

System.EventArgs) System.EventArgs) invoked whenever the control is activated (by a mouse press and invoked whenever the control is activated (by a mouse press and

release).release). Private Sub name_MouseDown(ByVal sender as Object, ByVal e Private Sub name_MouseDown(ByVal sender as Object, ByVal e

As System.Windows.Forms.MouseEventArgs) As System.Windows.Forms.MouseEventArgs) Private Sub name_MouseUp(ByVal sender as Object, ByVal e As Private Sub name_MouseUp(ByVal sender as Object, ByVal e As

System.Windows.Forms.MouseEventArgs)System.Windows.Forms.MouseEventArgs) invoked when a mouse button is pressed or released over a button invoked when a mouse button is pressed or released over a button

respectively. Information about the state of the mouse when a respectively. Information about the state of the mouse when a button is pressed is accessible via the e parameter. button is pressed is accessible via the e parameter.

E.G., E.G., e.Button can be used to determine if the right, left or middle 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. Similarly, the location of the mouse when the button was pressed or relased can be determined using e.X and button was pressed or relased can be determined using e.X and e.Ye.Y

events associated with buttonevents associated with button

Private Sub name_MouseMove(ByVal sender as Private Sub name_MouseMove(ByVal sender as Object, ByVal e As Object, ByVal e As System.Windows.Forms.MouseEventArgs) System.Windows.Forms.MouseEventArgs) called whenever the mouse moves over the controlcalled whenever the mouse moves over the control

Note Note if no event handler routine is declared for a given event, if no event handler routine is declared for a given event,

it is simply ignored.it is simply ignored.

2.2.2 HE: Consistency and Standards2.2.2 HE: Consistency and Standards

Don’t Frustrate the User Don’t Frustrate the User Maintain Platform Consistency Maintain Platform Consistency Maintain Application Consistency Maintain Application Consistency Date/Time Control Panel Applications of this Date/Time Control Panel Applications of this

Heuristic Heuristic Example UAR: Aspect 1 — Button Labels Are Example UAR: Aspect 1 — Button Labels Are

Good Good Example UAR: Aspect 2 — Button Names Are Example UAR: Aspect 2 — Button Names Are

Very Similar Very Similar Important — When Heuristics ConflictImportant — When Heuristics Conflict

xqw

2004软工(w6)

Brief introduction beforeBrief introduction before

Information that is the Information that is the samesame should should appear to be appear to be the samethe same same words same words iconsicons positions on the screen positions on the screen

Information that is Information that is differentdifferent should be should be expressed expressed differentlydifferently. .

This consistency should be maintained within This consistency should be maintained within a single applicationa single application within a platform (therefore developers need to know within a platform (therefore developers need to know

platform conventions)platform conventions)..

Don’t Frustrate the UserDon’t Frustrate the User

Users become accustomed to certain actions and Users become accustomed to certain actions and sequencessequences

they become confused or frustrated they become confused or frustrated When they encounter unexpected behaviorWhen they encounter unexpected behavior

users will expect the users will expect the same series of actionssame series of actions to be to be required under required under similar conditionssimilar conditions Open file Open file Exit applicationExit application helphelp

Maintain Platform ConsistencyMaintain Platform Consistency Products should conform to the conventions of the Products should conform to the conventions of the

platformplatform Same style Same style

WindowsWindows Mac Mac LinuxLinux

Products Products adhereadhere to platform conventions may to platform conventions may minimizeminimize frustration frustration

E.g. .E.g. . The location of the File menu ——leftmost itemThe location of the File menu ——leftmost item The contents of the File menu ——opening, closing, saving, The contents of the File menu ——opening, closing, saving,

printing, and quittingprinting, and quitting Users are able to learn, but they Users are able to learn, but they don’t have todon’t have to

they can they can concentrateconcentrate on learning the commands that are on learning the commands that are uniqueunique to to the product —— the own function of the softwarethe product —— the own function of the software

Maintain Application ConsistencyMaintain Application Consistency

Consistency Consistency within an applicationwithin an application is also is also importantimportant location consistency(in menu)location consistency(in menu)

commands should commands should not movenot move around between menus around between menus commands should commands should not appear and disappearnot appear and disappear from menus. from menus. menu items that aren’t available should be menu items that aren’t available should be dimmeddimmed (or (or shadedshaded) )

instead of being removedinstead of being removed from the menu. from the menu. keyboard shortcutskeyboard shortcuts

keyboard shortcuts should comply with platform and application keyboard shortcuts should comply with platform and application standards.( ctrl + x, ctrl + o, ctrl + c, ctrl + v)standards.( ctrl + x, ctrl + o, ctrl + c, ctrl + v)

Messages, warnings, and alarmsMessages, warnings, and alarms should be consistent in their should be consistent in their wordingwording and in where they and in where they appearappear

Color semanticsColor semantics used as codes, should keep the same meaning throughoutused as codes, should keep the same meaning throughout E.g.,E.g., redred for error , for error , yellowyellow for warn for warn

Maintain Application ConsistencyMaintain Application Consistency

Formatting should be kept consistentFormatting should be kept consistent date and time, date and time, monetary units,monetary units, numbersnumbers

Data presentation should be kept consistentData presentation should be kept consistent data presentation such as,data presentation such as,

labeling, labeling, capitalization, capitalization, font face, use of bold and italic, and the placement of fields) font face, use of bold and italic, and the placement of fields)

Dialog boxes should be consistent in their presentationsDialog boxes should be consistent in their presentations TerminologyTerminology

words used to describe actions, behaviors, and commands should words used to describe actions, behaviors, and commands should be kept consistent. be kept consistent.

Date/Time Control Panel Applications of this HeuristicDate/Time Control Panel Applications of this Heuristic

The following picture shows what your first The following picture shows what your first Visual Basic prototype will look like when you Visual Basic prototype will look like when you have completed have completed Exercise 4Exercise 4. We will examine two . We will examine two aspects of this small interface using the aspects of this small interface using the consistency and standardsconsistency and standards heuristic and write heuristic and write UARs for our conclusions.UARs for our conclusions.

Example UAR: Aspect 1 — Button Labels Are GoodExample UAR: Aspect 1 — Button Labels Are Good

HE5HE5 - - Good Feature Good Feature

Example UAR: Aspect 2 — Button Names Are Very SimilarExample UAR: Aspect 2 — Button Names Are Very Similar

HE6HE6 - - Problem Problem

Important — When Heuristics Conflict Important — When Heuristics Conflict

heuristic gives conflicting design adviceheuristic gives conflicting design advice the very the very naturenature of heuristic evaluation of heuristic evaluation

it uses it uses heuristicsheuristics heuristics are heuristics are not guaranteed to lead tonot guaranteed to lead to a solution a solution just just point in a directionpoint in a direction of a solution of a solution

What to do?What to do? think hardthink hard about whether the conflicting advice about whether the conflicting advice makes makes

any real differenceany real difference to the user to the user do an do an error analysiserror analysis

error analysis suggests that error analysis suggests that the the costcost of confusing the two buttons of confusing the two buttons because their labels do not reflect the actual differences in their because their labels do not reflect the actual differences in their

functions is functions is relatively smallrelatively small.. But other case will be a more severe consequence of But other case will be a more severe consequence of

errorerror it will be more important to resolve the conflict in some it will be more important to resolve the conflict in some

other wayother way it is better to it is better to go with the standard labelsgo with the standard labels because there because there

really are really are great benefitsgreat benefits to be had from adhering to to be had from adhering to platform standards.platform standards.

Click the image to run the application and analyzeClick the image to run the application and analyze

error analysiserror analysis

Rearrange UARsRearrange UARs

Go back and Go back and putput this error analysis this error analysis in the UARsin the UARs Record the design decision you have madeRecord the design decision you have made If the question comes up again, you'll know why you If the question comes up again, you'll know why you

made this decision. made this decision.

What shall we do when in more complicate case?What shall we do when in more complicate case?

some case, the error analysis is probably the end some case, the error analysis is probably the end of the controversyof the controversy

in other instancesin other instances more severe consequence of errormore severe consequence of error more important to resolve the conflict in some other more important to resolve the conflict in some other

way. way. E.g.,E.g.,

dialog boxes that are dialog boxes that are more difficultmore difficult to get back to if you to get back to if you hit OK mistakenly instead of Apply (and hit OK mistakenly instead of Apply (and undoundo doesn't doesn't usually workusually work to get a dialog box back!). to get a dialog box back!).

In these cases, you should use another technique (e.g., In these cases, you should use another technique (e.g., the the think-aloud techniquethink-aloud technique) to get more information about ) to get more information about the issue. the issue.

2.2.3 User Control and Freedom2.2.3 User Control and Freedom

Let the User Be in Control Let the User Be in Control Provide an Undo Mechanism Provide an Undo Mechanism Require Confirmation Require Confirmation Provide an Escape Route Provide an Escape Route Date/Time Control Panel Applications of this Heuristic Date/Time Control Panel Applications of this Heuristic Example UAR: Aspect 1 — Cancel Button Is Good Example UAR: Aspect 1 — Cancel Button Is Good Example UAR: Aspect 2 — UARs Sometimes Lead to Example UAR: Aspect 2 — UARs Sometimes Lead to

More UARs.More UARs.

Let the User Be in ControlLet the User Be in Control

"who's in charge ""who's in charge " strongly affectsstrongly affects how a user feels about an application how a user feels about an application Users get frustrated when they don’t feel in control of Users get frustrated when they don’t feel in control of

the computerthe computer users should initiate actions, not the computerusers should initiate actions, not the computer carefully arrange the wording of messagescarefully arrange the wording of messages

their tone should suggest their tone should suggest the computer is ready and compliantthe computer is ready and compliant not commanding or threateningnot commanding or threatening

Provide an Undo MechanismProvide an Undo Mechanism The user should be able to The user should be able to

reverse the steps in a process andreverse the steps in a process and retreat back to a previous stateretreat back to a previous state

Some of the ways applications implement undoSome of the ways applications implement undo An undo command that reverses the most recent command An undo command that reverses the most recent command

The simplest form only allows to reverse The simplest form only allows to reverse the most recent the most recent commandcommand

Some applications allow the user to reverse Some applications allow the user to reverse several stepsseveral steps A "Reset" or "Factory Settings" button : reverse certain editsA "Reset" or "Factory Settings" button : reverse certain edits

The The Reset buttonReset button will reverse settings that have been set in the will reverse settings that have been set in the current editing sessioncurrent editing session

The The Factor SettingsFactor Settings button will cause the settings to be button will cause the settings to be returned to their out-of-the-box configuration. ( returned to their out-of-the-box configuration. ( e.g.,e.g., your cell your cell phone)phone)

Require ConfirmationRequire Confirmation

When initiate an irreversible action When initiate an irreversible action You should warned the userYou should warned the user

Before allowing an irreversible step to be Before allowing an irreversible step to be set in motion. set in motion. require an require an explicit confirmationexplicit confirmation

Provide an Escape RouteProvide an Escape Route

Users should be able to Users should be able to halthalt processes. processes. Offer a Cancel button Offer a Cancel button at all timesat all times when canceling a process may leave the when canceling a process may leave the

computer in an unstable state, computer in an unstable state, E.g.,E.g., canceling an install process when only a subset of the canceling an install process when only a subset of the

necessary files have been transferred,necessary files have been transferred, Warn user that canceling could have negative Warn user that canceling could have negative

consequences consequences Advise user an alternative way to halt or reverse Advise user an alternative way to halt or reverse

the processthe process

Date/Time Control Panel Applications of this Date/Time Control Panel Applications of this Heuristic Heuristic

Example UAR: Aspect 1 — Cancel Button Is GoodExample UAR: Aspect 1 — Cancel Button Is Good

HE7HE7

Example UAR: Aspect 2 — UARs Sometimes Lead Example UAR: Aspect 2 — UARs Sometimes Lead to More UARsto More UARs

HE8HE8

2.2.4 HE: Flexibility and Efficiency of Use2.2.4 HE: Flexibility and Efficiency of Use

Provide Keyboard Shortcuts Provide Keyboard Shortcuts Allow for Customization Allow for Customization Date/Time Control Panel Applications of this Heuristic Date/Time Control Panel Applications of this Heuristic Example UAR: Button Accelerators Exist Example UAR: Button Accelerators Exist Not Every Facet of Every Heuristic Applies to Every Not Every Facet of Every Heuristic Applies to Every

InterfaceInterface

Provide Keyboard Shortcuts Provide Keyboard Shortcuts

Keyboard shortcuts provide alternative ways of issuing Keyboard shortcuts provide alternative ways of issuing commandscommands

using a keyboard shortcut isusing a keyboard shortcut is faster faster than using the than using the mousemouse when a user uses a keyboard shortcut, their hands need not leave when a user uses a keyboard shortcut, their hands need not leave

the keyboard.the keyboard. Using the mouse: keyboard > mouse > target > clicking > Using the mouse: keyboard > mouse > target > clicking >

keyboardkeyboard E.g.,E.g.,

MAC: the button outlined in bold can be "pressed" by hitting the MAC: the button outlined in bold can be "pressed" by hitting the RETURN keyRETURN key

WIN: Ctrl + O , Ctrl + C , Ctrl + V WIN: Ctrl + O , Ctrl + C , Ctrl + V The underlined letter of a menu item letter together, Alt + F , Alt The underlined letter of a menu item letter together, Alt + F , Alt

+ H+ H When open a file :When open a file :

Alt + f > Alt+ O Alt + f > Alt+ O Ctrl + OCtrl + O

Allow for CustomizationAllow for Customization

users control how their computer looks and users control how their computer looks and behavesbehaves

allows users to tailor their environment to suit allows users to tailor their environment to suit their preferencestheir preferences

gives users a sense of being in chargegives users a sense of being in charge allows users with special needs to adapt their allows users with special needs to adapt their

computing environment to meet their needscomputing environment to meet their needs

Allow for CustomizationAllow for Customization

E.g.,E.g., ConvenienceConvenience:: a user with difficulty using their left hand can a user with difficulty using their left hand can

movemove important keyboard shortcuts to the right side of the important keyboard shortcuts to the right side of the keyboard.keyboard.

SpeedSpeed:: Power users want to maximize speed, typically by adding Power users want to maximize speed, typically by adding keyboard keyboard shortcutsshortcuts in order to reduce the amount of time they use in order to reduce the amount of time they use the mouse.the mouse.

AppearanceAppearance:: Giving users control over Giving users control over secondary menus and secondary menus and toolbarstoolbars within an application as well as icon placement on the within an application as well as icon placement on the background. background.

ReadabilityReadability:: Giving users control over the computer’s Giving users control over the computer’s background, font face and size, and other display settingsbackground, font face and size, and other display settings allows allows users to adapt these according to their needs and preferences. users to adapt these according to their needs and preferences.

-> MS Office , Winamp-> MS Office , Winamp


The following picture shows what your first The following picture shows what your first Visual Basic prototype will look like when you Visual Basic prototype will look like when you have completed have completed Exercise 4Exercise 4. We will examine one . We will examine one aspect of this small interface using the aspect of this small interface using the flexibility flexibility and efficiencyand efficiency of use heuristic and write a UAR of use heuristic and write a UAR for our conclusions. for our conclusions.

Example UAR: Button Accelerators ExistExample UAR: Button Accelerators Exist

HE9HE9

See example below:See example below: there is no way for users to tailor their frequent actions in this there is no way for users to tailor their frequent actions in this

control panel. control panel. However, this facet of the However, this facet of the flexibility and efficiencyflexibility and efficiency of use of use

heuristic heuristic doesn'tdoesn't apply to this control panel. apply to this control panel. First, this is a control panel that First, this is a control panel that won't be used very won't be used very

oftenoften, so users will , so users will not really have "frequent actions. "not really have "frequent actions. " Second, the actions on this control panel are Second, the actions on this control panel are so simpleso simple

that they are that they are already quite efficientalready quite efficient.. questionquestion: whether every facet of : whether every facet of

a heuristic applies or nota heuristic applies or not AnswerAnswer: often be ": often be "nono""

Not Every Facet of Every Heuristic Applies to Every Not Every Facet of Every Heuristic Applies to Every Interface Interface

Take Assessment Take Assessment

Exercise 3Exercise 3 Multiple-Choice Quiz 4Multiple-Choice Quiz 4 Exercise 4Exercise 4 Multiple-Choice Quiz 5 Multiple-Choice Quiz 5

2.3 Creating with Checkboxes and Radio Buttons — 2.3 Creating with Checkboxes and Radio Buttons — Evaluating with One HeuristicEvaluating with One Heuristic

2.3.12.3.1 Checkboxes and Radio Buttons Checkboxes and Radio Buttons 2.3.22.3.2 HE: Error Prevention HE: Error Prevention

xqw

2005硕本（w8）

2.3.1 Checkboxes and Radio Buttons2.3.1 Checkboxes and Radio Buttons

CheckBox Control Description CheckBox Control Description CheckBox Properties CheckBox Properties CheckBox Events CheckBox Events Radio Button Control Description Radio Button Control Description Radio Button Properties Radio Button Properties Radio Button Events Radio Button Events

CheckBox Control Description CheckBox Control Description

The CheckBox control provides a "The CheckBox control provides a "two statetwo state" toggle" toggle allows the user to express one of two conditions ("checked" or allows the user to express one of two conditions ("checked" or

"unchecked")."unchecked"). CheckBoxes may receive the focus (whenCheckBoxes may receive the focus (when TabStop TabStop

property is set to True).property is set to True). When focused , it may be checked or unchecked by When focused , it may be checked or unchecked by pressing the pressing the

space keyspace key Programmatically, CheckBoxes can have one of three Programmatically, CheckBoxes can have one of three

values: values: 0-Unchecked, 0-Unchecked, 1-Checked 1-Checked 2-Grayed , 2-Grayed , only be set by the systemonly be set by the system

Usages:Usages: most widely used to allow users to turn options that are part of a most widely used to allow users to turn options that are part of a

larger interface on or offlarger interface on or off It is It is notnot normally used to initiate actions normally used to initiate actions

CheckBox PropertiesCheckBox Properties

Checked Checked contains the current setting of the CheckBox contains the current setting of the CheckBox

("Unchecked" or "Checked"). ("Unchecked" or "Checked"). CheckedState CheckedState

contains the current state of the CheckBox contains the current state of the CheckBox ("Unchecked", "Checked", or "Indeterminate"). ("Unchecked", "Checked", or "Indeterminate").

CheckAlignCheckAlign determines where the CheckBox appears in determines where the CheckBox appears in

relation to the textual captionrelation to the textual caption

CheckBox PropertiesCheckBox Properties

EnabledEnabled determines whether the control accepts user input. determines whether the control accepts user input. When disabled, it is drawn with its caption and box When disabled, it is drawn with its caption and box

grayed and does not accept inputs from the user.grayed and does not accept inputs from the user. TabStop, TabIndex TabStop, TabIndex

determines whether the control is eligible to hold the determines whether the control is eligible to hold the focus, and either allows the focus to stop at the control focus, and either allows the focus to stop at the control or causes the focus to skip over it. or causes the focus to skip over it.

The order in which controls receive the focus is The order in which controls receive the focus is determined by their TabIndex properties. determined by their TabIndex properties.

ThreeState ThreeState determines whether the control can have an determines whether the control can have an

indeterminate (grayed) CheckedState.indeterminate (grayed) CheckedState.

CheckBox EventsCheckBox Events Private Sub name_Click(ByVal sender As System.Object, ByVal Private Sub name_Click(ByVal sender As System.Object, ByVal

e As System.EventArgs) e As System.EventArgs) invoked when the control is clicked with a mouse.invoked when the control is clicked with a mouse.

Private Sub name_CheckedChange(ByVal sender As Private Sub name_CheckedChange(ByVal sender As System.Object, ByVal e As System.EventArgs)System.Object, ByVal e As System.EventArgs) invoked whenever the control's checked state changes.invoked whenever the control's checked state changes.

Private Sub name_MouseDown(ByVal sender as Object, ByVal e Private Sub name_MouseDown(ByVal sender as Object, ByVal e As System.Windows.Forms.MouseEventArgs) As System.Windows.Forms.MouseEventArgs)

Private Sub name_MouseUp(ByVal sender as Object, ByVal e Private Sub name_MouseUp(ByVal sender as Object, ByVal e As System.Windows.Forms.MouseEventArgs)As System.Windows.Forms.MouseEventArgs) invoked when a mouse button is depressed or released over the control, invoked when a mouse button is depressed or released over the control,

respectively. respectively. Private Sub name_MouseMove(ByVal sender as Object, ByVal e Private Sub name_MouseMove(ByVal sender as Object, ByVal e

As System.Windows.Forms.MouseEventArgs) As System.Windows.Forms.MouseEventArgs) called whenever the mouse moves over the control (whether a button is called whenever the mouse moves over the control (whether a button is

pressed or not).pressed or not).

Radio Button Control DescriptionRadio Button Control Description

the radio button control (called the radio button control (called OptionButtonOptionButton in in Visual Basic) provides a two-state toggle. Visual Basic) provides a two-state toggle.

Radio buttons are designed to be used in Radio buttons are designed to be used in exclusiveexclusive groups groups—that is groups in which only —that is groups in which only one of the radio buttons is selected at a time. one of the radio buttons is selected at a time.

Radio Button Control DescriptionRadio Button Control Description

operationoperation When the radio button is the current focus, it can be When the radio button is the current focus, it can be

selected by pressing the selected by pressing the SPACEBARSPACEBAR key. key. UnselectingUnselecting a radio button can only be done a radio button can only be done by by

selecting a differentselecting a different radio button. radio button. Notice : When a radio button in a group is the current Notice : When a radio button in a group is the current

focus, pressing the TAB key will focus, pressing the TAB key will move the focus to the move the focus to the next control outside the groupnext control outside the group (not within the radio (not within the radio button group). button group).

Arrow keysArrow keys be used to move within the radio be used to move within the radio button group. button group.

Ensure that the TabIndexes of all radio buttons Ensure that the TabIndexes of all radio buttons in a group are in a group are numbered consecutivelynumbered consecutively

Radio Button Control DescriptionRadio Button Control Description Radio buttons are most widely used to allow users to Radio buttons are most widely used to allow users to

select one option from a set of options that are part of a select one option from a set of options that are part of a larger interface. larger interface.

They are They are notnot normally used to initiate actions normally used to initiate actions Programmatically, radio buttons can be set to one of Programmatically, radio buttons can be set to one of

two values: two values: "True" when they are selected, "True" when they are selected, "False" otherwise. "False" otherwise.

Groups of radio buttons can be created in the Groups of radio buttons can be created in the conventional manner by dragging a radio button from conventional manner by dragging a radio button from the VB Toolbox palette onto a form. the VB Toolbox palette onto a form.

The radio buttons placed on The radio buttons placed on a forma form or within a or within a container control function container control function as a groupas a group..

Radio Button PropertiesRadio Button Properties

CheckedChecked indicates whether the control is indicates whether the control is

selected ("True") or selected ("True") or unselected ("False").unselected ("False").

TextAlignTextAlign determines whether the radio button appears determines whether the radio button appears

to the left of the textual caption to the left of the textual caption to the right.to the right.

Radio Button EventsRadio Button Events

Click handler routineClick handler routine is the primary handler for is the primary handler for radio buttons and is called when a radio button radio buttons and is called when a radio button is selected. is selected.

Radio Button event handlers vs. CheckBoxes Radio Button event handlers vs. CheckBoxes and buttons event handlers and buttons event handlers the same the same event handlers event handlers The The primary differenceprimary difference : radio buttons are normally : radio buttons are normally

placed in groups. placed in groups.

2.3.2 HE: Error Prevention2.3.2 HE: Error Prevention

Prevent Errors Prevent Errors Warn Users about Potentially Destructive Warn Users about Potentially Destructive

Actions and Require Confirmation Actions and Require Confirmation Date/Time Control Panel Applications of this Date/Time Control Panel Applications of this

Heuristic Heuristic When Interface Aspects Are Repeated When Interface Aspects Are Repeated Example UAR: Automatic Adjustment of Example UAR: Automatic Adjustment of

Daylight Savings Time Is Good Daylight Savings Time Is Good

xqw

2005网教(w8)2004空信(w8)

Prevent Errors Prevent Errors

People explore interfaces and learn by trial and error People explore interfaces and learn by trial and error As much as possible, As much as possible, disallowdisallow illegal actions illegal actions

E.g.,E.g., both MacOS and Windows both MacOS and Windows dimdim (or (or graygray) and disable illegal ) and disable illegal actions. actions.

Dimming an actionDimming an action is preferable to is preferable to removing the actionremoving the action from a menu or dialog box, because when an action is from a menu or dialog box, because when an action is dimmed, its dimmed, its positionposition on the interface menu on the interface menu doesn’t doesn’t changechange, only its availability. , only its availability. E.g.,E.g., in a file dialog box, in a file dialog box, only filesonly files that an application is capable of that an application is capable of

opening are listed. opening are listed. The other files in the folder that the application The other files in the folder that the application cannot open are cannot open are

not shownnot shown, reducing the chance that the user will attempt to open , reducing the chance that the user will attempt to open them them

Warn Users about Potentially Destructive Actions and Warn Users about Potentially Destructive Actions and Require Confirmation Require Confirmation

Warning messages should be written in the Warning messages should be written in the user’s language user’s language

provide the user with the option of canceling the provide the user with the option of canceling the command.command.

Avoid double negativesAvoid double negatives in messages, especially in in messages, especially in warnings. warnings. E.g,E.g, the message the message "If you don’t want this to not be saved, "If you don’t want this to not be saved,

click YES"click YES" requires careful reading to determine what requires careful reading to determine what the consequences of clicking YES would. the consequences of clicking YES would.

Warn Users about Potentially Destructive Actions and Warn Users about Potentially Destructive Actions and Require Confirmation Require Confirmation

Make sure warnings Make sure warnings clearly stateclearly state the the consequences of continuing with the action.consequences of continuing with the action.

Destructive actions should require explicit Destructive actions should require explicit confirmation.confirmation.


Example UAR: Automatic Adjustment of Example UAR: Automatic Adjustment of Daylight Savings Time Is GoodDaylight Savings Time Is Good

HE10HE10

When Interface Aspects Are Repeated When Interface Aspects Are Repeated

E.g.E.g., the buttons at the bottom follow the , the buttons at the bottom follow the Windows Design GuideWindows Design Guide (UAR# HE5), (UAR# HE5), the OK and Apply labels may be confusing to users the OK and Apply labels may be confusing to users

(UAR# HE6). (UAR# HE6). The Cancel button provides an emergency exit (UAR# The Cancel button provides an emergency exit (UAR#

HE7) but it may not provide HE7) but it may not provide enough feedbackenough feedback about about when it will actually cancel changes (UAR# HE8).. when it will actually cancel changes (UAR# HE8)..

when following a standard, it is when following a standard, it is not necessarynot necessary to to write up separate UARs for each occurrence of write up separate UARs for each occurrence of the standard. the standard.

When Interface Aspects Are Repeated When Interface Aspects Are Repeated

In a real-world project, you could do just as we In a real-world project, you could do just as we did here. did here. Start with a single screen and write separate UARs for Start with a single screen and write separate UARs for

each aspect of that screen. each aspect of that screen. When you go to the next screen and discover that the When you go to the next screen and discover that the

same standards are followedsame standards are followed, you can write a set of , you can write a set of UARs for the application concerning the standard in UARs for the application concerning the standard in general (that is, generalized versions of UARs # HE5-9). general (that is, generalized versions of UARs # HE5-9).

then write one UAR for then write one UAR for the consistency of the system'sthe consistency of the system's own interfaceown interface

Take Assessment Take Assessment

Practical Quiz 1 Practical Quiz 1

2.4 Creating with ListBoxes and ComboBoxes — 2.4 Creating with ListBoxes and ComboBoxes — Evaluating with One Heuristic.Evaluating with One Heuristic.

2.4.12.4.1 ListBoxes and ComboBoxes ListBoxes and ComboBoxes 2.4.22.4.2 HE: Aesthetics and Minimalist Design HE: Aesthetics and Minimalist Design


xqw

04 软工(w10)

2.4.1 ListBoxes and ComboBoxes2.4.1 ListBoxes and ComboBoxes

ListBox Control DescriptionListBox Control Description ListBox PropertiesListBox Properties

MultiColumnMultiColumn IntegralHeightIntegralHeight SortedSorted TopIndexTopIndex SelectionModeSelectionMode ItemsItems SelectedIndexSelectedIndex

ListBox EventsListBox Events ComboBox Control DescriptionComboBox Control Description ComboBox PropertiesComboBox Properties

DropDownStyleDropDownStyle TextText SelectionStart, SelectionLength, SelectedTextSelectionStart, SelectionLength, SelectedText

ComboBox EventsComboBox Events

ListBox Control DescriptionListBox Control Description

ListBox can be used for selecting from a set of ListBox can be used for selecting from a set of alternatives. alternatives. display a list of itemsdisplay a list of items allow the user to select one or allow the user to select one or moremore of them. of them. ListBoxes are typically used in cases ListBoxes are typically used in cases

where the number of items being selected from would be where the number of items being selected from would be too too largelarge to implement with an array of CheckBoxes or radio to implement with an array of CheckBoxes or radio buttonsbuttons

list entries can be list entries can be determined at run timedetermined at run time. .


ListBoxes can display a set of list items in a ListBoxes can display a set of list items in a number of different ways, depending on number of different ways, depending on property settings. property settings.

When more list items are available than fit in the When more list items are available than fit in the space provided, a space provided, a ScrollBarScrollBar is is automaticallyautomatically addedadded to allow other list elements to be viewed. to allow other list elements to be viewed.

Use Use MultiColumnMultiColumn property property


ListBoxes can hold the focus. ListBoxes can hold the focus. While the ListBox get focus , the arrow keys can While the ListBox get focus , the arrow keys can

be used to move the focus between particular be used to move the focus between particular items and theitems and the SPACEBAR SPACEBAR (but (but not the ENTERnot the ENTER key) can be used to select or unselect items. key) can be used to select or unselect items.

ListBoxes allow efficient selection of items ListBoxes allow efficient selection of items using the keyboard. using the keyboard. If a If a letter keyletter key is pressed, the selection of the ListBox is pressed, the selection of the ListBox

will move to the next entry in the list that starts with will move to the next entry in the list that starts with that character.that character.

This allows This allows rapid accessrapid access to long lists to long lists without scrollingwithout scrolling..

ListBox Control Description(vb6)ListBox Control Description(vb6)

It is also possible to set the Style property to It is also possible to set the Style property to display display list items with CheckBoxeslist items with CheckBoxes next to them next to them Note : when CheckBoxes are used, the Note : when CheckBoxes are used, the highlighting is highlighting is

independentindependent of the CheckBox's status for that item. of the CheckBox's status for that item.

In vb net In vb net Aother control Aother control


ListBoxes can hold the focus. ListBoxes can hold the focus. The TAB key moves the focus to and from a ListBox. The TAB key moves the focus to and from a ListBox. While the focus resides in the ListBox, the While the focus resides in the ListBox, the arrow keysarrow keys can be used can be used

to to move the focusmove the focus between particular items and the between particular items and the SPACEBARSPACEBAR (but not the ENTER key) can be (but not the ENTER key) can be used to select or unselect itemsused to select or unselect items. .

In addition to the normal focus mechanism, ListBoxes In addition to the normal focus mechanism, ListBoxes also allow efficient selection of items using the also allow efficient selection of items using the keyboard. keyboard. If a letter key is pressed, the selection of the ListBox will If a letter key is pressed, the selection of the ListBox will move to move to

the next entry in the list that starts with that characterthe next entry in the list that starts with that character. . allows allows rapid access to long listsrapid access to long lists without deliberate scrolling. without deliberate scrolling.

ListBox PropertiesListBox Properties

MultiColumnMultiColumn determines whether scrolling across itemsdetermines whether scrolling across items False - using a vertical ScrollBar and a single column of items False - using a vertical ScrollBar and a single column of items True - using a horizontal ScrollBar and a series of columns.True - using a horizontal ScrollBar and a series of columns.

IntegralHeight ( IntegralHeight ( 列表项目是否允许部分显示列表项目是否允许部分显示 )) determines whether an integral number of items or columns is determines whether an integral number of items or columns is

always displayed.always displayed. False - partial items or columns may be displayedFalse - partial items or columns may be displayed True - only complete items or columns are shownTrue - only complete items or columns are shown

Sorted Sorted This property determines whether the items in the list are This property determines whether the items in the list are

automatically sorted automatically sorted alphabeticallyalphabetically..

ListBox PropertiesListBox Properties TopIndexTopIndex

determines which item is currently shown as the first visible one in the list. 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 Changing this item causes the list to scroll so that the given index item is the

first shown. first shown. Note: this property is Note: this property is not available at design timenot available at design time, only at edit time. , only at edit time. it does not appear in the property list editorit does not appear in the property list editor only be set programmatically with code.only be set programmatically with code.

SelectionModeSelectionMode determines whether the ListBox supports only one selected item or multiple determines whether the ListBox supports only one selected item or multiple

selected items. selected items. "One," - only one selection at a time is allowed. "One," - only one selection at a time is allowed. "MultiSimple”- multiple selections are allowed, and items are toggled "On" and "MultiSimple”- multiple selections are allowed, and items are toggled "On" and

"Off" by simple clicks (or by using the focus mechanism). "Off" by simple clicks (or by using the focus mechanism). "MultiExtended," then multiple selections are allowed. "MultiExtended," then multiple selections are allowed.

simple clicks reset the selection to one item. simple clicks reset the selection to one item. Clicks with the SHIFT key held down perform a contiguous range of selections that 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. 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."Clicks with the CTRL key held down toggle an individual item "On" or "Off."


ItemsItems contains an contains an arrayarray of text strings making up the list items. of text strings making up the list items. The number of items currently in this list is maintained via The number of items currently in this list is maintained via

Items.CountItems.Count ( (not available at design timenot available at design time).). 其实它是一个其实它是一个 IcollectionIcollection 对象（可使用对象（可使用 add,insert, remove, add,insert, remove,

clearclear 方法）方法）可以加入任意对象，显示可以加入任意对象，显示 displayMemberdisplayMember 指定的属性值指定的属性值

SelectedIndexSelectedIndex hold the index of selected item. hold the index of selected item. If multiple items are selected, SelectedtIndex will contain the If multiple items are selected, SelectedtIndex will contain the

index of the item currently within the highlight rectangle (used index of the item currently within the highlight rectangle (used for indicating focus) —whether that item is selected or not.for indicating focus) —whether that item is selected or not.


SelectedIndices SelectedIndices 集合集合 SelectedItems SelectedItems 集合集合

ListBox EventsListBox Events

Private Sub Private Sub namename_SelectedIndexChanged(ByVal sender _SelectedIndexChanged(ByVal sender As System.Object, ByVal e As As System.Object, ByVal e As System.EventArgs) System.EventArgs) As with most controls this event handler is the As with most controls this event handler is the

most commonly used one and is invoked when most commonly used one and is invoked when the user completes a selection (or range the user completes a selection (or range selection). selection).

The SelectedIndex propertie can be used to The SelectedIndex propertie can be used to determine which selections have been completed.determine which selections have been completed.

CheckedListBox CheckedListBox 控件控件 ListBox ListBox 控件的变体（控件的变体（ VB6VB6 中两者是同一个）中两者是同一个）继承自继承自 ListBox ListBox 不支持多个选中不支持多个选中 (( 与多个与多个 checkedchecked 区别区别 ))

SelectionModeSelectionMode 属性只能选取属性只能选取 one one 或或 nonenone CheckedItems CheckedItems 集合（对比集合（对比 ListBoxListBox ）） CheckedIndices CheckedIndices 集合（对比集合（对比 ListBoxListBox ））

ComboBox Control DescriptionComboBox Control Description The ComboBox control is related in functionality to the The ComboBox control is related in functionality to the

ListBox. ListBox. It allows the user to select an item from a list of potential items. It allows the user to select an item from a list of potential items.

In its default form, the ComboBox also allows the user In its default form, the ComboBox also allows the user to alternately to alternately type in a completely new entrytype in a completely new entry in a text in a text entry field. entry field.

The term "combo box" in fact comes from the notion of The term "combo box" in fact comes from the notion of combining a text entry fieldcombining a text entry field with the functionality of with the functionality of a a single selection ListBox. single selection ListBox.

ComboBoxes are also more compact—they normally ComboBoxes are also more compact—they normally take up only a little more than one item's height on the take up only a little more than one item's height on the screen. screen.

The full set of items is normally accessed by pulling The full set of items is normally accessed by pulling down the list portion of the ComboBox.down the list portion of the ComboBox.

ComboBox Control DescriptionComboBox Control Description

ComboBoxes come in three styles (as determined ComboBoxes come in three styles (as determined by the by the DropDownStyleDropDownStyle property): property):

ComboBox Control DescriptionComboBox Control Description

In dropdown and dropdown list forms, a In dropdown and dropdown list forms, a ComboBox displays a small downward arrow ComboBox displays a small downward arrow button. button. If this button is pressed, the item list drops down and If this button is pressed, the item list drops down and

becomes visible. becomes visible. Items may then be selected from the list by clicking Items may then be selected from the list by clicking

them, at which point the text for the item is placed in the them, at which point the text for the item is placed in the ComboBox text area and the dropdown list is ComboBox text area and the dropdown list is disappears. disappears.

In the dropdown and simple forms, the user may In the dropdown and simple forms, the user may also type arbitrary text into the text entry area. also type arbitrary text into the text entry area.

ComboBox PropertiesComboBox Properties

Many properties of the ComboBox are shared Many properties of the ComboBox are shared with the ListBox and operate in the same way as with the ListBox and operate in the same way as a single selection ListBox. include: a single selection ListBox. include: List, ListCount, ItemData, ListIndex, IntegralHeight, List, ListCount, ItemData, ListIndex, IntegralHeight,

Sorted, and TopIndex. Sorted, and TopIndex. not not apply to ComboBoxes,apply to ComboBoxes, However, However,

the Columns, MultiSelect, Selected, and SelCountthe Columns, MultiSelect, Selected, and SelCount 这里教程有误，请同学们查查这里教程有误，请同学们查查 msdnmsdn 看看错在哪看看错在哪


DropDownStyleDropDownStyle determines which of the three possible styles a determines which of the three possible styles a

ComboBox uses. Valid values are: ComboBox uses. Valid values are: DropdownDropdown Simple, and Simple, and DropdownList DropdownList

TextText contains the current text appearing in the textbox portion contains the current text appearing in the textbox portion

of the ComboBox.of the ComboBox.


SelectionStart, SelectionLength, SelectedTextSelectionStart, SelectionLength, SelectedText runtime-onlyruntime-only properties and do not appear in the property sheet. properties and do not appear in the property sheet. contain information about the current textual selection in the contain information about the current textual selection in the

textbox portion of the ComboBox (or allow the selection to be textbox portion of the ComboBox (or allow the selection to be set). set).

SelelectionStartSelelectionStart The start of the selection. The start of the selection.

SelelectionLengthSelelectionLength indicates the length of the current selection (SelLength will be 0 when the 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). selection is an insertion point rather than a selected range of text).

SelectedText SelectedText contains the actual text string corresponding to the selection (and allows the contains the actual text string corresponding to the selection (and allows the

selection to be replaced by a new text string).selection to be replaced by a new text string).

ComboBox EventsComboBox Events

Private Sub Private Sub namename_TextChanged(ByVal sender _TextChanged(ByVal sender As System.Object, ByVal e As As System.Object, ByVal e As System.EventArgs)System.EventArgs) occurs whenever the text associated with the ComboBox occurs whenever the text associated with the ComboBox

changes. changes. This event handler, rather than the Click handler, is often This event handler, rather than the Click handler, is often

the primary one used for handling modifications to a the primary one used for handling modifications to a ComboBox.ComboBox.

2.4.2 HE: Aesthetics and Minimalist Design2.4.2 HE: Aesthetics and Minimalist Design

Minimalist Design Minimalist Design Date/Time Control Panel Applications of this Heuristic Date/Time Control Panel Applications of this Heuristic Example UAR — TimeZone ListBox Is Not Good Example UAR — TimeZone ListBox Is Not Good Sometimes an Interface Aspect Will Violate Many Sometimes an Interface Aspect Will Violate Many

HeuristicsHeuristics

Minimalist DesignMinimalist Design

novicenovice computer users, are easily overwhelmed computer users, are easily overwhelmed by a screen that is full of tabs, buttons, dialogs, by a screen that is full of tabs, buttons, dialogs, and menu items. and menu items.

A minimalist design A minimalist design directs the user’s attention to the current taskdirects the user’s attention to the current task minimizes the presence of irrelevant information. minimizes the presence of irrelevant information.

In a process having several steps, a minimalist In a process having several steps, a minimalist design presents design presents only information important to only information important to the current stepthe current step: :

Make strategic use of white spaceMake strategic use of white space to focus the to focus the user's attention on critical areas. user's attention on critical areas.

Minimalist DesignMinimalist Design

Limit the numbersLimit the numbers of widgets (boxes, buttons, of widgets (boxes, buttons, menus, tabs, etc.) that the user must focus on at menus, tabs, etc.) that the user must focus on at one time. one time.

Reduce the number of choices the user must Reduce the number of choices the user must handle at one time. handle at one time.

Group related tasks together. Group related tasks together.

Example Example

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

The tabs focus the user on one sub-The tabs focus the user on one sub-task and reduce the amount of task and reduce the amount of information on the screen at one information on the screen at one time:time:

Date/Time Control Panel Applications of this Heuristic Date/Time Control Panel Applications of this Heuristic

Example UAR — Time Zone ListBox Is Not Example UAR — Time Zone ListBox Is Not Good Good

HE18HE18

Take AssessmentTake Assessment

Exercise 5Exercise 5

2.5 Creating with Combinations2.5 Creating with Combinations

2.5.1 UpDown and Scrollbar Controls 2.5.1 UpDown and Scrollbar Controls 2.5.2 TextBox Controls 2.5.2 TextBox Controls

2.5.1 UpDown and Scrollbar Controls2.5.1 UpDown and Scrollbar Controls

UpDown Control Description UpDown Control Description UpDown Properties UpDown Properties

Value, Text Value, Text Min, Max, Increment Min, Max, Increment Wrap Wrap

UpDown Events UpDown Events Scrollbar Control Description Scrollbar Control Description Scrollbar Properties Scrollbar Properties

Value Value Minmum, Maximum Minmum, Maximum SmallChange, LargeChange SmallChange, LargeChange

Scrollbar EventsScrollbar Events

Controls Extend the VB capabilityControls Extend the VB capability strengths of Visual Basicstrengths of Visual Basic

it can be it can be extendedextended with new controls and other components with new controls and other components a large library of controls is available that work with the Visual a large library of controls is available that work with the Visual

Basic systemBasic system work in Visual Basic like any other controlwork in Visual Basic like any other control

ControlsControls mostly interactivemostly interactive more computationalmore computational

providing an interactive and/or programmatic interface to providing an interactive and/or programmatic interface to some software package, some software package, hardware capability, or hardware capability, or network servicenetwork service

A suitable way for iterative development, A suitable way for iterative development, via a Visual via a Visual Basic controlBasic control Making a software package or other capability accessible in an Making a software package or other capability accessible in an

interactive environmentinteractive environment

UpDown Control Description(vb6)UpDown Control Description(vb6)

In visual basic 6In visual basic 6 not one of the default controlsnot one of the default controls It must be loaded from a libraryIt must be loaded from a library How to get it ?How to get it ?

choose "Components..." from the "Project" menuchoose "Components..." from the "Project" menu press the corresponding checkbox and pressing OKpress the corresponding checkbox and pressing OK Load the "Load the "Microsoft Windows Common Controls-2 6.0Microsoft Windows Common Controls-2 6.0" "

librarylibrary

In VB net , on the toolboxIn VB net , on the toolbox Operation Operation demo demo in VBin VB

allows specification of a value within a rangeallows specification of a value within a range supports only a limited set of interactionssupports only a limited set of interactions

Vs. the Scrollbar control ( )Vs. the Scrollbar control ( ) not providenot provide any indication of the value it any indication of the value it

maintainsmaintains is almost always used in conjunction with another is almost always used in conjunction with another

control, to display its value ,control, to display its value ,Ex.Ex. TextBoxTextBox labellabel

UpDown Control Description(vb6)UpDown Control Description(vb6)

UpDown Control DescriptionUpDown Control Description

The UpDown control appears as two arrows,The UpDown control appears as two arrows, one pointing up and the other pointing downone pointing up and the other pointing down or alternately left and rightor alternately left and right The user operates the control by pressing one of the buttons.The user operates the control by pressing one of the buttons.

As shown below, UpDown contruls come in two varieties As shown below, UpDown contruls come in two varieties NumericUpDownNumericUpDown

controls are used for numeric datacontrols are used for numeric data DomainUpDownDomainUpDown

normally used for text, Other than the data type, these controls normally used for text, Other than the data type, these controls operate in the same way and use the same properties.operate in the same way and use the same properties.

UpDown Properties(vb6)UpDown Properties(vb6)

Value Value contains the contains the integer valueinteger value corresponding to the corresponding to the current settingcurrent setting

OrientationOrientation determines whether the UpDown control appears in a horizontal determines whether the UpDown control appears in a horizontal

or vertical orientation. or vertical orientation. "0-cc2OrientationVertical“"0-cc2OrientationVertical“ "1-cc2OrientationHorizontal""1-cc2OrientationHorizontal"

Min, Max, Increment, WrapMin, Max, Increment, Wrap determine the range of values the UpDown control's value determine the range of values the UpDown control's value the value is changed when pressing the up or down button, the value is changed when pressing the up or down button, When When wrapwrap: the value wraps around when it reaches 0 or its : the value wraps around when it reaches 0 or its

maximum.maximum.

BuddyControlBuddyControl establishes a control that is to be linked to the UpDown control's establishes a control that is to be linked to the UpDown control's

valuevalue BuddyPropertyBuddyProperty

specifies which property of the buddy control is to be linked to the specifies which property of the buddy control is to be linked to the UpDown control's valueUpDown control's value

SyncBuddy SyncBuddy When set to True, the value of the UpDown control is copied to When set to True, the value of the UpDown control is copied to

the BuddyControl and BuddyProperty properties. the BuddyControl and BuddyProperty properties. be used to enable automatic display of the control's value.be used to enable automatic display of the control's value.

Alignment Alignment where the UpDown appears with respect to its buddy control.where the UpDown appears with respect to its buddy control.

"0-cc2AlignmentLeft" "0-cc2AlignmentLeft" "1-cc2AlignmentRight""1-cc2AlignmentRight"

UpDown Properties-buddy, working together(vb6)UpDown Properties-buddy, working together(vb6)

UpDown PropertiesUpDown Properties

Value, TextValue, Text contains the integer value corresponding to the current contains the integer value corresponding to the current

setting of the control. setting of the control. NumericUpDown uses the value propertyNumericUpDown uses the value property DomainUpDown uses the text propertyDomainUpDown uses the text property

Min, Max, IncrementMin, Max, Increment determine the range of values the determine the range of values the NumericUpDownNumericUpDown

control's value may take on, the amount the value is control's value may take on, the amount the value is changed when pressing the up or down button.changed when pressing the up or down button.

WrapWrap determines whether the value wraps around when it determines whether the value wraps around when it

reaches its minimum or its maximumreaches its minimum or its maximum

UpDown EventsUpDown Events

Private Sub Private Sub namename_Click(ByVal sender As _Click(ByVal sender As System.Object, ByVal e As System.EventArgs)System.Object, ByVal e As System.EventArgs) This event occurs when the user clicks the down button. This event occurs when the user clicks the down button.

ScrollBar Control DescriptionScrollBar Control Description

specify a value within a range. specify a value within a range. E.g. specify the position of a scrolled page or listE.g. specify the position of a scrolled page or list

used for inputting of an integer value. used for inputting of an integer value. do do not directly displaynot directly display their integer value their integer value have a wider range than the number of pixels available have a wider range than the number of pixels available

to them to specify the value, to them to specify the value, not used for particular or exactnot used for particular or exact values are needed. values are needed.

E.g, they are typically employed in situations where a user needs E.g, they are typically employed in situations where a user needs to adjust a quantitive value relativelyto adjust a quantitive value relatively

degree (as in the saturation of a color setting) ordegree (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 position (as in the visible portion of page in a window relative to the page's

beginning).beginning).


As shown below, ScrollBars come in vertical and As shown below, ScrollBars come in vertical and horizontal varieties that are represented by thehorizontal varieties that are represented by the VScrollBarVScrollBar HScrollBarHScrollBar

Other than their orientation, these controls Other than their orientation, these controls operate in the same way and use the same operate in the same way and use the same properties and events. properties and events.


manipulate a ScrollBar in three ways. manipulate a ScrollBar in three ways. press one of the arrow buttons to perform a small press one of the arrow buttons to perform a small

movement. movement. grab the center handle of the ScrollBar and drag it to an grab the center handle of the ScrollBar and drag it to an

arbitrary position. arbitrary position. press in the area between an arrow button and the thumb press in the area between an arrow button and the thumb

in order to make a large move in order to make a large move the distances moved for a small controlled by the SmallChange the distances moved for a small controlled by the SmallChange

properties properties the distances moved for a Large controlled by the the distances moved for a Large controlled by the

LargeChange properties. LargeChange properties.


Scrollbars can hold the focus. Scrollbars can hold the focus. WhenWhen hold the hold the focusfocus, the thumb is displayed with a , the thumb is displayed with a

different pattern and the user may move the ScrollBar different pattern and the user may move the ScrollBar using the using the arrow keysarrow keys as well as the as well as the HOME, ENDHOME, END, , PageUpPageUp, and , and PageDownPageDown keys. keys.

HOME and END keys HOME and END keys take to its take to its minimum and maximumminimum and maximum values respectively. values respectively.

PageUp and PageDown keys PageUp and PageDown keys make make large moveslarge moves in the negative and positive directions in the negative and positive directions

the arrow keys the arrow keys make make smallsmall positive and negative moves. positive and negative moves.

ScrollBar PropertiesScrollBar Properties

ValueValue contains the integer value corresponding to the current contains the integer value corresponding to the current

setting of the control.setting of the control. Min, MaxMin, Max

These properties determine that range of values the These properties determine that range of values the control's value may take on. control's value may take on.

SmallChange, LargeChangeSmallChange, LargeChange determine SmallChange determine SmallChange determine LargeChange.determine LargeChange.

ScrollBar EventsScrollBar Events

Private Sub Private Sub namename_ValueChanged(ByVal sender _ValueChanged(ByVal sender As System.Object, ByVal e As As System.Object, ByVal e As System.EventArgs) System.EventArgs) invoked whenever the value of the ScrollBar changes. invoked whenever the value of the ScrollBar changes. Note that Note that no Clickno Click event handler event handler is supportedis supported for for

ScrollBars.ScrollBars.

2.5.2 TextBox Controls2.5.2 TextBox Controls

TextBox Control Description TextBox Control Description Properties Properties

Text Text TextAlign TextAlign Font Font BorderStyle BorderStyle PasswordChar PasswordChar MultiLine MultiLine MaxLength MaxLength Scrollbars Scrollbars ReadOnlyReadOnly SelectionStart, SelectionLength, SelectedTextSelectionStart, SelectionLength, SelectedText

EventsEvents

TextBox Control DescriptionTextBox Control Description provides a small area for entering and editing text. provides a small area for entering and editing text. support entering text with the keyboard when focused support entering text with the keyboard when focused support editing text using conventional support editing text using conventional mouse selectionmouse selection may be limited tomay be limited to

single linesingle line multi-line textmulti-line text

display text in any available fontdisplay text in any available font may be set to hide their characters for use in may be set to hide their characters for use in password password

entryentry. . support ScrollBars to hold more text than fits within support ScrollBars to hold more text than fits within

their own bounds. their own bounds. TextBoxes are most commonly used to allow users to TextBoxes are most commonly used to allow users to

enter free form textual data. enter free form textual data. If provided, they can If provided, they can limitedlimited input nature, such as numbers only. input nature, such as numbers only.

Properties Properties TextText

contains the current text being displayed in the textbox.contains the current text being displayed in the textbox. AlignmentAlignment

determines how the text appearing in the textbox is determines how the text appearing in the textbox is aligned. aligned.

0-Left Justify0-Left Justify 1-Right Justify1-Right Justify 2-Center2-Center

FontFont controls the typeface, size, and style (i.e., bold, italic, controls the typeface, size, and style (i.e., bold, italic,

etc.) that text within the textbox appears in. etc.) that text within the textbox appears in.

Properties Properties BorderStyleBorderStyle

determines whether a border is drawn around the determines whether a border is drawn around the textbox. textbox.

"0-None“"0-None“ "1-Fixed Single"."1-Fixed Single".

PasswordCharPasswordChar If set, characters typed will be shown as the character If set, characters typed will be shown as the character

value rather than actually typed.value rather than actually typed. used for fields that contain passwords or other sensitive used for fields that contain passwords or other sensitive

data that should not be divulged.data that should not be divulged. MultiLineMultiLine

determines whether the control will accept multiple determines whether the control will accept multiple lines of textlines of text

"True“ for multiline"True“ for multiline "False“ for one line"False“ for one line


MaxLengthMaxLength indicates a maximum number of characters that may be indicates a maximum number of characters that may be

entered into the control. entered into the control. "0" indicates that no limit is to be imposed."0" indicates that no limit is to be imposed.

ScrollbarsScrollbars indicates whether include scrollbarsindicates whether include scrollbars

"0-None", "0-None", "1-Horizontal", "1-Horizontal", "2-Vertical","2-Vertical", "3-Both"."3-Both".


ReadOnlyReadOnly When True, locks the text cannot be altered by the user.When True, locks the text cannot be altered by the user.

SelectionStart, SelectionLength, SelectedTextSelectionStart, SelectionLength, SelectedText runtime-only propertiesruntime-only properties contain information about the current textual selectioncontain information about the current textual selection SelectionStart indicated The start of the selection. SelectionStart indicated The start of the selection. SelectionLength indicates the length of the current SelectionLength indicates the length of the current

selection (SelectionLength will be zero when the selection (SelectionLength will be zero when the selection is an insertion point rather than a selected range selection is an insertion point rather than a selected range of text). of text).

SelectedText contains the actual text string SelectedText contains the actual text string corresponding to the selection (and allows the selection corresponding to the selection (and allows the selection to be to be replacedreplaced by a new text string). by a new text string).

EventsEvents

Private Sub name_TextChanged(ByVal sender Private Sub name_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs)As Object, ByVal e As System.EventArgs) invoked whenever the text within the textbox changes. invoked whenever the text within the textbox changes. The Text property can be used to determine the contents The Text property can be used to determine the contents

of the textbox after the change.of the textbox after the change.

2.6 Creating with Containers — Evaluating with 2.6 Creating with Containers — Evaluating with One HeuristicOne Heuristic

2.6.1 Frame Controls (2.6.1 Frame Controls ( 应为应为 GroupBox )GroupBox ) 2.6.2 Tabbed Dialog Controls 2.6.2 Tabbed Dialog Controls 2.6.3 HE: Recognition Rather than Recall 2.6.3 HE: Recognition Rather than Recall

xqw

05网教(w12)

2.6.1 GroupBox Controls2.6.1 GroupBox Controls

GroupBox Control GroupBox Control Description Description

Properties Properties BorderStyle BorderStyle

Events Events

GroupBoxes Control DescriptionGroupBoxes Control Description

The Frame control is the The Frame control is the simplestsimplest example of a example of a container. container.

containers (including Frames) can be placed containers (including Frames) can be placed inside other containers. inside other containers. allows allows hierarchical organizationhierarchical organization of the interface of the interface

GroupBoxes Control DescriptionGroupBoxes Control Description

GroupBoxes are normally used to GroupBoxes are normally used to group logically group logically related sets of interface componentsrelated sets of interface components so that users so that users can mentally categorize them - this tends to can mentally categorize them - this tends to make learning them easier. make learning them easier.

By default, GroupBoxes appear with a By default, GroupBoxes appear with a borderborder and a and a captioncaption. .

How to place controls into a container?How to place controls into a container?

This can be done in two ways. This can be done in two ways. A new control will be placed inside a container if it is A new control will be placed inside a container if it is

initially "drawn" completely within that container.initially "drawn" completely within that container. move an existing control into a containermove an existing control into a container

cutting andcutting and pastingpasting

How to determine whether a control is How to determine whether a control is insideinside a container a container

The status of a control can be determined in one The status of a control can be determined in one of two ways of two ways by moving the container by moving the container

controls inside the container will move with it, others will not controls inside the container will move with it, others will not by moving the control by moving the control

a control will be limited to stay within the bounds of its a control will be limited to stay within the bounds of its parentparent container and will not move outside itcontainer and will not move outside it


BorderStyle BorderStyle （（ Frame Control In VB6Frame Control In VB6 ）） This property may be set to This property may be set to

"None" to make a Frame with no border (or caption)"None" to make a Frame with no border (or caption) "Single Fixed" to obtain the default appearance shown above."Single Fixed" to obtain the default appearance shown above.

EventsEvents

Normally, GroupBoxes do not respond to inputs. Normally, GroupBoxes do not respond to inputs. For implement For implement special purpose behaviorspecial purpose behavior, ,

GroupBoxes can respond to some of the common GroupBoxes can respond to some of the common event types - such as event types - such as ClickClick MouseDownMouseDown MouseMoveMouseMove MouseUpMouseUp

2.6.2 Tabbed Dialog Controls2.6.2 Tabbed Dialog Controls

Tabbed Dialog Control Description Tabbed Dialog Control Description Properties Properties

TabIndex TabIndex TabPages, Multiline TabPages, Multiline

Events Events

xqw

05硕本（w12）

Tabbed Dialog Control Description(vb6)Tabbed Dialog Control Description(vb6)

Where to get ?Where to get ? is is notnot one of the default controls that appear in the toolbox palette one of the default controls that appear in the toolbox palette

To load To load

choose "choose "ProjectProject“ >>> "“ >>> "ComponentsComponents..." ..." Load the "Load the "Microsoft Tabbed Dialog Control 6.0Microsoft Tabbed Dialog Control 6.0" control " control

often used when more options or other interface often used when more options or other interface elements are needed than will comfortably elements are needed than will comfortably fit in a single fit in a single FrameFrame. .

The Tabbed Dialog control provides a series of different The Tabbed Dialog control provides a series of different views that appear to be views that appear to be stackedstacked on top of one another. on top of one another.

Each of these views is actually a separate container that Each of these views is actually a separate container that can contain a series of controls. can contain a series of controls.

Tabbed Dialog Control Description(vb6)Tabbed Dialog Control Description(vb6)

A series of A series of tabstabs with captions (designed to look with captions (designed to look like file folder tabs) are provided, like file folder tabs) are provided, one for each of the containers. one for each of the containers. Clicking on a particular labeled tab brings the container Clicking on a particular labeled tab brings the container

associated with that tab to the front. These containers associated with that tab to the front. These containers are sometimes referred to as are sometimes referred to as tabstabs, and sometimes they , and sometimes they are called are called panespanes. .

Tabbed Dialog Control DescriptionTabbed Dialog Control Description

is a is a containercontainer that is often used when more options or that is often used when more options or other interface elements are needed than will other interface elements are needed than will comfortably fit in a single Frame. comfortably fit in a single Frame.

provides a series of different views that appear to be provides a series of different views that appear to be stackedstacked on top of one another. on top of one another.

Each of these views is actually a separate container that Each of these views is actually a separate container that can contain a series of controls. can contain a series of controls.

A series of A series of tabstabs with captions (designed to look like file with captions (designed to look like file folder tabs) are provided, one for each of the folder tabs) are provided, one for each of the containers. containers.

Clicking on a particular labeled tab brings the container Clicking on a particular labeled tab brings the container associated with that tab to the front. associated with that tab to the front.

These containers are referred to as TabPages.These containers are referred to as TabPages.

Tabbed Dialog Control DescriptionTabbed Dialog Control Description

At design time, a Tabbed Dialog control can be At design time, a Tabbed Dialog control can be manipulated by pressing on a particular labeled manipulated by pressing on a particular labeled tab, which brings forward the container tab, which brings forward the container associated with that tab—which can then be associated with that tab—which can then be edited like any other container by placing edited like any other container by placing controls inside it, moving the controls inside it, controls inside it, moving the controls inside it, or deleting controls inside it. or deleting controls inside it.

DemoDemo

Properties (vb6)Properties (vb6)

Tab Tab This property controls which tab is active (appears to be This property controls which tab is active (appears to be

on top of the stack of containers). When a particular tab on top of the stack of containers). When a particular tab is active, the Caption property refers to the caption for is active, the Caption property refers to the caption for that particular tab. Note that tabs are numbered from that particular tab. Note that tabs are numbered from zero to N-1, where N is the number of tabs.zero to N-1, where N is the number of tabs.

TabsTabs The Tabs property determines how many different tabs The Tabs property determines how many different tabs

the Tabbed Dialog control has. the Tabbed Dialog control has. TabsPerRow TabsPerRow

The TabsPerRow determine how many tabs can appear The TabsPerRow determine how many tabs can appear in one row of tabs without creating another row.in one row of tabs without creating another row.

Properties (vb6)Properties (vb6)

TabHeight, TabMaxWidth, WordWrap TabHeight, TabMaxWidth, WordWrap These properties control the size of the labeled tab. TabHeight determines the These properties control the size of the labeled tab. TabHeight determines the

height of each tab. Tab change width to accommodate their labels. height of each tab. Tab change width to accommodate their labels. The TabMaxWidth property determines how wide a tab gets before it starts The TabMaxWidth property determines how wide a tab gets before it starts

clipping its label, or wrapping the label text to another line. clipping its label, or wrapping the label text to another line. The WordWrap property determines whether clipping or wrapping of the long The WordWrap property determines whether clipping or wrapping of the long

labels occurs.labels occurs.

TabOrientation TabOrientation This property can be set to place the tabs of the dialog box along different This property can be set to place the tabs of the dialog box along different

edges. edges. "0-ssTabOrientationTop" places the tabs at the top"0-ssTabOrientationTop" places the tabs at the top "1-ssTabOrientationBottom" places them at the bottom of the dialog box"1-ssTabOrientationBottom" places them at the bottom of the dialog box "2-ssTabOrientationLeft" place the tabs along the left edges"2-ssTabOrientationLeft" place the tabs along the left edges "3-ssTabOrientationRight"' place the tabs along the right edges "3-ssTabOrientationRight"' place the tabs along the right edges

Note that Note that not all fonts support rotationnot all fonts support rotation, so use of the left and right orientation , so use of the left and right orientation may be limited in practice by the font chosen for labels may be limited in practice by the font chosen for labels


TabIndex TabIndex controls which tab is active (appears to be on top of the controls which tab is active (appears to be on top of the

stack of containers). stack of containers). When a particular tab is active, the Caption property When a particular tab is active, the Caption property

refers to the caption for that particular tab. refers to the caption for that particular tab. tabs are numbered from zero to N-1, where N is the tabs are numbered from zero to N-1, where N is the

number of tabs.number of tabs. TabPages, MultiLine TabPages, MultiLine

determines how many different tabs the Tabbed Dialog determines how many different tabs the Tabbed Dialog control has. The MultiLine determine whether tabs can control has. The MultiLine determine whether tabs can appear in more than one row.appear in more than one row.

EventsEvents

The Tabbed Dialog control normally handles the The Tabbed Dialog control normally handles the inputs necessary to inputs necessary to switch between its containersswitch between its containers internally. internally.

event handlers are event handlers are notnot normally used with normally used with Tabbed Dialog controls themselves. Tabbed Dialog controls themselves.

It is possible to handle various standard events It is possible to handle various standard events "manually" in order to implement special "manually" in order to implement special effects.effects. 例如，在切换例如，在切换 tabtab 时做输入的合法性检查等时做输入的合法性检查等

2.6.3 HE: Recognition Rather than Recall2.6.3 HE: Recognition Rather than Recall

Show All Objects and Actions that are Available Show All Objects and Actions that are Available Reduce Demands on Memory Reduce Demands on Memory Date/Time Control Panel Applications of this Heuristic Date/Time Control Panel Applications of this Heuristic Example UAR — Presentation of Time Zone Setting is Example UAR — Presentation of Time Zone Setting is

Good.Good.

xqw

04软工（w12）04空信（w12）

People are better at recognition than they are at People are better at recognition than they are at unaided recall.unaided recall. E.g.,E.g., there are people who can't remember landmarks there are people who can't remember landmarks

well enough to write down directions for driving from well enough to write down directions for driving from their house to a place across town, but can themselves their house to a place across town, but can themselves drive to that place easily. drive to that place easily.

That is because, at each stage of the journey, they That is because, at each stage of the journey, they recognize landmarks that help them remember the next recognize landmarks that help them remember the next stage of the journey (e.g., turn left at the post office, stage of the journey (e.g., turn left at the post office, turn right at the park, go straight until the bridge, etc.).turn right at the park, go straight until the bridge, etc.).

E.g.,E.g., Learn English words , hard to recall / easily read Learn English words , hard to recall / easily read E.g.,E.g., 描述人物面部特征描述人物面部特征 v.s. v.s. 照片指认照片指认

Show All Objects and Actions that are AvailableShow All Objects and Actions that are Available

To think of this heuristic :To think of this heuristic : "out of sight, out of mind." "out of sight, out of mind."

In UI design: In UI design: Keeping all possible legal actions Keeping all possible legal actions prominent and visibleprominent and visible

（可视并且突出显示）（可视并且突出显示） to the user to the user saves the user the trouble of having to search through saves the user the trouble of having to search through

their long-term memory moment to moment in order to their long-term memory moment to moment in order to recall which actions are legalrecall which actions are legal for the task at hand. for the task at hand.

Show All Objects and Actions that are AvailableShow All Objects and Actions that are Available

Reduce Demands on MemoryReduce Demands on Memory when uses an application, two types of memory being when uses an application, two types of memory being

exercisedexercised Long-term memory retains concepts, learned over timeLong-term memory retains concepts, learned over time

such as what a "file" or "disk" issuch as what a "file" or "disk" is what it means to "open," "save," or "print" a file, and what it means to "open," "save," or "print" a file, and

so on. so on. Working memory holds recently acquired information, Working memory holds recently acquired information,

such as,such as, what is currently on the screen, what is currently on the screen, from visionfrom vision what has just been heard, and so on. what has just been heard, and so on. From hearingFrom hearing

Reduce Demands on MemoryReduce Demands on Memory

FACT :FACT : People can generally hold People can generally hold three or so itemsthree or so items

(called "chunks") in working memory for a (called "chunks") in working memory for a limited amount of time — after which the limited amount of time — after which the information fades unless it is refreshed. information fades unless it is refreshed.

An implication this has for designers of An implication this has for designers of interfacesinterfaces We should We should avoidavoid designing interfaces that designing interfaces that burden burden

users' working memory undulyusers' working memory unduly..

How to do?How to do?

Not require users to rememberNot require users to remember information from information from one screen to the next.one screen to the next.

Not rely on a user's ability to recall, but Not rely on a user's ability to recall, but show all show all possible legal actionspossible legal actions

Limit the number of itemsLimit the number of items the user must respond the user must respond to at any given momentto at any given moment Default value Default value Confirm button Confirm button


Most GUI interfaces follow the recognition Most GUI interfaces follow the recognition rather than recall heuristic quite well. rather than recall heuristic quite well.

The heuristic is violated in many The heuristic is violated in many command-line command-line or text-entry interfacesor text-entry interfaces, though, which require , though, which require the user to remember command names or the the user to remember command names or the correct format for data entry.correct format for data entry.

This control panel This control panel does not make those errorsdoes not make those errors: : all legal actions are available through the visible buttons, all legal actions are available through the visible buttons,

ListBoxes, or tabs.ListBoxes, or tabs.

Example UAR — Presentation of Time Zone Setting Example UAR — Presentation of Time Zone Setting is Goodis Good

HE22HE22

2.7 Two More Heuristics for Evaluating Interfaces2.7 Two More Heuristics for Evaluating Interfaces

2.7.12.7.1 HE: Help and Documentation HE: Help and Documentation 2.7.22.7.2 HE: Help Users Recognize, Diagnose, and HE: Help Users Recognize, Diagnose, and

Recover from ErrorsRecover from Errors


2.7.1 HE: Help and Documentation2.7.1 HE: Help and Documentation

Help vs. DocumentationHelp vs. Documentation Always Available Always Available Easily Searchable Easily Searchable Relevant to the Task Relevant to the Task Date/Time Control Panel Applications of this Date/Time Control Panel Applications of this

Heuristic Heuristic Example UAR: Aspect 1 — Some Help Example UAR: Aspect 1 — Some Help

Messages Are Imprecise Messages Are Imprecise Example UAR: Aspect 2 — Help AvailabilityExample UAR: Aspect 2 — Help Availability

We have introduced ……We have introduced ……

If the system is not an extremely simple, walk-If the system is not an extremely simple, walk-up-and-use applicationup-and-use application

help and documentation should be always help and documentation should be always AvailableAvailable easily searchableeasily searchable give concrete advice applicable to users and tasksgive concrete advice applicable to users and tasks

Help vs. DocumentationHelp vs. Documentation Help and documentation are Help and documentation are relatedrelated but but not the samenot the same..

Documentation provides general descriptive information about the system. Documentation provides general descriptive information about the system. IncludesIncludes

an overviewan overview instructions for specific aspects of the system.instructions for specific aspects of the system.

When you ask for help? help is commonly useful When you ask for help? help is commonly useful when users have when users have problemsproblems..

Help often takes the form of aHelp often takes the form of a trouble-shootingtrouble-shooting section with a table of section with a table of common problemscommon problems

FAQs (Frequently Asked Questions) list the FAQs (Frequently Asked Questions) list the problemsproblems that many users that many users have encountered and the have encountered and the solutionssolutions for those problems. for those problems.

help tries to anticipate the problems users might have and help tries to anticipate the problems users might have and provide concrete solutions for those problems.provide concrete solutions for those problems.

The difficulty lies in anticipating with reasonable precision The difficulty lies in anticipating with reasonable precision what problems users will commonly encounterwhat problems users will commonly encounter..

Help vs. DocumentationHelp vs. Documentation Documentation and help must combine Documentation and help must combine

general informationgeneral information suggestions on fixing problems. suggestions on fixing problems.

E.g.,E.g., the color settings of a monitor the color settings of a monitor documentation will include both a general description of documentation will include both a general description of

what the color settings are and specific instructions on what the color settings are and specific instructions on how to adjust them.how to adjust them.

Help will Help will extend the documentation's coverageextend the documentation's coverage of this of this topic to address topic to address common problemscommon problems users might users might encounter while changing monitor color settings. encounter while changing monitor color settings.

E.g.,E.g., a help might a help might warn userswarn users that not all that not all monitors accept all possible color settings and monitors accept all possible color settings and that it is possible to choose settings that will not that it is possible to choose settings that will not work on their monitors. work on their monitors.

Always AvailableAlways Available

ConsistentlyConsistently putting the help and documentation putting the help and documentation entry entry pointspoints in locations in locations where they are commonly foundwhere they are commonly found in in other software greatly aids users in finding them. other software greatly aids users in finding them.

E.g.,E.g., in Windows, help is always the rightmost item on the top menuin Windows, help is always the rightmost item on the top menu in Macintosh, help is always located on the Apple menu. in Macintosh, help is always located on the Apple menu.

For multi-stage processes (such as an install process)For multi-stage processes (such as an install process) Users should always be able to access help Users should always be able to access help in every stepin every step of the of the

process process be able to access both help and documentation from anywhere in be able to access both help and documentation from anywhere in

an interface. an interface.

Easily SearchableEasily Searchable

Providing documentation and help with alphabetized Providing documentation and help with alphabetized indexes is a good start, but it is not indexes is a good start, but it is not sufficientsufficient::

users will users will not necessarilynot necessarily frame their questions in the frame their questions in the language language the authorsthe authors of these facilities of these facilities useuse.. user’s language user’s language different fromdifferent from Software designer’s language Software designer’s language

E.g., color settingsE.g., color settings when a user wishes to change a monitor's background colorwhen a user wishes to change a monitor's background color searches the indexes for the topic "background color." searches the indexes for the topic "background color." if the help and documentation facilities index those instructions if the help and documentation facilities index those instructions

under "settings" and not under "background color," the user may under "settings" and not under "background color," the user may not find them. not find them.

Easily SearchableEasily Searchable

A good search facility help users quickly and A good search facility help users quickly and efficiently locate the answer they wantefficiently locate the answer they want . .

E.g.,E.g., A good search facility will allow the user to search for A good search facility will allow the user to search for

the string "background color" and will display the page the string "background color" and will display the page numbers of the passages containing that string—among numbers of the passages containing that string—among which would be the instructions the user is looking for. which would be the instructions the user is looking for.

Relevant to the TaskRelevant to the Task

help and documentation should be "help and documentation should be "context-context-sensitivesensitive"" the information they offer should be relevant to the the information they offer should be relevant to the

situation the user is currently in. situation the user is currently in. DemoDemo in Visual studio 2005 in Visual studio 2005

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

Date/Time Control Panel Applications of this Date/Time Control Panel Applications of this HeuristicHeuristic

In the top right corner, In the top right corner, there are two small there are two small buttons. The buttons. The ? button? button gives the user access to gives the user access to on-line help. on-line help.

Example UAR: Aspect 1 Example UAR: Aspect 1 — Some Help Messages — Some Help Messages Are ImpreciseAre Imprecise

HE23HE23 HE24HE24

More UARsMore UARs

There could be many more UARs concerning There could be many more UARs concerning helphelp the lack of a search facility, the lack of a search facility, the fact that only interface elements can be queried (what the fact that only interface elements can be queried (what

if the user is trying to do something that is not obviously if the user is trying to do something that is not obviously associated with an element?), etc. associated with an element?), etc.

Several more appear in the complete set of Several more appear in the complete set of UARs. UARs.

Keep the User Informed About Errors and How Keep the User Informed About Errors and How to Recover From Them.to Recover From Them.

UAR Summary. UAR Summary.

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

Error messages should be written in Error messages should be written in plain plain languagelanguage, tell the user what the problem is, tell the user what the problem is

Give Give constructive adviceconstructive advice about how to recover about how to recover from the error.from the error.

This could be considered a This could be considered a subset of the first subset of the first heuristicheuristic visibility of system statusvisibility of system status,,

It is so important and so It is so important and so often violatedoften violated, that it , that it warrants its own heuristic.warrants its own heuristic.

What We have introducedWhat We have introduced

Keep the User Informed About Errors and How to RecoverKeep the User Informed About Errors and How to Recover

An interface designer’s goalAn interface designer’s goal design interfaces preventing users from making errors. design interfaces preventing users from making errors. In the impossible event, it is vitally important to arrangeIn the impossible event, it is vitally important to arrange

a processa process to help the user understand and recover from to help the user understand and recover from the error. the error.

E.g.E.g.,, if an application cannot open a file, the application if an application cannot open a file, the application

should provide an error message stating the problem and should provide an error message stating the problem and suggesting a solution in suggesting a solution in non-technical languagenon-technical language. .

Good exampleGood example

Good example , In window systemGood example , In window system when the copy to a floppy disk and the diskette becomes when the copy to a floppy disk and the diskette becomes

full, a window pops up that displays the statements:full, a window pops up that displays the statements: The disk in destination drive is full.The disk in destination drive is full. Insert a new disk to continue.Insert a new disk to continue.

Why it is good?Why it is good? The pop-up window helps the user recognize that The pop-up window helps the user recognize that

something needs attention. something needs attention. The window's first statement ("The disk in destination The window's first statement ("The disk in destination

drive is full") diagnoses the problem. drive is full") diagnoses the problem. The window's second statement ("Insert a new disk to The window's second statement ("Insert a new disk to

continue") gives instructions for recovering from the continue") gives instructions for recovering from the error. error.

On a MacintoshOn a Macintosh

the system first the system first checkschecks to see if there is to see if there is enough enough roomroom on the floppy disk for the materials being on the floppy disk for the materials being copied, copied,

if there is not, it if there is not, it doesn't start the copying doesn't start the copying processprocess..

This heuristic doesn’t apply to this prototypeThis heuristic doesn’t apply to this prototype

Why?Why? The Date/Time control panel prevents errors soThe Date/Time control panel prevents errors so

effectivelyeffectively that there is that there is never a neednever a need for it to display for it to display error messages error messages

No chance to make a mistake and misunderstandNo chance to make a mistake and misunderstand

Take AssessmentsTake Assessments

Exercise 6Exercise 6 Multiple-Choice Quiz 7 Multiple-Choice Quiz 7

2.8 Menu Controls and Some Example UARs2.8 Menu Controls and Some Example UARs

2.8.12.8.1 Menu Controls Menu Controls 2.8.22.8.2 Example UARs Example UARs

Assessments Assessments Practical Quiz 2 Practical Quiz 2

2.8.1 Menu Controls2.8.1 Menu Controls

Menu Control Description Menu Control Description Properties Properties

Checked Checked Enabled Enabled Shortcut Shortcut

Events Events

Menu Control DescriptionMenu Control Description

The Menu control The Menu control Provides Provides a set of pull-down menusa set of pull-down menus that can be that can be attached attached

to a formto a form. . consist of a set of top-level textual captions displayed consist of a set of top-level textual captions displayed

horizontally at the top of a window. horizontally at the top of a window. Pressing on a caption causes a menu to drop down that Pressing on a caption causes a menu to drop down that

consists of a series of menu items that have textual consists of a series of menu items that have textual labels. labels.

Hierarchical menus that support Hierarchical menus that support submenussubmenus "under" a "under" a menu item are also supported. menu item are also supported.

Shortcut and Separator lines Shortcut and Separator lines

shortcut shortcut placing an "&" before the desired shortcut character in the item's placing an "&" before the desired shortcut character in the item's

caption. caption. menu items can have shortcut keys accessible to the user using the menu items can have shortcut keys accessible to the user using the

SHIFT, CONTROL, function keys, and other keys. SHIFT, CONTROL, function keys, and other keys. shortcut keys are specified in the Shortcut property. shortcut keys are specified in the Shortcut property.

Separator linesSeparator lines allow the menu items to be segregated into logical groupings. allow the menu items to be segregated into logical groupings. help provide a structure that allows users to help provide a structure that allows users to

organize the concepts of a menu organize the concepts of a menu make learning menu items easier. make learning menu items easier.

How to place A separator line?How to place A separator line? creating an item whose caption is creating an item whose caption is a single minus sign ("-").a single minus sign ("-").


Checked Checked determines whether a check mark appears next to the determines whether a check mark appears next to the

menu item.menu item. Enabled Enabled

When False, the Menu is disabled and is drawn in a gray When False, the Menu is disabled and is drawn in a gray colorcolor

ShortcutShortcut indicates the shortcut character for the menu item. indicates the shortcut character for the menu item. IncludeInclude

a letter key modified by SHIFT and/or CONTROL, a letter key modified by SHIFT and/or CONTROL, a function keya function key a function key modified by SHIFT and/or CONTROLa function key modified by SHIFT and/or CONTROL a few other keys.a few other keys.

EventsEvents

Private Sub Private Sub namename_Click(ByVal sender As _Click(ByVal sender As Object, ByVal e As System.EventArgs) Object, ByVal e As System.EventArgs) The only event generated by Menus is the Click event, The only event generated by Menus is the Click event,

which is invoked when the menu item is clicked. which is invoked when the menu item is clicked.

2.8.2 Example UARs2.8.2 Example UARs

All these UARs can be found in the AppendixAll these UARs can be found in the Appendix Please read them carefully Please read them carefully

Take AssessmentsTake Assessments

Practical Quiz 2 Practical Quiz 2 Exam2 (week 15)Exam2 (week 15)

Multiple-choice quizMultiple-choice quiz Practical quizPractical quiz

unit 2. interfaces: creating with visual basic, evaluating with usability heuristics

Documents

system time

operationthe date time

operationthe time zone

label control propertiestext

simplest control

runtimeevery control

system date

control names changesyou