UNIT – 3

**Screen Designing: Simplified, Elaborated Answer for 20 Marks**

### What Screen Users Want

1. **Orderly, Clean, Clutter-Free Appearance**

Users prefer screens that are visually organized and free from unnecessary elements. This
means only the essential information should be displayed to prevent distraction and create a
user-friendly environment.

2. **Clear Indication of What’s Being Shown and Actions to Take**

The purpose of each screen and the actions available to the user should be obvious. Users
should quickly understand what they’re looking at and know the next steps without confusion.

3. **Information in Expected Locations**

Users often have expectations about where information and options are located on the
screen (e.g., navigation menus on the left or top). Meeting these expectations helps them find
what they need faster, enhancing efficiency and satisfaction.

4. **Clear Relationship Between Elements**

Related items (e.g., labels and input fields) should be grouped or aligned to visually
communicate their connection, making it easier for users to interpret the layout.

5. **Plain, Simple Language**

Technical jargon can confuse users. Using simple and straightforward language keeps the
experience accessible and ensures that users understand the content easily.

6. **Warning for Actions That Change Data Permanently**

If an action can result in permanent data changes, it’s crucial to give users a clear warning or
confirmation step. This reduces mistakes and helps users feel more in control.

### Design Goals

1. **Reduce Visual Work**

 Minimize elements on the screen to reduce visual clutter, so users don’t have to “search” for
what they need. Keep the layout simple and straightforward, using whitespace and alignment
effectively.

2. **Reduce Intellectual Work**

Designs should minimize the need for users to figure things out on their own. This means
creating intuitive layouts where options and information flow naturally and logically.

3. **Reduce Memory Work**

Information should be readily visible, and users shouldn’t have to remember details from one
screen to the next. For example, auto-filling forms with saved data reduces memory load and
improves efficiency.

4. **Reduce Mentor Work**

Users should not require assistance or extensive training to navigate the interface. A well-
designed screen minimizes the need for tutorials or guides, letting users accomplish their goals
independently.

5. **Eliminate Burdensome Instructions**

Instructions should be minimal and easy to understand, preferably integrated seamlessly into
the design. For instance, instead of lengthy instructions, placeholders in input fields can provide
hints directly in context.

This answer addresses **what users desire in screen design and key goals for creating an
intuitive, efficient, and enjoyable user experience**.

**Screen Planning and Purpose**

1. **Key Elements in Screen Planning**

- **Each Element**: Every component on the screen must be purposeful and contribute
meaningfully to the user’s task.

- **Controls**: Functional elements (buttons, icons) should be meaningful and aid task
completion.
 - **Text**: Clear, relevant, and easily readable to convey necessary information.

- **Screen Organization**: Layout should guide users naturally through tasks.

- **Emphasis**: Highlight important areas or actions to draw user focus effectively.

- **Color Usage**: Colors should be purposeful, enhancing readability and highlighting

priority elements.

- **Graphics**: Graphics should be relevant, assisting in visual comprehension.

- **Animation**: Used sparingly to maintain focus and minimize distraction.

- **Form Feedback**: Forms should provide immediate feedback on inputs to guide user
actions.

2. **Purpose and Meaning for Users**

- **Task Relevance**: Each element should contribute directly to task efficiency.

- **Organized Layout**: Elements should support a logical flow, reducing user confusion and
improving ease of use.

3. **Consistency in Design**

- **Real-World Consistency**: Design elements should reflect familiar real-world experiences

to increase usability.

- **Internal Consistency**: Ensure uniformity across screens and interactions to provide a

cohesive experience.

- **Operational and Navigational Procedures**: Standardize actions (e.g., save, back) to

enhance usability.

- **Visual Identity/Theme**: Maintain a consistent theme for brand recognition and user
comfort.

- **Component Uniformity**: Ensure similar elements (buttons, fields) have a consistent

appearance and functionality.

- **Organizational Layout**: Place similar functions in predictable locations.

 - **Presentation Style**: Use a unified visual style, from colors to fonts.

