Copyright 1999 all rights reserved Screen-Based Controls n Primarily ready-made objects –Standard look and feel across applications –Available in APIs

Copyright 1999 all rights reserved

Screen-Based ControlsScreen-Based Controls Primarily ready-made objectsPrimarily ready-made objects

– Standard look and feel across Standard look and feel across applicationsapplications

– Available in APIsAvailable in APIs• Visual BasicVisual Basic• Visual C++Visual C++

Predefined behaviorsPredefined behaviors– Customizable propertiesCustomizable properties


Predefined ControlsPredefined Controls

Command buttonsCommand buttons Text entry/read onlyText entry/read only Selection controlsSelection controls Combination entry/selectionCombination entry/selection CustomCustom PresentationPresentation


Design IssuesDesign Issues

Labels and graphicsLabels and graphics Layout and Layout and

organizationorganization How activated How activated

Remember Galitz principles! Balance, symmetry...Remember Galitz principles! Balance, symmetry...


ButtonsButtons

Square or rectangle with a labelSquare or rectangle with a label Causes an action to be Causes an action to be

accomplished immediatelyaccomplished immediately– Start an actionStart an action– Change propertiesChange properties– Display pop-up menuDisplay pop-up menu

For frequently-used actionsFor frequently-used actions


Button StylesButton Styles

Command buttonCommand button– usually in a windowusually in a window

Bar buttonBar button– part of toolbarpart of toolbar

Symbol buttonSymbol button– platform-specificplatform-specific

OK


Command ButtonsCommand Buttons Initiate an actionInitiate an action

– An alternate to menu choice or An alternate to menu choice or command line entrycommand line entry

Always visibleAlways visible• Convenient access to commandsConvenient access to commands• Standard screen location for similar commandsStandard screen location for similar commands• One click activationOne click activation• Takes screen spaceTakes screen space

Text or icon as labelText or icon as labelCancel


Labeling ButtonsLabeling Buttons

Use standard names when appropriateUse standard names when appropriate Use consistent font styleUse consistent font style Clearly tie the text to the controlClearly tie the text to the control Only use icons on commonly executed Only use icons on commonly executed

taskstasks– Make sure that the design maps to the actionMake sure that the design maps to the action– Users have trouble identifying what icons are Users have trouble identifying what icons are

used forused for– Supplement icons with text descriptionsSupplement icons with text descriptions

Close


Button GraphicsButton Graphics

Maintain consistent heights, widths Maintain consistent heights, widths and spacing of buttonsand spacing of buttons

Use common shapes (rectangles)Use common shapes (rectangles) Avoid fancy graphic techniques, Avoid fancy graphic techniques,

e.g.,e.g.,3-D buttons3-D buttons


Button Organization and LayoutButton Organization and Layout

Provide adequate spacing Provide adequate spacing Limit the number of controls on Limit the number of controls on

one screenone screen Keep related controls togetherKeep related controls together

– Use visual enclosure of groups where Use visual enclosure of groups where appropriate appropriate


Button OrderingButton Ordering

Affirmative action to left or aboveAffirmative action to left or above Default goes firstDefault goes first OK and Cancel next to each otherOK and Cancel next to each other Help last (if available)Help last (if available)

OK Cancel HelpApply


Button Intent IndicatorsButton Intent Indicators

Action performed immediatelyAction performed immediately

Cascading dialog followsCascading dialog follows

Menu followsMenu follows

Expanding dialog followsExpanding dialog follows

Contingent relationship to Contingent relationship to

another controlanother control

Apply

<- Select all

Options >>

Menu >

Open...


Button ActivationButton Activation

Provide keyboard equivalentsProvide keyboard equivalents– Make equivalents consistent,Make equivalents consistent,

e.g., <ctrl> <key>e.g., <ctrl> <key> Allow user to <tab> or <enter> Allow user to <tab> or <enter>

advance from button to button on advance from button to button on displaydisplay

Provide feedback for actions Provide feedback for actions Gray out unavailable choicesGray out unavailable choices

Open...


Button bar/Tool barButton bar/Tool bar

Collection of commands, actions, Collection of commands, actions, or functionsor functions

Grouped as a panel for quick Grouped as a panel for quick accessaccess

Buttons generally same size Buttons generally same size (square)(square)

Buttons usually show an iconButtons usually show an icon


Button Bar PurposesButton Bar Purposes

Provide easy access to frequently Provide easy access to frequently used commands or optionsused commands or options

Invoke sub-applicationsInvoke sub-applications


Button Bar Organization/LayoutButton Bar Organization/Layout

Place most common choices at Place most common choices at left/topleft/top

