Download - Wret1101 10
![Page 1: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/1.jpg)
REKABENTUK SISTEM MULTIMEDIA
INTERAKTIF/HYPERMEDIA
![Page 2: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/2.jpg)
● 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
![Page 3: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/3.jpg)
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
![Page 4: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/4.jpg)
Penakrifan Konsep
● Objektif aplikasi, tema● Takrifkan pengguna sasaran & kehendak mereka● Struktur/organisasi maklumat – kandungan
aplikasi● Cara dan medium penyampaian
![Page 5: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/5.jpg)
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
![Page 6: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/6.jpg)
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”
![Page 7: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/7.jpg)
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
![Page 8: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/8.jpg)
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.
![Page 9: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/9.jpg)
Rekabentuk Struktur Maklumat
● Beberapa jenis struktur maklumat:– Struktur Linear– Struktur Pokok– Struktur Rangkaian– Struktur Rangka Tunggal– Struktur Kombinasi
![Page 10: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/10.jpg)
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.
![Page 11: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/11.jpg)
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
![Page 12: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/12.jpg)
Struktur Rangkaian
● Struktur yang menyambungkan nod-nodnya tanpa mengikut hierarki susunan
● Pengguna boleh menjelajah ruang informasi aplikasi dalam pelbagai arah dan cara
![Page 13: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/13.jpg)
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)
![Page 14: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/14.jpg)
Struktur Rangka-Tunggal
● 3 bentuk struktur rangka tunggal– Bentuk Rangka Paparan– Bentuk Rangka Filter– Bentuk Rangka Lihat-dan-tunjuk
![Page 15: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/15.jpg)
Bentuk Rangka Paparan
● Bentuk rangka dimana unsur-unsru antaramuka kekal sama dan hanya unsur kandungan (content element) sahaja yang berubah mengikut pilihan pengguna
![Page 16: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/16.jpg)
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
![Page 17: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/17.jpg)
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.
![Page 18: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/18.jpg)
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)
![Page 19: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/19.jpg)
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
![Page 20: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/20.jpg)
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.
![Page 21: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/21.jpg)
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
![Page 22: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/22.jpg)
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
![Page 23: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/23.jpg)
Rekabentuk Papancerita
![Page 24: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/24.jpg)
Permasalahan Dalam Navigasi
● Dua masalah utama dalam navigasi adalah– Hilang Orientasi/Disorientation– Overhead Kognitif/Cognitive Overhead -Overload
![Page 25: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/25.jpg)
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
![Page 26: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/26.jpg)
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
![Page 27: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/27.jpg)
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
![Page 28: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/28.jpg)
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
![Page 29: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/29.jpg)
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
![Page 30: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/30.jpg)
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
![Page 31: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/31.jpg)
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)
![Page 32: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/32.jpg)
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
![Page 33: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/33.jpg)
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.
![Page 34: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/34.jpg)
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)
![Page 35: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/35.jpg)
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
![Page 36: Wret1101 10](https://reader035.vdocuments.pub/reader035/viewer/2022062307/5552346eb4c9054c668b5413/html5/thumbnails/36.jpg)
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.