SOALAN PSK

a. Huraikan lima fasa utama dalam

pembangunan perisian multimedia
untuk digunakan dalam pengajaran
dan pembelajaran.

b. Terangkan kemudahan-
kemudahan yang disediakan oleh
perisian Ms Words dalam pengajaran
dan pembelajaran
Pembangunan
Perisian Multimedia
Baiyed bin Hj Rifaie
Gan Su Main
Roshaniza bt Khairuddin
UNIT 1
PEMBANGUNAN
APLIKASI
MULTIMEDIA
4
Komponen UNIT 1
Proses Pembangunan Multimedia
Fasa pembangunan Multimedia
Proses Pembangunan
Multimedia
Perisian Pengarangan
Multimedia
Interaktif & Navigasi
Perisian Pengarangan
Kepentingan Perisian pengarangan
Kriteria Pemilihan Perisian Pengarangan
Metafora Perisian pengarangan
Konsep/tahap/ciri/jenis/Interaktiviti
Kelebihan Multimedia Interaktiviti
Interaktiviti & Navigasi
Kawalan & jenis kawalan Navigasi
Rekabentuk
Antaramuka
Definisi Antaramuka Pengguna
Kepentingan Antaramuka Pengguna
Kriteria Rekabentuk Antaramuka
Jenis-jenis Antaramuka
Komponen Antaramuka
Prinsip Rekabentuk Antaramuka
5
UNIT 1
PEMBANGUNAN
APLIKASI MULTIMEDIA

Proses Pembangunan Multimedia
6
Copyright ODL Jan 2005 Open University Malaysia
1.1 Proses Pembangunan Multimedia
Melibatkan fasa-fasa pembangunan dan langkah yang terlibat dalam
setiap fasa.
Bermula dari perancangan sehingga pemasangan aplikasi.
Proses pembangunan mempunyai kitaran hayat tertentu memastikan
aplikasi sentiasa tersedia dan memenuhi keperluan semasa.
Langkah-langkah lazim:
Pra-Produksi Produksi Pos Produksi
7
1.1 Proses Pembangunan Multimedia
Model Rekabentuk:
Rajah 1.1: Model Rekabentuk
Instruksi Hannafin & Peck

Rajah 1.2:
Model ADDIE

1.2 Fasa Pembangunan Multimedia
Fasa 1
Perancangan
Fasa 2
Penghasilan
Fasa 3
Pengujian
Pernyataan Tujuan
Kenalpasti Pengguna
Cara Perlaksanaan
Papan
Cerita
Spesifikasi
Pembangunan Konsep
Rajah 1.3: Fasa Pembangunan
Multimedia
Pengujian
Isi
kandungan
Pengarangan
1.3 Fasa 1: Perancangan
Fasa 1
Perancangan
Pernyataan Tujuan
Kenalpasti Pengguna
Cara Perlaksanaan
Papan Cerita
Spesifikasi
Pembangunan Konsep
Rajah 1.3: Fasa Pembangunan
Multimedia
1.3 Fasa 1: Perancangan
1.3.1 Pembangunan Konsep
Konsep berasaskan idea
Mesti selari dengan tujuan, kesauran, kos produksi dan
penyebaran projek multimedia
Proses menjana sebuah idea adalah:
sesi brainstorming;
melukis / melakar pada kertas
cara formal seperti: senarai semak berserta kriteria
penilaian.
1.3 Fasa 1: Perancangan
1.3.1 Pembangunan Konsep (smb)
Idea digunakan untuk menetapkan visi
Perlu dinyatakan dengan jelas, boleh diukur dan mempunyai objektif-
objektif yang dicapai.
Perlu ada garis panduan yang tersusun dan merancang dengan rasional
meliputi:
kepakaran, masa, belanja, peralatan dan sumber yang ada pada
ketika itu.
Rancang keseluruhan proses bermula dengan idea pertama anda dan
berakhir dengan projek yang telah siap untuk penyebaran.
1.3 Fasa 1: Perancangan
1.3.2 Pernyataan Tujuan
Menentukan matlamat & objektif dengan terperinci




