Department of Computer Science & Engineering

HUMAN COMPUTER INTERACTION

COURSE CODE: CSAI4701

Lab Manual

For

BACHELOR OF

Engineering & Technology

SCHOOL OF COMPUTING SCIENCE AND ENGINEERING

GALGOTIAS UNIVERSITY, GREATER NOIDA

UTTAR PRADESH

Last revised on 08.08.2023 -Drafted by:

Ms. Shruti Sachdeva
 LIST OF EXPERIMENTS
Sr.
Title Of Lab Experiments
No.
1. Understanding the trouble of interacting with machine -redesign the interface for home appliances.
2. Identify 5 different website catering to one specific goal and perform the comparative analysis
3. Develop system menu and navigation scheme.
4. Demonstrate the use of statistical graphics.
5. Demonstrate the use of color and animation selection
6. Design and develop the icon use in the website making.
7. Write an HTML program to develop a website for the awareness of covid-19.
8. Create a model for face recognition
9. Create a model for recognition face for men or women
10. Analyze and demonstrate a model for emoji.
Value Added Experiments
11 Develop a model for checking the voice related to which human being.
12. Develop a model for checking the pose of human.

2|P a g e
 EXPERIMENT DETAILS
EXPERIMENT 1
Title Understanding the trouble of interacting with machine -redesign the interface for home
appliances (e.g. Washing Machine)
Introduction In this lab activity, we will focus on understanding the challenges users face while
interacting with the interface of a washing machine. The objective is to identify
usability issues and propose a redesigned interface that enhances the user experience.
By performing this experiment, we aim to apply principles of Human-Computer
Interaction (HCI) to create a more user-friendly washing machine interface.
Materials Washing machine with its current interface
Notepad and pen for documentation
Camera or smartphone for capturing interactions (optional)
Design software or paper prototyping materials for redesigning the interface (optional)
Procedure 1. Interacting with the Machine
 Begin by using the washing machine's current interface for various tasks, such
as starting a wash cycle, adjusting settings, and checking progress.
 Note down any difficulties or confusions you encounter during the interaction.

2. Analyzing User Needs

 Interview yourself or a family member who frequently uses the washing
machine.
 Ask about their experiences, preferences, and challenges when using the
current interface.
 Take notes on their feedback to understand user needs.

3. Redesigning the Washing Machine Interface

 Based on your observations and the user needs analysis, propose a redesigned
interface for the washing machine.
 Consider how you can address the identified usability issues and enhance the
overall user experience.
Current Describe the appliance (washing machine) model and its current interface.
Interface

SAMPLE1
(Poor Microwave interface design)

3|P a g e
 Redesigned :

SAMPLE 2:
(Poor landline phone interface)

4|P a g e
 Redesigned:

Usability Detail the usability issues you (and other user categories – disabled, elderly, young
Issues children etc.) encountered while using the current application interface.
Include examples or scenarios that illustrate these issues.
User Needs Present the insights you gained from the interview about user experiences and
Analysis challenges. Use quotes or examples from the interview to support your analysis.

Redesigned Showcase your redesigned interface.

Interface Provide visual representations or descriptions of the changes you made to address the
identified usability issues and cater to user needs.
Justification Explain the design decisions you made during the redesign process.
Connect each design choice to the specific usability issue or user need you aimed to

5|P a g e
 resolve.
Conclusion Summarize the key findings from your experiment and redesign process.
Reflect on the importance of considering user needs in the design of home appliance
interfaces.

NOTE: Through this individual lab activity, you have gained insights into the
challenges users face when interacting with washing machine interfaces. By
proposing a redesigned interface, you have demonstrated the application of
Human-Computer Interaction principles to create a more user-friendly
experience. This activity serves as a practical introduction to HCI and
emphasizes the significance of user-centered design in improving everyday
appliances.
Assessment Your documentation will be assessed based on the following criteria:
Identification and explanation of usability issues in the current washing machine
interface
Clarity and creativity of the proposed redesigned interface
Consideration of user needs and preferences in the redesign
Justification and rationale for design decisions
Overall presentation and clarity of the documentation

6|P a g e
 EXPERIMENT 2
Title Identify 5 different website catering to one specific goal and perform the comparative
analysis
Introduction The goal of this comparative analysis is to evaluate and compare five different
websites that cater to the specific goal of online grocery shopping. Each website
aims to provide users with a seamless and user-friendly experience in purchasing
groceries online. The analysis will focus on various aspects of Human-Computer
Interaction (HCI), including user interface design, navigation, information
presentation, and overall user experience.
Websites Instacart (www.instacart.com)
Under Amazon Fresh (www.amazon.com/amazonfresh)
Review Walmart Grocery (grocery.walmart.com)
FreshDirect (www.freshdirect.com)
Peapod (www.peapod.com)
Methodology To perform the comparative analysis from an HCI perspective, we will consider the
following criteria for each website:
 User Interface
 Navigation
 Information Presentation’
 User Experience

User Interface (UI):

1. Evaluate the visual design and layout of the websites.
2. Assess the consistency and coherence of the UI elements.
3. Consider the use of color, typography, and imagery for better user
engagement.

Navigation:
1. Review the ease of navigation and findability of different sections.
2. Evaluate the accessibility of important features like search and cart.
3. Consider the use of menus and categories for efficient browsing.

Information Presentation:
1. Examine the clarity and readability of product descriptions and details.
2. Evaluate the use of product images and how they enhance user understanding.
3. Consider the organization of product information for easy comparison.

User Experience (UX):

1. Assess the overall ease of completing a purchase on each website.
2. Evaluate the efficiency of the checkout process.
3. Consider the availability of support and assistance during the shopping
experience.

7|P a g e
 Feedback and Error Handling:
1. Examine the provision of feedback for user actions (e.g., adding to cart,
removing items).
2. Evaluate how errors are handled during the shopping process.
3. Consider the clarity of error messages and instructions for resolution.

Choose at least 5 use case scenarios to evaluate the websites on the aforementioned
criteria.
Results and Website 1. Instacart:
Findings:  UI: Modern and visually appealing design with clear product images.
 Navigation: Intuitive navigation with easy access to search and cart.
 Information Presentation: Product details are well-organized and easy to read.
 UX: Smooth checkout process with real-time updates on delivery status.
 Feedback and Error Handling: Informative feedback on product availability
and quick error resolution.

Website 2. Amazon Fresh:

 UI: Amazon's familiar and consistent UI design.
 Navigation: Effortless navigation with seamless integration into the Amazon
ecosystem.
 Information Presentation: Clear product information and customer reviews.
 UX: Streamlined checkout process with various payment options.
 Feedback and Error Handling: Effective feedback on order status and prompt
error messages.

Website 3. Walmart Grocery:

 UI: Clean and user-friendly design.
 Navigation: Straightforward navigation with an easy-to-use search bar.
 Information Presentation: Well-presented product details and availability.
 UX: Convenient pickup and delivery options with clear time slots.
 Feedback and Error Handling: Timely feedback on order status and helpful
error messages.

Website 4. FreshDirect:
 UI: A visually pleasing and modern interface.
 Navigation: User-friendly navigation with clear categories.
 Information Presentation: Detailed product descriptions and nutritional
information.
 UX: Efficient checkout process with customization options.
 Feedback and Error Handling: Informative feedback on delivery options and

8|P a g e
 helpful error messages.

