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