Matlamat dan objektif membantu menentukan hala tuju proses
pembangunan aplikasi multimedia
Boleh digunakan untuk menilai kesesuaian sesebuah aplikasi multimedia
sewaktu dan selepas ianya dibangunkan.
Matlamat adalah suatu pernyataan yang luas
mengenai apa yang akan dicapai
Objektif suatu pernyataan yang lebih tepat & spesifik
1.3 Fasa 1: Perancangan
1.3.3 Kenalpasti Pengguna Sasaran
Profail pengguna perlu difahami bagi memastikan aplikasi yang dihasilkan
memenuhi keperluan dan kehendak pengguna
Pengguna atau audien boleh diterangkan dengan banyak cara seperti
menurut faktor demografik, juga gaya hidup dan tingkah laku seseorang.
Pembangun perlu analisa profail pengguna dan menggunakan maklumat
tersebut untuk membangunkan aplikasi yang berjaya memenuhi
kehendak pengguna.
1.3 Fasa 1: Perancangan
1.3.4 Penentuan Cara Perlaksanaan
Konsep; objektif; sasaran pengguna; menentukan gaya persembahan
aplikasi.
Komponen yang perlu ditentukan:
Ton
Pendekatan
Metafora
Penekanan
1.3 Fasa 1: Perancangan
1.3.4 Penentuan Cara Perlaksanaan (smb)
Ton
Memilih ton yang sesuai dengan objektif dan konsep aplikasi
Dipengaruhi oleh elemen-elemen media yang digunakan
Pendekatan
Langkah atau arahan yang disediakan kepada pengguna
Perlulah sesuai dengan konper dan sasaran pengguna
1.3 Fasa 1: Perancangan
1.3.4 Penentuan Cara Perlaksanaan (smb)
Metafora
Merujuk kepada peta imej istimewa menggunakan imej dalam
konteks yang lebih bermakna.
Informasi disembahkan dalam bentuk objek.
Sering digunakan pada antaramuka utama
Penekanan
Penekanan dipertimbangkan apabila berlaku kengkangan masa,
kewangan, sumber dll.
1.3 Fasa 1: Perancangan
1.3.5 Pembangunan Spesifikasi
Spesifikasi merujuk kepada kepada:
spefikasi perkakasan dan spefikasi perisian.
Tujuan:- memastikan aplikasi yang dibangunkan memenuhi objektif dan
menepati kehendak pengguna sasaran.
Elemen dalam spesisfikasi ialah perkakasan untuk sistem pembangunan
dan sistem penyebaran (sistem main semula), perisian, elemen yang
akan dimasukkan, kebolehfungsian dan antaramuka pengguna.
1.3 Fasa 1: Perancangan
1.3.5 Pembangunan Spesifikasi (smb)
Elemen Spesifikasi:
Perkakasan
Perkakasan berkeupayaan
tinggi yang mampu menyokong
elemen multimedia
Sistem Pembangunan
Perkakasan pembangunan yang
digunankan:
Sistem Penyebaran & Sistem
Pengarangan
Sistem Penyebaran
Digunakan oleh pengguna akhir
utk memainkan aplikasi
Elemen yang dimasukkan
Spesifikasi lengkap bagi
setiap elemen yang kita
masukkan
Kebolehanfungsian
Bagaimana aplikasi
bertindak balas dengan
pengguna
Antaramuka pengguna
Rekabentuk objek pasa
skrin dan berinteraksi
dengan pengguna
1.3 Fasa 1: Perancangan
1.3.6 Papan Cerita
Papan cerita mewakili:
apa yang kita lihat pada setiap skrin dan
perhubungan antara skrin-skrin
Tujuan
Membantu Pembangun merancang dan mengendalikan proses
pembangunan.
Membolehkan Pembangun menguji keseluruhan konsep secara
gambaran visual.
Memudahkan komunikasi secara visual antara pembangun-
pengguna
Isi
kansungan
Pengarangan
1.4 Fasa 2: Penghasilan
Rajah 1.3:
Fasa Pembangunan
Multimedia
Fasa 2
Penghasilan
1.4 Fasa 2: Penghasilan
1.4.1 Pembangunan Isi Kandungan
Isi kandungan merupakan maklumat atau bahan-bahan yang membentuk
jantung sesebuah projek yang dibangunkan.
Pembangunan isi kandungan melibatkan:
Proses pengumpulan,
Proses penterjemahan, dan
Proses Pengubahsuaian elemen-elemen yang digunakan di
dalam aplikasi yang dibangunkan.
22
1.4 Fasa 2: Penghasilan

Pemilihan media atau bahan yang akan digunakan- grafik, audio, video.
Cara: Mendapatkan bahan luar; menggunakan koleksi sendiri; hasilkan
yang baru atau upah pakar grafik
Pengumpulan elemen-elemen multimedia bukan satu kerja yang mudah,
malah ia memerlukan perancangan yang rapi dan sistematik.
Pengumpulan Elemen

Mengubah format elemen kepada format yang interaktif
Cth: Format analog kepada Digital
Tujuan Terjemahan: memastikan elemen boleh diterima oleh perisian
Pengarangan
Proses Pengubahsuaian: Proses manipulasi untuk memberi kesan
menarik kepada elemen multimedia. (cth: penggunaan Adobe Photoshop)
Penterjemahan & Pengubahsuaian Elemen
1.4.1 Pembangunan Isi Kandungan
A
K
T
I
V
I
T
I
1.4 Fasa 2: Penghasilan
1.4.2 Pengarangan
Dilakukan selepas pembangunan spesifikasi dan papan cerita telah
disempurnakan.
Proses pengarangan melibatkan pengintegrasian semua bahan-bahan
media.
Elemen interaktiviti dimasukkan pada peringkat ini. Elemen ini akan
mengeratkan lagi perhubungan antara aplikasi pengguna
1.5 Fasa 3: Pengujian
Menguji aplikasi yang telah siap dibina bagi memastikan
ia telah memenuhi matlamat pembangunan.
Pengujian merupakan proses yang berterusan dan boleh
bermula di peringkat pembangunan konsep lagi.
Memastikan aplikasi yg dibangunkan bebas daripada
pepijat, tepat, beroperasi, mengikut peruntukan masa
dan kehendak pelanggan
Fasa 3
Pengujian
Pengujian
1.5 Fasa 3: Pengujian
Proses Pengujian
Pengujian Alfa
Ujian secara dalaman tanpa melibatkan orang luar.
Ia cuma untuk edaran dalaman sahaja.
Versi produk untuk pengujian alfa biasanya merupakan
draf kerja pertama projek anda.
Pengujian Beta
Pengujian dengan pengguna sebenar
Tujuan: untuk mendapat maklum balas yang sebanyak
mungkin daripada pengguna berpotensi terhadap prestasi
sebenar aplikasi
1.6 Penyebaran
Penyebaran merupakan proses penyerahan aplikasi kepada pengguna.
Aplikasi yang dibangunkan sedia disebarkan dalam pelbagai cara: Online,
CD-ROM, DVD
Format penyebaran berbeza mengikut jenis penyebaran aplikasi yang
dipilih.
Format penyebaran yang berbeza mempunyai teknik, kepakaran, dan
kandungan yang berbeza.
Cth: Utk aplikasi elemen video sesuai menggunakan format penyebaran
CD / DVD berbanding format online.
1.6 Penyebaran
Aktiviti Penyebaran

