"* ' \

UNIVERSITI TEKNOLOGI MARA

LEARNING TARANNUM AL-QURAN IN

MULTIMEDIA

SHAVIRA BIN ALIAS

Bachelor of Science (Hons) Information System Engineering

Faculty of Information Technology And
Quantitative Science

NOVEMBER 2005

S f; / l ' '

Checked and approved by:

PN ZAN AZMA BINTI NASRUDDIN

(Supervisor)

COPYRIGHT UiTM

DECLARATION
I certify that this thesis and the research to which it refers are the product of my own
work and that any ideas or quotation from the work of other people, published or
otherwise are fully acknowledged in accordance with the standard referring practices of
the discipline

November 21, 2004

SHAVIRA BIN ALIAS

2003285441

COPYRIGHT UiTM

ACKNOWLEDGEMENT

All praises to Allah s.w.t for all His bless that I had during the completion of this
research paper. Without His consent, I would not express my sincere to those who had
involve in contributing their ideas and support either directly or indirectly in making this
research completed and finished successfully.

First of all, I would like to thank my supervisor, PN ZAN AZMA BINTINASRUDDIN

for her ideas, patience, priceless advices and support in guiding the throughout the whole
process in completion of this research study.

Very special thanks goes to my family for their love, never ending support and
encouragements in making sure I do my best in completing this research study. To my
entire friend, thank you for their support in completing this research. To all respondents,
thank you for their co-operation for helping me gain the data and information by
answering the questionnaire that had been given.

Finally, to all mention here, wish you all the best and might Allah bless you all.
Thank you so much.

Ill

COPYRIGHT UiTM

TABLE OF CONTENTS

CONTENT

PAGE

APPROVAL

DECLARATION

ii

ACKNOWLEDGEMENT

iii

TABLE OF CONTENTS

vi

LIST OF TABLES

LIST OF FIGURES

xi

LIST OF ABBREVIATIONS

xii

ABSTRACT

xiii

CHAPTER ONE: INTRODUCTION

1.0

Background of the Project

1.1

Problem Statements

1.2

Project Scope

1.3

Project Objectives

1.4

Significance of Project

1.5

Summary

''

CHAPTER TWO: LITERATURE REVIEW

2.1

Introduction

2.2

Detailed Description about Implementation of Multimedia Elements

in Learning

2.3

Definition of Related Technical Terminology

2.3.1 Interface and Interaction

2.3.2 Human Computer Interaction

VI

COPYRIGHT UiTM

2.3.3

User-Centred Design

2.3.4

Learning Theory

2.3.5

Multimedia

2.3.6

Multimedia in Learning

10

2.3.7

Multimedia Elements in Design the Learning

Interface

13

2.3.8

What is Tarannum Al-Quran?

14

2.3.9

Evaluation Based On Usability and

Heuristic Principles.

2.4

2.5

14

Different Methodologies/ Approaches

To Solve the Same Problem

18

2.4.1

Learning Language via Audio Tapes

18

2.4.2

Language Activity Workbook

18

Brief Description of All Known Similar and

Relevant Project
2.5.1

19

Interactive Multimedia Self-learning Linguistic

Software (SLIM)

19

CHAPTER THREE: PROJECT STRUCTURE

3.1

Introduction

3.2

Research Approch
3.2.1

3.2.2

3.2.3

Research Overview
3.2.1.1 Problem Study

22

3.2.1.2 Research Definition

Knowledge Acquisition

22

3.2.2.1 Keyword Search

23

3.2.2.2 Data Collection

23

Knowledge Comprehension
3.2.3.1 Study Literature

3.2.4

20

23

Assessment
3.2.4.1 Analysis

vu
COPYRIGHT UiTM

24

3.3

3.2.4.2 Storyboard

24

3.2.4.3^FlowChart

25

3.2.4.4 Prototype

25

Method and data collection

26

3.3.1

26

Survey

3.3.2 Interview

27

3.3.3 Analysis of related studies

29

3.4

Analysis of Research Data

29

3.5

Hardware and.Software Required

30

3.5.1 Hardware

30

3.5.2 Software

30

Summary

31

3.6

CHAPTER FOUR: FINDING AND ANALYSIS

4.1

Introduction

32

4.2

Understanding User Requirements

32

4.2.1 User Requirements

32