5. Peapod:
 UI: Clear and straightforward design.
 Navigation: Easy navigation with prominent search and filter options.
 Information Presentation: Organized product details and availability.
 UX: Simple checkout process with time-saving features.
 Feedback and Error Handling: Instant feedback on cart updates and clear error
messages.
Conclusion Each website offers a positive user experience with minor variations in the context of
Human-Computer Interaction. Instacart stands out for its modern design and real-time
updates, while Amazon Fresh benefits from seamless integration into the Amazon
ecosystem. Walmart Grocery and FreshDirect provide convenient shopping
experiences, and Peapod offers a straightforward and efficient user journey. The
choice of the best website for online grocery shopping may depend on individual
preferences and the availability of services in a particular region.

Note: The above analysis is a fictional example, and the actual findings may differ
based on the websites and criteria selected for the analysis. Additionally, real-world
data and user testing would be required for a more accurate and comprehensive
comparative analysis.

EXAMPLE -2 (Banking Websites)

PNB:

9|P a g e
 SBI

Kotak

Axis

10 | P a g e
 HDFC

Interactions to compare:
1. Finding nearest branch
2. Blocking ATM
3. Opening new account
4. Finding contact number
5. Chat options?
6. Complaint/Grievance/Customer care ?
7. Language (Hindi/English customization available?)
8. Contact us?
9. Text size customizability (A+|A++|A+++)

Website/ SBI PNB Axis HDFC Kotak

Function
Finding Not easily Locate Us
nearest available on easily
branch home available in
screen the home
page with
clear visible
icon
Hindi Available Available Not
available
Text size Not Available Not
customizab Available available
ility

11 | P a g e
 Other website categories to compare:
1. Travel Planning: Expedia (www.expedia.com), Booking.com
(www.booking.com), TripAdvisor (www.tripadvisor.com), Kayak
(www.kayak.com), Airbnb (www.airbnb.com)
2. Online Learning: Coursera, NPTEL, Udemy, edx,khanacademy, byjus
3. Social networking etc.

Comparative Analysis Criteria (HCI Context):

 User Interface (UI): Evaluate the visual design, layout, and organization of
each website. Consider consistency, use of colors, typography, and overall
aesthetic appeal.
 Navigation: Assess how easy it is to navigate through each website. Look for
intuitive menus, clear labels, and a logical flow of information.
 Information Presentation: Analyze how product or content information is
displayed. Consider readability, use of images, categorization, and the clarity
of descriptions.
 Interactivity: Evaluate the interactive elements on each website, such as
buttons, links, forms, and feedback mechanisms. Assess the responsiveness
and intuitiveness of these elements.
 User Experience (UX): Consider the overall user experience from start to
finish, including sign-up, browsing, searching, selecting, and checkout
processes. Evaluate the efficiency and effectiveness of each step.
 Accessibility: Assess if the websites adhere to accessibility standards, making
them usable for users with disabilities. Check for features like alt text for
images and keyboard navigation.
 Personalization: Analyze the extent to which each website offers personalized
recommendations, content, or features based on user behavior and
preferences.
 Error Handling: Evaluate how each website handles errors, such as providing
clear error messages and guiding users toward resolution.
 Mobile Responsiveness: Assess how well each website adapts to different
screen sizes and devices, especially considering the increasing use of mobile
devices.
 Feedback and Reviews: Consider user reviews and ratings, if applicable, and
how these contribute to the user's decision-making process.
 Security: Analyze the presence of security features, such as HTTPS, secure

12 | P a g e
 payment options, and clear privacy policies.
 Assistance and Support: Evaluate the availability of customer support, help
centers, FAQs, and other resources that assist users when they encounter
problems or have questions.

By conducting a comparative analysis using these criteria, you can gain insights into
the strengths and weaknesses of each website's user interface and user experience,
helping you understand how well they cater to users' needs and preferences in the
context of Human-Computer Interaction.
Assessment Your documentation will be assessed based on the following criteria:
Identification and Explanation of HCI Issues:
Clarity and Creativity of Comparative Evaluation:
Consideration of User Needs and Preferences:
Justification and Rationale for Design Decisions:
Overall Presentation and Clarity of the Analysis:
Usability and User-Centered Focus:
Accessibility and Inclusivity Considerations:
Recommendations and Insights:
Critical Thinking and Depth of Analysis:
Incorporation of HCI Concepts:

13 | P a g e
 EXPERIMENT 3
Title Develop system menu and navigation scheme.
Introduction Imagine you enter a library with no signs or labels. How frustrating would it be to find
a specific book? Similarly, software applications without well-designed navigation can
confuse users and hinder their tasks.

What Are System Menus and Navigation Schemes?

System Menus: Interfaces that provide access to different sections, features, and tasks
of an application.
Navigation Schemes: The organizational structure that guides users through these
sections.

Importance of Effective Navigation

 User-Centered Design: Navigation should reflect users' mental models and
expectations.
 Efficient Task Completion: Well-designed navigation streamlines tasks,
reducing frustration.
 Enhanced Usability: Clear navigation contributes to a positive user experience.

Real-World Examples
Google: Intuitive navigation guides users to search, access services, and manage
accounts. Simple and recognizable icons ensure users can easily find what they need.

Microsoft Office Suite: Cohesive ribbon interface offers quick access to various
commands and tools. Organized by tasks and context, improving user productivity.

A system contains large amounts of information and performs a variety of functions.

Regardless of its purpose, the system must provide some means to tell people about
the information it possesses or the things it can do. This is accomplished by displaying
listings of the choices or alternatives the user has at appropriate points. These listings
of choices are commonly called menus. Menus are a major form of navigation through
a system and, if properly designed, assist the user in developing a mental model of the
system. Menus are effective because they utilize the more powerful human capability
of recognition rather than the weaker capability of recall. Working with menus
reminds people of available options and information that they may not be aware of or
have forgotten. Graphical and Web systems are heavily menu-oriented. In graphical
systems they are used to designate commands, properties that apply to an object,
documents, and windows. When selected, a graphical menu item may lead to another
menu, cause a window to be displayed, or directly cause an action to be performed. To
accomplish these goals, a graphical system presents a variety of menu styles to choose
from. Included are entities commonly called menu bars, and menus called pull-downs,
popups, cascades, tearoffs, and iconic. In Web site design, common menus include
textual links to other pages, command buttons, and both graphical and textual toolbars.

Importance of Task-Oriented Navigation

 Reduces user confusion by providing clear paths to accomplish goals.
 Increases user engagement by simplifying complex workflows.
 Enhances user satisfaction through efficient and seamless interactions.

14 | P a g e
 Examples of Applications with Effective Task-Oriented Navigation
Amazon (E-commerce)
Amazon's navigation highlighting categories, search bar, and user account access.
Amazon streamlines shopping tasks through its clear navigation elements.

Google Maps (Navigation App)

Google Maps' navigation features such as search, directions, and saved places.
Google Maps simplifies navigation-related tasks for users.

Spotify (Music Streaming)

Spotify's navigation structure: home, search, library, and personalized playlists.
Spotify's navigation supports users' music discovery and listening activities.

Some common types of navigation patterns:

 Hierarchical Navigation:
o Involves organizing content in a hierarchical structure, often
resembling a tree.
o Each level represents a category or subcategory, allowing users to drill
down to specific content.
o Suitable for applications with clear content hierarchy, like news
websites or file explorers.
 Flat Navigation:
o Provides a straightforward structure with equal importance given to all
sections.
o All content is accessible from a single level without complex
subcategories.
o Appropriate for applications with a limited number of sections or where
all sections are equally important.
 Tabbed Navigation:
o Involves using tabs to represent different sections or features of an
application.
o Allows users to switch between sections with a tap or click.
o Suited for applications with multiple distinct areas, such as social
media apps or email clients.
 Drawer Navigation:
o Utilizes a hidden panel that can be accessed by swiping or clicking on a
button.
o Provides a space for housing secondary navigation options, settings, or
additional content.
o Commonly used in mobile applications with limited screen space.
 Floating Action Button (FAB) Navigation:
o Features a prominent button usually placed at the bottom of the screen.
o Used for primary actions like adding a new item or initiating a key
interaction.
o Efficient for applications where a single primary action is central.
 Breadcrumbs Navigation:

15 | P a g e
 o Displays a trail of links that represent the user's location within the
application's hierarchy.
o Allows users to navigate back to previous levels easily.
o Particularly useful for applications with complex hierarchies.
 Mega Menu Navigation:
o Often used on websites with extensive content or multiple sections.
o Displays a large menu with multiple submenus when a user hovers over
or clicks on a main menu item.
o Helpful for providing an overview of available content without
overwhelming the user.
 Hamburger Menu Navigation:
o Features an icon (resembling a hamburger) that, when clicked or
tapped, reveals a hidden menu.
o Commonly used in mobile apps to save screen space and provide
access to secondary navigation options.
 Swipe Navigation:
o Applies swipe gestures to navigate between sections or content.
o Popular in mobile apps for browsing images, stories, or cards.
 Search-Driven Navigation:
o Allows users to find content primarily through search functionality.
o Useful when an application has a vast amount of content and users have
specific queries.

These navigation patterns serve different purposes and are chosen based on the
application's content, tasks, and user expectations. It's important to select a pattern that
aligns well with the overall user experience and the goals of the application.

In this experiment we have used online tool Weebly/Figma/Adobe XD

Description Student’s task:

Considering your application as a sample, design menu and navigational scheme for
your application. Students are required to submit one version of menu and
navigational scheme design for any one of the following:

FitLife App (Health and Fitness), TravelEase (Travel Planning), StudyHub

(Educational Platform), HomeConnect (Smart Home Control), ArtGallery (Online Art
Exhibition), GreenThumb (Gardening Assistance), LanguageLink (Language
Learning), PetPal (Pet Care), FashionFlair (Personal Styling), HomeChef (Cooking
and Recipe App)

Guidelines: While designing menus for GUI application, students must consider following
1. Choosing a proper menu structure suitable for the application
2. Proper ordering and grouping of menus
3. Use of line separators
4. Providing short cuts for menus using keyboard equivalents
5. Use of keyboard accelerators
6. Choosing appropriate menu titles.

16 | P a g e
 7. Use of intent indicators
8. Providing defaults
9. Use of toggle menus wherever required.

For web based applications

1. Provide a global navigation bar at the top of each page.
2. Provide a local category or topical links navigation bar on the left side of a page.
3. Place minor illustrative, parenthetical, or footnote links at the end of the page.
4. For long pages, provide a navigation bar repeating important global or local links at
the page bottom.

Example:

Compared to

Student Students are required to submit one version of menu and navigational scheme design
choices for any one of the following:

FitLife App (Health and Fitness):

Users can track workouts, plan meals, and monitor their health goals.
Navigation should focus on workout routines, meal planning, progress tracking, and
personalized recommendations.

TravelEase (Travel Planning):

Users can explore destinations, book flights, hotels, and plan itineraries.
Navigation should prioritize destination search, flight and hotel booking, saved
itineraries, and travel tips.

StudyHub (Educational Platform):

Users can access courses, study materials, assignments, and quizzes.
Navigation should center around course catalog, study resources, assignment
submission, and progress tracking.

HomeConnect (Smart Home Control):

Users can manage smart devices, set routines, and control home settings.
Navigation should emphasize device control, automation settings, routines, and
notifications.

ArtGallery (Online Art Exhibition):

Users can explore artworks, learn about artists, and purchase pieces.
Navigation should showcase art categories, artist profiles, collections, and shopping
options.

17 | P a g e
 GreenThumb (Gardening Assistance):
Users can learn about plants, plan gardens, and receive gardening tips.
Navigation should highlight plant database, garden planner, tips and tricks, and
community discussions.

LanguageLink (Language Learning):

Users can access lessons, practice exercises, and language challenges.
Navigation should feature lessons, practice resources, progress tracking, and cultural
insights.

PetPal (Pet Care):

Users can manage pet health records, set reminders, and find nearby pet services.
Navigation should prioritize pet profiles, health records, services, and reminders.

FashionFlair (Personal Styling):

Users can explore fashion trends, create outfits, and shop for clothing.
Navigation should focus on trends, outfit creation, shopping options, and style tips.

HomeChef (Cooking and Recipe App):

Users can discover recipes, plan meals, and learn cooking techniques.
Navigation should highlight recipe categories, meal planner, cooking techniques, and
user-generated content.

For each alternative, the navigation design exercise can follow a similar structure as
outlined in the following sample, with a unique focus on the tasks and features
relevant to each application scenario.

Sample:
Recipe Application Scenario:

Imagine a recipe application named "CookPal" that helps users discover and cook
various recipes. The app's key features include:
Browsing recipes by categories (e.g., breakfast, lunch, dinner, desserts)
Searching for recipes by keywords or ingredients
Saving favorite recipes to a personal collection
Viewing detailed recipe instructions, ingredients, and cooking time
Sharing recipes with friends through social media

Task-Oriented Navigation Design:

Students should focus on designing a navigation scheme that allows users to easily
perform the following tasks: browsing recipes, searching for recipes, viewing recipe
details, and accessing their saved recipes. Encourage them to consider intuitive labels,
clear hierarchy, and minimal steps to achieve these tasks.

Selected ------------Fill your choice here

choice
Design Sketches for system menu and navigation design
sketches Sample 1: (Using tool Weebly)

18 | P a g e
 with
justification/
reasoning

Rationale: Explain how your navigation scheme supports user tasks and enhances usability.

Key Considerations
Task Priority: Identify common tasks users need to accomplish.
Hierarchy: Organize sections logically; prioritize based on user needs.
Consistency: Maintain a uniform design throughout the navigation scheme.

Design Principles
Clarity: Use clear labels and recognizable icons.
Hierarchy: Establish main categories and subcategories.
Visual Indicators: Highlight the current section for user orientation.

Reflection: Discuss any challenges faced, lessons learned, and insights gained.
Conclusion By the end of this lab experiment, students should have a better understanding of the
significance of effective system menus and navigation schemes in user-centered
design. They will also have practical experience in designing, prototyping, and
presenting their design solutions, which will contribute to their skills in the field of
Human-Computer Interaction.
Assessment Navigation Design: Clarity, consistency, and appropriateness of the navigation
Criteria scheme design, Alignment with user needs and tasks.
Rationale Behind Design Decisions: Thoughtful explanation of each design choice's
reasoning, User-centered approach in addressing user needs.
EXPERIMENT 4
Title Demonstrate the use of statistical graphics.
Introduction A statistical graphic is data presented in a graphical format. -A well-designed
statistical graphic, also referred to as a chart or graph, consists of complex ideas
communicated with clarity, precision, and efficiency. It gives its viewer the greatest
number of ideas, in the shortest time, and in the smallest space, and with least possible
clutter. It will also induce the viewer to think of substance, not techniques or
methodology. It will provide coherence to large amounts of information by tying them
together in a meaningful way, and it will encourage data comparisons of its different

