TCS 756- HUMAN COMPUTER INTERACTION

Introduction: Importance of User Interface (UI)

The User Interface (UI) is how people interact with a computer system, website, or
app. Think of it as the bridge between a person and the technology. It includes
everything from buttons and menus to the layout of a webpage or app screen.

Definition of Good Design

A good UI design means creating an interface that is:

 Easy to use: Even for someone new to the system.

 Efficient: Helps users get their tasks done quickly.
 Attractive: Looks clean and professional, which makes people want to use it.

Why is Good Design Important?

Imagine using a website or app where buttons are hard to find, or the layout is
confusing. Frustrating, right? That’s why good design is important—it makes things
easy, enjoyable, and accessible. Here’s why it matters:

1. Improves User Experience (UX):

A good UI ensures users feel comfortable and satisfied.
2. Saves Time:
Users can find what they need and complete tasks faster.
3. Builds Trust:
A professional, user-friendly design makes users trust the system or product.
4. Encourages Reuse:
If the design is good, people will come back to use it again.
5. Reduces Errors:
Clear layouts and instructions prevent users from making mistakes.

Benefits of Good Design

Good UI design isn’t just about making things look pretty; it has real benefits:

 For Users:
They get a better, easier experience.
 For Businesses:
A good UI can attract more customers, reduce complaints, and improve sales.
 For Developers:
A well-thought-out design means fewer revisions and fixes later.

A Brief History of Screen Design

UI has come a long way. Let’s look at how it evolved:

1. Command-Line Interfaces (1960s-1970s):

Early computers had no graphics. Users typed commands to interact with the
system.
Example: MS-DOS.
2. Graphical User Interfaces (1980s):
GUIs introduced windows, icons, and menus. They were easier to use because
they used graphics instead of just text.
Example: Apple Macintosh.
3. Web Interfaces (1990s):
The internet became popular, and websites introduced simple interfaces like
hyperlinks and forms.
4. Mobile Interfaces (2000s):
Smartphones brought touchscreens and gestures like swiping and pinching.
5. Modern Interfaces (2010s-Present):
Today, we have advanced UIs like voice commands (e.g., Alexa), augmented
reality (AR), and virtual reality (VR).

Graphical User Interface (GUI)

A Graphical User Interface (GUI) uses visuals like icons, buttons, and windows
to make systems more interactive and easier to use.

Why are Graphics Popular?

 People process visuals faster than text.

  Graphics make interfaces more engaging and fun.

Direct Manipulation:

This means users can interact with things on the screen directly. For example:

 Dragging a file into a folder.

 Resizing a window by clicking and dragging its edges.

Characteristics of GUIs:

1. Icons:
Visual symbols that represent actions or files (e.g., a trash bin icon for
deleting files).
2. Point-and-Click:
Use of a mouse or touchscreen to select items.
3. Feedback:
Immediate response to actions, like a button lighting up when clicked.
4. Ease of Learning:
GUIs are intuitive, so even new users can understand them quickly.

Web User Interfaces

With the rise of the internet, web interfaces became essential. These are the designs
we see on websites and web apps.

Why are Web UIs Popular?

 Accessible from any device with a browser.

 No need to install software.

Characteristics of Web UIs:

1. Responsive Design:
Adapts to different screen sizes, from phones to desktops.
2. Interactive Elements:
Includes buttons, sliders, and animations to make the experience engaging.
3. Consistency:
Uniform design across all pages helps users feel familiar.
Principles of User Interface Design

Creating a good UI isn’t random; it follows certain principles. Here are the key
ones:

1. Clarity:
Keep the design simple and easy to understand.
Example: Use clear labels like "Submit" instead of vague ones like "Do it."
2. Consistency:
Use the same colors, fonts, and button styles across the interface.
Example: If the "Back" button is always blue, don’t suddenly make it red on
one screen.
3. Feedback:
Show users what’s happening after they take an action.
Example: A loading spinner when a page is loading.
4. Efficiency:
Help users complete tasks quickly.
Example: Autofill forms to save time.
5. Flexibility:
Design for all types of users, from beginners to experts.
Example: Include shortcuts for advanced users.
6. Accessibility:
Make sure the interface works for everyone, including people with disabilities.
Example: Add screen reader support for visually impaired users.

