REKABENTUK SISTEM MULTIMEDIA INTERAKTIF/HYPERMEDIA

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 -gt
  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 -gtisu gambarajah (breakdown diagrams),
  carta alir, animasi, video, simulasi
• Pembelian -gtisu interaktif, stail yang sesuai
  dengan produk/perkhidmatan
• Pencarian maklumat -gtisu 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 -gt 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 -gt ciri-ciri buku digunakan
• Metafor folder dalam komputer -gt 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.