COLLEGE OF MARY IMMACULATE

JP Rizal St., Poblacion, Pandi, Bulacan

(044) 769.2021
https://www.collegeofmaryimmaculate.edu.ph

Detailed Lesson Plan in COMPUTER 3

I. Objectives
At the end of the 60-minute discussion, the students will be able to:
a.) name the different techniques used to design an interface;
b.) determine the advantages of a user-friendly interface;
c.) identify the techniques used in an interface.
II. Subject Matter
a. Topic: Interface Design Techniques
b. Materials: Laptop, Printed Pictures, Cartolina, Visual aids, Chalk
c. References: Bootcamp A Progressive Approach to ICT, Lesson 4, pages 28-
36

III. Procedure

Teacher’s Activity Pupil’s Activity

A. Preliminary Activities

Good morning, grade 3 Aguila/ Lawin/ Maya Good morning, Teachers!

Do we have any absences today? None

Very Good!

B. Review

Who can recall your topic last time with teacher

Nicole? It is all about what? GUI Control tools

It is a visual element that let us communicate

with an application and control or edit its
contents.

Very good! And GUI Control tools are divided Input Elements
into 4 groups and what are those? Can you give
me the first group?

How about the 2nd group? Output Elements

3rd group? Selection Elements

And lastly the action elements.

It’s good to know that you can still remember the

previous lesson.

C. Motivation

COLLEGE OF MARY IMMACULATE © 2021. All Rights Reserved.

For the exclusive use of Officially Enrolled CMIans only. Unauthorized use, reproduction, sharing
or distribution is strictly prohibited.
 COLLEGE OF MARY IMMACULATE
JP Rizal St., Poblacion, Pandi, Bulacan
(044) 769.2021
https://www.collegeofmaryimmaculate.edu.ph

I will be going to present a picture and you will

be going to tell the name of each element. Game?

Icons

Radio button

Checkbox

Text field

D. Lesson Proper

Now, we will be going to talk about the

techniques in designing an interface. Get your
book and open it on page 29

But before that, who among you wants to

become an interface designer. Can you still
remember what is an interface designer?

Very good! An interface designer is the one that

design the programs that we can see on our
computers or gadgets. They design the program on our
computer.
If you want to become an interface designer,
what are the things that you need to consider?

As an Interface designer, we need to consider

COLLEGE OF MARY IMMACULATE © 2021. All Rights Reserved.

For the exclusive use of Officially Enrolled CMIans only. Unauthorized use, reproduction, sharing
or distribution is strictly prohibited.
 COLLEGE OF MARY IMMACULATE
JP Rizal St., Poblacion, Pandi, Bulacan
(044) 769.2021
https://www.collegeofmaryimmaculate.edu.ph

the needs and preferences of the user. It should

be simple and easy to understand. That’s why
interface designers have techniques to create a
user-friendly interface. We have 4 techniques,
and what are those?

Ok very good! We have Form a design, use

familiar UI elements, personalize and Form a design
customization. Use familiar UI elements
Personalize
Let’s talk about first form a design or forming a Customization.
design. Forming a design is like creating an
artwork. We need to make a scratch or a sketch
of how you want your interface to appear. And in
creating your design, there are thing that you
need to consider.

First is to make it simple. How can we do that?

We can make our interface simple by deciding
which elements are most important and those
elements should be easily found in the interface.
The elements that are less important may be
grouped according to its functions. Look at the
pictures on the board.

Next is to make it clear. Can you please read

The elements in the interface

An interface should be clear and easy to
should be labeled properly using
understand that’s why we have to labeled all of
text. Icons are sometimes used
the elements. Again, what are the two things
instead of text so that younger
that we use to label the elements?
users can easily identify the
elements.
Very good! because of text and icons the user
can now easily identify the elements.
Text and Icons
Lastly, we have using of attractive layout. Please

COLLEGE OF MARY IMMACULATE © 2021. All Rights Reserved.

For the exclusive use of Officially Enrolled CMIans only. Unauthorized use, reproduction, sharing
or distribution is strictly prohibited.
 COLLEGE OF MARY IMMACULATE
JP Rizal St., Poblacion, Pandi, Bulacan
(044) 769.2021
https://www.collegeofmaryimmaculate.edu.ph

read

Thank you! It is very important that we used

readable fonts, enjoyable color themes to make it
more appealing and comfortable to use.
Read.
Do you have any questions about forming a
design?

If none, lets proceed to using familiar UI

elements. What is the meaning of that?

We need to used familiar elements in that way

the user can easily use and understand their None
computer.

Do you think you can use your computer it you

are not familiar with the elements?

No that’s right because you have no idea how to

use or control it.

I will going so show you some elements and tell No

me what kind or the name of each element.
(Insert pictures of elements)

Is that clear

Next, we have personalized. So, what is

personalization?

Personalization is when the

Here is the example of personalization. computer system adjusts the
Insert pictures interface according to each user.
(Show how to personalized)

Lastly, we have customized

On the other hand, customization, allows the
user to manipulate the information displayed,
and make changes in the layout and even in the
contents to match their needs and preferences

So, let’s try customize

(Show to students how to customize)

COLLEGE OF MARY IMMACULATE © 2021. All Rights Reserved.

For the exclusive use of Officially Enrolled CMIans only. Unauthorized use, reproduction, sharing
or distribution is strictly prohibited.
 COLLEGE OF MARY IMMACULATE
JP Rizal St., Poblacion, Pandi, Bulacan
(044) 769.2021
https://www.collegeofmaryimmaculate.edu.ph

E. Application
Get your white board and white board
marker. Write A if the statement is all
about forming a design, B if using familiar
UI elements, C Personalization and D if
customization.

F. Generalization
What are the four techniques in designing
an interface?

Form a design
Using familiar UI elements
Personalization
customization

IV. Evaluation
Write F if the statement is all about forming a design, U if using
familiar UI elements, P if Personalization and C for customization.

____1. Deciding which element are most important and these elements
should be easily found in an interface.

____2. It’s like creating an artwork

___3. When the system adjusts the interface according to its user
profile

___4. The techniques that improve the usability of the interface

because the user already knows how to use the controls.

___5. Allows the user to control how the information is displayed.

Answer key:
F
F
P
U
C

V. Assignment
Answer page 34

Prepared by:
Mrs. Charliz Cabuhat

COLLEGE OF MARY IMMACULATE © 2021. All Rights Reserved.

For the exclusive use of Officially Enrolled CMIans only. Unauthorized use, reproduction, sharing
or distribution is strictly prohibited.
 COLLEGE OF MARY IMMACULATE
JP Rizal St., Poblacion, Pandi, Bulacan
(044) 769.2021
https://www.collegeofmaryimmaculate.edu.ph

Approved by:
Ms. Nicole Bantog

COLLEGE OF MARY IMMACULATE © 2021. All Rights Reserved.

For the exclusive use of Officially Enrolled CMIans only. Unauthorized use, reproduction, sharing
or distribution is strictly prohibited.