Presentation is loading. Please wait.

Presentation is loading. Please wait.

REKABENTUK SISTEM MULTIMEDIA INTERAKTIF/HYPERMEDIA.

Similar presentations


Presentation on theme: "REKABENTUK SISTEM MULTIMEDIA INTERAKTIF/HYPERMEDIA."— Presentation transcript:

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 Penghantaran Pengujian

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 Linear – Struktur Pokok Struktur Pokok – Struktur Rangkaian Struktur Rangkaian – Struktur Rangka Tunggal Struktur Rangka Tunggal – Struktur Kombinasi 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 Paparan – Bentuk Rangka Filter Bentuk Rangka Filter – Bentuk Rangka Lihat-dan-tunjuk 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 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.


Download ppt "REKABENTUK SISTEM MULTIMEDIA INTERAKTIF/HYPERMEDIA."

Similar presentations


Ads by Google