UNIT-IV

Choose the proper screen based

controls
Screen controls, or widgets, are the parts of a screen you
interact with. They can:
•Let you enter or pick a value (like typing in a number or
choosing from a list).
•Allow you to change or edit a value (like updating your
address).
•Show you text, numbers, or images (like displaying your
name or a picture).
•Perform actions when you click or tap them (like saving a
file or sending a message).
•Provide extra options or information in a pop-up window
(like showing more details when you hover over a
button).
 Screen based controls
To ensure a good user experience, remember these
principles:
•Appearance: Controls should look like what they do
(e.g., buttons should look clickable).
•Functionality: They should work as they appear (e.g.,
pressing a button should activate it).
•Consistency: Use controls in a standard way to avoid
confusing users.
 Screen based controls
1. Buttons.
2. Text entry/read-only controls.
3. Selection controls.
4. Combination entry/selection
controls.
5. Specialized operable controls.
6. Custom controls.
7. Presentation controls.
8. Web controls.
 [Link]
Description:
— A square or rectangular-shaped control with a
label inside that indicates action to be
accomplished.
— The label may consist of text, graphics, or
both.
Purpose:
— To start actions.
— To change properties.
— To display a pop-up menu.
 [Link]

Advantages:
— Always visible, reminding one of the choices available.
— Convenient.
— Can be logically organized in the work area.
— Can provide meaningful descriptions of the actions that will be
performed.
— Larger size generally provides faster selection target.
— Can possess 3-D appearance:
Adds an aesthetically pleasing style to the screen.
Provides visual feedback through button movement when
activated.
— May permit use of keyboard equivalents and accelerators.
— Faster than using a two-step menu bar/pull-down sequence.
Disadvantages:
— Consumes screen space.
— Size limits the number that may be displayed.
— Requires looking away from main working area to activate. —
 [Link]
Buttons come in three styles:
[Link] (Command Buttons):
Typically rectangular, with text indicating an
action. When clicked, they execute the action
immediately, commonly found in windows.
[Link] or Toolbar Buttons: Square or
rectangular with an icon or graphic. They may
have a label or ToolTip and are often grouped
in toolbars for quick access to commands.
[Link] Buttons: Square or rectangular
with a symbol, specific to a platform. These
buttons are found in window borders and are
used for actions like resizing or accessing
menus.
[Link]
 1.1 COMMAND BUTTONS
Usage
•With a menu bar: Use buttons for quick access to important
commands.
•Without a menu bar: Use buttons for all essential commands.
Structure
Shape: Rectangular, with a raised look.
Labels: Use meaningful, concise words (preferably one or
two) with mixed-case letters. Keep labels consistent and
clear.
Size: Buttons should be large enough for readability, with
uniform height and width.
 1.1 COMMAND BUTTONS
Layout
•Keep button locations consistent across screens.
•Exiting buttons (like "OK" or "Cancel") should be centered at
the bottom.
•Feature buttons (for extra actions) go on the right side or near
related controls.
Organization
•Group related buttons together, with the most frequent actions
placed prominently (left-to-right or top-to-bottom).
•Keep potentially harmful buttons separated from frequently used
ones.
 1.1 COMMAND BUTTONS
Visual Indicators
•Buttons should visually change when hovered or
pressed.
•Disable (dim or gray out) buttons that are
unavailable.
Keyboard Shortcuts
•Provide keyboard mnemonics for each button,
typically the first letter of its label. This helps
users navigate without a mouse.
 1.2 TOOLBAR BUTTONS
Toolbars are groups of commands or functions (mostly
icons, sometimes text) that offer quick access to
frequently used features. Here’s a simplified breakdown:
Usage
•Toolbars provide easy access to common commands
across multiple screens.
•They can replace some menu items or launch sub-
applications.
 1.2 TOOLBAR BUTTONS
Structure
•Icons: Buttons should be the same size, with clear,
unique icons centered and raised in appearance.
•Text: Labels should be clear and follow command
button guidelines.
•Consistency: Use the same icons throughout the app.
Size
•Buttons: Typically 24x22 or 32x30 pixels. Larger
buttons for high-resolution screens.
•Icons: Common sizes are 16x16 or 14x24 pixels.
.
 1.2 TOOLBAR BUTTONS
