MODULE – III

Windows – New and Navigation schemes selection of window, selection of devices based and screen- based
controls. Components – text and messages, Icons and increases – Multimedia, colors, uses problems, choosing
colors.
---------------------------------------------------------------------------------------------------------------------------------------
Windows
A window is a rectangular area on the screen that displays the contents of an application, such as a word processor
application or a web browser.

It can contain text, icons, images, and graphics. Multiple windows can be displayed on the screen simultaneously,
and users can resize, move, minimize, maximize, and close windows as needed.

Windows have scrollbars functionality, making it easier to scroll through long documents or contents that cannot
fit in a single window area. The functionality of minimizing and maximizing windows was very frequent, so it
was made built-in style because of its frequent use.

New and Navigation schemes selection of window

Navigation Schemes
I. Navigation Goals:
 A well-designed navigation system facilitates quick & easy navigation between components whose
structure & relationship are easily comprehensible.
 For the user, answers to the following questions must be obvious at all times during an interaction:
Where am I now? Where did I come from? Where can I go from here? How can I get there quickly?
 General system navigation guidelines include the following.
 Control
For multilevel menus, provide one simple action to:
o Return to the next higher-level menu.
o Return to the main menu.
o Provide multiple pathways through a menu hierarchy whenever possible.
 Menu Navigation Aids
To aid menu navigation & learning, provide an easily accessible:
o Menu map or overview of the menu hierarchy.
o A “look ahead” at the next level of choices, alternatives that will be presented when a currently
viewed choice is selected.
o Navigation history.
ii. Web Site Navigation:
 In designing a Web Site Navigation scheme there are two things to take in consideration:
o Never assume that users know as much about a site as the site designers do.
o Any page can be an entry point into the website.
  Web site navigational design includes:
o Web site organization Divide content into logical fragments, units or chunks. Establish a
hierarchy of generality or importance.
 Components of a Web Navigation System To move between Web site information fragments
necessitates the creation of navigation links.
General link guidelines are:
-Sensible
-Available
-Obvious & Distinctive
-Consistent
-Textual
-Provide multiple navigation paths
 Browser Command Buttons Hide the split between the browser & the Web site application by including
navigational controls within the application.
 Web Site Navigation Bars
o Provide a global navigation bar at the top of each page.
o Provide a local category or typical links navigation bar on the left side of a page.
 Textual Phrases
Provide a mix of textual phrase links: -In explicit menus. -Embedded within page text.
 Graphical Images or Icons
Graphical images or icons may appear in an array in the form of a navigation bar or be individually located at
relevant points in a page.
 Command Buttons
Command buttons may appear in an array in the form of a navigation bar or be individually located at relevant
points in a page.

Selection of Window:
Window Characteristics
 A name or title, allowing it to be identified.
 A size in height & width (which can vary).
 A state, accessible or active or not accessible.
 Visibility–the portion can be seen.
 A location, relative to the display boundary.
 Presentation–its arrangement with respect to other windows.
 Management capabilities.
 Highlighting.
 The function, task or application to which it is dedicated.
1.Attraction of Windows
 Presentation of Different Levels of Information.
 Presentation of Multiple Kinds of Information.
 Sequential Presentation of Levels or Kinds of Information.
 Access to Different Sources of Information.
 Combining Multiple Sources of Information.
 Performing More Than One Task.
 Reminding.
 Monitoring.
 Multiple Representations of the Same Task.
2.Constraints in Window System Design
 Historical Considerations
 Hardware Limitations
 Human Limitations
3.Window Management
 Single-Document Interface
It’s a single primary window with a set of secondary windows.
 Multiple-Document Interface
It’s a technique for managing a set of windows where documents are opened into windows.
Contains:
-A single primary window called the parent.
-A set of related document or child windows, each also essentially a primary window.
4.Organizing Window Functions
 Window Organization–organize windows to support user tasks.
 Number of Windows–minimize the number of windows needed to accomplish an objective.
