REKABENTUK SISTEM MULTIMEDIA

INTERAKTIF/HYPERMEDIA

● Aplikasi interaktif multimedia aka Hypermedia merupakan suatu applikasi multimedia yang membenarkan navigasi bukan setakat hypertext sahaja tapi juga unsur-unsur media yang lain spt imej, video dll.

Multimedia Hypermedia

CARTA ALIR PROSES PEMBANGUNAN APLIKASI MULTIMEDIA INTERAKTIF

Penakrifan Konsep (Rekabentuk Maklumat)

Rekabentuk Papancerita (Rekabentuk Interaktif; rekebentuk persembahan)

Pembangunan Inventori Aset

Fasa Implementasi/Pengarangan

Penghantaran

Pengujian

Penakrifan Konsep

● Objektif aplikasi, tema● Takrifkan pengguna sasaran & kehendak mereka● Struktur/organisasi maklumat – kandungan

aplikasi● Cara dan medium penyampaian

Perancangan Kandungan Aplikasi

● Jana senarai inventori maklumat● Jana perancangan projek – penjadualan

penyediaan dan pengeluaran asset, peruntukkan tugas kepada ahli kumpulan

● Tentukan susunatur/organisasi kandungan● Hasilkan carta alir struktur maklumat kandungan

aplikasi

Bagaimana untuk menstrukturkan maklumat?

● Tema, klasifikasi semulajadi, kumpulan (groupings), jujukan, etc.

● Pembelajaran – isu: pecahkan maklumat kepada topic (meaningful sections), contoh, pengujian dan penilaian

● Keseronokan – isu: rawak, kepelbagaian, “humour”, darjah interaktiviti yang tinggi, “surprises”

Organisasi Kandungan – Panduan Langkah

● Senaraikan semua kebarangkalian kategori kandungan● Mulakan proses “grouping” item berdasarkan topik (pilih

metakategori yang paling nyata sebagai paras atas)● Perhaluskan “grouping” topik tersebut dengan mencari dan

memadankan item-item yang sesuai● Susunatur “grouping” ke dalam bentuk struktur (linear,

pokok hierarki, composite, etc.) – capaian pautan● Buat kajian matlamat pengguna ke atas rekabentuk

aplikasi

Rekabentuk Struktur Maklumat

● Selalunya aplikasi akan menggunakan lebih dari satu struktur maklumat.

● Keputusan untuk memilih struktur sesuatu maklumat berdasarkan beberapa faktor:– Konsep & tujuan aplikasi– Ciri-ciri aplikasi– Isi kandungannya– Cara persembahan maklumat/isi kandungan aplikasi terbabit.

● 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 Maklumat

● Beberapa jenis struktur maklumat:– Struktur Linear– Struktur Pokok– Struktur Rangkaian– Struktur Rangka Tunggal– Struktur Kombinasi

Struktur Linear

● Penyusunan nod adalah secara linear samada satah menegak atau mendatar

● Struktur linear mampu mengetengahkan konsep zooming kepada informasi yang lebi spesifik

● Memerlukan pengguna 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 menawarkan kebolehan untuk loncat keluar dari jujukan 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 nampak ‘elegant’ dan dapat mengurangkan masalah pengguna hilang orientasi atau ‘cognitive overload’

● Berguna sekiranya aplikasi memerlukan pengguna membuat pilihan secara rawak sebelum menentukan jenis isi kandungan yang dikehendaki

● Ia membentuk satu struktur penyampaian maklumat bahagian depan yang ‘elegant’ kerana ia mudah dan menarik minat pengguna untuk menjelajah keseluruhan ruang aplikasi