19 | P a g e
 pieces by the eye. A well designed statistical graphic display also avoids distortions by
telling the truth about the data.
Components of a Statistical Graphic
Most statistical graphics have at least two axes, two scales, an area to present the data,
a title, and sometimes a legend or key.
Types of Statistical Graphics
—Curve and Line Graphs
—Surface Charts
—Scatter plots
—Bar Graphs
—Segmented or Stacked Bars
—Pie Charts

1. Curve and Line Graphs:

Curve and line graphs display data points connected by lines, typically used to show
trends over time or continuous variables. They are effective for illustrating changes,
patterns, or fluctuations in data. For example, a line graph could be used to visualize
stock market trends over a year, showing how prices change over different time points.

2. Surface Charts:
Surface charts represent three-dimensional data, often depicting how two variables
interact with a third variable. These charts use color gradients or contour lines to show
variations in the data's surface. They are useful for analyzing complex relationships
between multiple variables, such as in scientific research or engineering simulations.

3. Scatter Plots:
Scatter plots display individual data points as dots on a two-dimensional grid, with one
variable on each axis. They are used to identify relationships and patterns between two
variables. Scatter plots can reveal correlations, outliers, clusters, or trends. For
example, a scatter plot can show the relationship between a person's height and
weight.
4. Bar Graphs:
Bar graphs use vertical or horizontal bars to represent categorical data. They are
commonly used to compare different categories or groups and display discrete values.
Bar graphs are effective for showing comparisons between items, such as sales of
different products in a store over a month.

5. Segmented or Stacked Bars:

Segmented or stacked bar graphs are variations of the traditional bar graph. In these
graphs, each bar is divided into segments, and each segment represents a subcategory
of the main category. They are useful for comparing parts of a whole, like displaying
the composition of sales across different product categories.

20 | P a g e
 6. Pie Charts:
Pie charts display parts of a whole as sectors of a circle, with each sector representing
a percentage of the total. They are suitable for showing the distribution of data within
a fixed set of categories. However, pie charts can sometimes be less effective than
other types of graphs, as accurately comparing angles can be challenging, especially
with many segments.

Each of these types of statistical graphics serves a specific purpose in visualizing

different aspects of data. The choice of which graphic to use depends on the nature of
the data, the relationships being explored, and the goals of communicating insights
effectively to the audience.
Guidelines While designing statistical graphics GUI application, students must consider following
1. Choosing the emphasized data
2. Minimize the non-data elements
3. 3 Minimize redundant data.
4. Show data variation, not design variation.
5. Provide the proper context for data interpretation.
6. Restrict the number of information-carrying dimensions depicted to the number of
7. Data dimensions being illustrated.
8. Employ data in multiple ways, whenever possible.
9. Maximize data density.
10. Employ simple data-coding schemes.
11. Avoid unnecessary embellishment of:
— Grids.
— Vibration.
— Ornamentation.
12. Fill the graph’s available area with data.
Example:

Figure 1: example of Pie Chart and Bar Chart

Sample Here are examples of interfaces or applications where each of the six types of charts
Applications would be well-suited:

21 | P a g e
 1. Curve and Line Graphs:
Example 1: Financial Tracking App
A financial tracking app could use a line graph to display a user's spending habits over
time. The x-axis could represent months, and the y-axis could represent the amount
spent. This would allow users to track trends, identify periods of high spending, and
make informed financial decisions.

Example 2: Climate Change Monitoring Dashboard

A climate change monitoring dashboard could use curve graphs to visualize
temperature variations over a period of years. Multiple lines could represent different
locations or scenarios, helping scientists and policymakers understand long-term
trends and patterns.

2. Surface Charts:
Example 1: Terrain Mapping App
A terrain mapping app could utilize surface charts to display elevation data of
geographical areas. This would allow hikers, urban planners, and geologists to
visualize the topography and better plan routes or assess land characteristics.

Example 2: Weather Forecasting Software

Weather forecasting software could use surface charts to illustrate atmospheric
pressure and temperature distributions across a region. These charts could aid
meteorologists in identifying weather patterns and making predictions.

3. Scatter Plots:
Example 1: Medical Research Application
A medical research application could employ scatter plots to show the correlation
between two variables, such as age and blood pressure. This would help researchers
understand the relationship and potentially identify health trends.

Example 2: Market Analysis Tool

A market analysis tool could use scatter plots to visualize the relationship between
advertising spending and product sales for different products. This would help
businesses understand the effectiveness of their marketing strategies.

4. Bar Graphs:
Example 1: Educational Analytics Platform
An educational analytics platform could use bar graphs to compare the average scores
of different subjects in a school. This would help educators identify strengths and
weaknesses in the curriculum.

Example 2: Social Media Analytics Dashboard

22 | P a g e
 A social media analytics dashboard could employ bar graphs to display the
engagement levels (likes, shares, comments) of various posts. This visualization would
provide insights into the popularity of different content types.

5. Segmented or Stacked Bars:

Example 1: Sales Dashboard for an E-Commerce Platform
A sales dashboard for an e-commerce platform could use segmented or stacked bar
graphs to show the distribution of sales across different product categories, revealing
which categories contribute the most to overall revenue.

Example 2: Project Management Software

Project management software could employ segmented or stacked bars to represent the
allocation of resources (time, budget) for different project tasks, helping teams
visualize resource distribution.

6. Pie Charts:
Example 1: Demographic Breakdown in a Survey
A survey results presentation could include a pie chart to illustrate the demographic
breakdown of respondents. Each segment of the pie would represent a different
demographic group's proportion.

Example 2: Energy Consumption Analysis

An energy company could use a pie chart to showcase the percentage distribution of
energy sources (solar, wind, fossil fuels) in their portfolio, aiding in their sustainability
reporting.
These examples demonstrate how different types of charts can be effectively used in
various interfaces and applications to communicate insights and information to users.
Student’s Considering your application as a sample, design statistical graphics application.
task Students are required to submit one version of statistical graphics application
Sample Choosing to display the following as a scatter plot instead. Similarly the students
Results have to generate such statistical graphics for each of the 6 types (Curve and Line
Graphs, Surface Charts, Scatter plots, Bar Graphs, Segmented or Stacked Bars,
Pie Charts) –Use any dummy data

Product
Product Advertising Spending (in $) Sales
A 100 200
B 150 250
C 200 300
D 50 150
E 120 220
F 80 180

23 | P a g e
 G 160 270
H 90 190
I 130 240
J 70 170

Advertising Spending Vs.Product

Sales
350
300
250
Product Sales

200
150
100
50
0
40 60 80 100 120 140 160 180 200 220
Advertising Spending (in $)

Conclusion This concise lab experiment equips students with practical skills in creating and
interpreting various statistical graphics. It introduces them to the significance of data
visualization in HCI and how different graphics can effectively convey insights from
complex datasets. By actively participating in this experiment, students gain valuable
experience in visually presenting data, a skill crucial for user-centered design and
decision-making in the field of Human-Computer Interaction.

24 | P a g e
 EXPERIMENT 5
Title Demonstrate the use of color and animation selection
Introduction Color adds dimension, or realism, to screen usability. Color draws attention because it
attracts a person’s eye. If used properly, it can emphasize the logical organization of
information, facilitate the discrimination of screen components, accentuate differences
among elements, and make displays more interesting. If used improperly, color can be
distracting and possibly visually fatiguing, impairing the system’s usability.
Animation is a dynamic visual statement, form, and structure evolving through
movement over time. Animations are popular objects that users encounter frequently,
if not all the time. They have been used for different purposes and can be found in
many computing environments, especially Web pages and online advertisements.