4.2.2 Multimedia Elements in Learning

33

Design

35

4.3.1 Design Storyboard

37

4.3.2 Create Flowchart

38

4.4

Develop Prototype

38

4.5

Evaluation

46

4.5.1 Usability Testing

46

4.5.2 Heuristic Evaluation Checklist

47

4.4

Good Aspect and Design Problem

52

4.5

Summary

54

4.3

Vlll

COPYRIGHT UiTM

CHAPTER FIVE: CONCLUSION AND RECOMMENDATION

5.1

Conclusion

56

5.2

Recommendation

57

REFERENCES

58

APPENDICES
A: STORY BOARD
B: INTERVIEW QUESTIONS

IX

COPYRIGHT UiTM

LIST OF TABLES

TABLES

PAGE

3.1

Table 3.1: Data Analysis Method

30

4.1

User Testing Results

46

4.2

Heuristic Evaluation Checklist

47

4.3

Good Aspect and Design Problem

52

COPYRIGHT UiTM

LIST OF FIGURES

FIGURE

PAGE

2.1

Mayer's Multimedia Framework

12

3.1

The flow of Research Approach and Methodology

21

4.1

Flow Chart for Learning Tarannum Al-Quran

38

4.2

Introduction Page

39

4.3

Main Menu Page

40

4.4

'Pengenalan Tarannum' Page

41

4.5

' Jenis Lagu Tarannum' Page

42

4.6

Sub-menus page

42

4.7

Al-Quran Page

43

4.8

'Tentukan Lagu' Page

44

4.9

'Padankan Jawapan' Page

44

4.10

'Teka Silang Kata' Page

45

XI

COPYRIGHT UiTM

LIST OF ABBREVIATIONS

HCI

Human Computer Interaction

UiTM

University Technology MARA

Xll

COPYRIGHT UiTM

ABSTRACT
In this study, the application of muUimedia in learning Tarannum Al-Quran has been
investigated and the prototype of learning Tarannum Al-Quran is already built. The
methods that used to gather information for this study are literature questionnaires and
interview. The application of multimedia in learning is not familiar in this country
especially about Tarannum Al-Quran. This research is study on the implementation of
multimedia elements in learning the Tarannum Al-Quran. The prototype is designed
based on user requirements, usability and the elements of multimedia. The usability is
the effectiveness, efficiency and satisfaction where user can achieve a specified task in
particular environment. As a result, it will identify the multimedia element in designing
learning interface. The interviews are used to collect user requirements. In addition,
usability testing and heuristic evaluation is used for evaluation of the interface. The
interview and questionnaire is used in order to get the feedback from user and an expert.
From the analysis, information is gained on the usability of the interface. The
enhancement has done, based on the usability of the interface. Prototype is developed in
order to give a clear view of the improvement interface.

xiu
COPYRIGHT UiTM

CHAPTER 1
INTRODUCTION

This chapter provides the background and rationale for the project. It also gives details
of the significant information, the issues and problems that to this project.

1.0 Background of the Project

Tarannum AL-Quran is in Arabic language but the meaning is the song of Al-Quran
where the Tarannum Al-Quran has 6 type of song such as Bayyati, Hijaz, Soba, Sika,
Nahwan and Rast. Basically the purpose of Tarannum Al-Quran is when the Muslim
read the Al-Quran by use the Tarannum Al-Quran, it will be your reading is good to
hearing by any people because in Tarannum Al-Quran has a node, many type of song
and a good tone.

In Malaysia is very familiar of all this AL-Quran song where 'qari' and 'qariah'
in Malaysia always is the winner in any international competition of Tilawah Al-Quran.
No wonder in Malaysia all people already know about Tarannum Al-Quran.

The use of computer-based multimedia systems for education and training is

rapidly increasing. Multimed% systems allow information has presented as text, audio,
graphics, video, and animation. This variety of presentation media permits the
generation of impressive displays that are dazzling to eye and ear.

Making learning systems more user-centric in order to prevent annoyance of

students is significant. The mean to this end could be improving learning systems by
performing adaptation and integrate this feature into learning. All apply the general

COPYRIGHT UiTM

HCI concept in their own design. The application of HCI also increases the usability to
gain competitive advantage. When des-igning the learning application, the interface
must balance with the creative possibilities. It is possible to design an attractive,
informative, and useful learning application.

