1. ZOLKEFLI BAHADOR
/23
1

2. Instructional Design as a Process:
Instructional Design is the systematic development of
instructional specifications using learning and instructional
theory to ensure the quality of instruction. It is the entire
process of analysis of learning needs and goals and the
development of a delivery system to meet those needs. It
includes development of instructional materials and activities;
and tryout and evaluation of all instruction and learner
activities.
Instructional Design as a Discipline:
Instructional Design is that branch of knowledge concerned
with research and theory about instructional strategies and the
process for developing and implementing those strategies.

3. .
Instructional Design as a Science:
Instructional design is the science of creating detailed
specifications for the development, implementation, evaluation,
and maintenance of situations that facilitate the learning of
both large and small units of subject matter at all levels of
complexity.
Instructional Design as Reality:
Instructional design can start at any point in the design process.
Often a glimmer of an idea is developed to give the core of an
instruction situation. By the time the entire process is done the
designer looks back and she or he checks to see that all parts of
the "science" have been taken into account. Then the entire
process is written up as if it occurred in a systematic fashion.

4. Instructional System:
An instructional system is an arrangement of resources and
procedures to promote learning. Instructional design is the
systematic process of developing instructional systems and
instructional development is the process of implementing the
system or plan.
Instructional Technology:
Instructional technology is the systemic and systematic
application of strategies and techniques derived from
behavioral, cognitive, and constructivist theories to the
solution of instructional problems.
Instructional technology is the systematic application of theory
and other organized knowledge to the task of instructional
design and development.
Instructional Technology = Instructional Design +
Instructional Development
Instructional Development:
The process of implementing the design plans.

5.  The computer like any other technology is merely a tool,
albeit a powerful one. The software that is being developed
is crucial and must be suitable for use in education.
 To ensure that we have software that meet educators
requirement, we have to go through a systematic process
called instructional design.
5

6. Instructional Design
“A systematic process of translating general principles of
learning and instruction into plans for instructional materials
and learning.”
(Kemp et.al,1998)
“Instructional Design (also known as Instructional
Development) is a process which is followed throughout the
development of an online lesson, activity or course.”
(LTS, 1998)
“How to plan, construct, analyze, evaluate and manage the
instructional process effectively so that it will ensure
competent performance from students. This is based on
learning theories and styles and information technology use.”
6

7. Key Players In The Instructional Design
Instructor
Key Instructional
Evaluator-
Players designer-
Subject Matter
Expert
/23
7

8. Instructional Design Models
 Guidelines or sets of strategies of teaching approaches.
 Effective instructional models are based on learning
theories - people learn new ideas and concepts.
 Learning theories explain the relationship between
information we already know and the new information
we are trying to learn.
 Instructional models organize combinations of
instructional strategy components and integrate them to
produce a course of instruction.
/23
8

9. Instructional Design Models
Examples:
 Dick & Carey
 Model ADDIE
 Hanaffin & Peck
 Model Jerrold Kemp
 Rapid Prototyping
 Waterfall Model
9

10. Hanaffin & Peck (1998)
FASA 3
FASA 1 FASA 2
Pembangunan dan
Analisa Keperluan Reka bentuk
Perlaksanaan
Penilaian dan Penyemakan
Aliran kerja pembangunan WBI berdasarkan
model rekabentuk instruksi
Hanaffin dan Peck (1998)
10

11. 1. Analisa Keperluan
 Analisis keperluan – pembangunan lebih
terancang dan sistematik.
 Mengenalpasti masalah dan keperluan
 Memahami syarat-syarat dan ciri-ciri utama yang
akan dilaksanakan.
 Kefahaman tentang:
 Pengguna aplikasi
 Persekitaran di mana ia hendak digunakan
 Matlamat dan objektif
 Bahan atau alat pengukuran
 Kekuatan dan kekangan
11

12. 2. Perancangan / Rekabentuk
Informasi
Interaksi Antaramuka
12

13.  Informasi
 Maklumat atau bahan yang akan dibangunkan
 Strategi yang akan dilaksanakan
 Interaksi / Navigasi
 Fungsi dan operasi aplikasi
 Papan cerita / storyboard
 Antaramuka
 Stail paparan dan susunatur
 Pemilihan warna, media, bentuk, saiz dsbgnya.
13

14. 3. Pembangunan / Pelaksanaan
 Proses memindahkan segala maklumat yang telah
disediakan
 Diterjemahkan dalam bentuk aplikasi lengkap (cth:
laman web)
 Berdasarkan prosedur dan rekabentuk yang telah
disediakan dalam fasa rekabentuk.
14

15.  Proses-proses:
 Pengaturcaraan / Pengarangan
 Pemilihan dan penyediaan elemen-elemen multimedia