5.Window Operations
i. Active window
 A window should be made active with as few steps as possible.
 Visually differentiate the active window from other windows.
ii. Opening a window
 Provide an iconic representation or textual list of available windows.
 If more than one object is selected & opened, display each object in a separate window. Designate the
last window selected as the active window.
iii. Sizing windows
 Provide large-enough windows to present all relevant & expected information for the task.
iv. Window placement
 Position the window so it is entirely visible.
v. Window separation
 Crisply, clearly & pleasingly demarcate a window from the background of the screen on which it
appears.
vi. Moving a window
 Permit the user to change the position of all windows.
vii. Resizing a window
 Permit the user to change the size of primary windows.
Selection of devices-based controls
Device-based controls, often called input devices, are the mechanisms through which people communicate their
desires to the system.
Characteristics of Device Based Controls:
1. Trackball
2. Joystick
3. Graphic Tablet
4. Touch Screen
5. Light Pen
6. Voice
7. Mouse
8. Keyboard
1.Trackball
Trackball is a spherical object (ball) that rotates freely in all directions in its socket.Direction and speed is
tracked and translated into cursor movement.

Advantages
 Direct relationship between hand and pointer movement in terms of direction and speed.
 Does not require additional desk space (if mounted on keyboard).
Disadvantages
 Movement is indirect, in a plane different from the screen.
 Indirect relationship between hand and pointer movement in terms of distance.
 Requires a degree of eye-hand coordination.
 Requires different hand movements.

2.Joystick

 Variable in size, smaller ones being operated by fingers, larger ones requiring the whole hand.
 Variable in cursor direction movement method, force joysticks respond to pressure, moveable ones
respond to movement.
 Variable in degree of movement allowed, from horizontal-vertical only to continuous.
Advantages
i. Direct relationship between hand and pointer movement in terms of direction.
ii. Does not require additional desk space (if mounted on keyboard).
Disadvantages
i. Movement is indirect, in a plane different from the screen.
ii. Indirect relationship between hand and pointer movement in terms of speed and distance.
3. Graphic Tablet

 Pressure-, heat-, light, or light-blockage-sensitive horizontal surfaces that lie the desktop or keyboard.
 May be operated with fingers, light pen, or objects like a stylus or pencil.
 Pointer imitates movements on tablet.
Advantages
i. Direct relationship between hand and pointer movement in terms of direction, distance and speed.
iii. More comfortable horizontal operating plane.
Disadvantages
i. Movement is indirect, in a plane different from the screen.
ii. Requires a degree of eye-hand coordination.
iii. Requires hand to be removed from keyboard and keyboard keys.
4.Touch Screen

A special surface on the screen sensitive to finger or stylus touches.

Advantages
i. Direct relationship between hand and pointer location in terms of direction, distance and speed.
ii. Requires no additional desk space.
iii. Movement is direct, in the same plane as screen.
Disadvantages
i. Finger may obscure part of screen.
ii. Finger may be too large for accuracy with small objects.
iii. Requires moving the hand far from the keyboard to use.
5.Light Pen

It is a special surface on a screen sensitive to the touch of a special stylus or pen.

Advantages
i. Direct relationship between hand and pointer location in terms of direction, distance and speed.
ii. Requires minimal additional desk space.
iii. Movement is direct, in the same plane as screen.
Disadvantages
i. Hand may obscure part of screen.
ii. Requires picking it up to use.
iii. Requires moving the hand far from the keyboard to use.
6.Voice

Automatic speech recognition by the computer.

Advantages
i. Simple and direct.
ii. Useful for people who cannot use a keyboard.
iii. Useful when the user’s hands are occupied.
Disadvantages
i. High error rates due to difficulties in recognizing boundaries between spoken words and blurred word
boundaries due to normal speech patterns.
ii. Slower throughput than with typing.
iii. Difficult to use in noisy environments.
iv. Impractical to use in quiet environments.
7.Mouse

 A rectangular or dome-shaped, movable, desktop control containing from one to three buttons used to