Sistem penyebaran adalah medium atau peranti storan
data yang digunakan untuk penyebaran aplikasi multimedia.
Ia mungkin CD-ROM, cakera liut, DVD-ROM,
Internet atau Intranet.
Sistem Penyebaran Multimedia

Melibatkan penyediaan fail, storan, perkakasan utk membolehkan
aplikasi dipasang pada persekitaran pengguna.
Terdapat program yang berfungsi sebagai rutin pemasangan yang
membolehkan aplikasi dilarikan secara automatik pada komputer
pengguna. Cth: Installer Vise; InstallerMaker
Penyediaan dokumentasi dan manual pengguna juga diperlukan.
Penyediaan khidmat layanan pelanggan dan sokongan teknikal
Penyediaan untuk Penyebaran
Rumusan
Proses pembangunan aplikasi multimedia adalah rumit, mahal dan
memakan masa yang lama.
Oleh itu, pastikan proses perancangan amat penting dan dirujuk di
sepanjang proses pembangunan.
Peruntukkan Proses Pembangunan Multimedia: 80% perancangan
dan 20% penghasilan.
2 langkah utama yang memberi fokus terhadap penghasilan /
pembangunan: Pembangunan Isi Kandungan & Pengarangan.
Proses pembangunan yang rapi merupakan faktor kejayaan sesuatu
projek.
U
N
I
T

1

UNIT 1
PEMBANGUNAN
APLIKASI MULTIMEDIA
Perisian Pengarangan Multimedia
2.0 Pengenalan
Objektif
Memahami KEPENTINGAN Perisian pengarangan
dalam Multimedia.
Memahami 6 KRITERIA PEMILIHAN Perisian
Pengarangan
Memahami 4 METAFORA Perisian Pengarangan
2.1 Definasi Pengarangan
Dari Konteks Multimedia
Pengarangan membawa pengertian satu ciptaan
atau hasil kreativiti minda seseorang dalam
proses yang mengabungkan teks, grafik,
animasi, audio dan video untuk mencipta suatu
aplikasi Multimedia dalam format CD-ROM,
laman web, kiosks dan sebagainya.
2.2 Definasi Perisian Pengarangan
Larry dan Nancy (1995)
Perisian yang membolehkan aplikasi-aplikasi multimedia dicipta
dengan mgabungkan bunyi, pergerakan, grafik, audio, video dan
teks ke dalam sesuatu perisian.

McGloughin (2001)
Aplikasi komputer yang membenarkan pengguna membangunkan
satu perisian dengan mengheret dan meletakkan pelbagai
komponen media tanpa kemahiran bahasa pengaturcaraan.

Vaughan (2001)
Suatu integrasi yang mengumpulkan kandungan dan fungsi sesebuah
projek yang dibangunkan.

2.2 Definasi Perisian Pengarangan
Pakej perisian yang membenarkan anda
mengumpul dan mengintegrasi elemen-
elemen
media ke dalam suatu aplikasi multimedia.

Istilah pengarangan atau penggubah
digunakan kerana anda dianggap sebagai
pengarang untuk aplikasi berkenaan.
2.3 Kepentingan Perisian Pengarangan
Menjimatkan masa dalam menghasilkan suatu aplikasi yang
sofistikated.
Membolehkan integrasi atau kesepaduan teks, audio, video dan
animasi ke dalam persembahan interaktif.
Membolehkan aplikasi multimedia dibangunkan tanpa kemahiran &
pengalaman pengaturcaraan yang kompleks.
Menyediakan persekitaran bersepadu bagi menghubungkan semua isi
kandungan dan fungsi sebuah aplikasi yang ingin dibangunkan.
35
2.4 Kriteria Pemilihan Perisian
Pengarangan
Menyokong Fitur Mengedit: peralatan mengedit elemen-
elemen multimedia: grafik, animasi, teks, audio digital,
video.
Cth: Adobe Photoshop
Membantu anda menyusun atau mengorganisasi projek
multimedia.
Rajah atau diagram papan cerita dan navigasi digunakan
utk mewakili aplikasi
Cth: Macromedia Athorware
Interaktiviti membenarkan pengguna mempunyai kawalan
sepenuhnya ke atas kandungan dan aliran maklumat di
dalam aplikasi tersebut.
2.4 Kriteria Pemilihan Perisian
Pengarangan
Boleh dimainkan pada kedua-dua persekitaran Macintosh
dan Windows.
Macintosh: sesuai sebagai platform pembangun
Windows: sesuai sebagai platform pengguna

Memandangkan Web telah menjadi medium penyebaran
multimedia yang penting, pastikan aplikasi yang
dibangunkan boleh disebarkan pada Internet.
Menyokong fitur penyebaran dengan menyediakan
kemudahan penyediaakn versi run-time.
Versi run-time membolehkan pengguna mencapai aplikasi
tanpa dapat mengubah kandungan.
Lebih mudah fitur penyebaran; lebih meluas pasaran
2.5 Pengarangan VS Peraturcaraan
Perisian Pengarangan
Boleh digunakan untuk aplikasi
multimedia.
Punyai peralatan tahap tinggi.
Pembangun membangunkan
aplikasi tanpa pengetahuan
pengaturcaraan
Capaian fungsi yang terhad
Pembangun hanya memilih
arahan untuk diberikan kepada
sistem komputer daripada set
yang terhad.
Masa pembangunan cepat
Saiz aplikasi agak besar
Perisian Pengaturcaraan
Boleh digunakan untuk aplikasi
multimedia.
Punyai peralatan tahap rendah.
Pembangun mesti mempunyai
pengetahuan pengaturcaraan.

Capaian fungsi yang banyak
Pembangun boleh mengarah
komputer untuk laksanakan
apa-apa tugas yang diingini.