Organization
•Group related buttons together.
•Place frequently used buttons on the left (or top if
vertical).
•Separate destructive buttons from others.
Location
•Place the main toolbar across the top of the window.
•Allow users to move or turn the toolbar on/off and
access toolbar functions through menus.
.
 1.2 TOOLBAR BUTTONS
Customization
•Let users customize or turn off the toolbar but
provide a default setup.
Keyboard Shortcuts
•Assign keyboard shortcuts (mnemonics) to
toolbar buttons for quick access.
Activation
•Highlight buttons visually when hovered or
pressed. Grayed-out buttons indicate unavailable
actions.
This ensures toolbars are user-friendly, organized,
and customizable.
Multimedia
Multimedia refers to using more than one
type of media (e.g., text, images, audio, video,
animations) to communicate on a webpage.
Advantages
⮚ Captures attention: Using visuals, videos,
or audio can keep visitors more engaged
than just plain text.
⮚ Conveys complex information quickly:
Some things are easier to explain with a
picture, diagram, or video rather than
words.
⮚ Accessibility for users with disabilities:
Multimedia can make the web more
accessible, like audio descriptions for
Drawbacks of Overusing Multimedia
Slow loading times: Heavy images or videos
can make websites load slower, which frustrates
users, especially on slow internet connections.
•Example: Imagine waiting for a website to load
because it's filled with large images and videos
—you might leave before it even finishes
loading.
•User confusion and frustration: When
multimedia is overused or used in the wrong
way, it can make it hard for users to find the
information they’re looking for.
•Accessibility issues: Some multimedia
elements may not be accessible to people with
 [Link]

Purpose of Graphics
Graphics on a webpage are not just for decoration.
Each graphic should serve a purpose that improves the user experience.
The five main purposes of graphics are:
•Navigational: Help users find their way around the site (e.g., icons for
menus or links).
•Representational: Show what’s being talked about in the text (e.g., an
image of a product).
•Organizational: Show relationships between items (e.g., flowcharts or
diagrams).
•Explanative: Demonstrate how something works (e.g., a step-by-step
illustration).
•Decorative: Add visual appeal, but this should always support the site's
 Graphics
Graphics Should Supplement, Not Replace Text
•Graphics should supplement the text, not substitute for it. Text is
generally faster to load, easier to search, and more accessible to all
users.
Use Graphics to Convey Information That Text Can’t
•Images, videos, diagrams, and drawings can often explain something
more efficiently or clearly than words alone.
Enhance Navigation with Graphics
•Graphics can help users navigate a website more easily by providing
visual cues (e.g., icons that represent different sections of the website).
 Graphics