- **Usage and Location Conventions**: Consistent placement of elements across screens

aids user familiarity.

- **Guidelines for Deviation**: Deviate from established conventions only if it provides clear
benefits to users (e.g., improved navigation or task efficiency).

This structure emphasizes simplicity and usability, aiming for a streamlined, efficient, and
intuitive user experience.

**Organizing Screen Elements**

1. **Logical Grouping of Elements**

- **Task-Based Organization**: Group related elements based on their function or task

relevance.

- Example: Place all navigation buttons together for easy access and user familiarity.

- **Hierarchical Arrangement**: Arrange elements in a top-to-bottom or left-to-right order of

importance to guide user flow.

- Example: Place primary actions (e.g., "Submit") at the top or center, and secondary actions
(e.g., "Cancel") in less prominent areas.

- **Spatial Grouping**: Physically group related elements together with adequate spacing to
distinguish separate tasks or sections.

- Example: Use white space or borders to separate form fields from action buttons.

2. **Visual Clarity and Emphasis**

- **Highlight Important Elements**: Use visual emphasis (color, size, boldness) for essential
elements to draw user attention.

- Example: Make primary buttons larger or more vibrant in color to guide action.
 - **Consistent Iconography and Text**: Use familiar icons and clear labels to avoid confusion
and ensure each element's function is immediately apparent.

- Example: Use universally recognized icons (like a trash can for "Delete") and clear labels.

- **Alignment and Symmetry**: Align elements in a structured grid or layout to maintain a

clean, orderly appearance.

- Example: Align input fields and labels consistently for a streamlined look.

3. **Effective Use of Color and Contrast**

- **Color Coding for Grouping**: Use colors to differentiate sections or types of content,
helping users recognize related elements.

- Example: Use different background shades to separate input forms from informational
sections.

- **Contrast for Readability**: Ensure sufficient contrast between text and background for
readability, especially for important instructions or labels.

- Example: Dark text on a light background, or vice versa, to improve visibility and legibility.

4. **Interactive Elements and Feedback**

- **Action Feedback**: Provide immediate visual feedback when users interact with elements
to confirm actions.

- Example: Button color changes upon click, showing that the action is registered.

- **Clear Action Buttons**: Place actionable elements where users expect them, with
intuitive, labeled buttons to guide interaction.

- Example: Position “Submit” or “Save” buttons clearly at the bottom of a form.

5. **Responsiveness and Adaptability**

- **Responsive Layout**: Design elements to adapt to different screen sizes for consistency
across devices.
 - Example: Use flexible grids that adjust to mobile, tablet, or desktop views.

- **Prioritize Primary Functions on Small Screens**: On smaller screens, prioritize essential

elements and hide or collapse less important items.

- Example: Show only critical buttons and text fields on mobile, with secondary options in
expandable menus.

This structure ensures elements are organized thoughtfully, making the screen intuitive,
reducing cognitive load, and enhancing user satisfaction by focusing on clarity, efficiency, and
consistency.

**Ordering of Screen Data & Content**

1. **Logical Division of Information**

- **Separate into Logical Units**: Break down data into manageable, logical sections that
relate directly to the user’s needs.

- Example: For a banking app, separate personal details from transaction history to
streamline information access.

- **Meaningful Grouping**: Organize information in ways that make sense to users and
reduce mental effort.

- Example: Group account settings, privacy options, and notification settings within one
section for easy navigation.

2. **Organize by Interrelationships**

- **Interrelated Data Placement**: Place related data together based on their relationships
and relevance to each other.

- Example: In an e-commerce app, display product details, reviews, and purchase options in
close proximity for seamless browsing.

3. **Prioritizing Screen Elements**

 - **Order by Priority**: Arrange elements according to their level of importance to users,
ensuring high-priority items are easily accessible.

- Example: Place essential buttons (like “Checkout”) at the top or in a central position, while
lesser-used options are placed further down.

4. **Ordering Schemes**

