Dr. D. Y.

Patil Institute of Technology

Pimpri Pune-411018

Department of Artificial Intelligence and Data Science

Laboratory Manual

Savitribai Phule Pune University

Second Year of Artificial Intelligence and Data Science (2020 Course)

Subject Code: 317525

Elective I
Laboratory Human Computer Interface

Prepared by: Priyanka Gupta

Academic Year
2023-2024

Department of AI&DS | 317522 | Human Computer Interface Page 1

 Dr. D. Y. Patil Institute of Technology
Pimpri Pune-411018

Department of Artificial Intelligence and Data Science

Vision of the Institute

 Empowerment through knowledge

Mission of the Institute

 Developing human potential to serve the Nation

 Dedicated efforts for quality education.
 Yearning to promote research and development.
 Persistent endeavor to imbibe moral and professional ethics
 Inculcating the concept of emotional intelligence
 Emphasizing extension work to reach out to the society
 Treading the path to meet the future challenges.

Department of AI&DS | 317522 | Human Computer Interface Page 2

Vision of the Department

 To produce globally competent engineers in the field of Artificial Intelligence and Data
Science with human values

Mission of the Department

 To develop students with a sound understanding in the area of Artificial Intelligence,

Machine Learning and Data Science.
 To enable students to become innovators, researchers, entrepreneurs and leaders
globally.
 Equip the department with new advancement in high performance equipment’s and
software to carrying out research in emerging technologies in AI and DS.
 To meet the pressing demands of the nation in the areas of Artificial Intelligence and
Data Science.

Department of AI&DS | 317522 | Human Computer Interface Page 3

 Laboratory Human Computer Interface
317525

Teaching Scheme Credit Scheme Examination Scheme and

Marks
Practical: 02 Hours/Week 01 Term Work: 25 Marks
Oral: 25 Marks

Course Objectives:
 To understand the importance of HCI design process in software development.
 To learn fundamental aspects of designing and implementing user interfaces.
 To study HCI with technical, cognitive and functional perspectives.
 To acquire knowledge about variety of effective human-computer-interactions.
 To co-evaluate the technology with respect to adapting changing user requirements in
interacting with computer.

Course Outcomes:
On completion of the course, learner will be able to–
CO1: To design effective Human-Computer-Interfaces for all kinds of users
CO2: To apply and analyze the user-interface with respect to golden rules of interface
CO3: To implement the interactive designs for feasible data search and retrieval

Guidelines for Instructor's Manual

The instructor ‘s manual is to be developed as a hands-on resource and reference. The instructor's
manual needs to include prologue (about university/program/ institute/ department/foreword/
preface), curriculum of course, conduction and Assessment guidelines, topics under
consideration-concept, objectives, outcomes, set of typical applications/assignments/ guidelines,
and references.

Guidelines for Student's Laboratory Journal