manipulate objects and information on the screen.
 Movement of screen pointer mimics the mouse movement.
Advantages
i. Direct relationship between hand and pointer movement in terms of direction, distance and speed.
ii. Does not obscure vision of screen.
iii. Permits a comfortable hand resting position.
Disadvantages
i. Movement is indirect, in a plane different from the screen.
ii. Requires a degree of eye-hand coordination.
iii. Requires hand to be removed from keyboard.
iv. May require long movement distances.
8.Keyboard

It’s a standard typewriter keyboard and cursor movement keys.

Advantages
i. Familiar and accurate.
ii. Does not take up additional desk space.
iii. Very useful for:
 Entering text and alphanumeric data.
 Inserting in text and alphanumeric data.
 Keyed shortcuts – accelerators.
 Keyboard mnemonics – equivalents.
Disadvantages
i. Slow for non-touch-typists.
ii. Slower than other devices in pointing.
iii. Requires discrete actions to operate.
No direct relationship between finger or hand movement on the keys and cursor movement on screen in terms
of speed and distance.
Selection of screen- based controls
1.Operable Controls
2.Text Entry/Read-Only Controls
3.Selection Controls
4.Combination Entry/Selection Controls
5.Presentation Controls
1.Operable controls
Buttons
i. A square or rectangular-shaped control with a label inside that indicates action to be accomplished.
ii. The label may consist of text, graphics or both.
iii. Purpose of buttons are:
 To start actions.
 To change properties.

iv. Advantages
 Always visible, reminding one of the choices available.
 Can be logically organized in the work area.
v. Disadvantages
 Size limits the number that may be displayed.
 Requires looking away from main working area to activate.
2.Text Entry/Read-Only Controls
Text Boxes
i. A control is usually rectangular in shape, in which text may be entered or may be displayed for read-only
purposes.
ii. Usually possesses a caption describing the kind of information contained within it.
iii. Two types exist:
  Single line
 Multiple line
iv. When first displayed, the box may be blank or contain an initial value.
v. Advantages
 Very flexible.
 Consumes little screen space.
vi. Disadvantages
 Requires use of typewriter keyboard.
 Requires user to remember what must be keyed.
3.Selection Controls
Radio Buttons

i. A two-part control consisting of the following

 Small circles, diamonds or rectangles.
 Choice descriptions.
ii. When a choice is selected
 The option is highlighted.
 Any existing choice is automatically un-highlighted and deselected.
iii. Purpose of radio buttons is to set one item from a small set of mutually exclusive options (2 to 8).
iv. Advantages
 Easy-to-access choices.
 Easy-to-compare choices.
v. Disadvantages
 Consume screen space.
 Limited number of choices.
Check Boxes

i. A two-part control consisting of a square box and choice description.

ii. Each option acts as a switch and can be either “on” or “off”.
 When an option is selected, a mark such as an “X” or “check” appears within the square box or the box
is highlighted in some other manner.
 Otherwise the square box is unselected or empty (off)
iii. Each box can be:
 Switched on or off independently
 Used alone or grouped in sets
iv. Advantages
 Easy-to-access choices
 Easy-to-compare choices
v. Disadvantages
 Limited number of choices.
 Single check boxes difficult to align with other screen controls.
4.Combination Entry/Selection Controls
Spin Boxes

i. A single-line field followed by two small, vertically arranged buttons.

 The top button has an arrow pointing up.
 The bottom button has an arrow pointing down.
ii. Selection/Entry is made by
 Using the mouse to point at one of the directional buttons and clicking. Items will change by one unit or
step with each click.
 Keying a value directly into the field itself.
iii. Purpose of spin boxes is to make a selection by either scrolling through a small set of meaningful
predefined choices or typing text.
iv. Advantages
 Consumes little screen space.
 Flexible, permitting selection or typed entry.
v. Disadvantages
 Difficult to compare choices.
 Can be awkward to operate.
Combo Boxes