- **Conventional**: Follow established norms for placement, such as keeping navigation bars
at the top or side.

- **Sequence of Use**: Arrange elements in the order users need to interact with them.

- Example: On a registration form, place "First Name" and "Last Name" fields first, followed
by contact details and password.

- **Frequency of Use**: Frequently used items should be more accessible and visible than
rarely used options.

- Example: In a photo editing app, place frequently used tools like “Crop” and “Rotate” at the
top.

- **Function-Based Organization**: Group items based on their function to streamline user

tasks.

- Example: In a project management tool, keep task assignment, deadlines, and progress
tracking features together.

- **Importance-Based Placement**: Arrange elements so that the most important

information is displayed prominently.

- Example: Show alerts or critical notifications in a highlighted section.

- **General to Specific**: Begin with general information and move to specific details.

- Example: Start with account summary information, then offer detailed transaction history
upon further navigation.
5. **Comprehensive Grouping**

- **Cover All Data Categories**: Ensure each group comprehensively covers related
information without leaving gaps.

- Example: In a travel booking app, group together “Flight Details,” “Hotel Information,” and
“Itinerary” for a complete travel plan view.

6. **Visibility and Relevance**

- **Task-Relevant Information**: Display only the information needed for the specific task at
hand.

- Example: Show reservation details when managing a booking but hide non-relevant
settings.

- **Visible Information Placement**: Arrange elements to prevent scrolling for essential data.

- Example: Keep important details like time, date, and location at the top of event pages.

7. **Minimizing Information Overload**

- **Limit Variables**: Streamline data display by reducing excessive or redundant information

on the screen.

- Example: For a dashboard, display only key metrics rather than all available data points.

8. **Provide a Clear Starting Point**

- **Upper-Left Corner**: Use the upper-left corner as the natural starting point, aligning with
common reading patterns.

- Example: Start the screen with main navigation or essential information to guide user focus.

This approach simplifies navigation and optimizes user experience by organizing and presenting
information effectively, reducing cognitive load, and enhancing task efficiency.
**Screen Navigation and Flow**

To create an intuitive, efficient, and visually engaging interface, screen navigation and flow
must be carefully planned. The following guidelines offer a comprehensive approach to help
users navigate through screens easily and focus on what’s important.

### 1. **Organizing Information and Elements**

- **Rhythmic Flow**:

- Design the screen so that users’ eyes move smoothly and naturally across it, guiding them
without effort.

- For example, arrange information in a predictable order, creating a sense of rhythm that
flows from one piece to another.

- **Natural Movement Sequence**:

- Place elements in a way that encourages natural eye and cursor movement.

- Typically, users start viewing from the top left, so placing key information or important
buttons here aligns with their natural scanning behavior.

- **Minimizing Eye and Pointer Movements**:

- Position frequently accessed elements close together to reduce the amount of movement
required.

- This minimizes strain and helps users locate information quickly.

### 2. **Prioritizing Important Elements**

 - **Top-Left Positioning**:

- Place the most important controls, such as navigation buttons or primary actions, in the
top-left section of the screen.

- Users generally look here first, making it an ideal spot for commonly used functions like
“Search” or “Submit.”

- **Left-to-Right, Top-to-Bottom Flow**:

- Maintain a logical reading and navigation flow from left to right, top to bottom.

- This consistency helps users predict where they will find information and interact with
elements, reducing confusion.

### 3. **Enhancing Screen Navigation**

- **Element Alignment**:

- Align similar elements, such as input fields or buttons, in a clean, structured way.

- For instance, in a form, align text fields and their labels, making it easier for users to scan
and fill out information.

- **Grouping Related Elements**:

- Group similar or related items to create sections that are easy to understand.

- Example: Place all contact information (name, phone, address) in one section and billing
information in another.

- **Using Line Borders**:

- Use borders around groups to visually separate different types of information, helping
users identify sections at a glance.
 - Borders act as visual cues, guiding users through the layout of the screen.

### 4. **Guiding User Attention**