Limit Long-Loading Graphics
•Large or richly colored images take longer to load, which can frustrate
users, especially those with slow internet connections.
Coordinate Graphics with Page Elements
•Graphics should fit in with the overall design of the webpage. This
means coordinating the style of graphics with fonts, colors, and layout.
Avoid Gratuitous Decorations or Banner-Like Graphics
•Important graphics should not look like ads or unnecessary decorations.
•Users tend to ignore anything that looks like a banner ad even if
it's an important graphic.
2. 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.
2. Images
•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.
3. Image maps
Image Maps
[Link]:
[Link] provide navigation links to other content.
(Example: A world map image where clicking on
different countries takes the user to pages about
those countries.)
[Link]:
[Link] be arrayed in a meaningful and obvious
structure.
(Example: A floor plan image where different rooms
are clickable, allowing users to navigate to specific
room information.)
[Link] to load than separate images.
(Example: A single image with clickable sections
loads faster than loading multiple individual images
3. Image maps
Disadvantages:
•Consume a significant amount of screen space.
(Example: A large interactive map that takes up the
majority of the webpage, pushing other content below the
fold.)
•Hot spots not always obvious.
(Example: A complex product image where it’s unclear
which parts are clickable without hovering over them.)
•One’s location within the image map is not always
obvious.
(Example: On a clickable world map, users might not
easily identify which country or region they are currently
hovering over.)
 4. photographs
Use:
•When every aspect of the image is relevant.
(Example: A product photo where all parts of the product, like buttons
or features, need to be visible to the user.)
Guidelines:
•Use JPEG format.
(Example: Save and display the image in JPEG format, which is ideal
for photos with rich color and detail.)
•On the initial page, display a small version:
• Display a thumbnail size image.
(Example: A small preview of a product photo, which loads
quickly and can be clicked to view the full-size image.)
• Zoom in on the most relevant detail.
(Example: A close-up of the camera lens on a smartphone to
highlight its quality.)
• Link to larger photos showing as much detail as needed.
(Example: Clicking the thumbnail of a car image leads to a high-
resolution version showing the full exterior and interior details.)
 4. photographs
Include fewer people and objects in less complicated settings
than in photos for print.
(Example: A product image with a simple background and one person
using the product, rather than a crowded, busy scene.)Emphasize
close-up shots with clean backgrounds.
(Example: A clear, close-up shot of a wristwatch on a plain white
background to highlight its design.)
5. 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.
5. 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 key
points.
6. 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.
7. 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.
8. 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.
8. Audition

•Guidelines:
• — When words are spoken
• The content should be simple.
• The speed of narration should be about 160 words
per minute.
• — When used to introduce new ideas or concepts, the
narration should be slowed.
• — Off-screen narration should be used rather than on-
screen narration.
• Unless the narrator is a recognized authority on the topic.
•— Create short segments.
•— Provide segments of high quality.
•— Provide audio controls.
–– Play background audio softly.
9. Combining Mediums

•Combinations:
— Use sensory combinations that work best together:
• Auditory text with visual graphics.
• Screen text with visual graphics.
•Integration:
•— Closely integrate screen text with graphics.
•Relevance:
•— Both the visual and auditory information should be totally relevant to the
task being performed.
•Presentation:
• — Visual and auditory textual narrative should be presented
simultaneously, or the
• visuals should precede the narrative by no more than 7 seconds.
• — To control attention, reveal information systematically.
• • Limit elements revealed to one item at a time and use sequential
revelations for related elements.
• — Animation must show action initiation as well as the action’s
result.
• — Avoid animation that distracts from other more important
information.
•Downloading times:
•— Consider downloading times when choosing a media.
•Testing:
•— Thoroughly test all graphics for • Legibility.
• Comprehensibility.
Choose the Proper Colors
• Color enhances screen usability by grabbing
attention and helping users understand
information faster. However, it must be used
thoughtfully to avoid distractions.
• Color organizes information, makes screens more
attractive, and helps distinguish between
elements.
• Misuse of color can cause distractions, visual
fatigue, or confusion, making the screen harder to
use.
• Colors carry meanings. For instance, red often
signals danger or urgency, while blue can be
calming and trustworthy.
Choose the Proper Colors
• Past studies have shown that too many colors or
improper use of colors can confuse users and
reduce screen effectiveness. Pastel colors and
limiting the color palette can improve readability
and focus.
• Use color to highlight important information
without overwhelming the user. Use contrast
effectively to ensure readability.
• Text and graphics need to have enough contrast
for readability. Avoid too many bright, clashing
colors that can distract or confuse users.
Choose the Proper Colors

• In data visualizations, color can distinguish

different data sets or highlight important trends.
However, use a limited palette to avoid confusion.
• On websites, colors should be used sparingly and
thoughtfully. Avoid flashy designs that distract from
the content. Choose colors that work well across all
devices and screens.
Properties of colors
Three key properties of color: hue, chroma
(saturation), and value (intensity).
•Hue refers to the color itself, like red or blue.
•Chroma measures how pure or vivid a color is,
with higher saturation making a color more
visible.
•Value refers to how light or dark a color is.
•The primary colors of light are red, green,
and blue, which combine to form other colors
and white light.
•Warm colors are associated with longer
wavelengths (like red), and cool colors with
shorter wavelengths (like blue).
Relationship between colors
Color Uses
[Link] color to assist in formatting a screen:
[Link] or tying elements into groupings
(e.g., using the same background color for
similar sections on a form to indicate they
belong together).
[Link] apart separate groupings of
information (e.g., using different background
colors to separate headers from body text).
[Link] information that is widely
separated on the screen (e.g., using the
same color for labels and their corresponding
data even if they are far apart).
[Link] or calling attention to
Color Uses
Use color as a visual code to identify:
•Screen components (e.g., different colors for
buttons, text fields, and links to make navigation
easier).
•The logical structure of ideas, processes, or
sequences (e.g., using color gradients to show
progression through steps in a process).
•Sources of information (e.g., blue for hyperlinks
that direct users to external sources).
•Status of information (e.g., green for active,
yellow for warning, and red for error status).
Color Uses
Use color to:
•Realistically portray natural objects (e.g.,
green for trees, blue for the sky).
•Increase screen appeal (e.g., adding subtle,
attractive colors to make a design look more
engaging).
Possible Problems with Color

Color Misuse and Performance:

•Simply adding color doesn't improve performance. Poor design will
remain ineffective even if color is added. Misusing color can
distract users and hinder information processing.
Cross-Disciplinary and Cross-Cultural Differences:
•Color meanings differ across professions and cultures. For
example, blue symbolizes reliability in finance but death in
healthcare. Red represents danger in the U.S., death in Egypt, and
life in India. Designers must consider these differences to avoid
confusion.
Possible Problems with Color

Color Misuse and Performance:

•Simply adding color doesn't improve
performance. Poor design will remain ineffective
even if color is added. Misusing color can
distract users and hinder information
processing.
Cross-Disciplinary and Cross-Cultural
Differences:
•Color meanings differ across professions and
cultures. For example, blue symbolizes
reliability in finance but death in healthcare.
Red represents danger in the U.S., death in
Egypt, and life in India. Designers must consider
Possible Problems with Color

Varying Sensitivity of the Eye to Colors:

•The human eye is more sensitive to mid-spectrum
colors (yellow, green) than to extreme colors (red,
blue). This affects how easily text or elements in these
colors can be read. Some color combinations (like red
and blue) can also strain the eyes and lead to visual
fatigue.
Color-Viewing Deficiencies:
•About 8% of men and 0.4% of women have some form
of color blindness. Red-green deficiencies (protanopia
and deuteranopia) and blue deficiencies (tritanopia) are
common. Designers must ensure that color-deficient
users can still effectively use a screen by avoiding
reliance on color alone for conveying important
information.
Possible Problems with Color

Color Connotations:
•Colors carry learned meanings or associations. For
instance, red is often associated with danger or stop,
while green is linked to go or safety. Unexpected uses of
color (e.g., using green for an error message) can
confuse users.
Attention-Getting Capacity:
•Color strongly draws attention and can cause users to
mistakenly associate unrelated elements simply
because they share the same color, leading to
confusion. Overuse of color can result in the "Christmas
tree" effect, where the screen becomes cluttered and
distracting.
Color and Human Vision
The physiology of the human eye impacts color perception and screen design:
[Link]:
1. The lens focuses light on the retina, but different wavelengths (colors) focus at
different distances. Red wavelengths focus farther back, and blue wavelengths focus
in front, which can make blue appear blurry and lead to eye fatigue when switching
between red and blue. This causes reds to seem closer and blues more distant, giving
a 3D effect.
2. Older lenses tend to yellow, making it harder to perceive blue. Large brightness
contrasts also require frequent eye adjustments, causing visual fatigue.
[Link]:
1. The retina has rods (sensitive to low light) and cones (sensitive to color). Cones are
divided into red (64%), green (32%), and blue (2%) sensitive types. The proportion of
cone stimulation determines perceived color.
2. Cones are concentrated in the center of the retina, while rods dominate the
periphery. As a result, color sensitivity decreases toward the edges, and small blue
objects in the center may not be seen due to "blue-blindness."
[Link] Perception:
1. The eye is most sensitive to colors in the middle of the spectrum (yellow, green), and
less to extreme colors (red, blue). To perceive blue or red, they must be more intense
than yellow or green.
2. Sharpness of images depends on brightness differences between objects, not just
color. Differences in brightness create clearer edges, while color differences alone can
Guideline for choosing colors for categories of
information:

Color-code different screen parts for selective attention

(Use different colors to highlight distinct areas of the screen so
that users can focus on one part at a time, such as using blue
for headers and green for footers.)
Color-code status types for decision-making
(Use colors to indicate the status of information, like red for
errors, yellow for warnings, and green for success.)
Color-code for screen searching
(When users need to find specific information, use contrasting
colors to make those items stand out, such as highlighting
urgent messages in red while regular updates are in black.)
 Guideline for choosing colors for categories of
information:

Color-code for ordered sequences

(Use color to guide users through a process or workflow, such
as numbering steps in a form with different colors like step 1 in
blue, step 2 in green, etc.)
Color-code for visual groupings in crowded screens
(When a lot of information is on the screen, use colors to group
related items together, such as using different shades of a
single color to link connected items.)
Use color as a redundant code
(Besides color, also use other cues like shapes or labels, so
that users who can’t perceive color differences still understand
the information.)
Guidelines for using color to ensure clarity and aesthetic
harmony:

Best Absolute Discrimination:

•Use no more than four or five distinct colors that are
widely spaced on the color spectrum for easy
identification (e.g., using red, yellow, green, blue,
and brown to label different sections of a chart).
Best Comparative Discrimination:
•For comparing items, you can use six or seven
distinct colors, also widely spaced (e.g., using
orange, yellow-green, cyan, violet, and magenta to
compare different data groups on a graph).
 Guidelines for using color to ensure clarity and aesthetic
harmony:
Choose Harmonious Colors:
•Use combinations that work well together visually:
• One color plus two others near its
complementary color (e.g., blue with yellow-
orange and red-orange).
• Three colors spaced evenly around the color
wheel (e.g., red, blue, and yellow for a balanced
palette).
Extended Viewing or Older Viewers:
•Use brighter colors for people who will be looking at
the screen for long periods or for older viewers who
may have decreased color sensitivity (e.g., bright
yellow or bright green for clear labels on a medical
monitoring device).
 Emphasis

•To draw attention or to emphasize elements, use

bright or highlighted colors. To deemphasize elements,
use less bright colors.
— The perceived brightness of colors from most to least
is white, yellow, green,
•red, blue.
•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 information,
use cool colors.
— Green, blue, violet, purple.
•Conform to human expectations.
— In the job.
–– In the world at large.
 Location
•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.
Ordering
■Order colors by their spectral position.
–– Red, orange, yellow, green, blue,
indigo, violet.
Foregrounds & backgrounds
•Foregrounds:
• — Use colors that highly contrast with the background color.
• — For text or data, use
• Black.
• Desaturated or spectrum center colors such as white, yellow, or
green.
• Warmer more active colors.
• — Use colors that possess the same saturation and lightness.
• — To emphasize an element, highlight it in a light value of the
foreground color,
• pure white, or yellow.
• — To deemphasize an element, lowlight it in a dark value of the
foreground color.
•Backgrounds:
• — Use a background color to organize a group of elements into a
unified whole.
• — Use colors that do not compete with the foreground.
• — Use
• Light-colored backgrounds of low intensity: off-white or light gray.
• Desaturated colors.
• Cool, dark colors such as blue or black.
• Colors on the spectral extremes.
 Three-Dimensional Look

■ Use at least five colors or color values to create a 3-D

look on a screen.
— Background: the control itself and the window on
which it appears
— Foreground: captions and lines for buttons, icons,
and other objects.
• Usually black or white.
— Selected mode: the color used when the item is
selected.
— Top shadow: the bezel on the top and left of the
control.
–– Bottom shadow: the bezel on the bottom and right of
the control.
Color Palette, Defaults, and Customization

•Permit users to customize their colors.

•Provide a default set of colors for all screen components.
•Provide a palette of six or seven foreground colors.
•— Provide two to five values or lightness shades for each
foreground color.
•Provide a palette of six or seven background colors.
•Never refer to a screen element by its color.
Color Palette, Defaults, and Customization