Keep related buttons grouped Keep related buttons grouped togethertogether

Separate potentially destructive Separate potentially destructive choiceschoices

Permit user reconfigurationPermit user reconfiguration


Button Bar LocationButton Bar Location

Locate the Locate the mainmain bar horizontally bar horizontally just below menu barjust below menu bar

Position Position subsidiarysubsidiary bars along the bars along the sides of the windowsides of the window


Text Entry/Read-Only ControlsText Entry/Read-Only Controls

Contains textContains text– Entered or modified via keyboardEntered or modified via keyboard– May be display-only (no user input)May be display-only (no user input)

Usually a rectangleUsually a rectangle Usually has a descriptive captionUsually has a descriptive caption


Simple Text BoxesSimple Text Boxes

Basic data entry and displayBasic data entry and display– Data entry form fieldsData entry form fields

VariationsVariations– Editable or read-only Editable or read-only – Single line or multiple linesSingle line or multiple lines– Fixed size or resizableFixed size or resizable– Visual or non-visual boxVisual or non-visual box– Scrollable or non-scrollable Scrollable or non-scrollable

Customer Name:

John Q. Public


We have discussed text We have discussed text boxes in some detail boxes in some detail

already!already!


Single-Line Text BoxesSingle-Line Text Boxes

Short textual entriesShort textual entries– File nameFile name– Directory pathDirectory path– Data on a formData on a form– CommandCommand


Multiple-Line Text BoxesMultiple-Line Text Boxes

Longer passages of textLonger passages of text– MessagesMessages– Text file contentText file content– Free-form notesFree-form notes

May have scroll barsMay have scroll bars


Text Box CaptionsText Box Captions

Identify the kind of information for Identify the kind of information for the text boxthe text box

Uses mixed-case font, normal Uses mixed-case font, normal intensityintensity

Place to left or above the text boxPlace to left or above the text box Follow with a colonFollow with a colon

Customer Name: John Q. Public

Related Customers:

Mary R. Public

Sam D. Public

Nellie B. Swift


Text FieldsText Fields

Break up long text boxes using Break up long text boxes using separate fields or delimitersseparate fields or delimiters

Social Security Number: - -

Telephone: ( ) -

Social Security Number:

Telephone:


Selection ControlsSelection Controls

Presents all choices on the screenPresents all choices on the screen– Radio buttonsRadio buttons– Check boxesCheck boxes– PalettesPalettes

Single or multiple selection allowedSingle or multiple selection allowed


Plan Choice:

Limited

Basic

Superior

Premium

Radio ButtonsRadio Buttons Use for mutually exclusive choicesUse for mutually exclusive choices Attributes, values, propertiesAttributes, values, properties

– DiscreteDiscrete– Few, fixed optionsFew, fixed options– Hard to rememberHard to remember– Understood in contextUnderstood in context

Where adequate screenWhere adequate screenspace is availablespace is available


Choice DescriptionsChoice Descriptions

Clear and meaningfulClear and meaningful Fully spelled-outFully spelled-out One text line eachOne text line each Gray out if unavailableGray out if unavailable Include Include NoneNone if appropriate if appropriate


Check BoxesCheck Boxes

Independently selectable optionsIndependently selectable options– Set each option on or offSet each option on or off– States are clearly oppositeStates are clearly opposite

Attributes, values, propertiesAttributes, values, properties– Similar to radio buttonsSimilar to radio buttons

Can be used to affect other Can be used to affect other controlscontrols


Check BoxesCheck Boxes Related choicesRelated choices

– Each can be selected or not selectedEach can be selected or not selected– Similar to menus with toggled choicesSimilar to menus with toggled choices

Standard Formatting Animation Drawing Pictures

Toolbars > Standard

Formatting

Animation

Drawing

PicturesX

X

X

X

X

Toolbars:


PalettesPalettes

Series of graphical alternativesSeries of graphical alternatives Choices are self-describingChoices are self-describing

– ColorsColors– PatternsPatterns– ImagesImages

Selections are mutually exclusiveSelections are mutually exclusive


Sample PalettesSample Palettes


List BoxesList Boxes Text box with scroll barsText box with scroll bars

– Limits screen space requiredLimits screen space required– Allows for list of any lengthAllows for list of any length

Used for selecting items Used for selecting items from a listfrom a list

Drop-down list boxesDrop-down list boxes– Provide permanent display of current choiceProvide permanent display of current choice

Combo boxesCombo boxes– Text box plus a drop down listText box plus a drop down list

Documents

Copyright 1999 all rights reserved Screen-Based Controls n Primarily ready-made objects –Standard look and feel across applications –Available in APIs