- **Focus and Emphasis**:

- Draw attention to items based on their importance level:

- **Critical Elements**: Use bold colors or larger fonts for primary actions like “Submit” or
“Save.”

- **Important but Secondary**: Moderate emphasis for useful options, such as “Edit” or
“Back.”

- **Peripheral Information**: Lighten or place less important details at the bottom or side
of the screen.

- **Logical Tab Order**:

- Set the tab order logically so that each tab press moves the cursor in a meaningful
sequence.

- For example, in a registration form, the tab order should move from “Name” to “Email” to
“Password.”

### 5. **Placing Command Buttons Effectively**

- **End of Tab Sequence**:

- Position the primary action button (e.g., “Submit”) at the end of the tab sequence.

- This layout allows users to complete all input fields before hitting the final action button,
ensuring all necessary data is entered.
### 6. **Dividing Information Across Screens**

- **Logical Breaks**:

- When information needs to be split across screens, ensure the break happens at a logical
point in the flow.

- Example: In a multi-step checkout process, break the screen flow at points like “Billing
Information” and “Payment Information” to avoid overwhelming the user.

### 7. **Using Eye Movement Patterns for Navigation**

- **Predicting Eye Movements**:

- Guide the eye using visual characteristics that people naturally focus on:

- **From Dark to Light**: Start with darker elements, leading users’ eyes to lighter areas for
detailed content.

- **From Large to Small Objects**: Place larger, more attention-grabbing items before
smaller, subtler ones.

- **From Unusual Shapes to Common Shapes**: Use unique shapes sparingly to draw
attention to specific items.

- **From Saturated Colors to Lighter Colors**: Employ bright colors for main actions or
notifications to make them stand out.

- **Purposeful Focus**:

- Use these principles of eye movement to direct users' attention to important areas in a
specific order, enhancing comprehension and usability.

### 8. **Maintaining a Left-to-Right, Top-to-Bottom Orientation**

 - **Top-to-Bottom Order Benefits**:

- Arrange items in a top-down manner, especially for data entry fields, as it simplifies
navigation and comprehension.

- A top-down orientation makes it easier for users to follow a consistent pattern, reducing
the cognitive load.

- **Minimizing Control Movements**:

- This orientation keeps eye movements short between items, helping users stay focused.

- For example, if users momentarily look away, they can quickly find their place upon
returning to the screen.

### 9. **Designing for Read-Only Information**

- **Top-to-Bottom Layout for Scanning**:

- Present static or read-only information in a top-to-bottom sequence, making it easy to

scan.

- Example: A frequently asked questions (FAQ) page works well with this layout, helping
users scroll through questions and answers effortlessly.

By following these principles, a screen can be designed to ensure ease of use, an intuitive flow,
and an efficient layout that guides the user’s eye and actions naturally. A well-thought-out
screen navigation and flow not only improve user experience but also reduce cognitive strain,
making tasks more manageable and engaging.

###”VISUAL PLEASING COMPOSITION “MUST READ IN

PDF IN FOLDER OF HCI ___BECAUSE OF LOTS OF
DIAGRAMS IN IT
 **Amount of Information, Focus & Emphasis, and Providing
Information Simply & Meaningfully**
### Amount of Information

To create effective screen designs, controlling the quantity and presentation of information is
essential. Here’s how to manage information effectively:

1. **Task-Relevant Information**:

- Include only the information that’s directly relevant to the user’s task. Extra, unnecessary
information can clutter the screen and make it harder for users to focus on the main task.

2. **All Necessary Information**:

- Ensure that every screen provides all the required information for the user to perform a task
or make decisions without needing multiple screens. If possible, consolidate the task’s
necessary details on a single screen.

3. **Screen Density**:

- Keep screen density at or below 30% (only about one-third of the screen should be filled
with information). This makes the screen appear less crowded and easier to read, improving
user comfort and efficiency.

### Focus & Emphasis