This project is an effort to introduce the Tarannum Al-Quran for the people
anyone who can understand the Tarannum Al-Quran with practically no background in
the Al-Quran's songs and able to improve those who have a basic background in the AlQuran's songs. It is design with a topic based approach starting from introduction and
history about Tarannum Al-Quran then continue to the techniques of read Al-Quran by
using Tarannum Al-Quran and learn more about type of Al-Quran's songs.

Many factors or requirements from user will identify on the designing interfaces
for learning. In addition, this project has using many aspects to design a prototype. There
are multimedia elements, learning theory, and Human Computer Interaction. The key
concepts that followed in these designs are heuristic principles. Heuristics principle
allow designer get the user requirements and evaluate these requirements for design the
interfaces.

1.1

Problem Statements

Nowadays, many people especially Islamic people did not know what Tarannum
Al-Quran is. Tarannum should be able to use when you want to read Al-Quran.
i.

Many people especially Islamic people did not know what Tarannum AlQuran is.

ii.

People also did not know how to using Tarannum Al-Quran in reading
Al-Quran and techniques of Tarannum Al-Quran.

iii.

Islamic people should read Al-Quran properly by using Tarannum AlQuran.

COPYRIGHT UiTM

iv.

Not much learning software especially in Malaysia about learning

Tarannum Al-Quran.

1.2 Project Scope

The scope of this project has focused on designing interfaces using multimedia
elements in learning the Tarannum Al-Quran. This project also focused on the
Tarannum Al-Quran in Malaysia. The purpose of this project is designing user
interfaces for learning the Tarannum Al-Quran. This project will use multimedia
elements such as audio, video, graphics, animation and text in learning the Tarannum
Al-Quran. This elements can give the interfaces will be more interactive. To evaluate
this prototype, user testing and heuristic evaluation has used.

Tarannum Al-Quran or Quran songs have a wide scope. It consists of many

different stages from basic to the advanced phases. This project will act as a
foundation. I hope that will gain their interest in learning the Quran songs. The project
covers the topics of the principles in teaching Tarannum Al-Quran. It will include:

i.

The introduction to Tarannum Al-Quran, type of Al-Quran song in

Tarannum Al-Quran and techniques in reading Al-Quran by using
Tarannum Al-Quran.

ii.

The lessons that consist of

three chapter that will include history of

Tarannum Al-Quran, techniques of Tarannum Al-Quran and Type of song

in Tarannum Al-Quran.
ii.

The exercise module, which allow user to test their understanding and
performances in learning Tarannum Al-Quran.

COPYRIGHT UiTM

1.3 Project Objective

i.

To identify user requirements and multimedia elements in order to design

user interfaces for learning Tarannum Al-Quran.

ii.

To create a prototype on learning Tarannum Al-Quran based on heuristic

principles.

iii.

To evaluate the effectiveness of the prototype on learning Tarannum AlQuran.

1.4 Significance Of Project

This project is required to the design an interfaces for learning the Tarannum Al-Quran
based in particular requirements. This project will enable users to know and learn more
about Tarannum Al-Quran it is because many people especially Islamic people did not
know what Tarannum Al-Quran is. With that, by this project or software people can
learn Tarannum Al-Quran at home by using this software without attend any class.

This project also would be the steps to give an attention to all people especially
to Islamic people on how important by using Tarannum Al-Quran when they read AlQuran. Others significance of this project is to promote learning software of Tarannum
Al-Quran to public. Actually, not much learning software especially in Malaysia about
learning Tarannum Al-Quran.

An analysis of the environmental factor, multimedia elements and aspects of

Human Computer Interaction will be able in order to design it. So that, people for will
use the proper design of interaction and interfaces learn the Tarnnum Al-Quran
effectively.

COPYRIGHT UiTM

1.5

Summary

This project involved designing the interfaces for learning the Tarannum Al-Quran. In
designing this project, many features are included in order to make it possible to reach
and gain the interest of the target user. The designing are used the multimedia elements,
which is sounds, graphic, audio, and animations. The Human Computer Interaction
principles were use in the designing interfaces of this system. The problems have
described in this chapter.

COPYRIGHT UiTM

CHAPTER 2

LITERATURE REVIEW

This chapter provides the critical reviews based on all aspects that use in this project.

2.1

Introduction