(grafik, animasi, audio, video)
 Memasukkan elemen-elemen multimedia ke dalam
aplikasi (import audio, video, fail animasi)
15

16. 4. Penilaian dan Penyemakan
 Proses pengujian, penyemakan dan penambahbaikan
secara berterusan.
 Proses kerja yang merentas semua fasa kerja yang lain.
 Dua jenis penilaian dan penyemakan
 Pengujian
 Penilaian
16

17.  Pengujian
 Memeriksa perjalanan aplikasi berdasarkan spesifikasi
 Dilakukan sebelum aplikasi disebarkan / dipasarkan
 Uji kod aturcara, struktur dan kandungan program,
antaramuka, interaktiviti, sistem navigasi dan fungsi-
fungsi lain.
17

18.  Bagaimana pengujian dilakukan?
 pengujian terhadap kumpulan sasaran,
 pengujian menerusi penggunaan prototaip,
 semakan semula oleh rakan,
 ujian kepenggunaan,
 kajian rekabentuk,
 percubaan lapangan dan
 ujian penerimaan.
18

19.  Penilaian
 Membentuk pengadilan mengenai kualiti sesuatu aspek
yg dinilai berdasarkan kriteria2 tertentu.
 Pelengkap kpd pendidikan dan syarat kepada
rekabentuk pembangunan dan pembinaan aplikasi yg
berkualiti.
 Penilaian formatif dan sumatif.
19

20.  Penilaian Formatif
 Proses penilaian sepanjang proses pembangunan
sesebuah aplikasi.
 Menilai halangan, perubahan dlm keperluan pengguna,
masalah2 dihadapi pengguna.
 Penilai – pakar mata pelajaran, pakar psikologi,
pengguna sebenar.
 Hasil penilaian membolehkan pembangun
mengenalpasti bhgn yg perlu dibaiki atau dikemaskini.
20

21.  Penilaian Sumatif
 Penilaian ke atas aplikasi yg telah siap sepenuhnya.
 Melihat dan menyemak sama ada sesuatu aplikasi yg
telah dibina menepati permintaan dan keperluan
pengguna.
 Mengesahkan kesesuaian aplikasi yg tlh dihasilkan.
 Memastikan matlamat pembangunan aplikasi tercapai.
 Titik rujukan menjamin kualiti dan standard.
21

22.  Teknik / pengumpulan maklumat dlm penilaian
formatif dan sumatif
 Pemerhatian ke atas pengguna
 Pengumpulan data dari markah latihan / ujian yg
disediakan dlm aplikasi
 Borang soal-selidik
 Temubual
 Ulasan pakar
22

23. Waterfall Model
23

24.  Feasibility
 Purpose
 Deciding whether a web site is needed, or whether an existing web as
interviewing the organization’s site needs modification. If “yes”
determining rough costs and benefits.
 Principal Tools
 Fact-gathering techniques such as interviewing the organization’s
management and proposed visitors.
 Cost-benefit analysis that ascertains whether the benefits are worth
the associated costs.
24

25.  Analysis
 Purpose
 Determining the purpose, target audience, and proposed content
and functionality for the entire site. In short, deciding what is
needed.
 Principal Tools
 Fact-gathering techniques.
 Cost-benefit analysis.
 Preliminary site architecture models.
25

26.  Design
 Purpose
 Designing a site (both organizationally and visually) that fulfills the
requirements determined in the analysis phase. In short, creating a
“how” that provides the “what” from the analysis phase.
 Principal Tools
 Site architecture models.
 HTML, CSS, JavaScript, and integrated web development
environments (such as Adobe Dreamweaver) for site prototyping.
 Image editors such as Adobe Photoshop or Fireworks for creating site
graphics.
26

27.  Construction and Testing
 Purpose
 Building and testing the web site. (Note that construction and
testing can’t be separated into independent phases, since testing
should begin as soon as the first few lines of code are written. That
way, problems are identified early in the process, rather than at the
end when the entire site might end up needing major modifications
to correct those problems.)
 Principal Tools
 HTML, CSS, JavaScript, and integrated web development
environments (such as Adobe Dreamweaver) for site prototyping.
 Image editors such as Adobe Photoshop or Fireworks for creating site
graphics.
 Accessibility validators.
 Live testing with prospective visitors.
27

28.  Launch
 Purpose
 Uploading the site to the server, performing final site-wide tests, and
bringing the site live.
 Principal Tools
 FTP or its equivalent.
 Maintenance
 Purpose
 Repairing, upgrading, and overhauling the system as necessary.
 Principal Tools
 All of the tools mentioned in the prior phases.
28