Emphasizing the right elements on the screen helps guide users to the most important parts of
their task. Techniques for achieving this include:
1. **Prioritize Key Elements**:

- Highlight the most prominent, important elements. Key information should stand out more
than secondary or supporting information.

2. **Avoid Overemphasis**:

- Be cautious not to overuse emphasis techniques. If too many elements are highlighted, it
results in clutter, making it harder for users to identify what’s truly important.

3. **Emphasis Techniques**:

- **Brightness**: Increase brightness for crucial elements to make them pop.

- **Reverse Polarity**: Use contrasting colors (e.g., dark text on light backgrounds).

- **Font Size & Style**: Apply larger, distinctive fonts for important titles or headings.

- **Underlining or Blinking**: Emphasize elements with underline or gentle blinking.

- **Line Rulings**: Use lines to separate sections or highlight specific elements.

- **Contrasting Colors**: Use different colors to differentiate between important and

secondary information.

- **Size and Positioning**: Place important information at the top or center of the screen for
easy visibility.

- **Isolation & White Space**: Separate significant information with adequate white space to
improve focus.

### Providing Information Simply & Meaningfully

Designs should aim for simplicity, clarity, and meaningful presentation. To achieve this:

1. **Legibility**:

- Choose fonts and colors that are easy to read. Avoid overly decorative fonts, and ensure the
text contrasts well with the background.
2. **Readability**:

- Use language and structure that make information easy to read and understand. Sentences
should be clear, direct, and free of jargon.

3. **Usable Information**:

- Structure information in a way that makes it easily actionable. Organize details logically to
help users proceed without confusion.

4. **Contrasting Display Features**:

- Use contrasting visual elements (like bold or larger fonts) to separate different types of
information, enhancing readability and aiding quick recognition.

5. **Visual Lines**:

- Arrange information along natural visual lines to improve flow. Aligning text, buttons, or
images in clean, straight lines helps create order.

6. **Consistency**:

- Apply the same styles, colors, and formats throughout the screen to create a cohesive and
familiar look for the user. This consistency aids recognition and builds user trust.

These principles make screens not only functional but also user-friendly, guiding users
intuitively through information and tasks. With proper attention to information density, focus
techniques, and clarity, screen designs become effective tools for user interaction.

INFORMATION RETRIEVAL ON WEB

### Information Retrieval on the Web

The internet is primarily a platform for accessing vast amounts of information. For users to
effectively retrieve what they need, understanding their behavior and the nature of the content
is crucial. Below is an overview of the key concepts related to information retrieval on the web.

#### 1. Content as the Most Sought-After Commodity

- **Importance of Content**: When users visit a website, they are primarily looking for
content. This includes articles, data, images, videos, and any information that meets their
needs. The quality and relevance of this content are what keep users engaged and coming back
for more.

#### 2. Goal-Driven Behavior

- **User Intent**: Users typically have specific goals when they access a website. This could be
anything from seeking answers to questions, gathering data, or simply exploring different
topics. Recognizing these goals allows web designers to create more focused and helpful
content.

#### 3. Non-Linear Reading Patterns

- **Reading Dynamics**: Unlike reading a book or an article, users on the web do not read
content in a linear fashion. They often scan the page looking for keywords or phrases that catch
their interest. Therefore, information should be organized in a way that allows users to quickly
find what they’re looking for.

#### 4. Impatience and Frequent Switching

- **User Patience**: Web users tend to have short attention spans. If they do not find the
information they need quickly, they will likely switch to another site. This emphasizes the need
for fast loading times and easy navigation.

#### 5. Varied User Access Reasons

- **Different Access Purposes**: Users approach websites with different intentions:

- **Focused Search**: Some users come with a specific question or need, like looking for a
recipe or finding the latest news.

- **Less Focused Browsing**: Others might be casually browsing, exploring topics without a
specific goal, similar to window shopping.

#### 6. Content Over Technology

- **Quality vs. Flashiness**: Having fancy graphics or high-tech features does not compensate
for poor content. Websites that prioritize valuable information over flashy designs tend to
perform better in retaining users and meeting their needs.
### Information Retrieval Processes