i. A single rectangular text box entry field, beneath which is a larger rectangular list box (resembling a drop-
down list box) displaying a list of options.
ii. A text box permits a choice to be keyed within it.
iii. The larger box contains a list of mutually exclusive choices from which one may be selected for placement
in the entry field. Selections are made by using a mouse to point and click.
iv. As text is typed into the text box, the list scrolls to the nearest match.
v. When an item in the list box is selected, it is placed into the text box, replacing the existing content.
vi. Information keyed may not necessarily have to match the list items.
vii. Purpose of combo boxes is to allow either typed entry in a text box or selection from a list of options in a
permanently displayed list box attached to the text box.
viii. Advantages
 Unlimited number of entries and choices.
 Reminds users of available options.
 Flexible, permitting selection or typed entry.
ix. Disadvantages
 All list box choices not always visible, requires scrolling.
 Users may have difficulty recalling sufficient information to type entry, making text box unusable.
 The list may be ordered in an unpredictable way, making it hard to find items.
5.Presentation Controls
Static Text Fields

i. Read-only textual information.

ii. Purposes of static text fields are:
 To identify a control by displaying a control caption.
 To clarify a screen by providing instructional or prompting information.
Group Boxes

i. A rectangular frame that surrounds a control or group of controls.

ii. An optional caption may be included in the frame’s upper-left corner.
iii. Purposes of group boxes are:
 To visually relate the elements of a control.
 To visually relate a group of related controls.
Components – text and messages
Write Clear Text and Message
Wording of the interface and its screens is the basic form of communication with the user.
Clear and meaningfully crafted words, messages, and text lead to greatly enhanced system usability and minimize
user confusion that leads to errors and possibly even system rejection.

Words
 Do not use technical words, made-up words or terms
– filespec, abend, or spool, Ungroup or dearchive
 Do not use abbreviations or acronyms
– Always use the fully spelled-out form the first time it is encountered in the interface
 Consider the usage of contradictions or short forms (won’t vs will not, un- -ness),
Complete words is preferred
 Positive terms (avoid the prefix “ir-” “in-” “dis-” and “un-”)
 Simple action words (“Project status listing” “List”)
 Consistency
 Multiple-word phrases are more readable if the entire phrase is on one line
 Abbreviation, mnemonics, and acronyms should not include punctuation
Sentences and Messages
Brief and simple
Directly and immediately usable (Should not search through reference)
Affirmative statement is easier to understand than negative statements
Active voice is usually easier to understand than passive voice
Main topic at the beginning
 Use the same grammatical structure for elements of sentences
Imply that the system is awaiting the user’s direction, not that the system is directing the user
Negative tones or actions, or threats are not very friendly (“Numbers are illegal” vs “Months must be
entered by name”)
Encouraging message would be better than insulting message
Should remain factual and informative, and should not attempt humor or punishment
Messages
Messages are communication provided on the screen to the screen viewer. Screen messages fall into two
broad categories: system and instructional.
1.System messages:
Generated by the system to keep the user informed of the system’s state and activities.
Common message types are –
• Status messages
– Providing information concerning the progress of a lengthy operation
– Usually contains a progress indicator and a short message

–
• Informational messages (notification messages)
– This kind of message is usually identified by an “I” icon to the left of the message

• Warning messages
– They are usually identified by an “!”
– The user must determine whether the situation is in fact a problem and may be asked to
advise the system whether or not to proceed (A deletion request by a user is any action that
commonly generates a warning messages)

• Critical messages (Action messages)

– Call attention to conditions that require a user action before the system can proceed
– Some products use a “Do Not” symbol while others use a “Stop” sign. An X in a circle
used by Microsoft Windows

• Question messages
 – A question message asks a question and offers a choice of options for selection
– It is designated by a “?” icon proceeding the message text

Writing Message Box Text