Masa pembangunan lama
Saiz aplikasi lebih kecil
38
2.6 Metafora Perisian Pengarangan
METAFORA digunakan untuk mengurus dan menyusun jujukan
elemen-elemen Multimedia.
Perisian Pengarangan Multimedia dibahagikan kepada 4
kategori utama berdasarkan METAFORA.
Metafora Berasaskan
Ikon Persembahan Slaid
Metafora Berasaskan
Ikon
Metafora Berasaskan
tatasusunan Kad / Lembaran Buku
Metafora Berasaskan
Masa
2.6 Metafora Perisian Pengarangan
2.6.1 Metafora Berasaskan Tatasusunan
Beroperasi berdasarkan tatasusunan kad /
lembaran buku.
Imej-imej grafik disusun dalam bentuk jujukan
logikal atau mengumpulnya mengikut bab dan
lembaran buku atau kad di dalam kad katalog
Cth: HyperCard, HyperStudio dan Asymetrix
ToolBook
2.6 Metafora Perisian Pengarangan
2.6.1 Metafora Berasaskan Ikon
Menggunakan konsep carta alir untuk menghasilkan
peta hubungkait antara elemen multimedia.
Menggunakan pendekatan pengaturcaraan visual
untuk menyusun dan mempersembahkan
multimedia.
Cth: Macromedia Authorware, Icon Author, Visual
Basic, C++ dll.
2.6 Metafora Perisian Pengarangan
2.6.1 Metafora Berasaskan Masa
Berasaskan frame atau movie
Objek-objek disusun di sepanjang garis masa.
Sesuai digunakan untuk pembinaan animasi.
Mengandungi set fitur-fitur yang luas untuk
menghasilkan persembahan multimedia, animasi
dan aplikasi interaktif multimedia.
Cth: Macromedia Director / Flash
2.6 Metafora Perisian Pengarangan
2.6.1 Metafora Berasaskan Slaid
Berasaskan persembahan slaid atau slide show
Kelebihan: boleh digunakan pada kedua-dua
persekitaran Windows dan juga persekitaran
Macintosh.
Cth: PowerPoint
Kesimpulan
Terdapat pelbagai jenis perisian pengarangan yang boleh digunakan untuk
membangun pelbagai jenis aplikasi multimedia yang canggih dalam
pelbagai bidang.
Pemilihan perisian pengarangan yang sesuai dalam pembangunan aplikasi
multimedia adalah penting.
Pembangun aplikasi multimedia tidak semestinya memilih perisian
pengarangan yang mahal lagi kompleks.
Pelbagai jenis pengarangan yang mudah diperolehi dengan percuma atau
dengan harga yang murah boleh digunakan dalam pembangunan aplikasi
multimedia.
U
N
I
T

1

UNIT 1
PEMBANGUNAN
APLIKASI MULTIMEDIA
Interaktiviti dan Navigasi
3.0 Pengenalan
Objektif
Memahami KONSEP DAN KEPENTINGAN Interaktiviti dan Navigasi
dalam Multimedia.
Memahami 3 TAHAP dan 7 CIRI Interaktiviti yang terdapat dalam
Multimedia
Mengetahui FUNGSI dan JENIS KAWALAN Navigasi yang digunakan
dalam Multimedia
3.1 Definasi Interaktiviti
Menurut Kamus Dewan (1997)
Tindakan atau perhubungan aktif antara satu sama lain,
tindak balas antara dua atau beberapa pihak.

Lipmann (1987)
Aktiviti yang dijalankan serentak oleh kedua-dua belah pihak
yang terlibat untuk mencapai satu tujuan tertentu.

Manakala Phillips (1997)
Suatu proses yang memberikan kuasa kepada pengguna untuk
mengawal persekitarannya dengan menggunakan komputer.
3.1 Definasi Interaktiviti
National Consortium For Environmental
Education And Training
Suatu alat yang menawarkan kepada pengguna pelbagai
pilihan atau senario yang berbeza.
Pengguna boleh membuat pilihan untuk mengikut jujukan yang
telah ditetapkan atau mengikut subjek atau perkara yang ingin
dijelajahi.
Perisian akan berinteraksi dengan pengguna dengan cara
bertindakbalas terhadap pilihan atau input dari pengguna
3.2 Konsep Interaktiviti
Interaktiviti: elemen Multimedia yang
dianggap sebagai jantung kepada
aplikasi multimedia.
Interaktiviti ini dikenali sebagai
multimedia tidak linear.
Ciri interaktiviti ini telah menjadikan
multimedia lebih popular berbanding
komponen media yang lain.
3.3 Tahap Interaktiviti
(i) Interaktiviti Tahap Rendah (Navigasi)
Tahap interaktiviti yang paling asas.
Interaksi difokuskan kepada tugas menavigasi
perisian menerusi klik butang, arahan menu atau
pautan.
Pengguna hanya mengawal sebahagian kecil
perisian.
3.3 Tahap Interaktiviti
(ii) Interaktiviti Tahap Pertengahan
(Fungsian)
Pada tahap ini, pengguna berinteraksi dengan
sistem / perisian untuk mencapai suatu matlamat.
Interaktiviti dibentuk berdasarkan fungsian iaitu
apakah fungsi perisian itu dibangunkan.
Sepanjang interaksi, pengguna akan diberikan
maklumbalas di atas capaian mereka
3.3 Tahap Interaktiviti
(iii) Interaktiviti Tahap Tinggi (Adaptif)
Tahap interaktiviti yang paling tinggi.
Interaktiviti dibentuk berdasarkan fungsi adaptif
iaitu kebolehan perisian untuk menyesuaikan
pengguna dengan kemampuan mereka.
Pengguna diberikan kuasa yang lebih untuk
mengawal perisian dan boleh berinteraksi dengan
perisian secara langsung.
3.4 Ciri Interaktiviti
(i) Tindak balas yang Segera
(ii) Capaian Maklumat yang
Tidak Berjujukan
(iii) Maklum balas Pantas
(iv) Kesesuaian
(V) Pilihan
(VI) Kawalan Pengguna
(VII) Grain-Size



