Anda di halaman 1dari 36

MEDIA INTERAKTIF

Media interaktif adalah suatu sistem penyampaian

informasi yang menyajikan materi video rekaman dengan pengendalian komputer kepada penonton yang tidak hanya mendengar dan melihat video dan suara, tetapi juga memberikan respon yang aktif, dan respon itu yang menentukan kecepatan dan sekuensi penyajian (Seels & Glasgow dalam Arsyad, 2002:36).

Keuntungan pemanfaatan media offline,

misalnya CD-Multimedia Interaktif (1) mampu menampilkan multimedia dengan file lebih besar, (2) jauh lebih hemat dibanding dengan pemanfaatan media secara online, (3) tingkat interaktivitasnya tinggi karena memiliki lebih banyak pengalaman belajar melalui teks, audio, video, hingga animasi yang dikemas dengan tayangan gambar yang ditampilkan bersamaan dengan judul dan narasi suara dan juga menampilkan tingkah laku manusia atau pekerjaan yang kompleks.

Suatu media interaktif yang dikembangkan harus memenuhi beberapa kriteria, yaitu : 1) kemudahan navigasi. 2) kandungan kognisi, adanya kandungan pengetahuan yang jelas. 3) presentasi informasi, yang digunakan untuk menilai isi dan program CD interaktif itu sendiri 4) integrasi media, dimana media harus mengintegrasikan aspek pengetahuan dan keterampilan. 5) artistik dan estetika 6) fungsi secara keseluruhan

Aplikasi interaktif multimedia akan Hypermedia

merupakan suatu applikasi multimedia yang membenarkan navigasi bukan sekedar hypertext sahaja tapi juga unsur-unsur media yang lain spt image, video dll.

Multimedia

Hypermedia

CARTA ALIR PROSES PEMBANGUNAN APLIKASI MEDIA INTERAKTIF

Konsep

Storyboard

Pembangunan Inventori Aset


Fasa Implementasi Pengujian Penghantaran

Konsep
Objektif aplikasi, tema
Tentukan pengguna sasaran & kehendak mereka Struktur/organisasi kandungan aplikasi

Cara dan medium penyampaian

Perancangan Kandungan Aplikasi/storyboard


Susunan inventory
perancangan projek penjadualan dan pengeluaran

asset, menentukan tenaga ahli Tentukan susunan/organisasi Diagram alir

Bagaimana untuk menstrukturkan isi?


Tema, klasifikasi, kumpulan (groupings) materi
Pembelajaran isu: pecahkan isi kepada topik

(meaningful sections), contoh, pengujian dan penilaian Keserasian isu: humour, interaktivitas yang tinggi, surprises

Organisasi Panduan Langkah


Uraikan semua kategori Lakukan proses grouping item berdasarkan topik

(pilih metakategori yang paling nyata) Perkecil grouping topik tersebut dengan mencari dan memadankan item-item yang sesuai Atur grouping ke dalam bentuk struktur (linear, pokok hierarki, composite, etc.)

Rekabentuk Struktur isi


Selalunya aplikasi akan menggunakan lebih dari satu

struktur isi. Keputusan untuk memilih struktur sesuatu isi berdasarkan beberapa faktor:

Konsep & tujuan aplikasi Ciri-ciri aplikasi Isi kandungannya Cara persembahan isi kandungan aplikasi.

Aplikasi yang berkisar tentang cerita kanak-kanak pada

realitinya berbentuk linear, jadi struktur yang dipilih adalah linear juga. Tetapi bagi aplikasi rujukan manual yang memerlukan penggunaan hypertext yang banyak, struktur rangkaian adalah lebih sesuai.

Rekabentuk Struktur isi


Beberapa jenis struktur isi:

Struktur Linear Struktur Pokok Struktur Rangkaian Struktur Rangka Tunggal Struktur Kombinasi

Struktur Linear
Penyusunan nod adalah secara linear baik vertikal atau

horosontal Struktur linear mampu mengetengahkan konsep zooming kepada informasi yang lebih spesifik Memerlukan penggunaan navigasi ruang informasi melalui satu garis lurus (satu arah atau 2 arah) Sesuai bagi aplikasi kecil & tidak kompleks (tutorial, persembahan slide, sistem tempahan, aplikasi cerita, dll) Variasi kepada struktur linear adalah struktur linear-loncat yang mengijinkan untuk loncat keluar dari arah linear ke menu utama. Dari menu utama pengguna boleh pilih nod lain dan loncat kepadanya.