• Title bar: Clearly identify the source of the message
– The name of the object to which it refers
– The name of the application to which it refers
– Do not include an indication of message type
– Use mixed case in the headline style
• Message box: Provide a clear and concise description of the
condition of thecondition causing the message box to be displayed
– Use complete sentences with ending punctuation
– Show only message box about the cause of condition in single message
– Make the solution an option offered in the message
– Use the word “Please” conservatively
• Do not exceed two or three lines
• Center the message text in window
• Include the relevant icon identifying the type of message
Message Box Controls
• Command Buttons:
– If a message requires no choices to be made, include an OK button
– If a message requires a choice to be made
• OK and Cancel buttons only when the user has the
option to continue or cancel
• Yes and No buttons when the user must decide how to continue
• If these choices are too ambiguous, label with the name
of specificactions
– If a message describes an interrupted process, provide Stop button
– If a message offer a chance to cancel a process, provide a Cancel button
– If more details about a message must be presented, provide a Help button
– Display only one message box for a specific condition
• Close Box:
Enable the title bar Close only if the message includes a Cancel button
2.Instructional messages (prompting message) :
Tell the user how to work with, or complete the screen displayed
 Provide instructional information at the depth of detail needed by the user.
 Locate it at strategic positions on the screen.
 Display it in a manner that visually differentiates it from other screen elements.
In writing, follow all relevant writing guidelines for words, sentences, and messages.
ERROR!
PLEASE HIT YOUR BACK BUTTON AND ENTER A SEARCH

THE SEARCH FIELD DID NOT CONTAIN AN ENTRY

PLEASE CLICK THE BACK BUTTON AND TYPE A SEARCH VALUE
Text
Text, by a very general definition, is any textual element that appears on a screen, including field captions,
headings, words, sentences, messages, and instructions.

• Presentation
– Provide text that contrasts highly with the background
• Writing
– Write objectively
– Use the inverted pyramid organization
– Be concise, using only about half the number of words of conventional text
– Each paragraph should be short and Contain only one main idea
– Make text more scannable by using bulleted listings, tables, headings andbold
types
– Too many links within text can disrupt reading continuity and content
understanding
– Place them at the beginning or end of paragraphs or section of text
– Test for readability by printing out text to carefully proofread it
Icons and increases – Multimedia, colors, uses problems
Icons, Multimedia and colors ... Introduction
1.GUI systems rapidly began to supplement the earlier text-based systems that had been in existence for three
decades.
2.The graphical evolution in interface design was further expanded in the 1990s with the maturing of the World
Wide Web.
3.The Web permitted easy inclusion of other media on a screen, including images, photographs, video,
diagrams, drawings, and spoken audio.
4.Screen graphics, if used properly, can be a powerful communication and attention getting technique.
5.They can hold the user's attention, add interest to a screen, support computer interaction, and help overcome
language barriers.
6.Research over the years has shown that the use of graphics can facilitate learning and recall.
7.Pictures, for example, are more easily recognized and recalled than words.

Icons
1. Icons are pictorial images most often used to represent objects and actions with which users can interact with
or that they can manipulate.
2. Icons may stand alone on a desktop or in a window, or be grouped together in a toolbar.
3. A secondary use of an icon is to reinforce important information, such as a warning icon in a dialog message
box.
4. A true icon is something that looks like what it means(show).
5. It is representational and easy to understand.
6. A picture of a telephone or a clock on a screen is a true icon.

Kinds of Icons
The use of icons to reflect objects, ideas, and actions is not new to mankind. Rogers (1989) provided an
expanded definition for icon kinds.
■ Resemblance — An image that looks like what it means. e.g. book icon
■ Symbolic — An abstract image representing something. A cracked glass, for example, can represent
something fragile.
■ Exemplar — An image illustrating an example or characteristic of something. e.g. A sign at a freeway exit
picturing a knife and fork has come to indicate a restaurant.
■ Arbitrary — An image completely arbitrary in appearance whose meaning must be learned. An arbitrary icon
is not directly related in any way and must be learned.
■ Analogy — An image physically or semantically associated with something. e.g. a wheelbarrow full of bricks
for the move command.
Characteristics of Icons
1.An icon possesses the technical qualities of syntactics, semantics, and pragmatics (Marcus, 1984).
2. Syntactics refers to an icon's physical structure.
3.Is it square, round, red, green, big, small?
4.Are the similarities and differences obvious?
5.Similar shapes and colors can be used to classify a group of related icons, communicating a common
relationship.
6. Semantics is the icon's meaning. To what does it refer, a file, a wastebasket, or some other object? Is this
clear?
7. Pragmatics is how the icons are physically produced and depicted. Is the screen resolution sufficient to
illustrate the icon clearly?
8.Syntactics, semantics, and pragmatics determine an icon's effectiveness and usability.