● Multi-tetingkap (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-unsru antaramuka kekal sama dan hanya unsur kandungan (content element) sahaja yang berubah mengikut pilihan pengguna

Bentuk Rangka Filter

● Dalam rangka ini pengguna boleh memilih satu atau lebih ‘filter’ yang telah membahagikan maklumat atau isi kandungan mengikut jenis-jenis tertentu

● Beguna untuk aplikais yang pertambahan maklumat bagi sesuatu kategori bertambah secara dinamik

Bentuk Rangka Lihat-dan-Tunjuk

● Dalam bentuk ini, mula-mula informasi dipersembahkan pada skrin, kemudian bila pengguna click atas mana-mana kawasan yang menarik minat mereka, kawasan tersebut akan diperbesarkan dengan mungkin tambahan informasi atau media sebagai penerangan tambahan

● Aplikasi: pakej pembelajaran seperti belajar untuk mengenali bahagian-bahagian enjin kenderaan

● Kaedah utama adalah pop-up field, floating palettes atau tetingkap kecil.

Struktur Kombinasi

● Struktur yang menggabungkan dua atau lebih struktur-struktur lain

● Boleh terdiri daripada rangka tunggal sebagai skrin utama untuk memilih jalan (path) atau ‘filter’ kemudian struktur pokok digunakan untuk menjelajah path tersebut

● Berguna apabila informasi dalam aplikasi tidak secara semulajadi membentuk struktur yang jelas (samada linear, pokok atau sebagainya)

Kesan Matlamat Pengguna ke atas Rekabentuk Aplikasi

● Pemahaman ->isu: gambarajah (breakdown diagrams), carta alir, animasi, video, simulasi

● Pembelian ->isu: interaktif, stail yang sesuai dengan produk/perkhidmatan

● Pencarian maklumat ->isu: capaian pantas, kemudahan pencarian seperti “Table of Contents”, indeks, kekunci, menu; Elak masalah cognitive overload dan disorientation

Kesan Matlamat Pengguna ke atas Rekabentuk Aplikasi

● Pengguna & persekitaran– Siapa pengguna– Di mana & bagaimana produk akan digunakan– Bagaimana kemampuan peralatan komputer pengguna– Apakah yang dikehendaki pengguna

● Maklumat apakah yang diingini● Keutamaan maklumat-maklumat● Fungsi apakah yang diperlukan● Untuk apakah produk tersebut akan digunakan● Adakah pengguna telah menggunakan produk lain yang hampir sama?

Jika ada, apakah ciri-ciri yang pengguna sukai dan tidak sukai● Maklumat pengguna

– Sebaran umur, pengetahuan/pendidikan, jantina, dll.

Medium Penghantaran

● Bergantung kepada matlamat projek dan pengguna sasaran

● Klasifikasi– Medium awam = Internet (agak terbatas bergantung

kepada keupayaan browser, teknologi rangkaian yang digunakan, etc.)

– Medium persendirian = CD-ROM

Rekabentuk Papancerita

● Digunakan bagi merekabentuk interaksi/navigasi● Takrifkan laluan capaian dan navigasi -> laluan lengkap

keseluruhan isi kandungan maklumat aplikasi● Takrifkan setiap peristiwa yang berlaku pada setiap skrin

dan keadaan interaksi yang diingini● Takrifkan kawalan navigasi

Rekabentuk Papancerita

Permasalahan Dalam Navigasi

● Dua masalah utama dalam navigasi adalah– Hilang Orientasi/Disorientation– Overhead Kognitif/Cognitive Overhead -Overload

Disorientation (Hilang Orientasi)

● Situasi dimana pengguna hilang punca atau arah dalam lautan maklumat dalam aplikasi tidak linear dan menjadi tidak pasti di lokasi atau seksyen mana ia sekarang berada dalam aplikasi

● Kaedah mengatasi:– Hadkan bilangan pautan (links)– Gunakan penunjuk lokasi visual, peta global atau

tempatan 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 imej, metafor

● Metafor – cara mewakilkan sesuatu konsep baru yang bukan biasa ke dalam perwakilan yang biasa bagi pengguna melalui keadah “association” –– metafor buku -> ciri-ciri buku digunakan– Metafor folder dalam komputer -> ciri-ciri folder dalam

dunia nyata digunakan untuk penyimpanan fail

Merekabentuk Alat Bantuan bagi Navigasi – apa itu pautan?

● Pautan sebagai bahagian (teks, imej, dll) yang boleh pengguna klik untuk pergi ke nod seterusnya, aktifkan unsur media sperti audio, video dan sebagainya

● Aliran maklumat dari satu nod ke nod yang lain perlu dikenalpasti dan dianalisa untuk mewujudkan cara navigasi yang paling mudah diikuti dan tidak mengelirukan

● Kemudian pautan perlu dikenalpasti– Memudahkan pengguna mengenalpasti unsur manakah yang merupakan suatu

pautan dalam skrin paparan, pautan perlu kelihatan berbeza dan lebih menonjol secara visual

– Cth: warna pautan hyperteks berbeza dari teks yang lain– Mestilah konsisten sepanjang aplikasi untuk elak kekeliruan

● Bilangan pautan perlu dihadkan tidak melebihi 8 pautan pada satu-satu nod

Alat Bantu Navigasi

● Peta Imej● “You are here…” indicator (mukasurat & tajuk)● Butang navigasi● Progress indicators● Peralihan visual (zoom in, zoom out, wipes)● Bookmarks● Menu, table of contents, index, glossary● Fungsi Help

Kemudahgunaan (Usability) Dapat dicapai dengan:

● Kurangkan penjelajahan pengguna dalam ruang maklumat

● Elakkan wujudnya beberapa pautan yang ke skrin yang sama

● Elakkan keadaan dimana pengguna diberi terlalu banyak pilihan navigasi pada sesuatu skrin

● Beri maklumbalas dan “be forgiving”● Mudahlentur (flexibility)● Butang bagi fungsi yang sama diletakkan

berhampiran

Rekabentuk Persembahan

● Takrifkan tema dan stail visual● Rekabentuk paparan skrin● Bina unsur-unsur skrin● Bina unsur-unsur kawalan● Hasilkan prototaip● Stail antaramuka● Imej – 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 – mudahguna, stail visual● Jenis-jenis

– Objek berstruktur – tetingkap, borders/panels– Objek berinformasi – perkataan, gambar, etc– Objek berfungsian – butang kawalan

● Penggunaan grid● Scrolling text

Butang Kawalan yang baik

● Tidak perlu kelihatan seperti btang, boleh jadi sebahagian daripada imej itu sendiri

● Dapat menyampaikan fungsinya “at first glance”● Perlu disesuaikan dengan stail persembahan● Disesuaikan dengan kepentingan fungsinya. Cth:

exit button, next.

Strategi

● Video – berapa besar tetingkap video, berapa lama● Bunyi – paras kekuatan bunyi, sound effects dan

narration perlu diseimbangkan.● Animasi – berdasarkan keperluan (establish a

sequence, create emphasis, create a visual bridge ~transitions)

Pembangunan Blok-Blok Binaan Multimedia

● Koordinasi dalam pengeluaran aset – format fail-fail multimedia

● Keperluan pelanggan dan keperluan aplikasi● Media storan● Kemampuan perkakasan pengguna dan

perkakasan pembangunan

Proses Pengarangan

● Merujuk kepada integrasi media-media dan mengarangnya dalam satu persembahan

● Melibatkan fasa rekabentuk persembahan● Untuk memastikan produk menepati tema dan

diterimapakai● Pemilihan alat pengarangan berdasarkan beberapa

kriteria (keupayaan, jenis aplikasi, budget, tempoh masa)

● Contoh: Macromedia Flash, Macormedia Director, Microsoft FrontPage, etc.