In this section, the researcher will discuss the learning of Tarannum Al-Quran. In order
to discuss this section, researcher has included some part of article taken that has been
published from book, internet and journal related with this project is chapter, researcher
will discuss about this project within the wider context and give some review about the
article researcher touch. Typically, this chapter will divide into four sub chapter that
comprise Introduction, Detailed Description about Implementation of Multimedia
Elements in Learning, Definiiion of Related Technical Terminology and Conclusion.

2.2 Detailed

Description

about

Implementation

of

Multimedia

Elements in Learning

This project is about the implementation of multimedia elements in learning Tarannum

Al-Quran. Nowadays, many technologies are using to enhance learning and educational
aspects. The development prototype in learning Tarannum Al-Quran has been used
multimedia elements like auoio, text, video, animation, and graphics. The suitable of
multimedia elements in learning also has defined.

This project is introduced new techniques of learning Tarannum Al-Quran using

multimedia. By using this technique, user can learn Tarannum Al-Quran with the help of
multimedia tools that consist of graphics, sound, text, and animations. The user in this

COPYRIGHT UiTM

project is the public. Most public in Malaysia did not know how to use and understand
Tarannum Al-Quran.

Based on this project, a prototype for learning Tarannum Al-Quran has

developed. Several aspects have used to design this prototype, there are:

2.3

User requirement to design the interface

Guideline to design user interface in learning

Multimedia elements in learning

Evaluation and user testing

Definition of Related Technical Terminology

2.3.1 Interface and Interaction design

Interface and interaction design are the types of design. Many peoples are
confused with the terms of interface and interaction. The two terms have
different meanings. According to (S. Smith, 2001), interface design developed by
taking the information usually comes from document called a requirements
specification. Interaction design refers how the software works. Interaction
design also is variously defined by (Preece et all, 2002) as a designing the
interactive products to support people in their everyday and working lives. For an
example, how does the user navigate between screens? and what actions are
possible on any given screens? However, the two types of design have a
connection between them. Interface design must develop some of the interaction
design. Based on the definitions of the projecters, the definitions of the
interaction are similar and the terms of interface and interaction defined as a
different meaning.

COPYRIGHT UiTM

2.3.2 Human Computer Interaction

Interface is very important to any system development. Frequently, developers

are very sensitive about the interface in the system. Therefore, Human Computer
Interaction is one of the lessons that teach or guide the designer to design the
good interface. A good interface can give the user easy to use the system. Based
on (Gustav, 2002), Human Computer Interaction is concerned the designing
computer systems that allow users carry out their activities efficiently and safely.
Besides, HCI also concerned with the design, evaluation, and implementation of
interactive computer systems for human use. It is a wide variety of different kind
of people and not just technical specialists as in the past, so it is important to
design HCI that supports the needs, knowledge, and skills of the anticipated
users.

(Sushma, 2002) also using Human Computer Interaction theories in his

project about internet portal. In his project, the tailor information on the portal
was using HCI theories. The design of Web portals was applying the actual
principles and theories of human-computer interaction to ensure better ease of
use.

HCI allow all the designers have to think beyond the technical
requirements of the system. The designers must think about the interaction that
goes between the user and the computer. When designing the system, the
designer must take many important factors such as training issues, working
practice, management and organization issues. The bad or poorly designed and
implemented computer systems can be very frustrating to the users (Gustav,
2002).

COPYRIGHT UiTM

2.3.3 User-Centred Design

One of the most exciting parts of the software development process is designing
the interface, or the part of the software that users see and interact with.
Furthermore, many guidelines are referred to design the interface. This project is
using User-Centred Design as a guideline to design the interface.

(Jess McMuUin, 2000) has defined the term of User-Centred Design as a

methodology and philosophy for creating products that make users and their
goals the primary driver in development. According to (Abras.C et all, 2004),
User-Centred Design is a broad term to describe design process in which endusers influence how a design take shape. It is broad philosophy and variety of
methods.
The term described above, provide an initial step to understanding the
guide in designing the interface for this project. Based on the term of UserCentred Design, the user is the important in designing the interface.

2.3.4 Learning Theory

(Gagne, 1985) has defined learning as a change in human disposition or

capability that persists over a period of time and is not simply ascribable to
processes of growth.