CIRI-CIRI
INTERAKTIF



3.4 Ciri Interaktiviti
(i) Tindak balas yang Segera
Pengguna boleh mencapai maklumat seperti grafik, video
atau teks dengan hanya mengklik pada tetikus.
Masa tindak balas pantas.
(ii) Capaian Maklumat yang Tidak Berjujukan
Maklumat boleh dicapai oleh pengguna mengikut kehendak
mereka dan tidak perlu berjujukan.
(iii) Maklum balas yang Pantas
Interaktiviti tidak akan wujud tanpa maklum balas
Maklum balas seperti Betul! dan Salah! tidak mencukupi
- pengguna perlu tahu bagaimana untuk memperbaiki
kesilapan dan meneruskan program
3.4 Ciri Interaktiviti
(iv) Kesesuaian
Perisian mempunyai kebolehan untuk mengubahsuai tindakannya
mengikut tahap pengetahuan pengguna.
(v) Pilihan
Perisian akan menyediakan banyak pilihan: Pengguna bebas
membuat pilihan mereka
(vi) Kawalan Pengguna
Pengguna berkuasa mengawal sebahagian dari program
Boleh meningkatkan motivasi pengguna.
(vii) Grain-Size
Masa yang diperlukan oleh perisian bagi setiap interaksi
pengguna.
Jika masa menunggu terlalu lama pengguna akan merasa bosan
dan interaktiviti menjadi kurang.
3.5 Jenis Interaktiviti
Interaktiviti Objek
Objek - butang, manusia dan benda dalam perisian
diaktifkan apabila input diterima untuk tindakbalas.
Interaktiviti Linear
Fungsi yang membenarkan pengguna bergerak ke depan /
ke belakang dalam suatu jujukan linear.
Interaktiviti Hierarki
Perisian memberikan pengguna set-set pilihan yang telah
ditetapkan - pengguna boleh memilih laluan yang spesifik
untuk mengakses kandungan
3.5 Jenis Interaktiviti
Interaktiviti Sokongan
Pengguna dibekalkan dengan pelbagai jenis bantuan help
sokongan dan mesej, dari yang ringkas kepada yang sangat
rumit.
Interaktiviti Kemaskini
Komponen perisian yang memulakan dialog antara pengguna
dengan kandungan yang dihasilkan oleh komputer.
Program memberi soalan atau masalah yang mesti
diselesaikan oleh pengguna.
3.5 Jenis Interaktiviti
Interaktiviti Reflektif
Merujuk kepada tindakbalas teks.
Perisian memberi jawapan kepada pengguna menggunakan
jawapan yang telah dikumpul dari pengguna lain.
Perbandingan boleh dilakukan.
Interaktiviti Hyperlink
Pengguna diberi akses dan penerokaan terhadap kandungan
perisian yang dibuat melalui konsep pautan.
3.6 Kelebihan Interaktiviti
3.6.1 Peningkatan Tahap Produktiviti
Membantu kadar penyimpanan (retention) dan keselesaan
pada sesuatu topik.
Pengguna boleh mencari maklumat dengan segera &
menjimatkan masa.

3.6.2 Kadar Pembelajaran yang Lebih Tinggi
Interaksi dengan aplikasi multimedia mampu meningkatkan
kadar pembelajaran.
3.6 Kelebihan Interaktiviti
3.6.3 Kawalan Cara Pembelajaran
Membolehkan pengguna mengawal kandungan sesuatu
aplikasi.
Pengguna boleh mencorak gaya pembelajarannya.

3.6.4 Mencapai Audien dan Pasaran yang Luas
Mempunyai potensi untuk mencapai audien yang luas pada
satu-satu masa - penggunaan web
Boleh digunakan untuk meluaskan pasaran dan mencapai
bilangan pengguna yang ramai. Cth: e-marketing
3.7 Interaktiviti & Navigasi
Navigasi
Ciri penting pembangunan multimedia.
Berkait rapat dengan interaktiviti.
Membolehkan penggunaan aplikasi dengan lebih berkesan.

Kawalan Navigasi
Teknik interaktif yang digunakan di dalam aplikasi multimedia
Membantu pengemundian aplikasi multimedia.
3.7 Interaktiviti & Navigasi
KAWALAN
NAVIGASI
1) Mengawal
Jujukan
Kandungan
2) Menyediakan
Pautan
Sejarah
3) Menyediakan
Maklum balas
Interaksi
4) Menyediakan
Rujukan
Silang
3.8 Kawalan Navigasi
3.8.1 Mengawal Jujukan Kandungan
Butang-butang navigasi: Next, Previous, Continue
membolehkan pengguna mengawal perjalanan aplikasi

3.8.2 Menyediakan Pautan Sejarah (history of links)
Membolehkan kita menjejaki skrin-skrin yang anda telah paut
atau lawati
Menyediakan lompatan tidak linear ke mana-mana skrin yang
telah dilawati sebelum ini.
3.8 Kawalan Navigasi
3.8.3 Maklum Balas Interaksi Pengguna
Memberitahu pengguna hasil tindakannya,
Membantu mengukuhkan proses pembelajaran.
Maklum balas dalam bentuk tekstual / paparan gambar, fail bunyi
/ klip video.

