-
HUMAN COMPUTER INTERACTION B.TECH III YR II SEMESTER (TERM
08-09)UNIT 5 PPT SLIDESTEXT BOOKS: The essential guide to user
interface design, Wilbert O Galitz, Wiley DreamaTech. Designing the
user interface. 3rd Edition Ben Shneidermann , Pearson Education
Asia.No. of slides: 123
-
INDEX UNIT 5 PPT SLIDESS.NO. TOPIC LECTURE NO. PPTSLIDES
Windows and Navigation L30 L30.1 to L30.11 Schemes L31 L31.1 to
L31.18Selection of windows L32L32.1 to L32.9 L33L32.1 to L32.143.
Selection of devices-based L34 L34.1 to L34.10 Controls L35 L35.1
to L35.6Screen-based Controls L36 L36.1 to L36.29 L37 L37.1 to
L37.23 5. REVISION L38
-
Structures of MenusSingle MenusNo other menus will follow
necessitating additional user choices
Develop System Menus and Navigation Schemes
Lecture 30 slide 1
-
Structures of MenusSequential Linear Menus
Choice 1Choice 2Choice 3Menu 1Menu 2Menu 3
Lecture 30 slide 2
-
Structures of MenusSimultaneous Menus
Choice 1Choice 2Choice 3Choice 1Choice 2Choice 3Choice 1Choice
2Choice 3Choice 1Choice 2Choice 3ALTERNATIVE 1ALTERNATIVE
3ALTERNATIVE 2ALTERNATIVE 4
Lecture 30 slide 3
-
Structures of MenusHierarchical MenusWhen many relationships
exist between menu alternatives, and some menu options are only
appropriate depending upon a previous menu selection, a
hierarchical structure is the best solution
Menu 1Menu 2Menu 3Menu 4Menu 5Menu 6Menu 7Menu 8
Lecture 30 slide 4
-
Structures of MenusConnected MenusThis menu gives you a full
control over the navigation flow
Lecture 30 slide 5
-
Structures of MenusEvent-Trapping MenusProvide ever-present
background of control over the systems state and parameters while
the user is working on a foreground taskServe three
functionsImmediately change some parameter in the current
environment (bold text)Take user out of current environment to
perform function (spell check)Exit and allow user to go to new
environment (exit)
Lecture 30 slide 6
-
Functions of MenusNavigation to a New Menu
Execute an Action or Procedure
Displaying Information
Data or Parameter Input
Lecture 30 slide 7
-
Content of MenusMenu ContextProvides information to keep the
user oriented
Menu TitleProvides the context for the current set of
choices
Choice Descriptions: Descriptions can range from a mnemonic,
numeric or alphabetized listing
Completion InstructionsTell users how to indicate their
choices
Lecture 30 slide 8
-
Formatting of MenusConsistencyProvide consistency in
menuOrganization, presentation, and choice orderingDisplayFrequent
referencesPermanently display the menu in an area of the screen
that will not obscure other screen dataOccasional
referencesPresentationShould be obvious with a unique and
consistent structure
Lecture 30 slide 9
-
Formatting of MenusOrganizationProvide a main menuDisplayAll
relevant alternatives (gray-out inactive choices)Minimize number of
menu levelsNumber of menu choices presented on a screen4-8 choices
without logical grouping of elements18-24 choices with logical
groupings of elements with no more than 10 items within a
groupNever require menus to be scrolled
Lecture 30 slide 10
-
Formatting of MenusComplexityProvide both simple and complex
menusItem ArrangementOrient for top-to-bottom readingLeft justify
descriptionsOrganize for left to right readingOrderingNumeric
orderSequence/Frequency of occurrenceImportanceSemantic
similarity
Lecture 30 slide 11
-
GroupingsCreate grouping of items that are logical, unique,
meaningful and mutually exclusive
Present no more than six or seven groupings on screen
Separate grouping created through eitherWider spacing, or a thin
ruled line
Provide immediate access to critical or frequently chosen
items
Lecture 31 slide 1
-
Line SeparatorSeparate vertically arrayed grouping with subtle
solid linesSeparate vertically arrayed subgroupings with subtle
dotted or dashed linesFor independent groupingsExtend the line to
the left and right menu borders
Line Separator
Lecture 31 slide 2
-
Phrasing the MenuMenu Titles: Should be Short, Simple,
Distinctive titleMenu Choice Description:Can be single, compound or
multiple wordsUse task-oriented not data-oriented wordingMust never
use the same wording as its menu titleIdentical choices on
different menus should be worded identicallyKeyboard
AcceleratorsCtrl+B or (Ctrl+B)Keyboard EquivalentsNormal, Bold,
Italic
Lecture 31 slide 2
-
Phrasing the MenuIntent IndicatorsTo a cascade indicator: place
a triangle or right-pointing solid arrow following the choice To a
window indicator: place ellipsis (...) immediately follow the
choice
Window indicatorCascade indicator
Lecture 31 slide 3
-
Selecting Menu ChoicesInitial Cursor PositioningChoice
SelectionPointersKeyboardsSelection/ExecutionCombining
techniquesDefaultsProvide a default whenever possible (as Bold
Text)Unavailable ChoicesShould be dimmed or grayed out
Lecture 31 slide 4
-
Mark Toggles or SettingPurposeUse to designate that an item or
feature is active over a relatively long period of timeUse to
provider a reminder that an item or feature is active or
inactive
Position the indicator to the left of the optionFor situations
where several nonexclusive choices may be selected, consider
including one alternative that deselects all items an reverts the
state to the normal condition
Bold Ctrl+B Italic Ctrl+I
Lecture 31 slide 5
-
Toggled Menu ItemsPurposeUse to designate two opposite commands
that are accessed frequentlyUse when the menu item displayed will
clearly indicate that the opposite condition currently exists
Provide a meaningful, fully spelled-out description of
actionBegin with a clear verbUse mixed-case letter
Hide Grid View Show Grid View
Lecture 31 slide 6
-
Kinds of Graphical MenusMenu BarPull-Down BarCascading Menu
BarPop-Up MenuIconic Menu
Lecture 31 slide 7
-
Menu BarAdvantageAlways visibleEasy to browseDo not obscure the
screen working areaAllow for use of keyboard
equivalentsDisadvantageConsume a full row of screen spaceRequire
looking away from the main working area to findRequire moving
pointer from the main working area to selectHorizontal orientation
is less efficient for scanning
Lecture 31 slide 8
-
Menu BarAll primary windows must have a menu barAll menu bars
must have an associated pull-down menu containing at least two
choicesDo not allow the user to turn off the display of the menu
barLocate at the top of the screen, just below the screen titleUse
single-word choices whenever possible
Lecture 31 slide 9
-
Menu BarOrder choice left-to-right withMost frequent choices to
left/ Related information grouped togetherHelp, when included
should be located at the right sideLayout: xFilexxxEditxxxOptions
HelpxSeparate the bar from the remainder of the screen byA
different background or Solid lines above and belowUse reverse
color selection cursor to surround the choice
Lecture 31 slide 10
-
Pull-Down MenuProper UsageA small number of itemsItems best
represented textuallyItems whose content rarely changesAdvantagesNo
window space is consumed when they r not usedAllow for display of
both keyboard equivalents and acceleratorsVertical orientation
permits more choices to be displayedDisadvantageRequire searching
and selectingRequire moving the pointer out of working area to
selectMay obscure the screen working area
Lecture 31slide 11
-
Pull-Down MenuGray-out or dim items that can not be
chosenPosition the pull-down directly below the selected menu bar
choiceRestrict to no more than 5-10 choicesPlace frequent or
critical items at the topMulticolumn menus are not desirableAlight
the first character of the pull-down descriptions under the second
character of the applicable menu bar choice
Lecture 31 slide 12
-
Pull-Down MenuIf a menu item establishes or changes the
attributes of data or properties of the interface, mark the pull
down choice or choices whose state is current or active On
Grouping:Mark Toggles or SettingCascade and Leading to other
windows indicatorKeyboard Equivalents and Accelerators
Lecture 31 slide 13
-
Cascading MenusAdvantage:Top-level menus are simplified because
some choices are hiddenMore first-letter mnemonics are available
because menus possess fewer alternativesHigh-level command browsing
is easier because subtopics are hiddenDisadvantageAccess to submenu
items requires more stepsAccess to submenu items require a change
in pointer movement
Lecture 31 slide 14
-
Cascading MenusPlace an arrow or right-pointing triangle to the
right of each menuLeave the choice leading to the cascading menu
highlightedDo not exceed three menu levels (two cascades)
Lecture 31 slide 15
-
Pop Up MenuChoices may be also presents alternatives or choices
within the context of the taskPop-up menus may be requested when
the mouse pointer is positioned over a designated or hot area of
screen (a window border) or over a designed iconAdvantageThey do
not use window space when not displayedThey appear in the working
areaDisadvantageThey existence must be learned and rememberedMay
obscure the screen working areaRequire a special action to see the
menu (Mouse click)
Lecture 31 slide 16
-
Iconic MenuUse to remind user of the functions, commands,
application choicesCreate icons that Help enhance recognition and
hasten option selectionMeaningful and clearly represent choices
Lecture 31 slide 17
-
Select the Proper Kinds of Windows
A window is an area of the screen that contains a particular
view of some area of the computer or some portion of a persons
dialog with the computer
Lecture 32 slide 1
-
ContentA windows characteristicsA windows componentsA windows
presentation stylesThe types of windows availableOrganizing window
system functionsA windows operationsWeb system frames and pop-up
windows
Lecture 32 slide 2
-
Window CharacteristicsA name or title, allowing it to be
identifiedA size in height and width (which can vary)Only active
windows can have their contents alteredA window may be partially or
fully hidden behind another windowInformation with in a window may
extend beyond windows display areaPresentation is arranged in
relation to other windows (tiled, overlapping, or cascading)Methods
for manipulation of the window on the screenIts highlight, that is,
the part that is selected
Lecture 32 slide 3
-
Windows are useful in the followingPresentation of Different
Levels of InformationPresentation of Multiple Kinds of
InformationSequential Presentation of Levels or Kinds of
InformationAccess to Different Sources of InformationCombining
Multiple Sources of InformationPerform More Than One
TaskRemindingMonitoringMultiple Representations of the Same
Task
Lecture 32 slide 4
-
Components of a WindowFrame (Border)Title Bar Title Bar
IconWindow Sizing ButtonsWhats This ButtonMenu BarStatus BarScroll
Bars
Split Box( Split Bar)ToolbarCommand AreaSize GripWork Area
Lecture 32 slide 5
-
Window Presentation StylesTiled WindowsThey are easier,
according to studies, for novice or inexperienced people to
learnYield better user performance for tasks where the data
requires little window manipulation to complete the task
Only a limited number can be displayed in the screen area
availableAs windows are opened or closed, existing windows change
in size . This can be annoyingAs the number of displayed windows
increases, each window can get very tiny
Lecture 32 slide 6
-
Window Presentation StylesOverlapped WindowsVisually, their look
is 3-D, resembling the desktop that is familiar to the userWindows
can maintain larger sizesWindows can maintain consistent sizes,
position
They are operationally much more complex than tiled windows.
More control functions require greater user attention and
manipulationWindows themselves can be lost behind other windows and
be resumed not to exist
Lecture 32 slide 7
-
Window Presentation StylesCascading Windows (Special type of
overlapping window)No window is ever completely hiddenBringing any
window to the front is easierIt provides simplicity in visual
presentation and cleanness
Lecture 32 slide 8
-
Picking a Presentation StyleUse tiled window for:Single task
activitiesData that needs to be seen simultaneouslyTasks requiring
little window manipulationNovice or inexperienced users
Use overlapping windows for:Switching between tasksTasks
necessitating a greater amount of window manipulationExpert or
experienced usersUnpredictable display contents
Lecture 32 slide 9
-
Type of WindowsPrimary WindowShould represent an independent
function or applicationUse to present constantly used window
components and controlsUse for presenting information that is
continually updated (Date and time)
Often called main window or application window
Do not divide independent function into two or more primary
windows
Lecture 33 slide 1
-
Type of WindowsSecondary WindowsA dependent secondaryIt can only
be displayed from a command on the interface of its primary windowA
independent secondaryCan be opened independently of a primary
window (property sheet)Microsoft Windows possesses several types of
secondary type of secondary windows calledDialog boxesProperty
sheetProperty inspectorsMessage boxesPalette windowsPop-up
windows
Lecture 33 slide 2
-
Type of WindowsSecondary Windows
Lecture 33 slide 3
-
Modal and ModelessModal windowWill not permit interaction with
another window until the current dialog is completedRemain
displayed until the appropriate action is taken after which it is
removedModal dialog boxes typically request critical information or
actions
Modeless windowSwitching between the box and its associated is
permitted
Lecture 33 slide 4
-
Cascading and UnfoldingCascadingTo provide advanced options at a
lower level in a complex dialogProvide a command button leading to
the next dialog box with Provide no more than two cascades in a
given pathDon not cover previous critical informationRelevant
informationTitle BarUnfoldingTo provide advanced options at the
same level in a complex dialogProvide a command button with an
expanding dialog symbol >>Expand to right or downward
Lecture 33 slide 5
-
Dialog BoxesUse for presenting brief messagesUse for requesting
specific, temporary actionsUse for performing actions thatTake a
short time to completeAre not frequently changedUsually be those
that do not occur frequentlyCommand button to includeOKCancelOthers
as necessary
Lecture 33 slide 6
-
Dialog Boxes
Lecture 33 slide 7
-
Property Sheets and Property InspectorsProperty sheetsUse for
presenting the complete set of properties for an objectCategorize
and group within property pages, as necessaryCommand buttons to
includeOkCancelApplyResetOthers as necessaryFor single property
sheets, place the command on the sheetFor tabbed property pages,
place the commands outside the tabbed pages
Lecture 33 slide 8
-
Property Sheets and Property InspectorsProperty sheets
Lecture 33 slide 9
-
Property Sheets and Property InspectorsProperty InspectorsUse
for displaying only the most common or frequently accessed object
propertiesProperties of an object are displayed by using a dynamic
viewer or browser that reflects the properties of the current
selection
Property value in the selected object should be changed as soon
as the user makes the change in the related property control
Lecture 33 slide 10
-
Message BoxesIf a message requires no choices to be made but
only acknowledgement, include an ok button and optionally a help
menuIf the message requires the user to make a choice, include a
command button for each optionInclude OK and Cancel buttons only
when the user has the option of continuing or stopping the
actionUse Yes and No buttons when the user must decide how to
continueIf the choices are too ambiguous, label the command buttons
with the names of specific actions, for example, Save and
Delete
Lecture 33 slide 11
-
Message BoxesProgress message boxYes No message boxMessage box
choicesInformationCriticalWarning
Lecture 33 slide 12
-
Palette and Pop-Up WindowsPalette windows are modeless secondary
windows that present a set of controls.Palette windows are
distinguished by their visual appearance, a collection of images,
colors or patternsThe title bar for a palette window is shorter and
includes only a close buttonUse pop-up windows to displayAdditional
information when an abbreviated form of the information is the main
presentationTextual labels for graphical controlsContext-sensitive
Help informationPop-up windows do not contain standard secondary
widow components such as a title bar and close button
Lecture 33 slide 13
-
Palette and Pop-Up Windows
Lecture 33 slide 14
-
Select the Proper Device-Based Controls
Device-based controls, often called input devices, are the
mechanisms through which people communicate their desires to the
system.
Lecture 34 slide 1
-
Identify the characteristics and capabilities of device-based
controlTrackballJoystickGraphic tabletLight penTouch
screenVoiceMouseKeyboard
Lecture 34 slide 2
-
TrackballDescriptionA ball that rotates freely in all directions
in its socketAdvantagesDirect relationship between hand and pointer
movement in terms of direction and speedDoes not obscure vision of
screenDoes not require additional desk space (if mounted on
keyboard)DisadvantageMovement indirect, in plane different from
screenRequires hand to be removed from keyboard keysRequires
different hand movementsMay be difficult to controlMay be fatiguing
to use over extended time
Lecture 34 slide 3
-
JoystickAdvantagesDirect relationship between hand and pointer
movement in terms of direction and speedDoes not obscure vision of
screenDoes not require additional desk space (if mounted on
keyboard)DisadvantageMovement indirect, in plane different from
screenRequires hand to be removed from keyboard keysRequires
different hand movementsMay be difficult to controlMay be fatiguing
to use over extended timeMay be slow and inaccurate
Lecture 34 slide 4
-
Graphic (Touch) TabletDescriptionPressure-,heat-,light-, or
light-blockage-sensitive horizontal surfaces that lie on the
desktop or keyboardMay be operated with fingers, light pen, or
objects like pencilAdvantagesDirect relationship between hand and
pointer movement in terms of direction and speedDoes not obscure
vision of screenMore comfortable horizontal operating
planeDisadvantageMovement is indirect, in a plane different from
screenRequires hand to be removed from keyboardRequires different
hand movements to useFinger may be too large fro accuracy with
small objects
Lecture 34 slide 5
-
Touch ScreenAdvantagesDirect relationship between hand and
pointer movement in terms of direction and speedMovement is direct,
in the same plane as screenRequires no additional desk
spaceDisadvantageFinger may obscure part of screenFinger may be too
large for accuracy with small objectsRequires moving the hand far
from the keyboard to useVery fatiguing to use for extended period
of timeMay Damage the screen
Lecture 34 slide 6
-
Light PenDescriptionA special surface on a screen sensitive to
the touch of a special stylus or penAdvantageDirect relationship
between hand and pointer movement in terms of direction, distance,
and speedMovement is direct, in the same plane as screenRequires
minimal additional desk spaceStands up well in high-use
environmentsMore accurate than finger touchingDisadvantageHand may
obscure part of screenRequires picking it to useRequires moving the
hand far from the keyboard to useVery fatiguing to use for extended
period of time
Lecture 34 slide 7
-
VoiceDescriptionAutomatic speech recognition by the
computerAdvantageSimple and directUseful for people who cannot use
a keyboardUseful when the users hands are occupiedDisadvantageHigh
error rates due to difficulties inRecognizing boundaries between
spoken wordsBlurred word boundaries due to normal speech
patternsSlower throughput than with typingDifficult to use in noisy
environmentImpractical to use in quiet environment
Lecture 34 slide 8
-
MouseAdvantageDirect relationship between hand and pointer
movement in terms of direction, distance, and speed.Permit a
comfortable hand resting positionSelection mechanisms are included
on mouseDoes not obscure vision of the screenDisadvantageMovement
is indirect, in a plane different from screenRequires hand to be
removed from keyboardRequires additional desk spaceMay require long
movement distancesRequires a degree of eye-hand co ordination
Lecture 34 slide 9
-
Mouse Usage GuidelinesProvide a hot zone around small or thin
objects that might require extremely fine mouse positioningNever
use double-clicks or double-drags as the only means of carrying out
essential operationsDo not use mouse plus keystroke combinationsDo
not require a person to point at a moving target
Lecture 34 slide 10
-
KeyboardAdvantageFamiliarAccurateDoes not take up additional
desk spaceVery useful forEntering text and alphanumeric
dataInserting in text and alphanumeric dataKeyed shortcuts
acceleratorsKeyboard mnemonics equivalentsDisadvantageSlow for
non-touch-typistsSlower than other devices in pointingRequires
discrete actions to operateNo direct relationship between finger or
hand movement
Lecture 35 slide 1
-
Keyboard GuidelinesProvide keyboard acceleratorsAssign single
keys for frequently performed, small-scale tasksUse standard
platform acceleratorsAssign Shift-key combinations for actions that
extend or are complementary to the actions of key or key
combination used with out the Shit-keyAssign Ctrl-key combinations
forInfrequent actionsTasks that represent larger-scale versions of
the task assigned to the unmodified keyProvide keyboard
equivalentsUse standard platform equivalentsUse the first letter of
the item descriptionProvide window navigation through use of
keyboard keys
Lecture 35 slide 2
-
Selecting the Proper Device-Based ControlProvide keyboard
acceleratorsAssign single keys for frequently performed,
small-scale tasksUse standard platform acceleratorsAssign Shift-key
combinations for actions that extend or are complementary to the
actions of key or key combination used with out the Shit-keyAssign
Ctrl-key combinations forInfrequent actionsTasks that represent
larger-scale versions of the task assigned to the unmodified
keyProvide keyboard equivalentsUse standard platform equivalentsUse
the first letter of the item descriptionProvide window navigation
through use of keyboard keys
Lecture 35 slide 3
-
Selecting the Proper Device-Based ControlsProvide keyboards for
tasks involvingHeavy text entry and manipulationMovement through
structured arrays consisting of few discrete objectsProvide an
alternative pointing device for graphical or drawing tasksMouse:
pointing, selecting, drawing, and draggingJoystick: selecting and
trackingTrackball: pointing, selecting and trackingTouch screen
pointing and selectingGraphic tablet pointing selecting, drawing,
and dragging
Lecture 35 slide 4
-
Selecting the Proper Device-Based ControlsProvide touch screens
under the following conditionsThe opportunity for training is
minimalTargets are large, discrete and spread outFrequency of use
is lowDesk space is at a premiumLittle or no text input requirement
existsConsider user characteristics and preferencesProvide
keyboards for touch typists
Minimize eye and hand movements between devices
Lecture 35 slide 5
-
Pointer GuidelinesThe pointerShould be visible at all
timesShould contrast well its backgroundShould maintain its size
across all screen locations and during movementShape of
pointerShould clearly indicate its purpose and meaningShould be
constructed of already defined shapesShould not be used for any
other purpose other than its already defined meaningUse only as
many shapes as necessary to inform the user about current location
and statusAnimation should not distract
Lecture 35 slide 6
-
Choose the Proper Screen Based Controls
Screen Based controls, often simply called controls and
sometimes called widgets. By definitions, they are graphic objects
that represent the properties or operations of other objects
Lecture 36 slide 1
-
Operable ControlsOperable controls are those that permit the
entry, selection, changing, or editing of a particular value, or
cause a command to be performed.ButtonsText entry/read-only,
selection, combination entry/selectionSpecialized controls
Lecture 36 slide 2
-
ButtonsDescriptionA square or rectangular-shaped control with a
label inside that indicates action to be accomplishedThe label may
consist of text, graphics, or both
Command ButtonsToolbars
Lecture 36 slide 3
-
Command Buttons (Usage and Label)Use to provide fast access to
frequently used or critical commands (for windows with a menu
bar)Use to provide access to all necessary commands (for windows
without a menu bar)
Use single-word labels whenever possible (Use two three words
for clarity, if necessary)Use mixed-case letters with the first
letter of each significant label word capitalized
Lecture 36 slide 4
-
Command Buttons (Label and Size)Do not number labels
Center the label within the button borders
Provide consistency in button labeling across all screens
Restrict the number of buttons on a window to six or fewer
Provide as large as button as feasible and maintain consistent
button heights and widths
Lecture 36 slide 5
-
Command Buttons (Location and Layout)Buttons exiting a dialog,
and usually closing the window, should be positioned horizontally
and centered across the lower part of the window
For a button invokes a dialog or expands the dialog, position it
centered and aligned vertically along the right side of the
window
Do not provide alignment with other screen controls. Maintain
alignment and spacing only within the buttons themselves
Position the buttons within windows before locate the other
window controls
Lecture 36 slide 6
-
Command Buttons (Location and Layout)
Exiting buttonsInvoking feature/Expanding dialog buttons
Lecture 36 slide 7
-
Command Buttons (Location and Layout)If a button has a
contingent relationship to another control, position it adjacent to
the related controlButtons found on more than one window should be
consistently positioned
Select All BreadCerealDairy Foods
Desserts
Drinks
Groceries :0selected
Lecture 36 slide 8
-
Command Buttons (Organization)Most frequent actions to the left
or topKeep related buttons grouped togetherException: Buttons
containing excessively long labels may be widerWindows RecommendsAn
affirmative action the left or aboveThe default firstOK and Cancel
next to each otherHelp last
Lecture 36 slide 9
-
Command Buttons (Intent Indicators)No intent indicator is
necessary, when a button causes an action to be immediately
performedWhen a button leads to a cascading dialog, include and
ellipsis () When a button leads to a menu, include a triangle
pointing in he direction the menu will appear after the label When
a button leads to and expanding dialog, include a double arrow
(>>) When a button has a contingent relationship to another
control, include a single arrow () pointing at the control
ApplyOpen Menu >Options >> Clear
Lecture 36 slide 10
-
Command Buttons (Expansion and Defaults)Gray buttons after
Expansion or when not applicable
When a window is first displayed, provide a default action, if
practicalA default should be the most likely action:A
confirmationAn application of the activity being performedA
positive action such as OKIf a destructive action is performed
(such as a deletion) the default should be CancelIndicate the
default action by displaying the buttons with a bold or double
border
Lecture 36 slide 11
-
Command Buttons (Keyboard Equivalents, Accelerators)The mnemonic
should be the first character of the buttons labelIf duplication
exists in first characters, use another character in the
labelDesignate the mnemonic character by underlining itAssign a
keyboard accelerator to each button to facilitate keyboard
selection
Lecture 36 slide 12
-
Command Buttons (Scrolling and Button Activation)Use buttons to
move between multi-page forms, not scroll bars Label buttons Next
and Previous
Highlight the button in some visually distinctive manner when
the point is resting on it and the button is available for
selection
Lecture 36 slide 13
-
Toolbars (Usage, Structure and size)Provide easy and fast access
to most frequently used commands or options across multiple
screens
Provide buttons of equal sizeCreate a meaningful and unique
iconCenter the image within the buttonCreate a meaningful label
Provide the smaller size as the default size with a user option
to change it
Lecture 36 slide 14
-
Toolbars (Organization and Location)Place the most frequently
used actions to the left or the topKeep related buttons grouped
togetherSeparate potentially destructive buttons from frequently
chosen selectionsPermit user to reconfigure the button
organization
Position main features and functions bar horizontally across top
of window just below menu barPosition subtask and subfeatures bars
along sides of windowPermit the location of the bar to be changed
by the user
Lecture 36 slide 15
-
Toolbars (Active items, Button Activation and Customization)Make
only currently available toolbar items availableTemporarily not
available items by displaying grayed out
Highlight the button in some visually distinctive manner when
the pointer is resting on itCall attention to the button in another
visually distinctive manner when it has been activated or
pressed
Permit toolbars to be turned off by userAllow the customizing of
toolbars
Lecture 36 slide 16
-
Text Entry/Read-Only Controls (Captions)For entry boxes Place a
colon (:) immediately following the captionFor single fields,
caption can be located in front of upper-left corner of the boxFor
multiple fields, position the caption upper left of the box
For read-only boxesIf the data field is long or about the same
length, center the caption above the displayed text boxIf the data
is alphanumeric, short, or quite variable in length, left-justify
the caption above the displayedIf the data field is numeric and
variable in length, right-justify the caption above the
displayed
Lecture 36 slide 17
-
Text Entry/Read-Only Controls (Fields)To visually indicate that
it is an enterable field, present the box in a recessed
mannerPresent read-only text boxes on the window background
Break up long text boxes through incorporation of slashes(/),
dashes (-), spaces, or common delimiters
Call attention to text box data through a highlighting
techniqueGray-out temporarily unavailable text boxes
Lecture 36 slide 18
-
Selection ControlsRadio ButtonsCheck BoxesPalettesList BoxesList
View ControlsDrop-down/Pop-up List Boxes
Lecture 36 slide 19
-
Radio ButtonsA two part control consisting of the followingSmall
circles, diamonds, or rectanglesChoice descriptionsWhen a choice is
selectedThe option is highlightedAny existing choice is
automatically unhighlighted and deselectedPurposeTo set one item
from a small set of option (2 to 8)
Lecture 36 slide 20
-
Radio ButtonsFor mutually exclusive choices (that is, only can
be selected)Most useful for data and choices that areDiscreteSmall
and fixed in numberNot easily rememberedMost easily understood when
the alternatives can be seen together and compared to one
anotherNever change in contentDo not useFor commands
Lecture 36 slide 21
-
Radio Buttons (Defaults and Structure)If there is a default
selection, designate it as the default and display its button
filled in. Else, display all the buttons without setting a dot
When a multiple selection includes choices, display the buttons
in another unique manner, such as gray shadow
Left-align the buttons and choice descriptionsA columnar
orientation is the preferred unless vertical space on the screen is
limited
Enclose the buttons in a border to visually strengthen the
relationship
Lecture 36 slide 22
-
Radio Buttons (Organization, Related Control)Arrange selection
in expected order or follow other patterns (frequency of
occurrence, sequence of use, or importance)
Position any control related to a radio button immediately to
the right of the choice description. End the label with an
arrow
Lecture 36 slide 23
-
Radio Buttons (Captions)Display full spelled out in mixed-case
letters, capitalizing the first letter of all significant
wordsColumnar orientationWith a control border, position the
caption:Upper-left-justified within the borderAlternatively, to the
left of the topmost choice description with (:)Without a control
border position the caption:Left-justified above the choice
description with (:)Alternatively, the caption may be located to
the left of the topmost choice description with (:)Horizontal
orientationPosition the caption to the left of the
choiceAlternatively, with a control border, left-justified within
the border
Lecture 36 slide 24
-
Radio Buttons (Keyboard Equivalents and Selection and
Indication)Assign a keyboard mnemonic to each choice description by
underlining the applicable letter in the choice description
Highlight the selection choice in some visually distinctive way
when the cursors resting on it
When a choice is selected, distinguish it visually from the
unselected choices
If there is a default choice, display the selected choice as set
in the control
Lecture 36 slide 25
-
Radio Buttons
ColorRedYellowGreenColor: RedYellowGreenColor:
RedYellowGreenColor: RedYellowGreenColor:
RedYellowGreenRedYellowGreenColorRed
Lecture 36 slide 26
-
Check BoxesEach option acts as a switch and can be either on or
offWhen an option is selected, a mark (X) appears within the square
box, or the box is highlighted in some other mannerOtherwise the
square is unselected or empty (off)Each box can beSwitched on or
off independentlyUsed alone or grouped in sets
!!Other properties are similar to the radio buttons
properties!!
Lecture 36 slide 27
-
PalettesA control consisting of a series of graphical
alternatives. The choices themselves are descriptive, being
composed of colors, patterns, or imagesTo set one of a series of
mutually exclusive options presented graphically or
pictoriallyUsually consume less screen space than textual
equivalents
Do not useWhere the alternatives cannot be meaningfully and
clearly represented pictoriallyWhere words are clearer than
imagesWhere the choices are going to change
Lecture 36 slide 28
-
PalettesCreate boxes of equal sizePosition the boxes adjacent
to, or butted up against anotherA columnar orientation is the
preferred mannerTop to button, Left to right ordering by expected
order, frequency of occurrence, sequence of use or
alphabeticallyDisplay it less brightly than the other choices, if a
choice is not availableHighlight the choice in some visually
distinctive way when the pointer is restingWhen a choice is
selected, distinguish it visually from the unselected choices
Lecture 36 slide 29
-
ListBoxesA permanently displayed box-shaped control containing a
list of attributes or objects from whichA single selection is made
(mutually exclusive), orMultiple selections are made (non-mutually
exclusive)Unlimited number of choicesIf the list content change,
items will be hard to findGood for data that areBest represented
textuallyNot frequently selectedLarge in numberFixed in list
length
Lecture 37 slide 1
-
ListBoxesClearly and meaningfully describe the choices
availablePresent in mixed caseLeft-align into columnsRequire no
more than 40 page-downs to search a listIf more are required,
provide a method for using criteria
Must be long enough to display 6-8 choicesIf it is the major
control within a window, the box may be larger
When box cant made wide enough to display longest entryBreak the
long entries with an ellipsis ()Provide horizontally scrolling
Lecture 37 slide 2
-
ListBoxesOrder in a logical and meaningful way to permit easy
browsing (allow user to change the sort order will be great)If a
particular choices is not available in the current context, omit ,
gray or dim it
Enclose the choices in a box with a solid border
Use mixed-casePreferred position of the control caption is above
upper-leftWhen a list box is disabled, display its caption as gray
outHighlight the selection choice when the pointer is resting
on
Lecture 37 slide 3
-
Single-Selection List BoxesIf presented with an associated text
box controlPosition the list box below and as close as possible to
the text boxThe list box caption should be worded similarly to the
text box captionIf the related text box and the list box are very
close, the caption may be omitted from the list boxWhen the list
box is first displayedPresent the currently active choice
highlighted or marked with a circle or diamond to the left of the
entryIf a choice has not been previously selected, provide a
default choice and display it in the same manner that is used in
selecting it
Lecture 37 slide 4
-
Multiple-Selection List BoxesMark the selected choice with an X
or check mark to the left of the entryConsider providing a summary
list boxPosition it to the right of the list boxUse the same color
for the summary list boxConsider providing a display-only text
control indicating how many choices have been selectedPosition it
justified upper-right above the list boxProvide command buttons for
Select All and Deselect AllWhen the list box is first
displayedDisplay the currently active choicesMark with and X or
check mark to the left of the entry
Lecture 37 slide 5
-
Drop-Down/Pop-up List BoxesUnlimited number of choicesWhen
displayed, all choices may not always be visible, requiring
scrollingUse drop-down/pop-up whenScreen space or layout
consideration make radio buttons or single-selection list boxes
impracticalDo not use a drop-down list if it important that all
options be seen together
Lecture 37 slide 6
-
Drop-Down/Pop-up List BoxesProvide a visual cue that a box is
hidden by including a downward pointing arrow, or other meaningful
image
!Other properties are the same as List boxes!
Lecture 37 slide 7
-
Combination Entry/Selection Controls and Other Operable
ControlsSpin BoxesCombo BoxesDrop-down/Pop-up Combo Boxes
Slider
Lecture 37 slide 8
-
Spin BoxesA single line field followed by two small, vertically
arranged buttons (pointing up and pointing down
arrow)Selection/entry is made byUsing the mouse to point at one of
directional buttonsKeying a value directly into field
itselfConsumes little screen spacesUseful only for certain kinds of
dataProper usage forFor mutually exclusive choicesWhere screen is
space is limitedSmall in numberInfrequently changed, selected
Lecture 37 slide 9
4.psd
-
Spin BoxesTo reduce the size of potentially long lists, break
the listing into subcomponents (break a date into dd mm yy)When
first displayed, present a default choice in the boxThe spin box
should be wide enough to display the longest entry or choiceCaption
is mixed-case lettersPosition the caption to the left of the
boxAlternatively, left-justified above the box
For numeric valuesShow a larger value using the up arrow
Lecture 37 slide 10
-
Combo BoxesA single rectangular text box entry field, beneath
which is a larger rectangular list box (resembling a drop-down list
box)The text box permits a choice to be keyed within itAs text is
typed into the text box, the list scrolls to the nearest matchAlso,
when an item in the list box is selected, that item is placed
within the text box
Lecture 37 slide 11
-
Combo Boxes
Lecture 37 slide 12
-
Drop-down/Pop-up combo BoxesA single rectangular text box with a
small button to the side and an associated hidden list of
optionsSelection are made by using the mouse or keyboardThe
information keyed doesnt not have to matchUnlimited number of
entries and choicesFlexible, permitting selection or typed
entryRequiring scrollingProper usageWhere screen is limitedFor data
and choices that areBest represented textuallyFrequently
changedLarge in number
Lecture 37 slide 13
-
Drop-down/Pop-up combo BoxesProvide a visual cue that a list box
is hidden by including a downward-pointing
Other properties are the same as Drop-down/Pop-up List Box!!
Lecture 37 slide 14
-
SliderA scale exhibiting degrees of a quality on a continuumTo
make a setting when a continuous qualitative adjustment is
acceptableSpatial representation of relative settingNot as precise
as an alphanumeric indicationProper usage:When an object has a
limited range of possible settingsWhen the range of values is
continuousWhen graduations are relatively fine
Lecture 37 slide 15
-
Custom ControlsPresentation controlsProvide details about other
screen elements or controls or assist in giving the screen
structure
Static Text FieldsGroup boxesColumn HeadingsToolTipsBalloon
TipsProgress indicators
Lecture 37 slide 16
-
Selecting the Proper Controls
TaskBest ControlIf screen Space Constraints ExistMutually
ExclusiveRadio ButtonsDrop-down/Pop-up List BoxNot Mutually
ExclusiveCheck BoxesMultiple-Selection List BoxSelect or Type a
Value Text Entry FieldRadio Buttons with OtherDrop-down Combo
BoxSetting a Value within a RangeSpin ButtonText Box
Lecture 37 slide 17
-
Suggested Uses for Graphical Controls
IF:USE:Mutually exclusive alternativeBest represented
verballyVery limited in number (2 to 8)AND:Typed entry is never
necessaryContent can never changeAdequate screen space is
availableRadio ButtonsOR:Typed entry is never necessaryContent can
never changeAdequate screen space is not availableDrop-down/Pop-up
List BoxOR:Typed entry may be necessaryContent can changeAdequate
screen space is availableCombo box
Lecture 37 slide 18
-
Suggested Uses for Graphical Controls
IF:USE:OR: Type entry may be necessaryContent can changeAdequate
screen space is not availableDrop-down/Pop-up Combo Box
Lecture 37 slide 19
-
Suggested Uses for Graphical Controls
IF:USE:Mutually exclusive alternativeBest represented
verballyPotentially large in number (9 or more)AND:Typed entry is
never necessaryContent can never changeAdequate screen space is
availableSingle-Selection List BoxOR:Typed entry is never
necessaryContent can never changeAdequate screen space is not
availableDrop-down/Pop-up List BoxOR:Typed entry may be
necessaryContent can changeAdequate screen space is availableCombo
box
Lecture 37 slide 20
-
Suggested Uses for Graphical Controls
IF:USE:OR: Typed entry may be necessaryContent can
changeAdequate screen space is not availableDrop-down/Pop-up Combo
Box
Lecture 37 slide 21
-
Suggested Uses for Graphical Controls
IF:USE:Mutually exclusive alternativeBest represented
graphicallyContent rarely changesSmall or large number of
itemsPaletteIF:USE:Mutually exclusive alternativesNot frequently
selectedContent does not changePredictable, consecutive dataTyped
entry sometimes desirableAnd:Adequate screen space is not
availableSpin BoxOR:Adequate screen space is not availableCombo
Box
Lecture 37 slide 22
-
Suggested Uses for Graphical Controls
IF:USE:Mutually exclusive alternativeContinuous data with a
limited range of settingValue increases/decreases in a well-known,
predictable waySpatial representation enhances
comprehensionSliderIF:USE:Nonexclusive alternativesBest represented
verballyTyped entry is never necessaryContent can never
changeAdequate screen space is availableAnd:Very limited in number
(2 to 8)Check BoxesOR:Potentially large in number (9 or
more)Multiple-Selection List Box
Lecture 37 slide 23
-
Revision