2.3.5 Multimedia
Multimedia is one of the technologies, which have the exciting innovation in the
age of information. The rapid growth of multimedia technology over the last
decade has brought about fundamental changes to computing, entertainment, and
education.

COPYRIGHT UiTM

(Brett, P.A. 1995) has defined multimedia as the computer based delivery
of video, audio, written text, graphics and the integration of these media may
prove a useful tool for second language learning. Multimedia is more than one
concurrent presentation medium (for example, on CD-ROM or a Web site), it has
typically meant one of the following: Text and sound , Text, sound, and still or
animated graphic images ,Text, sound, and video images ,Video and sound ,
Multiple display areas, images, or presentations presented concurrently or in live
situations. According to (Tay Vaughan, 1998) multimedia is as a woven
combination of text, graphic art, sound, animation, and video elements.
Multimedia, the computer based delivery of video, audio, written text, graphics
and the integration of these media may prove a useful tool for second language
learning.

2.3.6 Multimedia in Learning

(Peter, 2002) has showed the definition of multimedia in multiple ways. All the
definitions are depending upon one's perspectives. Multimedia is the use of
multiple forms of media in a presentation. In other perceptions, multimedia is
information in the form of graphics, audio, video, or movies. A multimedia
document contains a media elements other plain text.

Nowadays, an educational environment is using multimedia elements in

designing the learning applications. From (Mark, 2002) project, his using
multimedia collaborative in Science Computer classes, there are many benefits
are defined, such as to students which the significant role in the learning.
Students can learn through articulating their knowledge in the multimedia
documents, review their own works, and receiving comments and critique on
their works. Multimedia also provides new opportunities for new kinds of

10
COPYRIGHT UiTM

students' communication and reflection that may lead to significant new ways to
learn.

Good interface design can maximize the advantages of multimedia while

minimizing the disadvantages. Interface design issues applicable to this project
are including the integration of media, navigation, and use of metaphors,
standards, and guidelines, and the goals of the multimedia system. Good
multimedia programs integrate different media types seamlessly (Theresa, 1996).
Multimedia frequently uses the metaphor of human-to-human communication as
part of the interface design. One example of the use of guides for multimedia is
the "Americana Series: A CDROM Sampler of United States History" developed
by Apple in conjunction with Grolier, Inc. (Laurel et al., 1990).

The interface design is dependent on the purpose of the multimedia

system. The purpose of multimedia systems used is instruction. There is little
information on user interface design as it applies to the design and development
of educational software (Jones et al, 1995).

One of the examples of interactive multimedia system is Virtual

Interactive Teaching Environment. According to (F. Liarokapis et al) Virtual
Interactive Teaching Environment has designed to enable the educator to use
techniques that are more sophisticated and as a result to help the students to learn
more effectively using multimedia elements. The interactive system is taking into
consideration both the technological and educational issues. Consequently, a
multimedia increase reality interface is design and implement in an effective and
efficient manner for both the teacher and the students.

Potential advantages to multimedia are numerous. The poor design of

multimedia interfaces can be minimized the multimedia advantages. The
advantages of multimedia are so broad. One major advantage to interactive

11
COPYRIGHT UiTM

multimedia systems is the degree of learner control. Learner-controlled

instruction allows the student to study material at rapidity that suits his/her needs.
Students are under less pressure to perform within certain time limits.
Multimedia instructional systems allow learners the opportunity to explore
material of their choosing at a pace that is comfortable to them (Theresa, 1996).

Based from the good interface design in multimedia will give the impact
in learning and the student performance. The effects of multimedia on learning
and performance require a solid foundation in learning theory (Mark, 2002).
Mayer has developed the multimedia framework bases his cognitive theory of
muhimedia learning. The model showed above:

MULTIMEDIA

SENSORY

PRESENTATION

MEMOHY

LONGfTERM
MEMORY

WORKING MEMORY

sflectingi
words

Soimd;

orgamzmg
words

Verbal
Model

integratisgrj^
selectiui
mmges

Images

atss]iniTin^
images

Prior
Knowledge

Pictorial
Model

Figure 2,1: Mayer's Multimedia Framework

This model based on three primary assumptions. (Mayer, 2001).There is:

i. Visual and auditory experiences/information is processes through separate

and distinct information processing "channels."
ii. Each information-processing channel is limited in its ability to process
experience/information.

12
COPYRIGHT UiTM