PENGENALAN KEPADA

SISTEM MULTIMEDIA
(WXET 3142)

BAB 7 : REKABENTUK
PRODUK MULTIMEDIA

nazlita@fsktm.um.edu.my

Pengenalan
Faktor penting : Bagaimana produk
multimedia itu looks, feels dan works
Rekabentuk produk : untuk memahami
pengguna.
Untuk membincangkan rekabentuk produk,
kita gunakan page sebagai perwakilan
presentation.
page dirujuk sebagai frame atau slide.
nazlita@fsktm.um.ed

Pembinaan Blok (Building Blocks)

Dalam rekabentuk produk multimedia,
page : maklumat yang menyokong
struktur dan aliran persembahan.

Page digunakan untuk

navigation
persembahan maklumat
sokongan kepada pengguna
nazlita@fsktm.um.ed

Page dikategorikan kepada :

Introduction
Splash
Menu
Content
Help Credits
Quit
nazlita@fsktm.um.ed

Introduction and Splash Page :

memulakan sesuatu persembahan.
Splash pages digunakan untuk
menyatakan bahawa sesuatu produk
sedang loading,
di mana ia berguna jika kandungan suatu
produk multimedia sedang preloaded
untuk hasil yang lebih baik
nazlita@fsktm.um.ed

Introduction pages membekalkan ciri

:
Mengenalpasti produk
Mengenalpasti sumber bagi produk
Membekalkan arahan begaimana hendak
menggunakan program
Membekalkan ciri keselamatan seperti
penggunaan katalaluan (password)
nazlita@fsktm.um.ed

Menu and Content Pages : untuk

menguruskan kandungan produk
multimedia
Ia akan menghubungkan dengan page
yang lain yang dipanggil branch
Branch membenarkan produk dilapisi
(layered) untuk pencapaian ke
kandungan (content) yang lebih baik
nazlita@fsktm.um.ed

Menu pages selalunya mengandungi

kandungan yang sedikit dengan latar
belakang gambar dan audio.
Content pages mempersembahkan
kandungan produk multimedia
tersebut

nazlita@fsktm.um.ed

Help, Credit and Quit pages

membenarkan fungsi sokongan
pengguna untuk melicinkan operasi
sesuatu produk

nazlita@fsktm.um.ed

Help pages membekalkan maklumat

bagaimana persembahan diuruskan
dan bagaimana kerja dikawal.
Help pages boleh dicapai dari manamana poin di dalam persembahan dan
pengguna boleh kembali ke tempat
asal selepas mencapai help pages
nazlita@fsktm.um.ed

10

Credit pages membekalkan maklumat

mengenai pembangun (developer) dan
maklumat mengenai sumber kandungan
Ia juga akan menyenaraikan produk
dan maklumat terkini
Quit pages pula digunakan untuk
menamatkan program
nazlita@fsktm.um.ed

11

Pengkelasan Produk
Terdapat 2 strategi asas untuk
pengkelasan produk multimedia :
Tidak-interaktif : pengguna hanya
mempunyai sedikit kawalan ke atas
produk
Interaktif : pengguna yang menentukan
aliran penghantaran maklumat

nazlita@fsktm.um.ed

12

Produk tidak-interaktif : mudah kerana

kandungannya dipersembahkan secara linear
Pengguna akan melihat jujukan pages
seperti yang telah ditentukan
Produk interaktif : sering digunakan untuk
membangunkan produk multimedia
Pengguna boleh mengawal penghantaran
maklumat
dengan
menekan
butang,
memainkan bunyi atau video.
nazlita@fsktm.um.ed

13

Multimedia Tidak-Interaktif
Contoh
:
animasi
dan
persembahan
standalone spt movie ataupun video
Digunakan
untuk
mempersembahkan
maklumat kepada penonton yang ramai pada
skrin besar ataupun pada monitor televisyen.
Produk dimainkan dari mula sehingga tamat.
Pengguna mempunyai sedikit kawalan ke atas
produk dengan clicking the mouse ataupun dengan
pressing a key untuk ke page yang berikutnya.

nazlita@fsktm.um.ed

14

Format Persembahan TidakInteraktif

Pengenala
n
produk
Muka Pengenalan
berikutnya

Apakah itu
produk?
Muka mula (kandungan)

nazlita@fsktm.um.ed

Lebih
mengenai
produk
Muka

15

Gambarajah merupakan salah satu format

yang paling mudah bagi suatu aplikasi
multimedia.
Persembahan tidak-interaktif selalunya
sesuai untuk aplikasi seperti berikut :
Persembahan korporat
Persembahan pengajaran dan latihan
Persembahan jualan dan pemasaran
nazlita@fsktm.um.ed

16

Bagi setiap kes, terdapat ciri yang kerap

digunakan untuk persembahan maklumat.
Yang paling penting ialah maklumat yang
dibina pada maklumat lain.
Sebagai contoh :
Nama syarikat, diikuti dengan
Misi syarikat
Sejarah syarikat
Organisasi syarikat
Produk