#### 1. Initial Focus on Attention

- **Capturing User Interest**: It’s essential to grab users' attention right away. The layout,
colors, and the first few lines of text should be engaging enough to make users want to explore
further.

#### 2. Page Perusal and Scanning

- **Guidelines for Scanning**: Users often skim through pages rather than read every word. To
accommodate this behavior:

- Use headings and subheadings to break up text.

- Highlight important information so users can quickly spot it.

#### 3. Browsing and Browsing Guidelines

- **Facilitating Effective Browsing**: Users should find it easy to navigate a site.

- **Clear Navigation Menus**: Well-organized menus help users find related topics quickly.

- **Internal Links**: Providing links to related articles can keep users engaged longer.

#### 4. Searching and Search Problems

- **Challenges with Search Functions**: Users may experience difficulties with website search
functions that are not user-friendly or accurate. Common problems include:

- Poorly optimized search algorithms that don’t return relevant results.

- Confusing layouts that make it hard to find the search bar.

#### 5. Search Facility Guidelines

- **Implementing Effective Search Techniques**:

- **Express the Search**: Users should be able to type in their queries easily without
unnecessary steps.

- **Progressive Search Refinement**: Allow users to refine their search based on initial results
to narrow down options.

- **Launch the Search**: Provide a clear and prominent button for initiating searches.

- **Present Meaningful Results**: Search results should be organized in a way that users can
quickly understand their options.

#### 6. Content Presentation

- **Guidelines for Effective Presentation**:

- **Meaningful Headings and Subheadings**: Use clear and descriptive headings that guide
users through the content.

- **Concise Writing**: Keep sentences short and to the point to maintain reader interest.

- **Use Bullets and Numbers**: Present information in bullet points or numbered lists for easy
scanning.

- **Information in Tables**: For data-heavy content, tables help users compare information
quickly.

#### 7. Key Information Display

- **Focus on Important Concepts**: Key information should be highlighted using various

techniques:

- **Bold Text or Different Colors**: This draws the user's eye to important facts or ideas.

- **Key Points in Phrases**: Present crucial information in simple phrases or keywords to

ensure clarity.

### Conclusion
By adhering to these principles of information retrieval on the web, designers and content
creators can significantly enhance user experience. This leads to better engagement, increased
satisfaction, and ultimately, a more successful website. Ensuring content is easy to find, read,
and understand is essential in meeting users' diverse needs in the fast-paced online
environment.

# Statistical Graphics
## Definition

- A **statistical graphic** is a method of presenting data visually, often referred to as a

**chart** or **graph**.

- A well-designed statistical graphic enhances understanding by visually communicating

complex information.

## Use of Statistical Graphics

- Statistical graphics should be reserved for **rich, complex, or difficult** data. They help to
clarify intricate relationships or trends that may be hard to understand through text alone.

## Data Presentation

- **Emphasize the Data**: The main focus of the graphic should be the data itself, ensuring
that the viewer can quickly grasp the information being presented.

- **Minimize Non-Data Elements**: Remove unnecessary elements that do not contribute to

the understanding of the data. This helps reduce distractions.

- **Minimize Redundant Data**: Avoid repeating the same information within the graphic to
maintain clarity.

- **Fill the Graph’s Available Area with Data**: Utilize the space effectively to present data
comprehensively, ensuring it is not cramped or spread too thin.

- **Show Data Variation**: Highlight differences or changes in data over time or categories to
illustrate trends effectively.
- **Provide Proper Context for Data Interpretation**: Include necessary background
information to help viewers understand the significance of the data presented.

## Scales and Shading

- **Ticks and Marks**: Place tick marks on the outside edge of each axis to clearly indicate
measurement intervals.

- **Employ a Linear Scale**: Use a linear scale for straightforward interpretation of data.

- **Standard Intervals**: Mark scales at standard or customary intervals for consistency and
ease of understanding.