3.8.4 Rujukan-Silang untuk Maklumat Berkaitan
Pengguna boleh mengelintar atau menerokai aplikasi untuk
mendapatkanm maklumat yang diingini
Cth: penggunaan Kamus Elektronik
3.8 Kawalan Navigasi
Struktur Asas Navigasi
Linear : Navigasi Secara
Berjujukan antara bingkai
Hierarki : Navigasi secara bersturktur
antara nod atas ke nod
bawah.
Tidak Linear : Susunan Navigasi secara
bebas.
Composite : Gabungan antara struktur
navigasi yang lain
3.9 Jenis Kawalan Navigasi
1) Menu
Peta navigasi yang menyediakan
antaramuka utama untuk
memulakan pengemudian.
Butang atau hypermedia di mana
pengguna perlu mengklik untuk
meneruskan navigasi.
Cth: Pull Down Menu
3.9 Jenis Kawalan Navigasi
2) Butang
Peralatan navigasi yang popular
di dalam kebanyakan aplikasi
multimedia
Objek di atas skrin yang
menghasilkan tindak balas
apabila pengguna mengklik pada
tetikus
Cth: Push Button
3.9 Jenis Kawalan Navigasi
3) Hiperpaut
Hiperpaut adalah kawalan
interaktif yang terdapat di dalam
aplikasi multimedia
Kaedah yang lebih canggih untuk
mencapai maklumat
Struktur pautan yang tidak
linear: hiperteks dan
hipermedia.
68
Copyright ODL Jan 2005 Open University Malaysia
Rumusan
Elemen interaktiviti dan navigasi merupakan
ELEMEN PENTING dalam Multimedia
Membantu PROSES PEMBELAJARAN dan
meningkatkan kadar pemahaman pengguna.
TANPA elemen-elemen ini sesebuah persembahan
multimedia akan kelihatan PASIF DAN
MEMBOSANKAN.
Konsep interaktiviti juga akan membina satu
IKATAN DI ANTARA PENGGUNA DENGAN APLIKASI
U
N
I
T

1

UNIT 1
PEMBANGUNAN
APLIKASI MULTIMEDIA
BAB 4
Rekabentuk Antaramuka
4.0 Pengenalan
Objektif
Memahami KEPENTINGAN REKABENTUK
antaramuka dalam Multimedia,
Memahami 5 KRITERIA REKABENTUK
antaramuka yang baik,
Mengetahui 6 JENIS antaramuka dan 5
KOMPONEN antaramuka dlm Multimedia,
Memahami 6 PRINSIP REKABENTUK antaramuka
Multimedia,
4.1 Definasi Antaramuka
Dix et al (1998)
Interaksi manusia komputer menyediakan input yang sangat
penting di dalam rekabentuk pakej pembelajaran dan
merupakan sebahagian penting daripada proses rekabentuk.

Johnson (1992)
Antaramuka di antara pengguna dan komputer dan boleh
melibatkan perkakasan dan perisian.

Lewis dan Rieman (1993)
Antaramuka pengguna yang asas sepatutnya termasuk
perkara-perkara seperti menu, tetingkap, papan kekunci,
tetikus, bunyi beep dan bunyi lain yang dihasilkan oleh
komputer.
4.2 Kepentingan Antaramuka
Memudahkan & Melicinkan Proses Pembelajaran
Perubahan antara persekitaran manual ke komputer akan
lebih mudah digunakan.

Gaya Pengemudian yang Bebas
Antaramuka meniru persekitaran semulajadi

Menyokong Kandungan dan Mesej
Sekiranya mesej dan kandungan tidak diurus dengan baik,
sukar dijumpai, atau pengguna berasa bosan atau sesat:
aplikasi anda akan gagal mencapai objektif pembangunannya.
4.3 Kriteria Rekabentuk
Antaramuka
4.3.1 Memahami Pengguna Sasaran
Perlulah bersesuaian dengan pengguna sasaran.
Oleh itu, keperluan pelanggan mesti dikenalpasti dengan tepat

4.3.2 Kenal Pasti Elemen-elemen yang Penting
Penggunaan elemen-elemen yang bersesuai
Pastikan aplikasi tidak terlalu sesak dengan elemen-elemen sehingga
menyekat objektif aplikasi
4.3 Kriteria Rekabentuk
Antaramuka
4.3.3 Mengurangkan Ledakan Maklumat
Jumlah kandungan yang dipaparkan mesti seimbang dengan jumlah
maklumat yang dapat diproses.
Pastikan kesederhanaan pada skrin antaramuka supaya maklumat
dapat disampaikan dengan cepat.

4.3.4 Menyediakan Alternatif untuk Kawalan Antaramuka
Menyediakan shortcut atau kekunci alternatif pada kawalan
antaramuka.
Memberikan pengawalan bebas kpd pengguna