nazlita@fsktm.um.ed

17

Pada setiap page, pengguna akan

dibekalkan
penerangan
mengenai
syarikat tersebut.
Maklumat diberikan sedikit demi
sedikit supaya pengguna mudah untuk
memahami.

nazlita@fsktm.um.ed

18

Bagi produk latihan, selalunya bergantung

kepada jujukan maklumat berdasarkan masa.
Contoh, produk yang mengajar bagaimana
untuk memasak.
Ia akan bermula dengan menyediakan bahanbahan
yang
diperlukan
kemudian
mencampurkan
bahan-bahan
tersebut,
memasak
dan
akhir
sekali
cara
menghidangkan makanan tersebut.
nazlita@fsktm.um.ed

19

Bagi
multimedia
tidak-interaktif,
format linear merupakan kaedah yang
paling
berkesan
untuk
mempersembahkan maklumat sebegini.
Ini kerana pengguna tidak boleh
bergerak ke sebarang page dan ini
dapat
mengurangkan
pengguna
tertinggal maklumat yang penting
nazlita@fsktm.um.ed

20

Persembahan tidak-intertaktif digunakan di

dalam media seperti pita video.
Sebagai contoh, pita video semasa
penganugerahan ijazah kepada siswazah
Universiti Malaya. Kandungan pita akan
disusun seperti :
Muzik pengenalan
Ucapan
Penyampaian ijazah
nazlita@fsktm.um.ed

21

Multimedia Interaktif
Multimedia interaktif : model yang paling
sering digunakan oleh pembangun semasa
membina produk komersial termasuklah
produk hiburan, latihan dan pembelajaran.
Multimedia interaktif dikategorikan dengan
kebolehannya untuk mengikut laluan yang
berbeza melalui maklumat.
Gambarajah berikut menunjukkan contoh
bagaimana persembahan interaktif bekerja.
nazlita@fsktm.um.ed

22

Bahagian 1
Next

Pengenalan

MENU
Bahagian 1
Bahagian 2
Bahagian 3

Bahagian 3
Next

nazlita@fsktm.um.ed

Bahagian 2
Next

Maklumat
Berikutnya
Next

23

Persembahan multimedia interaktif disusun

sebagai menu dan content page yang
membenarkan pengguna membuat keputusan ke
mana untuk meneruskan.
Antara teknik yang biasa digunakan untuk
membenarkan pengguna membuat pilihan ialah :
Buttons
Graphic hot spots
Text-based hyperlinks
Menu lists

nazlita@fsktm.um.ed

24

Persembahan multimedia interaktif mungkin

akan menjadi kompleks.

Ia bergantung kepada produk dan kandungan

produk tersebut.

Format interaktif sesuai untuk produk-produk

seperti berikut :

Alat rujukan (ensiklopedia / kamus)

Pembelajaran dan latihan
Penghantaran akhbar dan majalah secara elektronik
Hiburan

nazlita@fsktm.um.ed

25

Alat rujukan perlu disusun agar dapat dicapai

dengan pantas kerana ia mempunyai
kandungan yang banyak.
Produk pembelajaran dan latihan memerlukan
capaian interaktif di mana pengguna akan
berkomunikasi dengan produk.
Akhbar dan majalah elektronik akan
dibahagikan mengikut seksyen seperti berita
tempatan, luar negara, politik, sukan dan
hiburan.
nazlita@fsktm.um.ed

26

Produk hiburan pula dibahagikan

mengikut jenis permainan, paras
kepakaran (skill levels) yang
membenarkan pengguna keluar dan
kembali ke seksyen tertentu.

nazlita@fsktm.um.ed

27

Strategi Interaktif untuk

Menguruskan Maklumat
Maklumat boleh disusun dengan
pelbagai cara.
Ia selalunya bergantung kepada
jumlah maklumat yang disimpan dan
kekompleksan
maklumat
yang
terdapat di dalam produk tersebut.

nazlita@fsktm.um.ed

28

3 kategori asas untuk menyusun maklumat

di dalam sesuatu produk iaitu :
Linear

Maklumat
dipersembahkan
secara
terus
(straightforward) seperti di dalam buku di mana ia
dibahagikan mengikut bab, seksyen dan perenggan.

Tree / hierarchical

Maklumat dipecahkan kepada beberapa sub-lapisan

berdasarkan struktur logic.

Network

Maklumat dihubungkan ke bahagian lain produk.

nazlita@fsktm.um.ed

29

Strategi Interaktif dan

Persembahan
Sistem interaktif dibangunakan dengan
pelbagai cara yang berbeza bergantung
kepada produk, kandungan produk dan
alatan yang digunakan.
Tetapi secara keseluruhannya, pengguna
mengawal maklumat yang akan dicapai dan
terdapat 3 pendekatan asas iaitu :
Linear
Programmed Branching
Hypermedia

nazlita@fsktm.um.ed

30

Linear
Menyerupai strategi tidak-interaktif
Persembahan maklumat secara pages
Pengguna boleh ke muka berikutnya
atau kembali ke muka asal