Images
■ Ensure all images convey their intended messages.
■ General:
— Use standard images.
— Emulate real-world objects.
— Use images consistently.
— Produce legible images.
— Provide descriptive text or labels with all images.
— Distinguish navigational images from decorative images.
— Minimize
• The number of presented images.
• The size of presented images.
• Restrict single images to 5KB.
• Restrict page images to 20KB.
• Provide thumbnail size images.
• Image animation.

■ Color:
— Minimize the number of colors in an image.
■ Format:
— Produce images in the most appropriate format. • GIF. • JPEG.
■ Internationalization:
— Provide for image internationalization.
■ Design:
— Limit large images above the page fold.
— Use simple background images.
— Reuse images on multiple pages.
Video
■ Uses:
— To show things that move or change over time.
— To show the proper way to perform a task.
■ To show events that cannot be seen directly.
■ To convey human behavior and emotions.
— To provide a personal message.
— To grab attention.
■ Disadvantages:
— Expensive to produce.
— Slow to download.
— Small and difficult to discern detail.
■ Guidelines:
— Never automatically download a video into a page.
— Create short segments.
— Provide controls, including those for playing, pausing, and stopping.
— Consider using
• Existing video.
• Audio only.
• A slide show with audio
Diagrams
■ Uses:
— To show the structure of objects.
— To show the relationship of objects.
— To show the flow of a process or task.
— To reveal a temporal or spatial order.
■ Kinds:
— Flow charts.
— Cause and effect charts.
— Gantt charts.
— Entity relationship diagrams.
— Organization charts.
— Network diagrams
■ Parts:
— Shapes.
— Lines.
— Labels.
■ Guidelines:
— Provide simple diagrams.
— Provide cutaway diagrams or exploded views to illustrate points key
Drawings
■ Use:
— When selective parts need to be emphasized or represented.
■ Guidelines:
— Provide simple drawings showing minimal detail.
— Provide a link to a complete drawing
Animation
■ Uses:
 To explain ideas involving a change in
• Time.
• Position.
 To illustrate the location or state of a process.
 To provide feedback.
 To show continuity in transitions.
 To enrich graphical representations.
 To aid visualization of three-dimensional structures.
 To attract attention.
■ Disadvantages:
 Very distracting.
  Can potentially create problems for people with some disabilities.
 Slow loading.
■ Guidelines:
 Use only when an integral and meaningful part of the content.
 Introduce animation.
 Create short segments.
 Provide a freeze frame, stop, and replay mode.
 Avoid distracting animation.
Audition
■ Uses:
 As a supplement to text and graphics.
 To establish atmosphere.
 To create a sense of place.
 To teach.
 To sample.
— For users
• With disabilities.
• In an eyes-busy and hands-busy situation.
• Who do not have access to keyboard and/or monitor
■ Advantages:
— Does not obscure information on the screen.
— Shorter downloading time than video.
■ Disadvantages:
— Is annoying to many people, including users and nonusers in the vicinity.
— Can easily be overused, increasing the possibility that it will be ignored.
— Is not reliable because
• Some people are hard of hearing.
• If it is not heard, it may leave no permanent record of having occurred.
• The user can turn it off.
• Audio capability may not exist for the user
Uses problems with Choosing colors
• Color blindness: As mentioned earlier, color blindness can make it challenging for users to distinguish
between specific colors.
Designers should consider using color palettes that are easily distinguishable for those with color
blindness.
For example, using color combinations like blue and yellow, red and green, or black and white can
be easily differentiated by colorblind users.
• Branding: When designing interfaces for a specific brand, designers should consider using the brand's
colors to create a cohesive experience.
However, designers should also ensure that the chosen colors don't clash or affect readability