4.3.5 Menampung Tahap Kepakaran Pengguna yang Berbagai
Aplikasi boleh digunakan oleh semua lapisan pengguna
4.4 Jenis-Jenis Antaramuka
1) Antaramuka Bilik
Berita
Untuk aplikasi
yang menyampai
Maklumat
2) Metafora
Penceritaan
Untuk aplikasi yang
berunsurkan didikan
dan mempunyai ciri
hiburan
3) Pendekatan Permainan
Untuk aplikasi yang
bertemakan
pengembaraan
4) Metafora Buku
Untuk aplikasi yang
membolehkan
pengguna
mengemundi
aplikasi
5) Metafora Teknologi
Tinggi
Aplikasi yang
mempunyai tema
yang sofistikated
6) Pendekatan Menu
Untuk aplikasi yang
berasaskan
perkhidmatan
pelanggan
Jenis-Jenis
Antaramuka
4.5 Komponen Antaramuka
Komponen
Antaramuka
Latar Belakang
dan Tekstur
Rollover dan
Slider
Butang, Ikon
dan Pikon
Maklum Balas
Hot Area, Highlight
dan Menu
4.5 Komponen Antaramuka
4.5.1 Latar Belakang dan Testur
Lapisan antaramuka yang paling asas
Menyediakan latar yang menarik untuk paparan kandungan.
Perlulah kelihatan menarik di mata pengguna.
Sebagai simbol visual kepada kandungan
Perlu sekata dengan skrin untuk membolehkan pengguna memberi tumpuan
terhadap maklumat yang tertera pada skrin
4.5 Komponen Antaramuka
4.5.2 Butang, Ikon dan Pikon
Merupakan PERALATAN NAVIGASI
Butang paling mudah direka dengan pelbagai bentuk dan saiz dan amat
gemar digunakan.
Ikon adalah simbol visual kecil yang menunjukkan fungsi sesuatu bahagian
yang diwakilinya.
Pikon ialah ikon bergambar yang boleh membawa maksud yang lebih
abstrak.
4.5 Komponen Antaramuka
4.5.3 Rollovers dan Sliders
Rollovers diaplikasikan kepada kursor yang diletakkan pada bahagian-
bahagian yang telah ditentukan terlebih dahulu pada skrin dan
menghasilkan reaksi multimedia yang berbeza.
Sliders memberi pengguna petanda tentang kedudukan semasa mereka di
dalam aplikasi.
4.5 Komponen Antaramuka
4.5.4 Hot Areas, Highlights dan Menu
Hot areas mungkin grafik atau teks dan boleh dibezakan dengan objek-
objek lain yang tidak interaktif dengan warna atau perubahan yang berlaku
pada kursor.
Menu merupakan alternatif kepada butang dan hot areas, dan ia boleh
memuatkan lebih maklumat.

4.5 Komponen Antaramuka
4.5.5 Maklum Balas
Maklum balas berfungsi untuk memberi pengguna reaksi terhadap tindakan
pengguna pada komponen-komponen antaramuka.
Maklum balas boleh tercetus dengan mengklik butang, ikon, pikon, menu
dan sebagainya dan boleh menghasilkan kesan bunyi, klip video, animasi
atau skrin yang memaparkan maklumat.
Maklum balas boleh digunakan untuk menggalakkan pengguna untuk
meneroka aplikasi dengan lebih lanjut.
4.6 Prinsip Rekabentuk
Antaramuka
Kedudukan
Seimbang
&
Perspektif
Ruang putih
Keseragaman
Penal
Navigasi
yang
Konsisten
Warna
Prinsip
Rekabentuk
Antaramuka
4.6 Prinsip Rekabentuk
Antaramuka
4.6.1 Kedudukan
Skrin selalunya dibahagikan kepada kawasan kandungan dan kawasan
navigasi.
Ratio yang selalu digunakan oleh pereka ialah dua pertiga (2/3) untuk
kandungan dan satu pertiga (1/3) untuk navigasi dan menu.
Pembahagian ini akan memberikan pengguna idea tentang apakah elemen
pada skrin yang yang perlu diberi perhatian.
4.6 Prinsip Rekabentuk
Antaramuka
4.6.2 Seimbang dan Perspektif
Keseimbangan pada skrin merujuk kepada pengagihan nilai optikal =
keupayaan elemen untuk menarik mata pengguna.
Perspektif menyediakan mata pengguna dengan posisi-posisi relatif sesuatu
elemen pada skrin untuk menghalang skrin tersebut daripada menjadi
mendatar.
Perspektif Belakang = untuk elemen yang kurang memerlukan fokus
pengguna.
Perspektif Hadapan = untuk elemen yang memerlukan lebih fokus daripada
pengguna