Importance of Color and Animation in Creating Engaging Interfaces:

Color and animation are pivotal elements in user interface (UI) design, playing a
significant role in creating engaging and user-friendly interfaces. These design aspects
contribute to enhancing user experience, making interfaces visually appealing, and
improving usability. Let's delve into their importance:

1. Color:
 Visual Appeal: Color is one of the first things users notice in an interface. It
adds vibrancy, creates a visually pleasing environment, and draws users'
attention.
 Branding: Colors can be associated with a brand's identity, helping users
recognize and remember the product or service.
 Emotional Impact: Different colors evoke specific emotions. Warm colors like
red and orange can create excitement, while cool colors like blue and green can
evoke calmness.
 Usability: Proper color contrast ensures readability and accessibility, especially
for users with visual impairments.
 Hierarchy and Organization: Color can be used to distinguish between different
UI elements, creating a clear hierarchy and aiding users' understanding.

2. Animation:
 Guiding Attention: Animations can guide users' focus towards important
elements or actions, ensuring they don't miss critical information.
 Feedback and Affordance: Animations provide visual feedback, indicating that
an action has been recognized. For example, a button changing color upon
hover indicates its clickability.
 Transitions: Smooth animations during transitions between screens or elements
create a seamless experience, reducing cognitive load.
 User Engagement: Well-designed animations add an interactive and dynamic
dimension to interfaces, making them more enjoyable to use.
 Storytelling: Animations can tell a story or convey information step-by-step,
enhancing the narrative and user understanding.

Impact of Color Choices and Animations on User Perception, Emotions, and

Interactions:

25 | P a g e
 1. Color Choices:
 Perception: Color influences users' perception of the interface's aesthetics and
functionality. Proper color combinations can create a positive overall
impression.
 Emotions: Colors trigger emotional responses. For instance, a calm blue can
make users feel at ease, while a vibrant red can invoke excitement or urgency.
 Interactions: Colors can suggest interactive elements. A bright color for
buttons indicates clickability, encouraging users to take action.
 Cultural Differences: Color meanings can vary across cultures. A color that
signifies positivity in one culture might have a different connotation in another.

2. Animations:
 Perception: Well-implemented animations make interactions feel responsive
and immediate, enhancing the perception of the interface's quality.
 Emotions: Animations can create emotional connections. A smooth loading
animation can ease frustration during wait times.
 Interactions: Animations can indicate hierarchy. For example, an enlarging
animation upon hover suggests an option's prominence.
 User Engagement: Interactive animations encourage exploration. Users may
interact with an element simply to experience its animation.

Additionally Colors have a remarkable ability to evoke emotions and influence user behavior due to
their psychological associations. Different colors can trigger specific feelings and
reactions. Here are some common emotional associations with colors and their
potential impact on user behavior:

Color Emotions Behavior Influence

Passion, energy, Creates a sense of urgency or excitement, encouraging actions su
Red urgency making a purchase or clicking call-to-action buttons.
Calmness, trust, Instills a feeling of trust, suitable for websites in banking, healthc
Blue reliability and technology where reliability is crucial.
Growth, freshness, Associated with nature and health, encourages positive feelings a
Green harmony environment conducive to exploring content.
Happiness, Evokes cheerfulness and optimism, effective for drawing attentio
Yellow positivity, optimism and conveying a positive message.
Creativity, Stimulates enthusiasm and creativity, appealing for design, art, or
Orange enthusiasm, warmth innovative products.
Royalty, luxury, Associated with luxury brands and upscale products, influencing
Purple sophistication to perceive value and quality.
Elegance, power, Conveys sophistication and professionalism, but excessive use m
Black mystery create a sense of darkness or formality.
Simplicity, Creates a clean and minimalistic environment, commonly used in
White cleanliness, purity design to promote clarity and focus.

Color Harmony and Contrast in UI Design:

26 | P a g e
 Color Harmony:
Color harmony refers to the pleasing arrangement of colors that work well together in
a design. Achieving color harmony is crucial in UI design to ensure that the colors
used complement each other and create a visually appealing interface. Here are a few
approaches to achieving color harmony:
 Analogous Colors: Colors that are adjacent on the color wheel, such as blue,
blue-green, and green, create a soothing and cohesive look.
 Complementary Colors: Colors opposite each other on the color wheel, like red
and green, provide strong contrast and dynamic visual interest.
 Triadic Colors: Three colors evenly spaced on the color wheel, such as red,
blue, and yellow, create a balanced and vibrant palette.

Color Contrast:
Color contrast refers to the difference in brightness and hue between elements in a
design. Contrast is critical for ensuring readability and accessibility, especially for
users with visual impairments. Proper color contrast enhances legibility, helps users
distinguish between elements, and guides them through the interface. For example,
text should have sufficient contrast against its background to ensure readability.

Guidelines: While choosing colors for display, one must consider these factors:
 The human visual system
 The possible problems that the colors’ use may cause
 The viewing environment in which the display is used
 The task of the user
 Hardware on which the colors will be displayed.

For the animation one must keep in mind

 Do not Distract Attention from Salient Information
 Avoid Clutter
 Allow Appropriate Exposure Duration
 Manage the Positioning and Organization of Objects
 Adhere to Color Conventions
 Support Animation with Textual and Auditory Information
 Appreciate the Insights of Semiotics
 Comply with the Cooperative Maxims
Activity Animation Usability Test:

Students have to select a website or application interface with animations (e.g., button
hover effects, page transitions) and interact with the interface and provide feedback
(with screenshots) on how the animations enhance or hinder their user experience.

Color and Animation Case Study Analysis:

Students have to select a website or app that effectively use color and animation to
enhance user experience (e.g., a meditation app, a game interface). They have to
analyze and discuss how color choices and animations contribute to the overall user

27 | P a g e
 experience, emotions conveyed, and engagement level.

Example:

Color

Animation

28 | P a g e
 Realistic page flips animation in Book Reader applications

Study meditation apps like Headspace, Calm; Gaming apps; book readers to
practically observe and understand the impact of color and animation.

Conclusion In summary, color and animation choices have a profound impact on how users
perceive, feel, and interact with interfaces. Designers must understand the psychology
behind color and the usability aspects of animations to create interfaces that not only
look visually appealing but also cater to users' emotions and needs. By utilizing these
elements effectively, designers can craft engaging interfaces that offer a delightful and
user-friendly experience.
This comprehensive lab experiment empowers students with practical skills in
selecting appropriate colors and animations for effective user interface design. By
participating in this activity, students gain a deeper understanding of the psychological
aspects of color and the role of animations in enhancing user experience. This
knowledge equips them to create visually appealing and engaging interfaces that
consider user emotions and interactions.

29 | P a g e
 EXPERIMENT 6