- **Start a Numeric Scale at Zero**: This practice avoids misleading representations of data and
provides a clear baseline for comparisons.

- **Single Scale Display**: Display only one scale on each axis to prevent confusion.

- **Scale Interpretation Aids**: Provide additional cues or explanations that help viewers
understand how to read the scale effectively.

- **Clear Axis Labels**: Clearly label each axis to inform viewers of what each dimension
represents, enhancing comprehension.

- **Scaling Consistency**: Maintain consistent scaling across graphics to facilitate comparisons.

- **Duplicate Axis for Large Scale Data**: In cases of extensive data ranges, consider using a
duplicate axis for clearer representation.

## Additional Considerations

- **Proportion**: Ensure that the proportions in the graphic accurately reflect the data
represented to avoid distortion.

- **Lines**: Use lines effectively to guide the viewer's eye and connect data points in a
meaningful way.

- **Labeling**: Include clear labels for data points or categories to improve readability.

- **Title**: Provide a descriptive title for the graphic that summarizes the content and context
of the data presented.
- **Interpretation of Numbers**: Ensure that numbers are presented in a way that allows for
easy interpretation, helping viewers understand the data without confusion.

By focusing on these aspects, statistical graphics can effectively communicate complex data in
an accessible and understandable manner, aiding in analysis and decision-making.

# Types of Statistical Graphs

Understanding different types of statistical graphs is crucial for effectively presenting data. Each
type has its specific uses, advantages, and best practices to ensure clear communication of
information.

## 1. Curve and Line Graphs

- **Definition**: These graphs display data points connected by lines or curves, highlighting
trends over time or between variables.

- **Usage**:

- **Single Graph**: Use a single graph to maintain clarity and focus.

- **Four to Five Maximum**: Limit the number of lines or curves to four or five to avoid
clutter.

- **Label Identification**: Clearly label each line or curve for easy identification.

- **Legend**: Include a legend to explain what each line or curve represents.

- **Tightly Packed Curves**: Ensure that tightly packed curves do not overlap excessively,
which can lead to misinterpretation.

- **Important or Critical Data**: Highlight critical data points to draw attention to significant
trends or changes.

- **Comparing Actual and Projected Data**: Use line graphs to compare actual performance
against projections to identify discrepancies.

- **Data Differences**: Use different colors or styles to denote variations in data.

## 2. Surface Charts

- **Definition**: These charts represent three-dimensional data, showing relationships

between multiple variables.

- **Usage**:

- **Ordering**: Organize data logically to help viewers understand relationships.

- **Coding Schemes**: Use color coding or shading to differentiate data points or areas.

- **Labels**: Ensure that all axes and data points are clearly labeled for easy interpretation.

## 3. Scatter Plots

- **Definition**: Scatter plots display individual data points on two dimensions, allowing for the
visualization of relationships between variables.

- **Usage**:

- **Two Dimensions**: Each axis represents a different variable.

- **Consistent Intervals**: Maintain consistent intervals on both axes for clarity.

- **Multiple Datasets**: Use different markers or colors to represent multiple datasets within
the same plot.

- **Significant Points**: Highlight significant points or trends within the data.

## 4. Bar Graphs

- **Definition**: Bar graphs use rectangular bars to represent data quantities, making
comparisons straightforward.

- **Usage**:

- **Consistent Orientation**: Ensure bars are oriented consistently (either horizontally or

vertically) for easy comparison.

- **Meaningful Organization**: Organize bars meaningfully to reflect the data's narrative.

- **Bar Spacing**: Maintain appropriate spacing between bars to enhance readability.

 - **Differentiation**: Use different colors or textures to differentiate between data
categories.

- **Important or Critical Data**: Emphasize critical data points using color or size variations.

- **Related Bar Ordering**: Order related bars logically to aid comparison.

- **Reference Index**: Include a reference index if necessary for context.

- **Labeling**: Clearly label each bar and its corresponding value.

- **Segmented or Stacked Bars**: Use segmented or stacked bars to show composition and
totals in a single graph.

