INTERAKTIVITI DAN REKA BENTUK

SKRIN
BBL 41303

TEKNOLOGI MULTIMEDIA DAN
SENI INDUSTRI KREATIF
Prinsip Asas Reka Bentuk
Konsep untuk menyusun maklumat visual

Merupakan satu gambaran tentang bagaimana kita
mengamati dan memproses maklumat visual

Membantu kita membuat keputusan tentang
bagaimana untuk menggunakan elemen-elemen
reka bentuk

Prinsip reka bentuk membantu menjadikan imej
visual menjadi lebih menarik dan menyenangkan bila
dilihat.
Prinsip-Prinsip Rekabentuk

Keseimbangan (Balance)

Perspektif

Harmoni

Kesatuan atau Paduan
Keseimbangan (Balance)
Pengagihan keberatan visual objek, warna, tekstur
dan ruang.

Dalam keseimbangan simetri (symmetrical balance),
elemen keseimbangan digunakan di satu sisi rekaan
yang sama dengan sisi rekaan yang satu lagi.

keseimbangan bukan simetri (asymmetrical
balance), sisi antara satu sama lain adalah berbeza
tetapi kelihatan stabil

Manakala keseimbangan jejari (radial balance),
elemen disusun di sekitar satu titik tengah dan boleh
jadi serupa.
Keseimbangan (Balance)
Keseimbangan Simetri
Keseimbangan Bukan Simetri
Keseimbangan Jejari
Perspektif
Dihasilkan apabila objek dalam ruangan dua dimensi
disusun agar kelihatan lebih realistik.
Memberikan makna hubungan antara objek-objek
yang dilihat dalam suatu ruang.
Mewujudkan sifat realisme kepada imej visual
Saiz satu segi empat kurang bermakna sehingga
ada satu objek lain yang mampu memberikan kesan
tambahan seperti saiz satu meja atau saiz satu
bangunan.
Persepsi boleh dicapai melalui penggunaan saiz
objek yang relative. Objek yang bertindan, dan objek
yang dikaburkan atau dijelaskan.


Perspektif
Harmoni
Rekaan seni visual yang melibatkan susunan atau
ulangan unsure-unsur seni visual mengikut vara dan
prinsip yang tersusun dan menimbulkan kesan yang
menarik.

Dalam konteks seni, ulangan garisan, rupa, bentuk,
jalinan dan ruang dalam gaya dan arah yang tertentu
atau berpandukan garisan grid akan menghasilkan
gubahan yang harmoni.

Aplikasi prinsip rekaan harmoni dapat menimbulkan
gambaran yang sempurna, teratur, seragam dan
selesa pandangan mata.
Harmoni
Harmoni dari segi bentuk
Harmoni dari segi garisan
Harmoni dari segi rupa
Kesatuan atau Paduan
Wujud pada sesuatu gubahan apabila kesemua
unsur-unsur di dalamnya mempunyai satu tema atau
idea yang sama dan menyeluruh.

Penggunaan unsur seni, tema serta rekaan yang
baik dapat mewujudkan kesatuan pada sesuatu
gubahan seni visual.

Mengaplikasikan prinsip kesatuan dalam karya seni
akan menjadikan hasil itu kelihatan lebih lengkap,
teratur dan sempurna di mana ia menimbulkan
kesan yang sepadu dan memberi impak dari segi
kekuatan karya
Kesatuan atau Paduan
Kesatuan tema jenis
objek dan warna
Kesatuan tema
Kesatuan warna, objek
dan rupa
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.
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
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.
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.
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
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.
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



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
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.
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
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.
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.
Kelebihan Interaktiviti
Peningkatan Tahap Produktiviti
Membantu kadar penyimpanan (retention) dan
keselesaan pada sesuatu topik.
Pengguna boleh mencari maklumat dengan
segera & menjimatkan masa.

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

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
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.
Interaktiviti & Navigasi
KAWALAN
NAVIGASI
1) Mengawal
Jujukan
Kandungan
2) Menyediakan
Pautan
Sejarah
3) Menyediakan
Maklum balas
Interaksi
4) Menyediakan
Rujukan
Silang
Kawalan Navigasi
Mengawal Jujukan Kandungan
Butang-butang navigasi: Next, Previous,
Continue membolehkan pengguna mengawal
perjalanan aplikasi

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.
Kawalan Navigasi
Maklum Balas Interaksi Pengguna
Memberitahu pengguna hasil tindakannya,
Membantu mengukuhkan proses pembelajaran.
Maklum balas dalam bentuk tekstual / paparan
gambar, fail bunyi / klip video.

Rujukan-Silang untuk Maklumat Berkaitan
Pengguna boleh mengelintar atau menerokai aplikasi
untuk mendapatkanm maklumat yang diingini
Cth: penggunaan Kamus Elektronik
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
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
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
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.
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

PEMBANGUNAN APLIKASI
MULTIMEDIA
Rekabentuk Antaramuka
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,
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.
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.
Kriteria Rekabentuk Antaramuka
Memahami Pengguna Sasaran
Perlulah bersesuaian dengan pengguna sasaran.
Oleh itu, keperluan pelanggan mesti dikenalpasti
dengan tepat

Kenal Pasti Elemen-elemen yang Penting
Penggunaan elemen-elemen yang bersesuai
Pastikan aplikasi tidak terlalu sesak dengan elemen-
elemen sehingga menyekat objektif aplikasi
Kriteria Rekabentuk Antaramuka
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.

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

Menampung Tahap Kepakaran Pengguna yang Berbagai
Aplikasi boleh digunakan oleh semua lapisan pengguna
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
Komponen Antaramuka
Komponen
Antaramuka
Latar Belakang
dan Tekstur
Rollover dan
Slider
Butang, Ikon
dan Pikon
Maklum Balas
Hot Area, Highlight
dan Menu
Komponen Antaramuka
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
Komponen Antaramuka
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.
Komponen Antaramuka
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.
Komponen Antaramuka
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.

Komponen Antaramuka
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.
Prinsip Rekabentuk Antaramuka
Kedudukan
Seimbang
&
Perspektif
Ruang putih
Keseragaman
Penal
Navigasi
yang
Konsisten
Warna
Prinsip
Rekabentuk
Antaramuka
Prinsip Rekabentuk Antaramuka
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.
Prinsip Rekabentuk Antaramuka
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

Prinsip Rekabentuk Antaramuka
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.
Prinsip Rekabentuk Antaramuka
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.
Prinsip Rekabentuk Antaramuka
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.
Prinsip Rekabentuk Antaramuka
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.
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
Ralat Dalam Rekabentuk Antaramuka
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
Ralat Dalam Rekabentuk Antaramuka
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
Ralat Dalam Rekabentuk Antaramuka
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.
Ralat Dalam Rekabentuk Antaramuka
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
Ralat Dalam Rekabentuk Antaramuka
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.
Ralat Dalam Rekabentuk Antaramuka
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.
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.