Title Design and develop the icon use in the website making.
Introduction Icon design is the process of designing a graphic symbol that represents some real,
fantasy or abstract motive, entity or action. In the context of software applications, an
icon often represents a program, a function, data or a collection of data on a computer
system. Icon designs can be simple, with flat two-dimensional drawing or a black
silhouette, or complex, presenting a combination of graphic design elements such as
one or more linear and radial color gradients, projected shadows, contour shades, and
three-dimensional perspective effects.
Modern icons often have a maximum size of 1024 by 1024 pixels. The challenge of
icon design is to create an image that is communicative, beautiful, and understandable,
at every size from this maximum resolution down to the minimum resolution of 16 by
16 pixels. One of the most common and important examples of this are Application
Icons, used to represent an app on Mac, Windows, Linux, or mobile platforms. These
icons rely on unique and memorable metaphors as a form of product branding. Other
common uses of icons include favicons, toolbar icons, and icons for buttons or
controls.
Students Design an Icon using Paint or paint.net or student can use any other icon designing
Task tool. You can also use free online tools like Canva.
Guidelines  Icons should be simple
 Symbols used as icon must be visually distinguishable from other symbols.
 Use consistent structure and shape.
 Screen resolution should be sufficient to establish the difference of form at the
normal working distance.
 Select proper colors
Steps to Design the ICON
For this practical the software used is paint.net it is a freeware that can be downloaded.
Step 1: The first step is to create a new file in paint.net and set width and height as
per your need.
Step 2: Browse a image you want and paste it in to new layer in paint.net. and select
keep canvas size. The extension for icon is .ico and this extension by default is not
present in paint.net but you can add plug-in for the same.
You can change icon of your computer application by right clicking on the application
go to properties >change icon.
Context: For this experiment, I chose the context of designing icons for a travel booking
(Student can website. The website aims to provide users with a seamless and visually appealing
choose their experience when searching for and booking travel destinations, flights,
own-A accommodations, and activities.
sample is
given here Chosen Tool: Adobe Illustrator/Paint/Word/Canva
for better
understandin Task 1: Icon Design Concepts

30 | P a g e
 g the taks) In this phase, I brainstormed and sketched various icon concepts related to travel and
tourism. I considered the website's theme, color palette, and the emotions I wanted to
evoke in users. I documented my initial sketches and ideas in the practical file.

Using Canva

Task 2: Icon Creation

Using the tool Canva, I developed a set of icons that would be used on the travel
booking website. I ensured consistency in style, size, and color scheme to maintain a
coherent visual language throughout the website. I documented my design process,
including how I translated the initial sketches into digital icons.

Task 3: Integration into Website Prototype

I integrated the designed icons into a prototype of the travel booking website using a
prototyping tool (e.g., Adobe XD). I showcased how the icons were strategically
placed to enhance user experience and guide users through different sections of the
website.

Conclusion Through this experiment, the student is expected to have gained valuable insights into
the importance of designing and developing icons that align with the website's context
and user expectations. The process of ideation, creation, evaluation, integration, and
user testing helped them understand the practical application of HCI principles in icon
design for a real-world website.

31 | P a g e
 EXPERIMENT 7