- **Data Category Ordering**: Organize segments based on data categories for clarity.

- **Large Segments**: Ensure that large segments are easily distinguishable.

- **Coding Schemes**: Utilize coding schemes to categorize data visually.

- **Labeling**: Include clear labels for each segment.

## 5. Flowcharts

- **Definition**: Flowcharts depict processes or workflows, illustrating the sequence of steps

involved.

- **Usage**:

- **Order of Steps**: Clearly represent the order of operations in the process.

- **Orientation**: Maintain a consistent orientation to aid readability.

- **Coding Conventions**: Use standardized shapes and symbols for various elements (e.g.,
rectangles for processes, diamonds for decisions).

- **Arrows**: Include arrows to indicate the flow of the process.

- **Highlighting**: Use highlighting to draw attention to key steps or decisions.

- **One Decision at Each Step**: Ensure each step leads to a single decision point to simplify
the flow.
 - **Consistently Order and Word All Choices**: Use consistent terminology and ordering for
choices to reduce confusion.

## 6. Pie Charts

- **Definition**: Pie charts visually represent proportions of a whole by dividing a circle into
slices.

- **Usage**: Use pie charts sparingly, as they are best for showing relative sizes of parts to a
whole, especially when there are limited categories.

# Technological Consideration - Interface Design

In interface design, various technological considerations are crucial to ensure that the graphical
systems are effective, user-friendly, and compatible with different platforms and devices. This
includes understanding the capabilities of the system, ensuring platform compatibility, and
addressing other essential factors.

## 1. Graphical Systems
### a. System Compatibility

- **Screen Design Must Be Compatible with System Capabilities**:

- **System Power**: The design should utilize the available processing power efficiently,
ensuring that graphics render smoothly without lag.

- **Screen Size**: Design elements should be adaptable to various screen sizes, providing a
consistent experience across devices.

- **Screen Resolution**: High-resolution displays can showcase more detail; designs should
leverage this capability to enhance clarity and sharpness.

- **Display Colors**: Utilize the color capabilities of the display to enhance visual appeal while
maintaining accessibility for all users, including those with color vision deficiencies.

- **Other Display Features**: Consider additional features such as touch capability or 3D

effects that can improve user interaction.
### b. Platform Compatibility

- **Development and Implementation**: The design must consider the specific technologies
used for development (e.g., HTML, CSS, JavaScript) to ensure smooth implementation across
platforms.

- **Platform Style Guide**: Adhering to the style guide of the platform helps maintain
consistency and usability, aligning with user expectations and design standards.

- **Browser Compatibility**: Ensure that the interface functions correctly across different web
browsers, accounting for variations in rendering and performance.

### c. Monitor Size and Resolution

- Monitor specifications significantly impact the display of graphical elements:

- **Large Monitors**: Take advantage of additional screen real estate for displaying more
information or interactive elements.

- **High-Resolution Monitors**: High DPI settings allow for finer details in graphical elements,
improving user experience.

## 2. Fonts

- **Font Selection**: Choose fonts that enhance readability and maintain brand consistency:

- **Color**: Ensure that font colors contrast well with the background for legibility.

- **Bandwidth**: Optimize font files to minimize loading times, especially for web
applications.

- **Versioning**: Consider font licensing and version updates to ensure compliance and
access to new features.
## 3. Other Considerations

- **Downloading**: Design should facilitate quick and efficient downloading, minimizing

waiting times for users.

- **Currency**: Keep the design updated with current trends and technological advances to
maintain relevance.

- **Page Printing**: Ensure that the interface can adapt to printed formats, preserving layout
and readability when printed.

- **Maintainable**: The design should be easy to maintain and update, allowing for scalability
and future enhancements without significant overhauls.

By considering these technological aspects in interface design, developers can create effective,
user-friendly graphical systems that enhance user interaction and satisfaction. This attention to
detail not only improves usability but also aligns with users' expectations across various devices
and platforms.