• Aesthetics: Colors can significantly impact the aesthetics of an interface.

While colors can make an interface visually appealing, too many colors or poorly chosen color
combinations can make the interface look cluttered or confusing.

In summary, designers should consider readability, color blindness, branding, and aesthetics when
choosing colors in HCI design to create a seamless, user-friendly interface.

Choose the Proper Colors

Color Uses

• Use color to assist in formatting

– Relating elements into grouping
– Breaking apart separate groupings of information
– Highlighting or calling attention to important information
 • Use color as visual code to identify
– Screen captions and data
– Information from different sources
– Status of information
• Use color to
– Realistically portray natural objects
– Increase screen appealPossible

Problems with Color

• High Attention-Getting Capacity

– Viewer might associate, tie together, screen elements of same color
– Result in confusing, slower reading
• Interference with Use of Other Screens
• Varying Sensitivity of the Eye to Different Colors
– Viewing red and blue  Eye fatigue
• Color-Viewing Deficiencies
• Cross-Disciplinary and Cross-Cultural Differences
– For financial mangers - Corporate qualities or reliability
– For health care professionals – Death
– For nuclear reactor monitors – Coolness or water
– For American movie audiences – Tenderness or Pornography
Choosing Colors for Categories of Information

• Color chosen to organize information or data on a screen must aid the transfer of
information from the display to the user, Some examples of using color code
– If decisions are made based on the status of information on the screen,color-
code the types of status the information
– Screen searching is performed to locate information of particular kind,color-
code for contrast
– If the sequence of information use is constrained or ordered, use color to identify
the sequence
– If the information on a screen is crowded, use color to provide visualgrouping
• Never rely on color as the only way of identifying a screen element
• Always consider how spatial formatting, highlighting, and messages may also beuseful
Color in Context
 • Color are subject to contextual effects
• Small adjacent colored images may appear to the eye to merge or mix
• A color on a dark background will look lighter and brighter than the same coloron a light
background

• Colors also change as light levels change

Usage

• Design for monochrome first or in shades of black, white and gray

• Doing this will permit the screen to be effectively used:

– By people with a color-viewing deficiency
– On monochrome displays
– In conditions where ambient lighting distorts the perceived color
– If the color ever fails

• Use colors conservatively

– Do not use color where other identification techniques, such as location, are
available
Discrimination and Harmony

• Select 4-5 colors for best absolute discrimination

– Red, yellow, green, blue, and brown

• Select 6-7 colors for best comparative discrimination

– Orange, yellow-green, cyan, violet, and magenta

• Choose harmonious colors

– One color plus two colors on either side of its complement
– Three colors at equidistant point around the color circle

• For extended viewing or older viewers, use brighter colors

Emphasis

• To draw attention or to emphasize elements, use bright or highlighted colors or use less bright
colors for deemphasize
– The perceived brightness of colors from most to least is white, yellow. green. blue. red

• To emphasize separation, use contrasting colors

– Red and green. blue and yellow

• To convey similarity, use similar colors

– Orange and yellow, blue and violet

Common Meanings

• To indicate that actions are necessary, use warm colors

 – Red, orange, yellow

• To provide status or background, use cool colors

– Green, blue, violet, purple

• Conform to human expectation

– Red: Stop, fire, hot, danger
– Yellow: Caution, slow, test
– Green: Go, OK, clear, vegetation, safety
– Blue: Cold, water, calm, sky, neutrality
– Gray, White: Neutrality
– Warm colors: Action, response required, spatial closeness
– Cool colors: Status, background information, spatial remoteness
• Typical implications of color with dramatic portrayal are
– High illumination: Hot, active, comic situations
– Low illumination: Emotional, tense, tragic, romantic situations
– High saturation: Emotional, tense, hot, comic situations
– Warm colors: Active, leisure, recreation, comic situations
– Cool colors: Efficiency, work, tragic and romantic situations
• Proper use of color also requires consideration of the experiences andexpectation of the screen
viewers