Title Write an HTML program to develop a website for the awareness of covid-19.
Code <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COVID-19 Awareness</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.info {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>COVID-19 Awareness</h1>
<p>Stay Informed, Stay Safe!</p>
</header>
<div class="container">
<h2>About COVID-19</h2>

32 | P a g e
 <p>COVID-19, also known as the novel coronavirus, is a highly contagious virus
that has affected millions worldwide. It is important to follow preventive measures to
limit its spread.</p>
<h2>Preventive Measures</h2>
<ul>
<li>Wear a mask in public places.</li>
<li>Maintain social distancing of at least 6 feet.</li>
<li>Wash your hands frequently with soap and water.</li>
<li>Avoid touching your face, especially eyes, nose, and mouth.</li>
</ul>
<h2>COVID-19 Resources</h2>
<p>Stay updated with information from reputable sources:</p>
<ul>
<li><a
href="https://www.who.int/emergencies/disease-outbreak-news/item/2020-
DON233">World Health Organization (WHO)</a></li>
<li><a
href="https://www.cdc.gov/coronavirus/2019-ncov/index.html">Centers for Disease
Control and Prevention (CDC)</a></li>
</ul>
</div>
<div class="info">
<p>For emergency medical assistance, dial your local emergency number.</p>
<img src="covid19.png" alt="COVID-19 Awareness" width="200">
</div>
</body>
</html>
Output

33 | P a g e
34 | P a g e
 EXPERIMENT 8
Title Create a model for face recognition
Objective
Significance
Introduction
to Teachable
Machine
Your unique Customized User Interfaces:
idea to use The model can be used to customize the user interface based on the recognized gender.
this model Men and women may have different preferences in terms of color schemes, font sizes,
in and layout. By adapting the UI to the user's gender, it can enhance the overall user
improving experience.
usability
Voice Assistants and Chatbots:
Integrating the facial recognition model with voice assistants or chatbots can enable
more natural and personalized interactions. The system can recognize the user's gender
and tailor responses accordingly, making the conversation feel more personalized.

Advertising and Content Recommendations:

Recognizing the user's gender can help in providing more relevant content and
advertisements. For instance, an e-commerce platform can show products and
promotions that are more likely to appeal to the recognized gender.

Game and Entertainment Personalization:

In gaming and entertainment applications, the model can adapt game characters,
avatars, and content to match the user's gender, creating a more immersive and
personalized experience.

Safety and Security Features:

The system can incorporate safety features such as recognizing distress or discomfort
in the user's face and taking appropriate actions, such as alerting emergency services
or providing assistance.

Social Interaction and Online Communities:

In social networking and online community platforms, recognizing a user's gender can
help tailor the interaction, such as recommending gender-specific groups or
discussions.

Health and Well-being Applications:

In health and well-being apps, the model can recognize the user's gender to provide
gender-specific health and fitness advice, which is more relevant and effective for the
individual.

35 | P a g e
 E-Learning and Education:
In educational applications, recognizing the user's gender can help tailor educational
content to the individual, making the learning experience more engaging and effective.

Conclusion It's important to note that the use of facial recognition technology, especially for
gender recognition, should be done with care and in compliance with privacy and
ethical considerations. Users should have control over how their facial data is used,
and there should be transparency about the use of this technology in HCI applications.
Additionally, any data collected should be handled securely and in accordance with
applicable data protection laws and regulations.

36 | P a g e
 EXPERIMENT 9
Title Create a model for recognition face for men or women
Objective
Significance
Introduction
to Teachable
Machine
Your unique Customized User Interfaces:
idea to use The model can be used to customize the user interface based on the recognized gender.
this model Men and women may have different preferences in terms of color schemes, font sizes,
in and layout. By adapting the UI to the user's gender, it can enhance the overall user
improving experience.
usability
Voice Assistants and Chatbots:
Integrating the facial recognition model with voice assistants or chatbots can enable
more natural and personalized interactions. The system can recognize the user's gender
and tailor responses accordingly, making the conversation feel more personalized.

Advertising and Content Recommendations:

Recognizing the user's gender can help in providing more relevant content and
advertisements. For instance, an e-commerce platform can show products and
promotions that are more likely to appeal to the recognized gender.

Game and Entertainment Personalization:

In gaming and entertainment applications, the model can adapt game characters,
avatars, and content to match the user's gender, creating a more immersive and
personalized experience.

Safety and Security Features:

The system can incorporate safety features such as recognizing distress or discomfort
in the user's face and taking appropriate actions, such as alerting emergency services
or providing assistance.

Social Interaction and Online Communities:

In social networking and online community platforms, recognizing a user's gender can
help tailor the interaction, such as recommending gender-specific groups or
discussions.

Health and Well-being Applications:

In health and well-being apps, the model can recognize the user's gender to provide
gender-specific health and fitness advice, which is more relevant and effective for the
individual.

37 | P a g e
 E-Learning and Education:
In educational applications, recognizing the user's gender can help tailor educational
content to the individual, making the learning experience more engaging and effective.

Conclusion It's important to note that the use of facial recognition technology, especially for
gender recognition, should be done with care and in compliance with privacy and
ethical considerations. Users should have control over how their facial data is used,
and there should be transparency about the use of this technology in HCI applications.
Additionally, any data collected should be handled securely and in accordance with
applicable data protection laws and regulations.

38 | P a g e
 EXPERIMENT 10
Title Analyze and demonstrate a model for emoji.
Introduction History and Evolution of Emojis:
Emojis are a form of digital communication that uses small images or symbols to
convey emotions, ideas, or concepts in a concise and visual manner. The history and
evolution of emojis are fascinating, demonstrating how these simple pictographs have
become an integral part of modern communication. Here's a brief overview:

1. Origin of Emoticons (1960s - 1980s):

The concept of using textual symbols to represent emotions, known as "emoticons,"
emerged in the early days of computer-mediated communication. In 1963, American
computer scientist Harvey Ball created the iconic smiley face as a way to boost
employee morale.

2. Birth of Emojis (Late 1990s - Early 2000s):

The term "emoji" comes from the Japanese words "e" (meaning "picture") and "moji"
(meaning "character"). In 1999, Shigetaka Kurita, a Japanese artist, created a set of
176 simple 12x12 pixel emojis for a mobile internet platform called i-mode. These
early emojis included smiley faces, weather symbols, and basic expressions.

3. Unicode Consortium Inclusion (2010s):

As emojis gained popularity, there was a need for standardization across different
platforms and devices. In 2010, the Unicode Consortium, responsible for encoding
characters and symbols for global computer processing, added emojis to its standard,
allowing compatibility and consistent display across platforms.

4. Widespread Adoption and Diversity (2010s - Present):

With the rise of smartphones and social media, emojis became mainstream and an
integral part of digital communication. The Unicode Consortium continued to expand
the emoji set, adding diverse skin tones, professions, animals, food, and more to reflect
a wide range of human experiences and cultural contexts.

5. Customization and Personalization (2020s):

Platforms and apps introduced features that allow users to customize and create
personalized emojis or "avatars." Animoji and Memoji features on smartphones use
facial recognition technology to create animated emojis based on users' expressions.

6. Emoji Design and Language Evolution:

Emojis have evolved beyond basic expressions to encompass a diverse array of
objects, activities, and emotions. The meanings and interpretations of emojis can vary
across cultures and contexts, leading to the development of "emoji languages" or
"emoji-speak."

39 | P a g e
 7. Social and Cultural Impact:
Emojis have transcended language barriers, enabling communication that is more
expressive and efficient. They are often used for humor, enhancing digital
conversations, and expressing complex emotions.

8. Emoji as Art and Marketing:

Some artists and brands have embraced emojis as a form of art and marketing, using
them to convey messages, evoke emotions, and engage with audiences.

Emojis as Expressive Tools in Digital Communication:

Emojis are powerful visual elements that go beyond mere text to convey emotions,
reactions, and context in digital communication. They enhance the richness of
messages by adding a layer of visual expression, helping to bridge the gap between
face-to-face communication and text-based interactions. Here's how emojis are
effectively used for these purposes:

1. Conveying Emotions:
Emojis excel at conveying emotions that might be difficult to articulate with words
alone. They allow users to express feelings such as happiness, sadness, excitement,
anger, surprise, and more.

2. Expressing Reactions:
Emojis serve as succinct ways to express reactions to messages, posts, or situations.
They offer a quick and intuitive response, enabling users to engage in conversations
more naturally. For instance: they can represent agreement, approval, or
encouragement, disagreement or disapproval, surprise or astonishment, excitement or
amusement

3. Adding Context and Nuance:

Emojis can add context and nuance to messages, clarifying the tone or intent behind
the words. They help prevent misinterpretations and contribute to the overall
understanding of the message. For example: suggests a playful or teasing tone,
accompanies a confession or light-hearted admission, thoughtful consideration or
pondering

4. Enhancing Humor and Personality:

Emojis contribute to humor and personality in digital conversations. They can turn a
regular message into a witty comment or add a touch of informality and friendliness.
For example: they can signifies intense laughter, celebration or excitement,
mischievous or playful mood

40 | P a g e
 5. Strengthening Communication with Visual Cues:
Emojis provide visual cues that complement text, making messages more intuitive and
easier to understand. They serve as a form of nonverbal communication that helps
bridge the gap between spoken language and text.

6. Cultural and Contextual Adaptation:

Emojis can be adapted to cultural and contextual differences. While some emojis have
universal meanings, others may have cultural variations. Users often choose emojis
based on the context of the conversation, the relationship between participants, and the
cultural norms they are familiar with.

Psychological Impact of Emojis on Emotions and Perceptions:

Emojis have a significant psychological impact on users' emotions and perceptions due
to their visual and symbolic nature. Different emojis evoke various emotional
responses and shape how messages are interpreted. Here's how emojis influence users'
emotions and perceptions:
Positive Emotions: Emojis conveying happiness, laughter, or affection can trigger
positive emotions and create a friendly, warm tone in digital conversations. Users
perceive messages with positive emojis as approachable and welcoming.

Negative Emotions: Emojis representing sadness, anger, or disappointment can elicit

negative emotions in users. Messages with such emojis may be seen as expressing
empathy, frustration, or a need for consolation.

Amplification: Emojis can amplify the emotional content of a message. For instance,
adding a heart emoji to a compliment intensifies the positive emotion, while adding a
crying emoji to a sad story enhances the sense of empathy.

Nuanced Expressions: Emojis allow users to communicate nuanced emotions that text
alone might struggle to convey. This capability helps messages align more closely
with the user's intended emotional tone.

Engagement and Connection: Appropriate use of emojis can create a sense of

connection and rapport between participants in a conversation. Users tend to respond
more positively to messages that incorporate emojis, feeling a higher level of
engagement.
Influence of Cultural Differences on Emoji Interpretation:
Cultural differences significantly impact how emojis are interpreted. The same emoji
may hold different meanings or emotional associations in various cultures. Here's how
cultural factors influence emoji interpretation:

 Universal vs. Cultural Specificity: While some emojis have universal meanings

41 | P a g e
 (e.g., smiley faces for happiness), others carry cultural nuances. For example,
the thumbs-up gesture may indicate approval in some cultures, but it can be
offensive in others.
 Symbolism and Iconography: Symbols used in emojis might have different
cultural associations. The depiction of animals, foods, or gestures may hold
distinct meanings across cultures.
 Contextual Interpretation: The cultural context of a conversation can influence
emoji interpretation. Cultural norms, social dynamics, and regional events may
shape how emojis are understood.
 Emotional Expression: Different cultures express emotions and feelings
differently. An emoji that represents joy in one culture might symbolize
excitement or surprise in another.
 Usage Frequency: The popularity and frequency of certain emojis can vary
across cultures. An emoji commonly used in one culture might be less
prevalent in another.
 Language Barriers: Emojis sometimes bridge language barriers, but they can
also create misunderstandings due to cultural differences. What seems positive
in one culture might be interpreted negatively in another.
Student Task1 :
Task Students have to present their analysis and insights on how emoji usage varies across
different contexts. Give your take on the challenges and benefits of using emojis in
various communication platforms.

Task 2:
Discuss design principles for incorporating emojis into user interfaces, considering
clarity, consistency, and cultural sensitivity. Students have to create a model or
guideline for effectively using emojis in a user interface (e.g., a messaging app).

Task 3:
How can emojis enhance user experience?
What are the considerations when designing emoji integration models?
Student
Answers
with
screenshots
Conclusion: This comprehensive lab experiment equips students with practical insights into the
psychology, cultural nuances, and design considerations of emojis. By analyzing and
creating models for effective emoji usage, students gain an understanding of how to
enhance user experience and communication in digital interfaces.

42 | P a g e
 EXPERIMENT 11
Title Develop a model for checking the voice related to which human being.
Objective
Significance
Introduction In the context of human-computer interaction, voice recognition can be utilized to
to Teachable identify or authenticate a particular user's voice. This is often referred to as speaker
Machine recognition or voice verification. To implement such a system, you can use machine
learning models, particularly those specialized in speech and voice analysis. Here's a
general guideline on how this can be achieved:

Data Collection: Gather voice samples from various users. Ensure a diverse range of
voice data is collected to improve the model's ability to recognize different
individuals.

Feature Extraction: Use signal processing techniques to extract features from the voice
samples. Mel-frequency cepstral coefficients (MFCCs) are commonly used as they
represent the characteristics of a voice.

Model Training: Employ machine learning models for classification or verification

tasks. Support Vector Machines (SVM), Gaussian Mixture Models (GMM), Deep
Neural Networks (DNN), or Convolutional Neural Networks (CNN) can be used for
this purpose.

Training the Model: Train the model using the extracted features and associate them
with specific users. This training process allows the model to learn to differentiate
between different voices.

Testing and Validation: Evaluate the model using a separate set of voice samples that
were not used during training. This validation helps to ensure the model's accuracy
and its ability to correctly identify the speaker.

Integration with Human-Computer Interaction: Once the model is trained and

validated, integrate it into your human-computer interaction system. This can be
applied for various purposes such as voice-based user authentication, personalization,
or tailored responses based on identified speakers.

Continual Improvement: Continuously update and improve the model by feeding it

new data. This could involve retraining the model with more recent voice samples to
enhance accuracy and keep up with potential changes in a person's voice over time.

However, it's essential to note that implementing voice recognition systems requires
careful consideration of privacy and ethical concerns, ensuring that user data is

43 | P a g e
 handled securely and respecting user consent and data protection regulations.

Also, these systems might not be 100% accurate and can be influenced by various
factors like background noise, health conditions affecting the voice, or deliberate
attempts to mimic someone else's voice. Therefore, it's crucial to understand the
limitations and continuously refine the system for improved performance and
accuracy.
Your unique Voice recognition and speaker identification models play a significant role in Human-
idea to use Computer Interaction (HCI), enhancing the ways individuals interact with technology.
this model Here are specific applications within HCI where these models are employed:
in
improving Voice-Enabled Interfaces: Voice recognition allows for hands-free interaction with
usability devices. These interfaces are used in smartphones, smart home devices, cars, and other
technologies to enable users to control and access features through voice commands.

Personalization and User Profiles: Identifying users by their voice allows for
personalized experiences in HCI. Devices can adjust settings, preferences, and content
based on the recognized user, enhancing the user experience.

Accessibility Features: Voice recognition technology benefits individuals with

disabilities, making technology more accessible. It enables those with motor
impairments to interact with devices using voice commands.

Multimodal Interaction: In HCI, combining voice recognition with other modalities

(gestures, touch, etc.) allows for more natural and intuitive interaction with devices,
creating a richer user experience.

Enhanced User Interfaces: Voice recognition can be used to supplement or replace

traditional interfaces, providing easier, faster, and more natural ways for users to
interact with systems and applications.

Adaptive and Responsive Systems: Voice recognition can be used to create systems
that adapt and respond to user input in real-time, creating more dynamic and
personalized interactions.

Emotion and Sentiment Analysis: Integrating voice analysis can help systems detect
user emotions or sentiments, allowing for more emotionally responsive HCI. For
example, adjusting responses or interactions based on the user's emotional state.

Collaborative Interfaces: In collaborative work settings, voice recognition can assist

in identifying speakers, facilitating smoother communication, and organizing
interactions during video calls or meetings.

44 | P a g e
 Feedback and Voice-Based Control: Voice recognition allows for feedback
mechanisms and control in various applications, such as voice-operated commands,
confirming actions, or giving verbal notifications.

Augmented and Virtual Reality: Integrating voice recognition in AR and VR

applications allows users to interact with virtual environments more naturally and
realistically, enhancing the immersive experience.

Overall, these applications in HCI highlight the role of voice recognition and speaker
identification in creating more intuitive, accessible, and personalized interactions
between humans and technology, leading to more efficient and user-friendly systems.
Conclusion It's essential to note that implementing voice recognition systems requires careful
consideration of privacy and ethical concerns, ensuring that user data is handled
securely and respecting user consent and data protection regulations.

Also, these systems might not be 100% accurate and can be influenced by various
factors like background noise, health conditions affecting the voice, or deliberate
attempts to mimic someone else's voice. Therefore, it's crucial to understand the
limitations and continuously refine the system for improved performance and
accuracy.

45 | P a g e
 EXPERIMENT 12
Title Develop a model for checking the pose of human.
Objective
Significance
Introduction
to Teachable
Machine
Your unique Pose detection through images involves using computer vision techniques to identify
idea to use and understand the position, orientation, and spatial configuration of a person's body
this model within an image or video frame. In the context of Human-Computer Interaction (HCI),
in pose detection has several applications that enhance user experience and interaction
improving with technology:
usability
Gesture Control Interfaces: Pose detection enables gesture recognition, allowing
users to control devices or applications through hand or body movements. This
technology is used in gaming consoles, smart TVs, and virtual reality systems,
providing a more immersive and intuitive interaction.

Health and Fitness Applications: In HCI, pose detection can be employed in health
and fitness applications to analyze and guide users through exercise routines,
providing feedback on correct posture or movement.

Accessibility Features: Pose detection can assist individuals with disabilities by

enabling control of devices through specific body movements, making technology
more accessible for those with limited mobility.

Virtual Try-On and Augmented Reality: In the fashion industry, pose detection is
used for virtual try-on experiences, allowing users to see how clothes or accessories
look on them by detecting body posture and fitting the virtual items accordingly.

Emotion Recognition and Behavioral Analysis: Analyzing body posture can

contribute to understanding emotional states or behavioral patterns, enabling systems
to respond or adapt based on detected postures or movements.

User Experience Improvement: By understanding a user's posture or body language,

HCI systems can adapt interfaces or content based on detected positions, optimizing
the user experience.

Interactive Learning and Education: Pose detection can be integrated into

educational technologies to assess student engagement or interaction during online
classes, providing feedback on posture, attentiveness, or participation.

46 | P a g e
 User Assistance and Feedback: Systems can use pose detection to provide assistance
or feedback to users based on their physical actions, ensuring correct execution of
tasks or providing guidance in real-time.

Security and Surveillance: In security systems, pose detection can aid in identifying
unusual behaviors or gestures for surveillance purposes, helping to detect potential
threats or suspicious activities.

Collaborative Work Environments: In remote work settings, pose detection can

enhance video conferencing by detecting participant postures, facilitating better
communication and engagement during online meetings.
Conclusion Overall, pose detection in HCI enriches user interaction by providing more natural,
intuitive, and context-aware experiences, contributing to various fields from
entertainment and fitness to education and security. It enhances the way users engage
with technology, leading to more efficient, personalized, and immersive interactions.

47 | P a g e