4.6 Prinsip Rekabentuk
Antaramuka
4.6.3 Ruang Putih
Merujuk kepada jumlah ruang putih yang diperuntukkan di antara teks
dan grafik pada sesuatu muka surat.
Lebih banyak ruang putih di antara teks dan grafik, lebih mudah tumpuan
yang boleh diberikan oleh pengguna.
Ruang putih sepatutnya digunakan juga untuk mengarah perhatian ke titik
fokus sesuatu skrin.
4.6 Prinsip Rekabentuk
Antaramuka
4.6.4 Warna
Menggunakan warna adalah satu cara untuk membuatkan rekabentuk
antaramuka anda lebih menarik.
Warna cerah dan terang adalah warna yang sering dipilih kerana warna-
warna tersebut boleh merangsangkan otak supaya aktif
Pemilihan warna yang sesuai amat dititik-beratkan di dalam membina
aplikasi
Cth: aplikasi permainan kerana sewaktu menggunakan aplikasi sebegini,
pelajar biasanya mengikut gerak hati dan bermain dengan emosi.
4.6 Prinsip Rekabentuk
Antaramuka
4.6.5 Penal Navigasi yang Konsisten
Panel navigasi menyediakan pengguna dengan peralatan sokongan untuk
membimbing pengguna mengemudi sesuatu skrin.
Panel navigasi perlu diletakkan di tempat yang konsisten di atas skrin
untuk memudahkan pengguna melihatnya dengan segera dan
menghubungkaitkan fungsi-fungsinya tanpa banyak masalah.
4.6 Prinsip Rekabentuk
Antaramuka
4.6.6 Keseragaman
Merujuk kepada kesepaduan pelbagai elemen yang terdapat pada skrin.
Keseragaman mengukuhkan mesej atau tema pada sesuatu skrin dan
memberi konsisten pada keseluruhan aplikasi
Keseragaman boleh dicapai sekiranya bentuk, warna, gaya teks dan tema
aplikasi adalah konsisten dan bersepadu.
Keseragaman melibatkan rekaan interaktif di mana pengguna mengemudi
dari satu skrin ke skrin berikutnya.
4.7 Ralat Dalam Rekabentuk
Antaramuka
Antaramuka
yang kompleks
Interaktiviti
yang terlalu
banyak
Maklumat
yang tidak
berkaitan
Tiada Kawalan
untuk Audio &
Video
Antaramuka
yang berwarna
ekstrim
Teks yang
terlampau
banyak
Kesalahan Umum
dalam Rekabentuk
Aplikasi Multimedia
4.7 Ralat Dalam Rekabentuk
Antaramuka
4.7.1 Antaramuka yang Kompleks
Terlalu banyak butang fungsi pada skrin antaramuka
Grafik yang kelihatan serupa dengan butang
Tiada butang kawalan yang sepatutnya menyebabkan pengguna sukar
mengemundikan skrin
4.7 Ralat Dalam Rekabentuk
Antaramuka
4.7.2 Tahap Interaktiviti Terlalu Banyak
Tahap interaksi yang banyak menyebabkan pengguna sukar melayari
aplikasi pengguna boleh sesat dalam aplikasi.
Terjadi kerana tiada jalan balik back ke program asal.
Penanda progres perlu disediakan utk mengatasi masalah ini
4.7 Ralat Dalam Rekabentuk
Antaramuka
4.7.3 Maklumat yang Tidak Berkaitan
Maklumat yang sesak dan tidak disusun secara teratur sehingga menyukar
pengguna untuk memperolehinya.
Menyebabkan pengguna memperuntukkan banyak masa untuk
mendapatkan sesuatu maklumat yang relaven
Cara atasi dengan menyediakan menu berhirarki untuk menguruskan
maklumat.
4.7 Ralat Dalam Rekabentuk
Antaramuka
4.7.4 Teks yang Terlampau Banyak
Antaramuka yang padat dengan teks menyebabkan pengguna merasa
bosan.
Cara atasi dengan letakkan grafik atau elemen lain bagi mengantikan
elemen teks
4.7 Ralat Dalam Rekabentuk
Antaramuka
4.7.5 Antaramuka yang berwarna Ekstrim
Elakkan dari menggunakan warna yang terlalu ekstrim kerana akan
mengganggu tumpuan pengguna terhadap maklumat yang dicapai
Penggunaan warna-warna harmoni amat digalakkan.
Perlu ada kesesuaian warna antara elemen-elemen yang digunakan.
4.7 Ralat Dalam Rekabentuk
Antaramuka
4.7.6 Tiada Kawalan untuk Audio dan Video
Jika memasukkan klip video ke dalam antaramuka aplikasi, pastikan
kawalan untuk audio dan video diletakkan
Tujuannya supaya pengguna dapat mengawal kemasukan dan
menggunakannya dengan senang.
Jenis-jenis Pengujian
Ulasan rakan
Pengujian kumpulan sasaran
Penghasilan prototaip
Ujian penggunaan
Pengujian Alfa
Pengujian Beta
Kesimpulan
Rekabentuk antaramuka bergrafik telah memudahkan interaksi antara
manusia dengan komputer.
Rekabentuk antaramuka adalah amat penting supaya pengguna dari semua
lapisan masyarakat boleh menggunakan komputer dengan mudah.
Rekabentuk antaramuka sepatutnya menjadi pelengkap dan menyokong
cara pengguna memproses maklumat.
Contoh aktiviti Ms Word secara
hands on
Word Prosessing
(Pemerosesan perkataan)
Table
Peta minda atau pengurusan grafik
Graf
Teks dan gambar
hyperlink (pautan)
Web layout (Paparan Laman web)
Screen shot (Rakam skrin)

Definisi Multimedia
Menurut Rosenberg (1993)
multimedia adalah gabungan
imej statik, bunyi, grafik,
hiperteks dan video yang
digunakan selaras dengan
teknologi komputer.

MODEL ADDIE
Analisis
Pada peringkat ini beberapa analisis akan dilakukan seperti
analisis persekitaran pembelajaran, analisis pengguna dan
menentukan matlamat pengajaran. Terdapat beberapa soalan
yang boleh diajukan semasa proses analisis iaitu :
Siapakah pengguna dan apakah sifat-sifatnya?
Menentukan sikap baru yang akan dipamerkan
Apakah jenis halangan pembelajaran yang wujud?
Apakah pilihan bentuk penyampaian pembelajaran?
Apakah tempoh masa yang diperlukan untuk menyiapkan projek
tersebut?
Reka bentuk
Di antara langkah yang dilakukan pada fasa reka bentuk
adalah :
Dokumentasi projek yang mengandungi reka bentuk
berarahan, visual dan strategi rekabentuk
Aplikasi strategi pengarahan bergantung kepada sikap
yang dipamerkan oleh pengguna seperti kognitif, afektif
dan psikomotor.
Membangunkan papan cerita
Mereka bentuk antara muka
Membangunkan prototaip
Menggunakan reka bentuk visual

Pembangunan
Kerja- kerja pembangunan projek
mulimedia akan dilakukan
mengikut spesifikasi keperluan
yang dipersetujui. Setiap
pembangunan akan diuji agar ia
konsisten dan dapat beroperasi
dengan berkesan.

Pelaksanaan
Projek multimedia yang telah
disiapkan akan diuji kepada
pengguna sebenar bagi
mengenalpasti kesilapan semasa
proses pembangunan projek
berlaku. Sekiranya berlaku
kesilapan, pembaikan akan
dilakukan sebelum ia diserahkan
sepenuhnya kepada pengguna
sasaran untuk digunakan.

Penilaian
Fasa penilaian terbahagi dua iaitu
formatif dan sumatif. Penilaian formatif
merangkumi setiap fasa dalam proses
ADDIE. Penilaian sumatif pula hanya
melibatkan rekabentuk pengujian yang
spesifik sahaja yang memerlukan
maklumbalas pengguna seperti isi
kandungan, strategi dan elemen
multimedia melalui kaedah temubual,
soal selidik penyeliaan dan pengujian.