1. REKABENTUK SISTEM MULTIMEDIA INTERAKTIF/HYPERMEDIA

2. 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

3. CARTA ALIR PROSES PEMBANGUNAN APLIKASI MULTIMEDIA INTERAKTIF
Penakrifan Konsep (Rekabentuk Maklumat)
Rekabentuk Papancerita (Rekabentuk Interaktif; rekebentuk persembahan)
Pembangunan Inventori Aset
Fasa Implementasi/Pengarangan
Pengujian
Penghantaran

4. Penakrifan Konsep Objektif aplikasi, tema
Takrifkan pengguna sasaran & kehendak mereka
Struktur/organisasi maklumat – kandungan aplikasi
Cara dan medium penyampaian

5. 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

6. 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”

7. 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

8. 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.

9. Rekabentuk Struktur Maklumat
Beberapa jenis struktur maklumat:
Struktur Linear
Struktur Pokok
Struktur Rangkaian
Struktur Rangka Tunggal
Struktur Kombinasi

10. 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.

11. 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

12. Struktur Rangkaian
Struktur yang menyambungkan nod-nodnya tanpa mengikut hierarki susunan
Pengguna boleh menjelajah ruang informasi aplikasi dalam pelbagai arah dan cara

13. 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)

14. Struktur Rangka-Tunggal
3 bentuk struktur rangka tunggal
Bentuk Rangka Paparan
Bentuk Rangka Filter
Bentuk Rangka Lihat-dan-tunjuk

15. Bentuk Rangka Paparan
Bentuk rangka dimana unsur-unsru antaramuka kekal sama dan hanya unsur kandungan (content element) sahaja yang berubah mengikut pilihan pengguna

16. 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

17. 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.

18. 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)

19. 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

20. 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.

21. 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

22. 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

23. Rekabentuk Papancerita

24. Permasalahan Dalam Navigasi
Dua masalah utama dalam navigasi adalah
Hilang Orientasi/Disorientation
Overhead Kognitif/Cognitive Overhead -Overload

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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)

32. 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

33. 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.

34. 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)

35. 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

36. 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.