Summary

 What is UI?
It’s the part of a system that users interact with.
 Why is Good UI Important?
It improves user experience, saves time, and builds trust.
 How Did UI Evolve?
From text-based systems to modern interfaces like touchscreens and voice
commands.
 What Makes a Good UI?
Clarity, consistency, feedback, efficiency, flexibility, and accessibility.
Design Process in Human-Computer Interaction (HCI)

The design process in Human-Computer Interaction (HCI) focuses on creating

systems that are user-friendly, efficient, and enjoyable to use. It involves
understanding how humans interact with computers and designing interfaces that
cater to their needs and abilities.

Human Interaction with Computers

Human interaction with computers is the way people use devices like laptops,
smartphones, or websites to perform tasks. This interaction involves input (what
users do) and output (how the system responds). Examples include typing on a
keyboard, clicking a mouse, or tapping a touchscreen.

Key Elements of Interaction:

1. Input Devices: Tools like keyboards, mice, touchscreens, and voice

commands that allow users to communicate with the computer.
2. Output Devices: Displays, speakers, and printers that present information
back to the user.
3. Feedback: Immediate responses to user actions, such as a button changing
color when clicked.

Importance of Human Characteristics in Design

When designing systems, it’s important to consider human characteristics to ensure

the interface is intuitive and easy to use. Some key characteristics include:

1. Physical Characteristics:

 Motor Skills:
People have different abilities to move and control devices. For example:
o Buttons should be large enough for easy tapping.
o Avoid requiring precise movements, like dragging tiny sliders.
 Vision:
Not everyone has perfect eyesight.
o Use readable fonts and good contrast between text and background.
o Include options for zooming in or enlarging text.
  Hearing:
For users with hearing impairments, provide visual alternatives to audio
feedback, such as subtitles or visual alerts.

2. Cognitive Characteristics:

 Memory:
People can only remember a limited amount of information at once.
o Avoid overwhelming users with too many options.
o Use clear labels and consistent layouts to reduce cognitive load.
 Attention Span:
Users may get distracted or lose focus.
o Keep interfaces simple and remove unnecessary distractions.
o Highlight important actions or information.

3. Emotional Characteristics:

 Users respond emotionally to design.

o A clean, attractive design can make users feel positive.
o Errors or confusing layouts can frustrate them.
o Provide clear error messages and guidance to help users recover.

Human Considerations in Design

Human considerations focus on designing systems that accommodate diverse

users. Key factors include:

1. Accessibility:
o Ensure the system is usable by people with disabilities.
o Add features like screen readers, keyboard navigation, and captions.
2. Cultural Differences:
o Colors, symbols, and language may mean different things in different
cultures.
o Design with a global audience in mind.
3. User Preferences:
o Some users prefer dark mode, while others prefer light mode.
 oOffer customization options.
4. Learning Curve:
o Design systems that are easy to learn for beginners but also efficient for
advanced users.

Human Interaction Speeds

Humans have limits on how quickly they can interact with a system. Designers
must account for these speeds to ensure the interface feels natural.

1. Reaction Time:
o How quickly users can respond to visual or auditory cues.
o Example: A flashing notification catches attention faster than a static
one.
2. Typing Speed:
o Some users type slowly, so avoid requiring excessive text input.
o Example: Use dropdown menus instead of asking users to type long
answers.
3. Clicking and Scrolling Speed:
o Ensure buttons and links are easy to click.
o Avoid long pages that require too much scrolling.
4. Reading Speed:
o Use concise, clear text.
o Break content into short paragraphs or bullet points for faster reading.

Understanding Business Functions

When designing systems, it’s important to understand the business functions the
system will support. This ensures the design meets the needs of the organization
and its users.

What are Business Functions?