The laboratory assignments are to be submitted by student in the form of journal. Journal consists
of prologue, Certificate, table of contents, and handwritten write-up of each assignment (Title,
Objectives, Problem Statement, Outcomes, software and Hardware requirements, Date of
Completion, Assessment grade/marks and assessor's sign, Theory- Concept in brief, algorithm,
flowchart, test cases, Test Data Set (if applicable), mathematical model (if applicable),
conclusion/analysis. Program codes with sample output of all performed assignments are to be
submitted as softcopy.
As a conscious effort and little contribution towards Green IT and environment awareness,
attaching printed papers as part of write-ups and program listing to journal may be avoided. Use

Department of AI&DS | 317522 | Human Computer Interface Page 4

of DVD containing students’ programs maintained by Laboratory In-charge is highly encouraged.
For reference one or two journals may be maintained with program prints at Laboratory.

Guidelines for Laboratory / Term Work Assessment

Continuous assessment of laboratory work should be done based on overall performance and
Laboratory assignments performance of student. Each Laboratory assignment assessment should
be assigned grade/marks based on parameters with appropriate weightage. Suggested
parameters for overall assessment as well as each Laboratory assignment assessment include-
timely completion, performance, innovation, efficient codes, punctuality and neatness.

Guidelines for Laboratory Conduction

The instructor is expected to frame the assignments by understanding the prerequisites,
technological aspects, utility and recent trends related to the topic. The assignment framing policy
need to address the average students and inclusive of an element to attract and promote the
intelligent students. The instructor may set multiple sets of assignments and distribute among
batches of students. It is appreciated if the assignments are based on real world
problems/applications. Encourage students for appropriate use of Hungarian notation, proper
indentation and comments. Use of open source software is to be encouraged. In addition to these,
instructor may assign one real life application in the form of a mini-project based on the concepts
learned. Instructor may also set one assignment or mini-project that is suitable to respective
branch beyond the scope of syllabus.
Set of suggested assignment list is provided in groups- A, B, and C. Each student must perform all l
assignments

Pract
ical Assignment to be covered
No.
2 Assignments from Group A (All Compulsory)
List five technologies from the Knowledge Navigator video that were not around in
1
1987, but are in widespread use today.
Implement GOMS (Goals, Operators, Methods and Selection rules) modelling technique
2
to model user's behavior in given scenario.
2 Assignments from Group B (All Compulsory)

Using your observations from your small user study and your knowledge of Web Design
3 guidelines and general UI design principles, Critique two interfaces of any two
educational institute and make suggestions for improvement.

Department of AI&DS | 317522 | Human Computer Interface Page 5

 Implement a simple interactive webpage, showing a tabbed UI (which is implemented
not through widgets but by interacting with and controlling the Document Object Model
with JavaScript and CSS). This page consists of a centered container with 3 tabs each for
4 showing a text, an image and a YouTube video. A div containing three Buttons is used as
a tab bar and pressing each button displays the corresponding tab. Only one tab should
be displayed at a time The button showing the current tab must remain highlighted
from the moment your page is loaded.
2 Assignments from Group C (All Compulsory)

Develop interactive user interfaces using JavaScript, CSS and HTML, specifically: a.
implementation of form-based data entry, input groups, and button elements using the
5 Bootstrap library. b. use of responsive web design (RWD) principles, c. implementing
JavaScript communication between the input forms and a custom visualization
component.
6 Make a Table Lamp in Blender – A 3 D modeling software.

Department of AI&DS | 317522 | Human Computer Interface Page 6

 Group A
Assignment 1

Problem Statement:

List five technologies from the Knowledge Navigator video that were not around in 1987, but are
in widespread use today

Objective:

To identify and analyze five technologies featured in the "Knowledge Navigator" video that were
not present in 1987 but have become widely adopted in contemporary times.

Outcome:

Input:

1. List of technologies featured in the "Knowledge Navigator" video.

2. Historical context of the technology landscape in 1987.
3. Current state of technology adoption and usage.

Output:

1. Identification of five technologies from the "Knowledge Navigator" video.

2. Comparison of each identified technology with the technology landscape of 1987.
3. Documentation of how these five technologies have become widespread and integral to modern
society.
4. Insights into the impact and implications of these technologies on various aspects of daily life,
communication, and productivity.
5. Discussion of the evolution and development of these technologies, highlighting key milestones
and innovations that led to their widespread use today.

Theory:

Knowledge Navigator

The Knowledge Navigator was a futuristic idea from Apple in 1987. It imagined a tablet-like device
that could talk to you, understand what you say, and give you information from a huge network of
knowledge. It was like a smart assistant that could help with tasks, like scheduling and finding
information, using natural language commands.

1. Amazon Alexa

Department of AI&DS | 317522 | Human Computer Interface Page 7

Alexa is a voice-controlled virtual assistant. It can play audio, control your smart home, answer
questions, and engage your favorite services to keep you organized, informed, safe, connected, and
entertained. As a product of Amazon, Alexa is also your personal shopper.

Based in the cloud, Alexa is accessed through a growing number of smart speakers and other
Alexa-enabled devices. Alexa is like the software that powers your smartphone, but instead of
apps, it uses “skills.” Like your smartphone, Alexa includes many skills out-of-the-box, while
others can be enabled by choice. Amazon’s skills collection already exceeds 25,000, including
many from brands you use frequently. That collection grows by the day.

Among Alexa’s most popular capabilities:

Play music
Report the news
Check the weather
Offer sports updates
Play podcasts
Stream live radio
Control your smart home
Manage your lists and calendars
Call phones and other Alexa-enabled devices
Set timers and alarms
Play audiobooks

2. Google Assistant

Department of AI&DS | 317522 | Human Computer Interface Page 8

Google Assistant is a virtual voice-powered assistant developed by Google. It is designed to
provide users with a conversational interface to interact with their devices and access various
services using natural language. Google Assistant is available on a wide range of platforms,
including smartphones, smart speakers, smart displays, smart TVs, wearables, and even some
cars.

Key features and capabilities of Google Assistant include:

1. Voice Commands: Users can activate Google Assistant by saying "Hey Google" or "Ok Google,"
followed by a command or question. The assistant responds to a variety of voice-based tasks, such
as sending texts, setting reminders, making calls, playing music, and more.

2. Natural Language Processing: Google Assistant employs advanced natural language processing
(NLP) techniques to understand and interpret user input in a conversational manner. This allows
users to have more fluid and contextually relevant interactions.

3. Contextual Awareness: The assistant can remember previous interactions and provide
contextually relevant responses. For instance, if you ask, "Who directed 'Inception'?", you can then
follow up with "When was it released?" without needing to repeat the movie title.

4. Home Automation: Google Assistant can control and manage smart home devices like lights,
thermostats, locks, and cameras, enabling users to control their smart homes using voice
commands.

5. Information Retrieval: Google Assistant can answer a wide range of questions by pulling
information from the web, such as weather forecasts, sports scores, stock prices, and general
knowledge inquiries.

6. Reminders and Alarms: Users can set reminders, alarms, timers, and calendar appointments
using voice commands.

7. Multilingual Support: Google Assistant supports multiple languages and can seamlessly switch
between them during a conversation.

8. Third-Party Integration: Developers can create custom actions or skills for Google Assistant,
allowing it to interact with third-party services and applications.

9. Continued Conversations: Google Assistant has a feature called "Continued Conversations" that
enables users to have a back-and-forth conversation without needing to repeat the wake phrase
for each interaction.

10. Duplex Technology: Google Duplex is a feature of Google Assistant that can make phone calls
on behalf of the user for tasks like making restaurant reservations or booking appointments.

Department of AI&DS | 317522 | Human Computer Interface Page 9

3. Apple Siri

Siri is Apple's virtual voice assistant, similar to Google Assistant. It is integrated into Apple's
ecosystem of devices and services, including iPhones, iPads, Mac computers, Apple Watches,
HomePod smart speakers, and more. Siri allows users to interact with their devices using natural
language voice commands and provides a range of functions and features. Here are some key
aspects of Siri:

1. Voice Interaction: Siri can be activated by saying "Hey Siri" or by pressing a designated button
on compatible devices. Users can then speak voice commands or ask questions to perform various
tasks.

2. Tasks and Functions: Siri can handle a wide array of tasks, such as sending messages, making
calls, setting reminders, creating calendar events, checking the weather, playing music, providing
directions, and more.

3. Natural Language Processing: Like other virtual assistants, Siri employs natural language
processing technology to understand and respond to user input in a conversational manner.

4. Device Control: Siri can control device settings and perform actions within the Apple ecosystem.
This includes adjusting settings like brightness, volume, Wi-Fi, Bluetooth, and more.

5. Integration with Apple Services: Siri is tightly integrated with various Apple services, such as
Apple Music, Apple Maps, Messages, and Calendar. It can also interact with third-party apps and
services to perform specific actions.

Department of AI&DS | 317522 | Human Computer Interface Page 10

6. HomeKit Integration: Siri can control smart home devices compatible with Apple's HomeKit
platform, allowing users to control lights, thermostats, locks, and other smart devices using voice
commands.

7. Shortcuts: Siri Shortcuts allows users to create custom voice commands that trigger a sequence
of actions across different apps and services. This feature enhances automation and
personalization.

8. Contextual Awareness: Siri can maintain context across conversations, enabling users to ask
follow-up questions or provide additional information without repeating the entire context.

9. Privacy: Apple emphasizes user privacy and data security. Siri processes most voice commands
on the device itself, reducing the need to send data to Apple's servers.

10. CarPlay Integration: Siri is integrated with Apple CarPlay, allowing drivers to use voice
commands for navigation, communication, and entertainment while on the road.

4. Cortana

Cortana is a virtual assistant developed by Microsoft. It was first introduced as part of the
Windows Phone operating system and later expanded to other Microsoft platforms and devices,
including Windows 10 PCs, tablets, and other devices. Named after an AI character from the
"Halo" video game series, Cortana is designed to help users perform tasks and access information
using natural language voice commands and typed text. Here are some key aspects of Cortana:

1. Voice Interaction: Cortana can be activated by saying "Hey Cortana" or by clicking/tapping a

designated button or icon on compatible devices. Users can then speak or type commands to
interact with the assistant.

2. Tasks and Functions: Similar to other virtual assistants, Cortana can perform a variety of tasks,
including setting reminders, sending emails, making calls, scheduling appointments, providing
weather forecasts, and more.

3. Integration with Windows: Cortana is deeply integrated into the Windows operating system,
allowing users to search for files, launch applications, and perform system-related tasks using
voice or text commands.

4. Productivity and Personalization: Cortana can help users manage their schedules, create to-do
lists, set alarms, and provide reminders. It can also learn user preferences and offer personalized
suggestions over time.

5. Contextual Understanding: Cortana can understand context and maintain conversations,

allowing users to have back-and-forth interactions without needing to repeat the full context.

6. Integration with Microsoft Services: Cortana is tightly integrated with Microsoft's suite of
services, such as Office 365, Outlook, and Microsoft To-Do. It can also interact with third-party
apps and services.

Department of AI&DS | 317522 | Human Computer Interface Page 11

7. Cortana Skills: Similar to skills on other platforms, Cortana Skills are third-party applications
that extend Cortana's capabilities. These skills allow users to perform specific tasks or access
information from various services.

8. Smart Home Integration: Cortana can control compatible smart home devices through its
integration with Microsoft's IoT platform, allowing users to manage lights, thermostats, and other
connected devices.

9. Cross-Platform Support: While Cortana's presence on mobile platforms has diminished, it is still
available on Windows 10 devices, offering a consistent assistant experience across PCs, tablets,
and other Windows-based devices.

5.Tablet Computing:

Portable tablet devices like iPads and Android tablets have revolutionized computing, providing
touch-based interfaces for a wide range of tasks, from browsing and communication to
entertainment and productivity.

Tablet computing refers to the use of portable and flat touchscreen devices, commonly known as
tablets, for various computing tasks. Tablets are characterized by their touch-sensitive screens,
compact design, and lightweight nature, making them convenient and versatile tools for personal
and professional use. Here's an overview of tablet computing:

Key Features:
1. Touchscreen Interface: Tablets feature touch-sensitive screens that allow users to interact with
the device using gestures like tapping, swiping, and pinching.

2. Portability: Tablets are designed to be lightweight and compact, making them easy to carry and
use on the go.

Department of AI&DS | 317522 | Human Computer Interface Page 12

3. Multimedia Capabilities: Tablets can play videos, display images, and provide an immersive
multimedia experience.

4. App Ecosystem: Tablets run on operating systems that support a wide range of applications
(apps) designed for various purposes, including productivity, entertainment, education, and more.

5. Internet Connectivity: Most tablets can connect to the internet via Wi-Fi or cellular data,
enabling web browsing, email, and online activities.

6. Battery Life: Tablets typically offer good battery life, allowing for extended use without frequent
recharging.

Use Cases:
1. Browsing and Communication: Tablets are popular for web browsing, social media, email, and
video calling.

2. Entertainment: Users can watch movies, stream videos, listen to music, read e-books, and play
games on tablets.

3. Productivity: Tablets are used for word processing, creating presentations, note-taking, and
other productivity tasks with the help of apps.

4. Education: Tablets are integrated into educational settings, providing interactive learning
experiences through educational apps and digital textbooks.

5. Art and Design: Many artists and designers use tablets for digital drawing, painting, and graphic
design due to their touch-sensitive screens and stylus compatibility.

6. E-commerce and Retail: Tablets are employed in retail environments for inventory
management, point-of-sale systems, and customer interactions.

Popular Tablet Platforms:

Apple iPad: The iPad lineup, powered by iOS or iPadOS, is known for its sleek design and extensive
app ecosystem.

Android Tablets: Tablets running the Android operating system offer a wide range of options from
various manufacturers.

Microsoft Surface: The Surface series runs Windows and is aimed at combining tablet portability
with laptop-like capabilities.

Tablet computing has transformed how people consume content, perform tasks, and stay
connected, offering a blend of portability, versatility, and user-friendly interfaces that have
become an integral part of modern technology.

Department of AI&DS | 317522 | Human Computer Interface Page 13

Conclusion:

In this way, we have listed and studied technologies from the Knowledge
Navigator video that was not around in 1987, but are in widespread use today.

Oral Questions:

1. Can you name a few latest technologies from the video that weren't around in the past but are
everywhere now?
2.How are the technologies in the video like the ones we have today?
3.Why are these new technologies important for us and our world?

Department of AI&DS | 317522 | Human Computer Interface Page 14

 Group A
Assignment 2

Problem Statement:

Implement GOMS (Goals, Operators, Methods and Selection rules) modelling technique to model
user's behavior in given scenario.

Objective:

1.Analysis of User Behavior: Utilize GOMS modeling to analyze and dissect the user's behavior and
cognitive processes while interacting with the given scenario.
2. Task Understanding: Break down the user's interactions into goals, operators, methods, and
selection rules to gain a detailed understanding of how the user approaches and completes the
task.
3.Human-Computer Interaction Improvement: Apply GOMS to enhance the interaction between
users and the system, ensuring a smoother and more intuitive user experience.

Outcome

Input:

1. Specific scenario or task requiring user interaction.

2. User's intended goals and objectives for the task.
3. Actions (operators) available to the user.
4. Steps (methods) user takes to complete the task.
5. Decision rules for choosing actions or methods.

Output:

1. Defined user goals (G) for the task.

2. Identified user actions (O) or operators.
3. Sequences of actions (M) user follows.
4. User's decision-making criteria (S).
5. Predictions of user behavior and time estimates.
6. Usability evaluation and efficiency insights.
7. Design recommendations for task improvement.
8. Decomposed task components for analysis.
9. Optimized interaction model proposal.

Theory:

GOMS Model Overview

Department of AI&DS | 317522 | Human Computer Interface Page 15

GOMS is a model of human performance used to improve human-computer interaction efficiency
by eliminating useless or unnecessary interactions. GOMS stands for:

G Goals: The tasks users want to accomplish.

O Operators: The actions needed to achieve the goals.
M Methods: The procedures or sequences of operators used to accomplish the goals.
S Selection: The rules for choosing among different methods.

We can distinguish a few types of GOMS (e.g., CPM-GOMS (Cognitive Perceptual Motor GOMS),
NGOMSL (Natural GOMS Language), or SCMN-GOMS (Structured, Cognitive, Model-based, Non-
hierarchical GOMS)), but the most popular is KLM-GOMS (Keystroke Level Model), where we can
empirically check values for operators like button presses, clicks, pointer movement time, etc.
For the detailed description, we define:

Goals (G): The tasks to accomplish (e.g., "Send an email").

Operators (O): The actions needed to achieve the goal (e.g., "Amount of mouse clicks to send an
email").
Methods (M): The groups of operators (e.g., "Move mouse to send button, click on the button").
Selection (S): The user's decision-making approach (e.g., "Move mouse to send button, click on the
button" or "Move mouse to send button, click ENTER").
GOMS is based on research with end-users and serves as a strong benchmark for behaviors,
helping to eliminate unnecessary actions, saving time and cost.

Department of AI&DS | 317522 | Human Computer Interface Page 16

Conclusion:

Conclusion: Successfully Implement GOMS (Goals, Operators, Methods and Selection

rules) modeling technique to model user's behavior in given scenario.

Oral Questions:

1. When someone wants to set an alarm on their smartphone, what are the main things they want
to achieve?
2. What are some specific actions (operators) a person takes while setting an alarm on their
smartphone?

Department of AI&DS | 317522 | Human Computer Interface Page 17

 Group B
Assignment 3
Problem Statement:
Using your observations from your small user study and your knowledge of Web Design
guidelines and general UI design principles, Critique two interfaces of any two educational
institute and make suggestions for improvement.

Objective:
1. To understand web design guidelines and general UI design principles.
2. Able to find UI Design issues or errors.
3. Able to solve UI Design issues or errors using design guidelines and general UI design principle.

Outcome
Input:
1. Insights from a user study on educational institute interfaces.
2. Established web design guidelines and usability principles.
3. General user interface design principles.
Output:
1. Critique of two educational institute interfaces.
2. Specific suggestions to enhance design, usability, and user experience.
3. Guidance for implementing recommended improvements.
4. Assessment of potential usability impact.
5. Comprehensive design documentation for reference.

Theory:

Web Design

Web design encompasses many different skills and disciplines in the production and maintenance
of websites. The different areas of web design include web graphic design; user interface design;
authoring, including standardized code and proprietary software; user experience design; and
search
engine optimization.
Web Design Guidelines and principles:
1. Simplicity
2. Visual Hierarchy
3. Navigability
4. Consistency
5. Responsivity
6. Accessibility
7. Conventionality

Department of AI&DS | 317522 | Human Computer Interface Page 18

8. Credibility
9. User-Centricity
1. Simplicity:

While the appearance of your website is certainly important, most people aren't coming to your
site to evaluate how slick the design is. They want to complete some action or find specific
information. Therefore, unnecessary design elements (i.e., those that serve no functional purpose)
will only overwhelm visitors and make it more difficult for them to accomplish their goals.

From a usability and UX perspective, simplicity is your best friend. If you have all the necessary
page elements, it’s hard to make things too simple. You can employ this principle in various ways,
such as:

Colors: Basically, don't use too many. The Handbook of Computer-Human Interaction
recommends using a maximum of five (plus or minus two) different colors in your design.

Typefaces: Choose highly legible typefaces—nothing too artsy and minimal script fonts, if any. For
text color, keep it minimal and ensure it contrasts with the background color. A common
recommendation is to use a maximum of three different typefaces in up to three different sizes.

Graphics: Only use graphics if they help a user complete a task or perform a specific function
(don't just add graphics randomly).

2. Visual Hierarchy:

Closely tied to the principle of simplicity, visual hierarchy means arranging and organizing
website elements so that visitors naturally gravitate toward the most important elements first.
When optimizing for usability and UX, the goal is to lead visitors to complete a desired action in a
way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements,
you can structure your site so that viewers are drawn to the most important elements first.

In the example below from Spotify, you can see that the main heading “Get 3 months of Premium
for free” sits atop the visual hierarchy with its size and page position. It draws your eye to their
mission before anything else. This is followed by the "Get 3 Months Free" CTA, which prompts
action. Users can click this CTA or scan the menu items above for more actions.

Department of AI&DS | 317522 | Human Computer Interface Page 19

3. Navigability:

Planning out intuitive navigation on your site is crucial to help visitors find what they're looking
for. Ideally, a visitor should land on your site and not have to think extensively about where to
click next. Moving from point A to point B should be as frictionless as possible. Here are a few tips
for optimizing your site's navigation:

Keep the structure of your primary navigation simple and near the top of your page.
Include navigation in the footer of your site.
Consider using breadcrumbs on every page (except your homepage) so users can remember their
navigation trail.
Include a search bar near the top of your site so visitors can search by keywords.
Don't offer too many navigation options per page. Simplicity is key!
Include links within your page copy and make it clear where those links go.
Don't make users dig too deep. Try making a basic wireframe map of all your site pages arranged
like a pyramid: Your homepage is at the top, and each linked page forms the next layer. In most
cases, it’s best to keep your map no more than three levels deep. Take HubSpot’s site map, for
example.
One more pointer: Once you've settled on what your site's main (top) navigation will be, keep it
consistent. The labels and location of your navigation should remain the same on every page.

4. Consistency:

In addition to keeping your navigation consistent, the overall look and feel of your site should be
similar across all of your site's pages. Backgrounds, color schemes, typefaces, and even the tone of
your writing are all areas where consistency positively impacts usability and UX. That's not to say
every page should follow the same layout. Instead, create different layouts for specific types of
pages (e.g., landing pages, informational pages, etc.). By using those layouts consistently, you'll
make it easier for visitors to understand what type of information they're likely to find on a given
page.

Department of AI&DS | 317522 | Human Computer Interface Page 20

5. Responsivity:

According to Statista, 48% of global page views were from mobile devices like smartphones and
tablets. And according to our research, 93% of people have left a website because it didn’t display
properly on their device. This highlights the importance of responsive design, ensuring that your
website looks and functions well on all devices, from desktops to smartphones. Make sure to test
your site on various screen sizes and resolutions to provide a seamless experience for all users.

Interface 1: Indian Institute of Technology Bombay

Observations:

 Homepage Layout: The homepage of University A is cluttered with too much information and too many
elements vying for attention.
 Navigation: The navigation menu is complex with too many sub-menus, making it hard to find specific
information quickly.
 Responsivity: The website does not adapt well to mobile devices, with elements overlapping and text
becoming difficult to read.
 Color Scheme: The color scheme is inconsistent, with multiple colors used in an uncoordinated manner.
 Load Time: The page load time is slow due to heavy use of large images and multimedia elements.

Critique:

1. Cluttered Homepage: The homepage should have a clean, focused design. Key information should be
prioritized, with a clear call to action.
2. Complex Navigation: Simplify the navigation menu. Use a clear, hierarchical structure with well-defined
categories.
3. Poor Responsivity: Implement a responsive design that adapts to different screen sizes. Use media
queries and flexible grid layouts.
4. Inconsistent Color Scheme: Choose a consistent color palette that aligns with the university’s branding.
Limit the number of colors to improve visual coherence.
5. Slow Load Time: Optimize images and multimedia for faster load times. Consider lazy loading for non-
critical content.

Suggestions for Improvement:

1. Redesign the Homepage: Focus on the most important information such as upcoming events, news, and
key links. Use whitespace effectively to avoid overwhelming users.
2. Streamline Navigation: Create a mega-menu or a dropdown menu that is easier to navigate. Use clear
labels and limit the number of sub-menus.
3. Enhance Mobile Experience: Use responsive design techniques to ensure the website works well on all
devices. Test the site on various screen sizes to ensure usability.
4. Standardize Colors: Develop a style guide that includes a standardized color palette. Ensure all pages
follow this guide for a cohesive look.
5. Improve Performance: Compress images, use efficient coding practices, and leverage browser caching
to speed up load times.

Interface 2: National Institute of Technology Durgapur

Department of AI&DS | 317522 | Human Computer Interface Page 21

Observations:

 Homepage Layout: The homepage of College B is clean but lacks engaging content and clear calls to
action.
 Navigation: The navigation is simple but lacks some important links, making it hard for users to find
specific information.
 Responsivity: The website is responsive, but some elements like buttons and text fields are not
optimized for touch interaction.
 Color Scheme: The color scheme is minimalistic but sometimes leads to poor contrast, making some
text hard to read.
 Load Time: The website loads quickly but lacks engaging multimedia content.

Critique:

1. Lack of Engaging Content: The homepage could benefit from more dynamic content such as featured
news, events, and student testimonials.
2. Insufficient Navigation Links: Important sections such as departments, course catalog, and contact
information are not easily accessible.
3. Suboptimal Touch Interaction: Some buttons and interactive elements are too small for touch
interaction on mobile devices.
4. Poor Contrast: The minimalistic color scheme needs better contrast to ensure readability, especially for
text.
5. Lack of Multimedia: Adding engaging multimedia content like videos or interactive elements could
improve user engagement.

Suggestions for Improvement:

1. Enhance Homepage Content: Add dynamic elements such as a news feed, upcoming events, and
featured stories. Use visual elements to draw attention to important areas.
2. Expand Navigation Links: Include direct links to critical sections such as academics, admissions, and
student services. Use a sticky navigation bar to keep links accessible as users scroll.
3. Optimize Touch Elements: Increase the size of buttons and interactive elements to make them more
touch-friendly. Ensure sufficient spacing between elements to avoid accidental clicks.
4. Improve Contrast: Use a color contrast checker to ensure all text is easily readable against the
background. Adjust colors as needed to meet accessibility standards.
5. Add Multimedia Content: Integrate videos, image sliders, and other interactive elements to make the
site more engaging. Ensure multimedia content is optimized for quick loading.

Conclusion:

1. Understand and identify the strengths of a clean layout and intuitive navigation.
2. Apply the concept of streamlined navigation and concise, descriptive labels for improved
usability.
3. Implement suggestions for enhancing user experience based on web design and UI principles.

Oral Questions:

Department of AI&DS | 317522 | Human Computer Interface Page 22

1. What are some key aspects you consider when analyzing the effectiveness of a web interface's
layout and navigation?
2. Could you describe the process of conducting a small user study to evaluate educational
institute interfaces?
3.Why is it important for educational institute interfaces to be responsive across various devices,
and how might this impact students' learning experiences?

Department of AI&DS | 317522 | Human Computer Interface Page 23

 Group B
Assignment 4

Problem Statement:

Implement a simple interactive webpage, showing a tabbed UI (which is implemented not

through widgets but by interacting with and controlling the Document Object Model with
JavaScript and CSS). This page consists of a centered container with 3 tabs each for showing a
text, an image and a YouTube video. A div containing three Buttons is used as a tab bar and
pressing each button displays the corresponding tab. Only one tab should be displayed at a time
The button showing the current tab must remain highlighted from the moment your page is
loaded.

Objective:

Create an interactive webpage with a tabbed user interface using JavaScript and CSS. The webpage
will display text, images, and YouTube videos in separate tabs within a centered container. Users
can switch tabs by clicking buttons in a tab bar, with the active tab button staying highlighted. The
goal is to provide a seamless user experience and responsive design across devices.

Outcome:

Input:

1. Web Design Assets: Text content, images, and YouTube video URLs for each tab.
2. CSS Styling: CSS styles for the overall layout, tab bar, buttons, and tab content.
3. JavaScript Code: Code for tab switching functionality, highlighting active tab, and DOM
manipulation.

Output:

The output is an interactive webpage that effectively implements the tabbed user interface using
JavaScript and CSS, providing users with a seamless and engaging experience while exploring
various types of content.

Theory:

To create the described interactive webpage with tabbed UI using HTML, CSS, and
JavaScript, you can follow these steps:
1. Create the HTML structure for the page.
2. Style the page using CSS to achieve the tabbed UI appearance.
3. Implement JavaScript to control the visibility of tabs and highlight the active button.

Department of AI&DS | 317522 | Human Computer Interface Page 24

HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabbed UI</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="tab-bar">
<button class="tab-button active" onclick="showTab('text-tab', this)">Text</button>
<button class="tab-button" onclick="showTab('image-tab', this)">Image</button>
<button class="tab-button" onclick="showTab('video-tab', this)">Video</button>
</div>
<div id="text-tab" class="tab-content active">
<p>Management information systems (MIS) is the study and application of
information systems that organizations use for data access, management, and analytics. For
MIS to be effective, you must understand and carefully map out business processes. Data
must be accurate and timely, and hardware and software must be able to store and
manipulate it.

A good MIS depends on the people who design, implement, and use it. If you're considering
a career in management information systems, learn about the major, the skills you need,
and the various job roles.

What is a management information system?

An MIS is a system that provides managers with the necessary information to make
decisions about an organization's operations. The MIS gathers data from various sources
and processes it to provide information tailored to the managers' and their staff's needs.

While businesses use different types of systems, they all share one common goal: to
provide managers with the information to make better decisions. In today's fast-paced
business environment, having access to accurate and timely information is critical for
success. MIS allows managers to track performance indicators, identify trends, and make
informed decisions about where to allocate resources..</p>
</div>
<div id="image-tab" class="tab-content">
<img src="C:/Users/AIDS 27/Downloads/Program/images.jpg" alt="Placeholder
Image">
</div>
<div id="video-tab" class="tab-content">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/cUS_22_lDiM" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
<script src="scripts.js"></script>

Department of AI&DS | 317522 | Human Computer Interface Page 25

</body>
</html>
CSS (styles.css):

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

.container {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tab-bar {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}

.tab-button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #eee;
cursor: pointer;
transition: background-color 0.3s;
}

.tab-button.active {
background-color: #007BFF;
color: white;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

Department of AI&DS | 317522 | Human Computer Interface Page 26

JavaScript (script.js):

function showTab(tabId, element) {

const tabs = document.querySelectorAll('.tab-content');
const buttons = document.querySelectorAll('.tab-button');

tabs.forEach(tab => {
tab.classList.remove('active');
});

buttons.forEach(button => {
button.classList.remove('active');
});

document.getElementById(tabId).classList.add('active');
element.classList.add('active');
}

// Show the first tab by default

document.addEventListener('DOMContentLoaded', () => {
document.getElementById('text-tab').classList.add('active');
});

Department of AI&DS | 317522 | Human Computer Interface Page 27

Department of AI&DS | 317522 | Human Computer Interface Page 28
Conclusion:

1. The implemented interactive webpage featuring a tabbed UI effectively displayed text, images,
and videos through a centralized container.
2. Utilizing JavaScript and CSS to control the Document Object Model (DOM), the user could switch
tabs using buttons while maintaining a single visible tab at a time.
3.The active tab was visually highlighted, ensuring clarity and engagement. This project
showcased technical skills, user-centered design, and the integration of JavaScript and CSS to
enhance interactivity, resulting in an intuitive and visually appealing web interface.

Oral Questions:

1. What is the main purpose of the implemented interactive webpage with a tabbed UI?
2. How does the tabbed UI on the webpage allow users to view different types of content?
3. What role does JavaScript play in controlling the tab switching on the webpage?
4. Why is it important to visually highlight the active tab button in the tab bar?

Department of AI&DS | 317522 | Human Computer Interface Page 29

 Group C
Assignment 5

Problem Statement:

Develop interactive user interfaces using JavaScript, CSS and HTML, specifically: a.
implementation of form-based data entry, input groups, and button elements using the Bootstrap
library. b. use of responsive web design (RWD) principles, c. implementing JavaScript
communication between the input forms and a custom visualization component.

Objective:

1.The project aims to showcase proficiency in Bootstrap, responsive design, and JavaScript to
create interactive user interfaces with seamless data communication and visualization, catering to
diverse devices and screen sizes.
2. Establish bidirectional communication between input forms and JavaScript.

Outcome:

Input:
1.Text content, images, and video URLs for visualization.
2. CSS styles for the layout, input forms, buttons, and visualization component.
3. Bootstrap library for responsive design and UI components.
4. JavaScript code to handle form interactions and dynamic visualization updates.

Output:
The output is an interactive webpage that effectively implements the tabbed user interface using
JavaScript and CSS, providing users with a seamless and engaging experience while exploring
various types of content.

Theory:

Developing Interactive User Interfaces:

a. Form-Based Data Entry and Input Groups using Bootstrap:

- Start by creating an HTML form element for data entry.

- Utilize Bootstrap classes to style and structure the form components, such as input fields,
checkboxes, and radio buttons.
- Implement input groups to enhance the visual appearance and usability of form elements.
- Add buttons for submitting and resetting the form, applying Bootstrap button styling.
- Utilize Bootstrap's grid system to organize the form layout responsively.

Department of AI&DS | 317522 | Human Computer Interface Page 30

HTML(Form.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Form</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mt-5">
<h2>Interactive Form</h2>
<form id="dataForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name"
required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email"
required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password"
required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="result" class="mt-3"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>

Department of AI&DS | 317522 | Human Computer Interface Page 31

 <script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS (Style.css)

body {
background-color: #f8f9fa;
}

.container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#result {
padding: 10px;
border-radius: 5px;
background-color: #e9ecef;
}

JavaScript (script.js):

document.getElementById('dataForm').addEventListener('submit', function(e) {
e.preventDefault();
let name = document.getElementById('name').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;

document.getElementById('result').innerHTML = `
<h4>Submitted Data:</h4>
<p><strong>Name:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Password:</strong> ${password}</p>
;
});

b. Responsive Web Design (RWD) Principles:

Responsive Web Design Principles
The following responsive web design best practices, aka principles, will ensure flexibility and
provide satisfying UX regardless of the device your website is approached from:

1. Start With Smallest Screens

Department of AI&DS | 317522 | Human Computer Interface Page 32

This principle, also known as the “mobile-first” approach, involves designing the website
primarily for mobile devices before considering larger screens. By beginning the responsive web
design process with mobile devices, you ensure the website is optimized for smaller screens and
limited resources such as bandwidth and processing power.

Starting with the smallest screens prioritizes simplicity, efficiency, and a streamlined UX. You can
choose and present essential content and features in a limited space. This will avoid cluttering the
UI and get a focused and user-friendly design. Once the mobile version is complete, expand and
enhance the design for larger screens.

Note: Don’t fall into a common trap of grouping similar devices’ screen sizes into one category.
Some smartphones have larger screens than tablets, while tablets can have larger screens than
small notebooks. Instead of designing for mobile devices, tablets, laptops, and desktops, categorize
design according to screen size: small, medium, large, and extra-large.

2. Enhance Visual Hierarchy

Visual hierarchy is essential to designing responsive websites because screen space varies across
different devices. Enhancing it ensures that users can easily navigate and understand the content
regardless of their device. It helps create a cohesive and engaging UX, improving usability and
overall satisfaction.

3. Create Fluid Grids and Flexible Images

Implementing a fluid grid allows the content to dynamically resize and rearrange to fit different
devices. It ensures that the website maintains a consistent structure and readability, regardless of
the screen size. Elements within the grid can scale and reposition, providing a seamless and
optimized UX.
Flexible images resize proportionally, maintaining their aspect ratio as the screen width changes,
without distortion or cropping. To achieve flexibility, designers use CSS techniques.

Department of AI&DS | 317522 | Human Computer Interface Page 33

For example, setting the maximum width of the image to 100% ensures that it scales down
proportionally to fit within its container. The height is adjusted automatically to maintain the
aspect ratio, preventing images from appearing stretched or skewed.

Another option to get flexible images is to use srcset, which serves different image sources based
on the device’s capabilities and screen size. At Digital Silk, a full-service website design agency for
your upcoming projects.

4. Select Appropriate Typography

Typography is equally important for readability and website aesthetics. In responsive web design,
you must select fonts that work well on different devices, screen sizes, and resolutions. Here is
some valuable advice for typography selection:

Ensure the chosen typefaces and font sizes are legible on various screen sizes, especially smaller
devices like smartphones.
Choose fonts that can scale well without losing their visual quality, keeping crispness and clarity
regardless of the device or screen resolution.
Implement responsive font sizes using relative units like percentages or viewport-based units
(e.g., vw, vh) to ensure that the text scales proportionally with the screen size.
Establish a clear typographic hierarchy to guide users’ attention from the most to the least
important content elements.

Adjust the line length to ensure comfortable reading. Long lines of text can be challenging to read,
especially on smaller screens.

Ensure sufficient contrast between the text and the background to enhance readability,
particularly for visually impaired users. Choose color combinations that meet accessibility
guidelines and ensure the text is legible under different lighting conditions.
Avoid using generic placeholder text like “Lorem Ipsum” when designing layouts. It doesn’t
provide a realistic representation of how the actual content will look on the website. Work with
real content or content that closely resembles the final text to accurately assess the design’s
effectiveness and readability.

5. Include Content-Centric Breakpoints

When designing a responsive website, making all types of content (different text lengths and
multimedia content) look good on every screen is challenging. That is why design should
prioritize the content, not the device.

To achieve this, determine breakpoints (the specific “points” where the content and design adjust
to provide satisfying UX), focusing on the content that will be displayed. Using content-centric
breakpoints will ensure the layout adapts well to different screens and effectively presents all
types of content.

Department of AI&DS | 317522 | Human Computer Interface Page 34

6. Don’t Hide Content

In the past, there was a misconception that certain content should be hidden for mobile devices.
However, this approach has changed because people now use mobile devices in various contexts
and rely on them as their primary source of internet access.

Therefore, do not hide content for mobile users. Instead, focus on finding ways to present it in a
user-friendly manner that makes it accessible and user-friendly across all devices. Displaying
content prioritizing UX for all screen sizes ensures users can access all the information they need,
regardless of their device.

7. Prioritize Accessibility

A responsive website should provide equal access and usability for all users, including those with
disabilities or impairments. Ensure your web design includes keyboard accessibility, screen
reader compatibility, color contrast, well-structured content, and accessible forms.

8. Test Responsiveness
Testing responsiveness ensures the website adapts and performs well across various devices and
screen sizes. To check you did a good job, use responsive testing tools or conduct manual testing
using different devices to access your website.

By thoroughly testing responsiveness, you can identify and address any issues or limitations that
may impact the usability and performance of your website. It helps ensure that users have a
seamless and enjoyable UX regardless of the device they use to access your website.

c. JavaScript Communication Between Input Forms and Visualization Component:

Department of AI&DS | 317522 | Human Computer Interface Page 35

 - Create a custom visualization component (e.g., a chart, graph, or data display area) using HTML,
CSS, and JavaScript.
- Attach event listeners to form input elements to detect user interactions (e.g., selecting options,
entering data).
- Implement JavaScript functions to gather input data from the form elements.
- Utilize JavaScript to process and transform the input data into a format suitable for the
visualization component.
- Dynamically update the visualization component's content or appearance based on the
processed input data.
- Ensure smooth communication and synchronization between the input forms and the
visualization component.

By combining HTML, CSS, and JavaScript along with Bootstrap's styling and responsive design
features, you can create an interactive user interface that allows form-based data entry, input
grouping, responsive layout, and real-time communication between input forms and a custom
visualization component. This approach results in a seamless and user-friendly experience for
data input, interaction, and visualization.

Conclusion:

1.The development of interactive user interfaces using JavaScript, CSS, and HTML has been
successfully achieved with a focus on specific aspects.
2. The implementation included form-based data entry, input groups, and button elements
enhanced by the Bootstrap library, ensuring a visually appealing and user-friendly design.
3.Responsive web design (RWD) principles were applied to create a flexible and adaptable layout
across various devices, guaranteeing an optimal user experience.

Oral Questions:

1.How did you use the Bootstrap library to enhance the appearance and functionality of form-
based data entry and input groups in the interface?
2.Can you explain the importance of responsive web design (RWD) principles and how they were
applied to ensure the interface's adaptability across devices?
3.Could you describe the role of JavaScript in enabling communication between the input forms
and the custom visualization component?

Department of AI&DS | 317522 | Human Computer Interface Page 36

 Group C
Assignment 6

Problem Statement:

Make a Table Lamp in Blender – A 3 D modeling software

Objective:

1. To be familiar with some software tools like modeling, simulations, animations and rendering.
2. To know how to make a project using Blender and then get the OBJ, FBX, 3DS, PLY, STL files
of the software program of the project.
3. How to simulate these files using BLENDER.
4. Learn Table lamp animation

Outcome:

Input:

1.Blender software installed and launched on your computer.

2. Basic understanding of Blender's user interface and navigation.
3. Reference images or sketches of the table lamp design you want to create.
4. Creativity and imagination to design the lamp's shape, details, and materials.

Output:

1. A 3D model of a table lamp, complete with a lamp base, stand, lampshade holder, and
lampshade.
2. A visually appealing and realistic representation of the lamp, with attention to details and
materials.
3. Rendered images or animations of the lamp from different angles, showcasing its design and
features.
4. A Blender project file (. blend) containing all the elements and settings used to create the lamp,
allowing for further editing and modifications.
5. The ability to export the lamp model in various file formats (such as OBJ, FBX) for use in other
applications or projects.

Theory:

Introduction:

Blender is a free and open-source 3D computer graphics software tool set used for
creating animated films, visual effects, art, 3D printed models, interactive 3D applications

Department of AI&DS | 317522 | Human Computer Interface Page 37

and video games. Blender has a robust feature set similar to other high-end 3D software such as
Maya Cinema 4D, 3ds Max and Lightwave.
Features:
Blender’s features include 3D modeling, texturing, raster graphics editing, rigging and skinning,
fluid and smoke simulation, particle simulation, animating and editing. It was designed originally
as
in-house application by Ton Roosendaal at the Dutch animation studio Neo Geo. One feature that
Blender 3D is known for is the array of different tools and features that the product offers,
including
faster rendering, 3D Unwrapping and Physics. This has propelled the popularity for Blender
across all major streams.
Workspace Design:
1. After starting Blender and closing the Splash Screen (contains help options under link and the
recently open blend-files) your Blender window should look something similar to the image
below.

• Top bar at the very top

• Tool settings the second row of the Top bar
• Editors area in the middle
• Status bar at the bottom

Department of AI&DS | 317522 | Human Computer Interface Page 38

Default Workspace:
Layout: A general workspace to preview scene and objects
Sculpting: For modification of meshes by sculpting tools
Shading: Tools for specifying material properties for rendering
Animation: Tools for making properties of objects dependent on time
Rendering: For viewing and analyzing rendering results
Scripting: Programming workspace for writing scripts
UV Editing: Mapping of image texture coordinates to 3D surfaces
Compositing: Combining and post-processing of images and rendering information
Texture Paint: Tools for coloring image textures in 3D view

Some Important Keys:

ESC: This key always cancels Blender functions without changes
SPACE: Open the Toolbox
TAB: Start or quit Edit Mode
F1: Loads a Blender file. Changes the window to a File Window
RKEY: Rotate mode
TAB: This button starts and stops Edit Mode
UKEY: Undo.
WKEY: Specials Popup Menu
FKEY: Make Edge/Face
AKEY: Select/Unselect all

NKEY: For Properties

ZKEY: Orthographic Projection
OKEY: Switch in/out of Proportional Editing
ALT-E: Start/stop Edit Mode. Alternative hotkey: TAB
FKEY: If selected Object is a mesh Toggles Face select Mode on and off
HKEY: Hide Selected. All selected vertices and faces are temporarily hidden
KKEY: Show Keys. The Draw Key option is turned ON for all selected Objects
CTRL-O: Opens the last saved file
CTRL-Z: To undo the last operation
Department of AI&DS | 317522 | Human Computer Interface Page 39
CTRL-J: Join Objects. All selected Objects of same type are added to active Object
CTRL-M: Mirror Menu. It is possible to mirror an Object along the X, Y or Z axis
CTRL-F: Flip faces, selected triangular faces are paired and common edge of each pair swapped
CTRL-TAB: Switches between Vertex Select, Edge Select and Face Select modes.
Holding SHIFT while clicking on a mode will allow you to combine modes
Numpad 0: For camera view
Numpad 1: For front view
Numpad 3: For right view
Alt+A: To play or stop animations
SHIFT-O: Toggles between Smooth and Sharp Proportional Editing
Create Table Lamp(Steps given for Fire animation but you have to create for Table Lamp)

Steps to create table Lamp:

Eg. Fire Animation:

• Open Blender. Close the splash window
• Select the cube, Press X Delete Enter
• Press Shift + A Mesh uv sphere
• Press S and scale the sphere inwards by moving the mouse
• Press Space bar and write quick smoke press Enter
• From left bar Smoke Style Fire
• Play the animation

Conclusion:

1. In conclusion, the process of creating a table lamp in Blender, a 3D modeling software, involves
several steps that allow for the development of a detailed and visually appealing 3D model.
2. By utilizing Blender's tools and features, users can bring their creative lamp design to life,
paying attention to intricate details, materials, and lighting..

Department of AI&DS | 317522 | Human Computer Interface Page 40

3.Responsive web design (RWD) principles were applied to create a flexible and adaptable layout
across various devices, guaranteeing an optimal user experience.

Oral Questions:
1.What are the main steps involved in creating a table lamp in Blender?
2.How does the use of reference images or sketches contribute to the accuracy and realism of the
lamp design?
3.Could you explain how the process of hollowing out the lampshade is achieved in Blender?

Department of AI&DS | 317522 | Human Computer Interface Page 41