Struktur Pokok
Mempunyai satu nod utama dan kemudian bercabang untuk

membentuk beberapa nod lain & ia digambarkan seperti satu pokok. Membolehkan pengguna melalui ruang informasi dalam aplikasi yang menarik minatnya dengan memilih jalan menuju ke ruang tersebut. Aplikasi: tutorial yang menawarkan beberapa topik. Cara navigasi:

Ke atas dan ke bawah cabang utama atau cabang anak Boleh kembali ke nod utama dalam cabang anak juga boleh kembali ke nod utama dalam aplikasi

Kemudahan navigasi adalah penting dalam struktur ini Berkesan bagi aplikasi dimana informasi dibahagi-bahagikan kepada

beberapa hierarki Akan mendatangkan masalah sekiranya aplikasi mempunyai terlalu banyak paras informasi -> pengguna hilang arah dalam aplikasi

Struktur Rangkaian
Struktur yang menyambungkan nod-nodnya tanpa

mengikut hierarki susunan Pengguna boleh menjelajah ruang informasi aplikasi dalam pelbagai arah dan cara

Struktur Rangka-Tunggal
Struktur yang dilihat oleh pengguna sebagai satu nod atau

tempat dimana semua perkara berlaku dimana pengguna tidak merasakan yang mereka menyusuri (travelling) ruang maklumat dalam aplikasi. Membolehkan navigasi dengan struktur ini terlihat elegant dan dapat mengurangi masalah pengguna hilang orientasi atau cognitive overload Berguna sekiranya aplikasi memerlukan pengguna membuat pilihan secara acak sebelum menentukan jenis isi kandungan yang dikehendaki Ia membentuk satu struktur penyampaian isi bagian depan yang elegant kerana ia mudah dan menarik minat pengguna untuk menjelajahi keseluruhan ruang aplikasi Multi-layer (penggunaan frames)

Struktur Rangka-Tunggal
3 bentuk struktur rangka tunggal

Bentuk Rangka Paparan Bentuk Rangka Filter Bentuk Rangka Lihat-dan-tunjuk

Bentuk Rangka Paparan


Bentuk rangka dimana unsur-unsur antaramuka

sama dan hanya unsur isi (content element) saja yang berubah mengikuti pilihan pengguna

Bentuk Rangka Filter


Dalam rangka ini pengguna boleh memilih satu atau

lebih filter yang telah membagi isi vatau isi kandungan mengikuti jenis-jenis tertentu Berguna untuk aplikais yang mengalami pertambahan isi bagi sesuatu kategori bertambah secara dinamik

Bentuk Rangka Lihat-dan-Tunjuk


Dalam bentuk ini, mula-mula informasi

dipersembahkan pada layar, kemudian bila pengguna click atas menu yang menarik minat mereka, menu tersebut akan ditampilkan dengan tambahan informasi Aplikasi: paket pembelajaran seperti belajar untuk mengenali bagian-bagian mesin kenderaan Kaedah utama adalah pop-up field, floating palettes

Struktur Kombinasi
Struktur yang menggabungkan dua atau lebih

struktur-struktur lain Boleh terdiri dari rangka tunggal sebagai layar utama untuk memilih jalan (path) atau filter kemudian struktur pokok digunakan untuk menjelajah path tersebut Berguna apabila informasi dalam aplikasi tidak dari awal membentuk struktur yang jelas

Media tampilan
Bergantung kepada isi projek dan pengguna sasaran
Klasifikasi

Medium awam = Internet (agak terbatas bergantung kepada keupayaan browser, teknologi rangkaian yang digunakan, etc.) Medium persendirian = CD-ROM

Storyboard
Digunakan bagi merekabentuk interaksi/navigasi
Tentukan tujuan dan navigasi Tentukan setiap peristiwa yang berlaku pada setiap

layar dan keadaan interaksi yang diingini Tentukan jalannya navigasi

Storyboard

Permasalahan Dalam Navigasi

Dua masalah utama dalam navigasi adalah


Hilang Orientasi/Disorientation Overhead Kognitif/Cognitive Overhead -Overload

Disorientation (Hilang Orientasi)


Situasi dimana pengguna hilang arah dalam media