Business functions are the tasks and processes that a system is designed to help
with. Examples include:

 Customer Service: Helping users find information or resolve issues.

 Sales and Marketing: Allowing users to browse and purchase products.
  Data Management: Enabling users to input, store, and retrieve information.

Why Understanding Business Functions is Important:

1. Align Design with Goals:

o The interface should support the organization’s objectives.
o Example: A shopping website should make it easy to browse and buy
products.
2. Improve Efficiency:
o A well-designed system can streamline workflows and reduce errors.
o Example: Automating repetitive tasks like data entry.
3. Enhance User Experience:
o Understanding how users interact with the system ensures their needs
are met.
o Example: Adding a search bar to help users find products quickly.

Summary

The design process in HCI involves creating systems that are easy to use, efficient,
and enjoyable. To achieve this:

1. Understand how humans interact with computers.

2. Consider human characteristics like physical, cognitive, and emotional traits.
3. Design for human interaction speeds to avoid frustrating delays.
4. Align the design with business functions to meet organizational goals.

-----------------------------------------------------------------------------------------------------
----------------

Screen Designing in User Interface (UI)

Screen designing is about creating layouts and interfaces that are functional,
visually appealing, and user-friendly. It involves arranging elements on a screen in
a way that makes it easy for users to interact with the system.
Design Goals

The main goals of screen design are:

1. Usability:
Ensure the screen is easy to use and navigate.
2. Clarity:
Present information in a clear and understandable way.
3. Consistency:
Maintain a uniform design across all screens.
4. Efficiency:
Help users complete tasks quickly with minimal effort.
5. Aesthetics:
Make the screen visually appealing to enhance user experience.

Screen Planning and Purpose

Before designing a screen, it’s essential to:

1. Understand the Purpose:

o What is the screen meant to do?
Example: A login screen should allow users to enter their credentials
easily.
2. Define the Target Audience:
o Who will use the screen?
Example: A banking app for seniors may need larger text and buttons.
3. Plan the Layout:
o Decide where to place elements like headers, menus, and buttons.

Organizing Screen Elements

Organizing elements properly ensures users can find what they need quickly.

Key Principles:

1. Group Related Elements:

o Place similar items together.
Example: Group "Save" and "Cancel" buttons near each other.
 2. Use Visual Hierarchy:
o Make important elements stand out using size, color, or position.
Example: Highlight the "Submit" button with a bright color.
3. Align Elements:
o Align text, buttons, and images to create a clean and professional look.

Ordering of Screen Data and Content

The order of information on a screen matters. Follow these guidelines:

1. Top-to-Bottom, Left-to-Right:
o Most users read screens like they read text, starting at the top-left.
2. Prioritize Important Information:
o Place key details at the top.
Example: Show a product’s price and name before its description.
3. Use Progressive Disclosure:
o Show basic information first, and let users expand for more details.
Example: Use “Read More” links.

Screen Navigation and Flow

Navigation refers to how users move between screens or sections. A good flow
ensures users don’t get lost.

Best Practices:

1. Use Clear Menus:

o Provide easy-to-understand navigation options.
Example: A navigation bar with labels like "Home," "About," and
"Contact."
2. Add Breadcrumbs:
o Show users their current location within the app or website.
Example: Home > Products > Electronics >
Smartphones.
3. Ensure Logical Flow:
o Arrange screens in the order users are likely to follow.
Example: Login > Dashboard > Profile Settings.
Visually Pleasing Composition

A visually pleasing screen design makes users feel comfortable and engaged.

Key Elements:

1. Balance:
o Distribute elements evenly to avoid a cluttered or empty look.
2. Contrast:
o Use contrasting colors to highlight important elements.
Example: Dark text on a light background.
3. Alignment:
o Align elements neatly to create a clean layout.
4. Whitespace:
o Leave empty space between elements to avoid clutter.

Amount of Information

Too much information can overwhelm users, while too little can leave them
confused. Strike a balance by:

1. Showing Only What’s Necessary:

o Avoid overloading the screen with irrelevant details.
2. Using Short Sentences and Bullet Points:
o Make content easy to scan.
3. Breaking Content into Sections:
o Use headings and subheadings to organize information.

Focus and Emphasis

Guide users’ attention to the most important elements.

1. Use Size and Color:

o Make key buttons larger or brighter.
Example: A "Buy Now" button in bright orange.
2. Highlight Important Content:
 oUse bold text or icons to emphasize key points.
3. Avoid Distractions:
o Remove unnecessary animations or pop-ups.

Presenting Information Simply and Meaningfully

Make sure users can understand the content easily.

1. Use Plain Language:

o Avoid jargon or complex terms.
2. Provide Clear Labels:
o Use descriptive labels for buttons and fields.
Example: “Enter Email” instead of “Input.”
3. Include Visual Aids:
o Use icons, charts, or images to explain concepts.

Information Retrieval on the Web

For web interfaces, users often need to find specific information quickly.

1. Add a Search Bar:

o Make it easy for users to search for what they need.
2. Use Filters and Categories:
o Help users narrow down results.
Example: Filter products by price or brand.
3. Provide Quick Links:
o Include shortcuts to popular sections.
Example: “Top Products” or “New Arrivals.”

Statistical Graphics

Statistical graphics like charts and graphs are useful for presenting data visually.

1. Choose the Right Type:

o Use bar graphs for comparisons, line charts for trends, and pie charts for
proportions.
 2. Keep It Simple:
o Avoid cluttering the graph with too many details.
3. Label Clearly:
o Add titles, labels, and legends for clarity.

Technological Considerations in Interface Design

When designing interfaces, consider the technology being used.

1. Device Compatibility:
o Ensure the design works on desktops, tablets, and smartphones.
2. Performance:
o Optimize the design for fast loading times.
3. Accessibility:
o Support screen readers, keyboard navigation, and other assistive
technologies.
4. Scalability:
o Design interfaces that can handle more users or data as the system
grows.

Summary

Screen designing involves careful planning and execution to create interfaces that
are functional, user-friendly, and visually appealing. By focusing on organizing
elements, ensuring smooth navigation, and presenting information clearly, designers
can create effective screens that meet users' needs and expectations.

Windows and Navigation Schemes in UI Design

Windows and navigation schemes are fundamental to creating effective and user-
friendly interfaces. They determine how users interact with the application and
access its features.

Selection of Window
Windows are the areas where users interact with the system. Selecting the right type
of window is crucial for a smooth user experience.

1. Types of Windows:
o Primary Windows:
Main screens where users perform core tasks.
Example: A word processor's document editing screen.
o Secondary Windows:
Supportive screens for additional tasks like settings or help.
Example: A pop-up for "Preferences."
o Dialog Boxes:
Temporary windows for quick interactions like confirmations or alerts.
Example: "Are you sure you want to delete this file?"
2. Key Considerations:
o Ensure the window size fits the content without unnecessary scrolling.
o Avoid too many open windows to reduce user confusion.
o Use modal windows (blocking) only when the user must complete an
action before proceeding.

Navigation Schemes

Navigation schemes define how users move through an application or website. A

good navigation scheme ensures users can find what they need quickly and easily.

1. Common Navigation Schemes:

o Hierarchical Navigation:
Organizes content in a tree-like structure.
Example: File Explorer.
o Linear Navigation:
Guides users step-by-step.
Example: A multi-step form.
o Global Navigation:
Provides access to key sections from anywhere.
Example: A website's top menu bar.
2. Best Practices:
o Use clear labels for menus and buttons.
o Provide breadcrumbs to show users their location.
o Ensure navigation is consistent across screens.
Selection of Devices and Screen-Based Controls

Choosing the right input devices and screen controls depends on the context of use.