nazlita@fsktm.um.ed

31

Programmed branching
Kaedah yang paling sering digunakan di
dalam multimedia komersial
Selalunya digunakan di dalam produk
pembelajaran dan hiburan
Pengguna mempunyai kawalan yang terhad
terhadap laluan
Kawalan melalui pilihan dari antaramuka
seperti button, ikon atau menu
nazlita@fsktm.um.ed

32

Setiap muka selalunya mengandungi

kandungan dan pilihan
Pilihan membolehkan pengguna ke
muka lain atau atau menu help atau
terus keluar dari produk tersebut
Menjadi pilihan ramai pembangun
kerana memberi kebebasan kepada
pengguna semasa menggunakan produk
nazlita@fsktm.um.ed

33

Hypermedia
Jujukan : secara tidak-linear di mana pengguna
mempunyai kawalan sepenuhnya terhadap kandungan
produk
Selalunya digunakan untuk World Wide Web (WWW)
Ia sering digunakan sebagai muka teks ataupun grafik
di mana pengguna boleh klik teks atau gambar yang
dipaparkan
Formatnya menyerupai programmed branching keran
memberi kebebasan kepada pengguna untuk mengawal
navigasi

nazlita@fsktm.um.ed

34

Storyboarding
Storyboarding merupakan proses yang
diambil dari pembangunan media termasuklah
pembuatan filem atau animasi kartun.
Ia menceritakan produk di atas kertas yang
menerangkan keterperincian cerita produk
tersebut.
Bagi multimedia, storyboarding digunakan
untuk menghubungkan kandungan supaya
dapat diterjemahkan ke produk multimedia
yang dibina.
nazlita@fsktm.um.ed

35

Terdapat 2 paras storyboarding iaitu

storyboard page
product storyboard

nazlita@fsktm.um.ed

36

storyboard page
Storyboard page digunakan untuk
menerangkan frame of time tertentu di
dalam suatu persembahan multimedia.
Ia selalunya bersamaaan dengan muka
ataupun page yang kita telah bincangkan
sebelum ini.
Tiada
undang-undang
khas
untuk
membuat storyboard.
Ia sering bergantung kepada produk yang
hendak dibangunkan.
nazlita@fsktm.um.ed

37

 Storyboard

page ini dapat digambarkan

seperti dalam gambarajah berikutnya
menerangkan :
mesej

suatu muka tersebut

kandungan muka termasuklah sumber dan
arahan untuk penformatan muka
Layout bagi kandungan muka
Layout bagi kawalan navigasi bagi muka
tersebut
interaktiviti bagi muka tersebut
nazlita@fsktm.um.ed

38

 maklumat

pereka termasuklah siapa yang

mereka, bila dan di mana
komen atau maklumat lain yang berguna

nazlita@fsktm.um.ed

39

storyboard page

Teks

Nama Projek:
Tarikh:

Teks

Ketua projek:
Tarikh kemaskini:

nazlita@fsktm.um.ed

Pereka:

40

product storyboard
Oleh kerana produk multimedia selalunya
melebihi dari 1 muka, maka perlulah ia
dihubungkan dengan muka yang lain untuk
mempersembahkan keseluruhan kandungan
produk multimedia tersebut.
Product storyboard merupakan gambaran
keseluruhan yang menerangkan bagaimana
muka individu dipersembahkan
nazlita@fsktm.um.ed

41

 Terdapat beberapa cara untuk menguruskan

muka-muka tersebut iaitu :

Menggunakan loose-leaf notebook untuk menyimpan

pages.
Meletakkan pages pada dinding satu demi satu
secara linear.
Meletakkan pages pada dinding atau kertas yang
besar dengan menunjukkan hubungan di antara pages
dan navigasi.
Menggunakan kad rujukan yang berkaitan dengan
storyboard sheets yang disusun pada kad yang
besar.

nazlita@fsktm.um.ed

42

Aplikasi storyboard

Storyboard
Page

Storyboard
Page

Storyboard
Page

Storyboard
Page
Storyboard
Page

Storyboard
Page

Storyboard
Page
Storyboard
Page

nazlita@fsktm.um.ed

43

Storyboarding yang baik penting

untuk menghasilkan produk multimedia
yang baik
Tujuan : membantu pereka untuk
menguruskan ide dan kandungan.
Ia selalu digunakan sebagai ide asas
untuk diceritakan kepada pengguna.
nazlita@fsktm.um.ed

44

Tutorial Bab 7
1. Apakah perbezaan di antara produk
multimedia interaktif dan tidak-interaktif?
2. Jelaskan kategori-kategori asas untuk
menyusun maklumat di dalam sesuatu produk.
3. Apakah keburukan penggunaan kaedah linear
di dalam penyusunan maklumat.
4. Senaraikan paras storyboarding yang ada.
Bincangkan setiap satu.
5. Terangkan kebaikan storyboarding .
nazlita@fsktm.um.ed

45