Location and Ordering

• In the center of the visual field, use red and green

• For peripheral viewing, use blue, yellow, black, and white

• Use adjacent colors that differ by hue and value or lightness for a sharp edge and
maximum differentiation

• Order colors by their spectral position

– Red, orange, yellow, green, blue, indigo, violet
Foregrounds and Backgrounds
 Foregrounds
– Use colors that highly contrast with the background color
– For text or data
• Black on light-color background of low intensity (no bright white)
• Desaturated spectrum colors such as white, yellow, or green on dark
background
• Warmer more active colors
– To emphasize an element, highlight it in a light value of the foreground
color, pure white, or yellow
 – To deemphasize and element, lowlight it in a dark value of the foregroundcolor

• Backgrounds
– Use colors that do not compete with the foreground
– Use
o Light-colored backgrounds of low intensity: Off-white or light gray
o Desaturated colors
o Cool, dark colors such as blue or black
o Colors on the spectral extreme end
– Blue, black, gray, brown, red, green, and purple

Gray Scale

• For fine discrimination use a black-gray-white scale

– Recommend values
• White: Screen background, text located in any black area
• Light gray: Background of a Pushbutton area
• Medium gray: Icon background area, Menu drop shadow, Window drop shadow,
Inside area of system icons, Filename bar
• Dark gray: Window boarder
• Black: Text, Window title bar, Icon border, Icon elements, Ruled lines

Text in Color

• Text in color is not as visible as it is in black

• When switching text from black to color

– Double the width of lines
– Use bold or larger type:
• If originally 8 to 12 points, increase by 1 to 2 points
• If originally 14 to 24 points, increase by 2 to 4 points

Text in Color

• Text in color is not as visible as it is in black

• When switching text from black to color

– Double the width of lines
– Use bold or larger type:
• If originally 8 to 12 points, increase by 1 to 2 points
• If originally 14 to 24 points, increase by 2 to 4 points

• Check legibility by squinting at text

– Too-light type will recede or even disappear
 Choosing color for web pages
 Always minimize the number of presented colors for faster downloading
 Always consider color in context, never in isolation
 Use similar or same color schemes throughout a Web site  help the user
maintaina sense of place
 Foreground colors should be a different as possible from background colors
 The most recommended foreground text color is black presented on a light-
coloredbackground of low intensity (off white or light gray)
 Use dark backgrounds when establishing contrast between an area of the screen
andthe main screen body Choosing color for web pages
 High intensity colors as back-ground such as red, magenta and bright green)
must be avoided
 When choosing foreground and background colors, ensure that
contrastingcombinations are selected
 Use a uniform color in large screen areas
 Large areas of the same color download faster
 For smaller element, the more contrast is required
 Use flat Web-safe colors
 Select color that can be easily reproduced in black and white

Use of Color to Avoid

 Relying exclusively on color (Spatial Formatting and component locations)
 Too many colors at one time
 Highly saturated, spectrally extreme colors together
 Red/blue and yellow/purple
 Yellow/blue, green/blue and red/green
 Low-brightness color for extended viewing or older viewer
 Colors of equal brightness
 Colors lacking contrast
 Fully saturated colors for frequently read screen components
 Use of Color to Avoid
 Pure blue for text, thin lines, and small shapes
 Colors in small areas
 Colors for fine details
 Black, gray, and white will provide better resolution
 Other colors for large area or attracting attention
 Non-opponent colors
 Red/yellow or green/blue
 Recommend: Red/green or yellow/blue
 Red and green in the periphery of large-scale displays
 Yellow and blue are much better
Use of Color to Avoid

• Adjacent colors only differing in the amount of blue they posses

• Single color distinctions for color-deficient user

• Using colors in unexpected ways

• Using color to improve readability of densely packed text

– Recommend to use space lines