interaktif dalam aplikasi tidak linear dan menjadi tidak pasti di lokasi atau section mana ia sekarang berada dalam aplikasi Cara mengatasi:

Tentukan links Gunakan penunjuk lokasi visual, peta global atau tempat dan sebagainya Adakan fungsi-fungsi seperti kembali ke home atau skrin utama dan automatic backtracking

Cognitive Overhead Overload (Overhead Kognitif)


Masalah yang selalu dikaitkan dengan penggunaan

hypertext Timbul apabila pengguna dipersembahkan dengan terlalu banyak bilangan pilihan atau links dalam sesuatu halaman Akibatnya pengguna jadi keliru link mana yang harus diikuti dan mungkin akan membawa kepada rasa kurang senang untuk meneruskan aplikasi Ia dapat dikurangkan dengan:

Sediakan glossary bagi istilah-istilah yang teknikal Guna tetingkap pop-up untuk glossary, fungsi help, dll Kurangkan bilangan hypertext dalam sesuatu nod

Orientasi Pengguna
Dunia fisikal cth buku: ada nombor halaman, bab,

indeks, TOC, dll Antaramuka pengguna rekabentuk berstruktur, penggunaan grid, peta image, metafor Metafor cara mewakilkan sesuatu konsep baru yang bukan biasa ke dalam perwakilan yang biasa bagi pengguna melalui kaedah association

metafor buku -> ciri-ciri buku digunakan Metafor folder dalam komputer -> ciri-ciri folder dalam dunia nyata digunakan untuk penyimpanan file

Rancangan Alat Bantuan bagi Navigasi


Links sebagai bagian (teks, image, dll) yang pengguna boleh klik

untuk pergi ke nod seterusnya, aktifkan unsur media seperti audio, video dan sebagainya Aliran isi dari satu nod ke nod yang lain perlu dipastikan dan dianalisa untuk mewujudkan cara navigasi yang paling mudah diikuti dan tidak menjurumuskan Kemudian links perlu dipastikan

Memudahkan pengguna mengenalpasti unsur manakah yang merupakan suatu pautan dalam skrin paparan, pautan perlu kelihatan berbeda dan lebih menonjol secara visual Cth: warna pautan hyperteks berbeda dari teks yang lain harus konsisten sepanjang aplikasi untuk setiap kekeliruan

Bilangan links perlu ditentukan tidak melebihi 8 links pada satu-

satu nod

Alat Bantu Navigasi


Peta Image
You are here indicator (mukasurat & tajuk) navigasi

Progress indicators
Peralihan visual (zoom in, zoom out, wipes) Bookmarks Menu, table of contents, index, glossary Fungsi Help

Kemudahan (Usability) Dapat dicapai dengan:


Kurangkan penjelajahan pengguna dalam ruang

halaman Jauhkan terbukanya beberapa links yang ke layar yang sama Jauhkan keadaan dimana pengguna diberi terlalu banyak pilihan navigasi pada sesuatu screen flexibility navigasi bagi fungsi yang sama diletakkan berdekatan

Rancangan antarmuka
Tentukan tema dan style visual Rancangan tampilan layar Susun unsur-unsur screen Hasilkan prototipe Style antaramuka Immage artistic, background?? Typography font style Text dramatic/instructional Video art/action Sound musical styles/narration/effects Authoring style animations/transitions/level of interactions/user engagements Content theme & context (technology, era, culture, location, stylistics unity)

Paparan
Susunan objek mudahdiguna, stayle visual
Penggunaan grid Scrolling text

Strategi
Video berapa besar tayangan video, berapa lama
Bunyi kekuatan bunyi, sound effects dan narration

perlu diseimbangkan. Animasi berdasarkan keperluan (establish a sequence, create emphasis, create a visual bridge ~transitions)

Pembangunan Blok-Blok Multimedia


Koordinasi dalam pengeluaran aset format file

multimedia Keperluan pelanggan dan keperluan aplikasi Media penyimpanan Kemampuan komputer pengguna dan komputer perancang

Proses Perancangan
Merujuk kepada integrasi media-media dan

mengarangnya dalam satu persembahan Melibatkan fasa desaign Untuk memastikan produk menepati tema dan diterima pengguna Pemilihan alat perancangan berdasarkan beberapa kriteria (keupayaan, jenis aplikasi, budget, waktu) Contoh: Macromedia Flash, Macormedia Director, Microsoft FrontPage, etc.