1. Device-Based Controls:
o Mouse and Keyboard:
Use dropdown menus, sliders, and buttons for precision tasks.
o Touchscreens:
Use larger buttons and swipe gestures for ease of use.
o Voice Commands:
Include voice-based controls for hands-free interaction.
Example: "Search for nearest restaurants."
2. Screen-Based Controls:
o Buttons:
For initiating actions like "Submit" or "Cancel."
o Sliders:
For adjusting values like volume or brightness.
o Dropdowns:
For selecting from a list of options.
o Checkboxes and Radio Buttons:
For making multiple or single selections.

Components in UI Design

Components are the building blocks of a user interface. They include text, icons,
multimedia, colors, and more.

Text and Messages

1. Text:
o Use clear and concise language.
o Maintain a consistent font style and size.
o Avoid jargon or overly technical terms.
2. Messages:
 o Informational Messages:
Provide useful information.
Example: "Your file has been saved."
o Error Messages:
Clearly explain what went wrong and how to fix it.
Example: "Invalid email address. Please try again."
o Confirmation Messages:
Confirm user actions.
Example: "Are you sure you want to log out?"

Icons and Increases

Icons are visual symbols representing actions or objects.

1. Effective Use of Icons:

o Ensure they are universally recognizable.
Example: A trash can icon for "Delete."
o Use tooltips or labels for clarity.
o Avoid using too many icons, which can clutter the interface.
2. Benefits of Icons:
o Save space on the screen.
o Enhance visual appeal.
o Provide quick recognition of actions.

Multimedia

Multimedia elements like images, videos, and audio enhance user engagement.

1. Uses:
o Images for visual representation.
Example: Product photos in an e-commerce app.
o Videos for tutorials or demonstrations.
Example: "How-to" videos in a cooking app.
o Audio for alerts or feedback.
Example: A sound when receiving a message.
2. Challenges:
o Large multimedia files can slow down the interface.
 o Poor-quality media can reduce user trust.

Colors in UI Design

Colors play a vital role in the user interface, affecting usability and aesthetics.

1. Uses of Colors:
o Highlighting:
Use bright colors to draw attention.
Example: A red "Delete" button.
o Categorizing:
Use different colors for grouping.
Example: Green for success, red for errors.
o Branding:
Use colors that align with the brand identity.
2. Choosing Colors:
o Ensure good contrast for readability.
Example: Dark text on a light background.
o Limit the color palette to 3-5 main colors to avoid visual clutter.
o Consider cultural implications of colors.
Example: Red symbolizes danger in some cultures but luck in others.
3. Problems with Colors:
o Overuse of bright colors can strain the eyes.
o Inadequate contrast can make text hard to read.
o Accessibility issues for colorblind users.

Presentation of Information

Presenting information effectively ensures users can access and understand it

quickly.

1. Focus and Emphasis:

o Highlight key information using bold text or color.
o Use headings and subheadings to organize content.
2. Simplicity:
o Avoid overloading the screen with too much information.
o Break content into smaller sections.
 3. Accessibility:
o Use alternative text for images.
o Ensure the interface is navigable using a keyboard.

Statistical Graphics

Statistical graphics like charts and graphs are used to present data visually.

1. Best Practices:
o Choose the right type of graphic for the data.
Example: Use bar charts for comparisons.
o Keep the design simple and uncluttered.
o Label axes and provide legends for clarity.

Summary

Effective window selection, navigation schemes, and the use of components like
text, icons, and colors are essential for creating a user-friendly interface. By
focusing on clarity, simplicity, and accessibility, designers can ensure their
interfaces meet user needs and expectations.

Software Tools in User Interface Design

Software tools play a critical role in designing, building, and refining user
interfaces. They help streamline the design process, ensure consistency, and provide
functionalities for testing and implementation.

Specification Methods

Specification methods are techniques used to define the structure, functionality, and
behavior of a user interface. These methods ensure that the interface meets user
requirements and is aligned with project goals.
 1. Prototyping Tools:
o Allow designers to create mockups or prototypes of the interface.
o Examples: Figma, Adobe XD, Sketch.
o Benefits: Visualize the interface, test usability, and gather feedback.
2. Modeling Tools:
o Define the logical flow and structure of the interface.
o Examples: UML diagrams, wireframes.
o Benefits: Clarify how users will interact with the system.
3. Documentation Tools:
o Capture interface specifications, guidelines, and standards.
o Examples: Microsoft Word, Confluence, Notion.
o Benefits: Provide a reference for developers and stakeholders.

