DETAILED LESSON PLAN

GRADE 3
Components of Graphical User Interface
I. Objectives
at the end of this lesson, the pupils will be able to;
a. describe the importance of graphical user interface,
b. use their own computer with knowledge behind its different usage;
c. appreciate people behind the design of the computer.
II. Subject Matter
a. Topic: Components of Graphical User Interface
b. Value Focus: Understanding, Appreciation.
c. References: Bootcamp a progressive approach to ICT by Maria Cecilia C. Santos pages 12-16
d. Materials: Printed Pictures, Chalk, Book, Paper and Pen.
III. Procedure
Teacher’s Activity Student’s Activity
1. Lesson Proper
Good morning grade 3 Aguila! Good morning, Teacher!
Who’s our prayer leader

For today’s lesson we will be going to Laptop

use our imagination. But before that may Computer
I know who among you have their own Cellphone
gadget? What kind of gadget do you Tablet
have?

Imagine you are the interface designer. None

Do you have any Idea what is Interface
Designer?

If none, an interface designer is a person yes

who makes our computer user friendly.
Easy to use and understand. They are the
one who think of ways so we can easily
use our computer. Do you understand?

Now Imagine you are in front of your

computer. And you are seeing this. This
is the Graphic User Interface. This is
what you see on your computer or the
design made by the Interface Designer
is called Graphical user Interface.

So, what if the Graphical User Interface

is looked like this. Do you think it will
be easy you as a user to use your
computer?

Can you tell me where is the camera No

here in the picture? How about gallery or
Facebook?

No. that is why we have components of

Graphic User Interface. It will help the
computer user, easy to use and
understand their computer.

First, we have Icons. Can you tell me

what is Icon?
 Very good! Ok I have here different Icon
and I want you to Identify the name of
each Icon.

Are you ready grade 3?

Ok, let’s start.

1. Roblox Yes, Teacher!

Roblox

2. Settings

Settings

3. Facebook

Facebook

4. Instagram

Instagram

5. Twitter

Twitter

I am glad that almost/all of you are familiar

with some of the Icons on our computer. As
you can see our activity is connected with our
lesson for today. Can you please open your
book on page 12?

What is our lesson for today? Can you please

read (name of a student)
Our lesson for today is all about the
Ok very good. But before that, let us know
components of graphical user interface.
first who are the person who makes your
computer user friendly.

Can you please read the meaning of interface

designer?
Interface designer is a person who makes our
Very good, meaning they are the one who
computer user friendly.
chooses the colors, positions and pictures that
you see on the screen of your computer. And
those are the things that we see on our
computer is the what we called graphical user
interface.

Again, can you tell me the difference between

the interface designer and the graphical user
interface?
The interface designer is the one who are
Very good! Now let’s talk about the doing the graphical user interface.
components of graphical user interface.
Remember that their goal is to make a user-
friendly that’s why command should be clear
and easy to understand. Pictures or icons are
commonly used to represent a command since
it is easy to understand and recognize. We
have here some icons and can you tell what is
each icon used for?

First Icon?
We used it to call someone. We can also see
here those who called us or those who are we
calling. Call log

Next icon?
We used it to turn on or off our computer,
cellphone or tablet.
Power button
Third icon?
We used it to message someone.

Forth Icon? Message

We used search icon or button to find or to
search anything we need.
Search Icon
Fifth Icon?
We used it to take a picture or video

Sixth Icon? Camera

We used it to play a game

Seventh Icon? Games

We used it to record what we say or someone
saying.
Record
Eighth Icon?
We used it to set an alarm.

Other that Icon, there are more other Alarm

components that designer use to help us use
your computer. Can you give me one?
Tooltip
What is tooltip? Can you please read

This is displayed, even without clicking the

Very good! It will become easy for us to find mouse, when a mouse pointer points to a
the button that we need. button. It gives you a hint of what will happen
if you click the button.
Next components?

This is where you can type text or numbers in

a single line. We commonly see it when Text field
logging in our account example on Facebook,
twitter or Instagram

Next components?
These are blocks that perform certain
functions. Icons are commonly used to label a Buttons
button. Sometimes, text is used instead of
icons

Next components?

This is where you can turn on or off a settings

Another usage of checkbox is when you need Checkbox
to choose more than one option at a time. We
commonly see it in when answering a poll or
a google form.

Next is a radio button.

Compared to checkbox, radio button is used
when you need to choose only one option
from a set of choices.

And lastly, the drop-down list. This is a list of

all the commands for a specific button. You
can easily pick a command from the list using
the mouse pointer. We can also see it when
we right click our mouse button.
Is everything clear? Do you have more
questions or clarifications?

If none, can you give me the 7 components of

graphical user interface?

Icon
Tooltip
Text field
Buttons
Checkboxes
2. Activity Radio buttons
I will group you into two groups. Girls vs. Drop-down list
boys. I will paste a picture and you have to
identify each picture. Choose 1 representative
per group. Choose different representative per
picture. Representatives will write their
answer on the board.

3. Assignment
Answer page 18.