Interface-Building Tools

Interface-building tools are software applications used to design and implement

user interfaces.

1. Code-Based Tools:
o Allow direct coding of the interface.
o Examples: Visual Studio Code, IntelliJ IDEA.
o Benefits: Full control over customization and integration with backend
logic.
2. No-Code/Low-Code Tools:
o Enable creating interfaces with minimal coding.
o Examples: Bubble, Webflow, Wix.
o Benefits: Faster development and easier for non-developers.
3. GUI Builders:
o Provide drag-and-drop features for designing graphical user interfaces.
o Examples: Qt Designer, JavaFX Scene Builder.
o Benefits: Simplify the creation of complex interfaces.

Interaction Devices

Interaction devices are hardware components that allow users to interact with
software systems. They provide input and output capabilities for seamless
communication between humans and computers.
Keyboard and Function Keys

1. Keyboard:
o A primary input device for typing and command entry.
o Includes alphanumeric keys, special keys (e.g., Enter, Shift), and
navigation keys (e.g., Arrow keys).
2. Function Keys:
o Keys like F1 to F12 provide shortcuts for specific tasks.
o Examples:
 F1: Help menu.
 F5: Refresh.
 F12: Open developer tools in browsers.
3. Benefits:
o Quick and precise input.
o Widely supported across devices and applications.

Pointing Devices

Pointing devices enable users to interact with graphical elements on a screen.

1. Types of Pointing Devices:

o Mouse:
A handheld device for moving a pointer and selecting items.
o Trackpad:
A touch-sensitive surface for controlling the cursor.
o Stylus:
A pen-like device for precise input, often used with tablets.
o Joystick:
A lever used in gaming or simulations.
2. Benefits:
o Intuitive and easy to use.
o Ideal for graphical interfaces.

Speech Recognition and Generation

1. Speech Recognition:
 o Converts spoken words into text or commands.
o Examples: Siri, Alexa, Google Assistant.
o Benefits: Hands-free interaction, accessibility for users with disabilities.
2. Speech Generation:
o Converts text into spoken words (Text-to-Speech).
o Examples: Audiobook readers, GPS navigation systems.
o Benefits: Improves accessibility and user engagement.

Digitization and Generation

1. Digitization:
o Converts analog signals (e.g., sound, images) into digital data.
o Examples: Scanners, microphones.
o Benefits: Enables storage, editing, and sharing of analog data in digital
form.
2. Generation:
o Produces digital outputs like sounds or images.
o Examples: Printers, speakers.
o Benefits: Converts digital data into usable forms for users.

Image and Video Displays

Displays are output devices that present visual information to users.

1. Types of Displays:
o LCD (Liquid Crystal Display):
Common in monitors and laptops.
o LED (Light Emitting Diode):
Energy-efficient and vibrant displays.
o OLED (Organic LED):
High contrast and thinner screens.
o Touchscreen Displays:
Combine input and output functionality.
2. Applications:
o Presenting images, videos, and textual data.
o Interactive interfaces for kiosks and smartphones.
Drivers

Drivers are software programs that enable communication between hardware

devices and the operating system.

1. Role of Drivers:
o Translate user actions (e.g., mouse clicks) into commands understood by
the system.
o Ensure hardware devices function correctly with software applications.
2. Examples:
o Printer drivers for printing documents.
o Graphics drivers for rendering images and videos.
3. Importance:
o Ensure compatibility between hardware and software.
o Optimize performance of devices.

Summary

 Software Tools: Facilitate designing and building user interfaces, with

options ranging from prototyping to coding tools.
 Interaction Devices: Include keyboards, pointing devices, and advanced
technologies like speech recognition for user input.
 Displays and Drivers: Present visual information and ensure smooth
communication between hardware and software.