Multimedia Interaktif KFD

Multimedia Interaktif ini dibuat dengan 4 menu utama yaitu :

1. Kompetensi Inti/ Kompetensi dasar
2. Tujuan Pembelajaran
3. Materi
4. Latihan soal

Materi yang dibahas adalah Komposisi Foto Digital dengan beberapa contoh pengambilan gambar

Multimedia Interaktif karya Rosalina XII Multi 2

Multimedia Interaktif ini terdiri dari :

1. halaman opening
2. ki/kd
3. materi
4. video
5. quiz dan
6. profil

Materi yang dibahas adalah tentang Prinsip-prinsip Tata Letak

Semua tombol berfungsi dengan baik, sedangkan untuk video belum bisa ditampilkan karena kesulitan dalam hosting 

Multimedia Interaktif karya Rahman kls XII Multi 1

Multimedia Interaktif ini terdiri dari :

1. halaman opening
2. ki/kd
3. materi
4. video
5. quiz dan
6. profil

Materi yang dibahas adalah tentang Penggabungan Gambar dan Teks berbasis Vector
Semua tombol berfungsi dengan baik, sedangkan untuk video belum bisa ditampilkan karena kesulitan dalam hosting

Media Interaktif karya Shella Rafika kls XII Multi 2

Multimedia Interaktif ini terdiri dari :

1. halaman opening
2. ki/kd
3. materi
4. video
5. quiz dan
6. profil

Materi yang dibahas adalah tentang Konsep Multimedia Interaktif. Ada fitur terbaru yaitu penggunaan drop down menu dalam pemilihan menu
Semua tombol berfungsi dengan baik, sedangkan untuk video belum bisa ditampilkan karena kesulitan dalam hosting

Multimedia Interaktif karya Fani Aprilla kls XII Multi 1

Multimedia Interaktif ini terdiri dari :

1. halaman opening
2. ki/kd
3. materi
4. video
5. quiz dan
6. profil

Materi yang dibahas adalah tentang Menerapkan Prinsip Gambar Bentuk
Semua tombol berfungsi dengan baik, sedangkan untuk video belum bisa ditampilkan karena kesulitan dalam hosting

Media Interaktif karya Willy Yanda kls XII multi 2

Multimedia Interaktif ini terdiri dari :

1. halaman opening
2. ki/kd
3. materi
4. video
5. quiz dan
6. profil

Materi yang dibahas adalah tentang Evaluasi dan review produk web
Semua tombol berfungsi dengan baik, sedangkan untuk video belum bisa ditampilkan karena kesulitan dalam hosting

Media Interaktif Karya M. Reza Yunadi XII Multi 1

Multimedia Interaktif ini terdiri dari :

1. halaman login
2. ki/kd
3. materi
4. video
5. quiz dan
6. profil

Materi yang dibahas adalah tentang Pengujian Perangkat Komputer
Semua tombol berfungsi dengan baik, sedangkan untuk video belum bisa ditampilkan karena kesulitan dalam hosting

Media Interaktif karya Adiwiguna XII Multi 1

Multimedia Interaktif ini terdiri dari :

1. halaman opening
2. ki/kd
3. materi
4. video
5. quiz dan
6. profil

Materi yang dibahas adalah tentang Perakitan Komputer, dalam penyampaian materi juga digunakan drop down menu
Semua tombol berfungsi dengan baik, sedangkan untuk video belum bisa ditampilkan karena kesulitan dalam hosting

Ujian Blok 1

Ujian Blok 1

Untuk mengakhiri materi 1 : Konsep Multimedia Interaktif, maka silahkan ikuti Ujian Blok berikut:

Ujian Blok 2

Ujian Blok 2

Untuk mengakhiri Materi 2: Perancangan Alur Multimedia Interaktif, silakan ikuti ujian blok 2 di link berikut :

Ujian Blok 2

Ujian Blok 3

Ujian Blok 3

Untuk mengakhiri materi 3 : Prinsip Desain User Interface, silakan mengikuti ujian Blok 3 di link berikut :

Ujian Blok 3

Materi 3: Prinsip Desain User Interface

Antarmuka pemakai (User Interface) merupakan mekanisme komunikasi antara pengguna (user) dengan sistem. Antarmuka pemakai dapat menerima informasi dari  pengguna  dan memberikan  informasi kepada  pengguna  untuk membantu mengarahkan alur penelusuran masalah sampai ditemukan suatu solusi. Sebuah Sistem antarmuka pengguna memiliki piranti masukan (seperti keyboard, mouse, dan media input lainnya), peranti keluaran (seperti monitor, printer), masukan dari pengguna (seperti garis, gerakan mouse dan ketikan keyboard) dan hasil yang dikeluarkan oleh komputer (seperti grafik, bunyi dan tulisan).

Terdapat beberapa prinsip yang harus diperhatikan dalam pembuatan suatu antarmuka sebuah aplikasi, diantaranya user compatibility, product compatibility, task compatibility, workflow compatibility, consistency, familiarity, simplicity.

1. User compatibility
   Antarmuka merupakan topeng dari sebuah sistem atau sebuah pintu gerbang  masuk  ke  sistem  dengan  diwujudkan  ke  dalam  sebuah  aplikasi perangkat lunak. Oleh karena itu sebuah perangkat lunak seolah-olah mengenal usernya, mengenal karakteristik usernya, dari sifat sampai kebiasaan manusia secara umum. Desainer harus mencari dan mengumpulkan berbagai karakteristik serta sifat dari user karena antarmuka harus disesuaikan dengan user yang jumlahnya bisa jadi lebih dari 1 dan mempunyai karakter yang berbeda.   Hal tersebut harus terpikirkan oleh desainer dan tidak dianjurkan merancang antarmuka dengan didasarkan pada dirinya sendiri.
2. Product compatibility
   Sebuah aplikasi yang menggunakan antarmuka harus sesuai dengan sistem aslinya. Seringkali sebuah aplikasi menghasilkan hasil yang berbeda dengan sistem manual atau sistem yang ada. Hal tersebut sangat tidak diharapkan dari perusahaan karena dengan adanya aplikasi  perangkat lunak diharapkan dapat menjaga produk yang dihasilkan dan mampu menghasilkan produk yang jauh lebih baik.
3. Task compatibility 
   Sebuah aplikasi yang menggunakan antarmuka harus mampu membantu para user dalam menyelesaikan tugasnya. Semua pekerjaan serta tugas-tugas user  harus  diadopsi  di  dalam  aplikasi  tersebut  melalui  antarmuka.  Sebisa mungkin user tidak dihadapkan dengan kondisi memilih dan berpikir, tapi user dihadapkan dengan pilihan yang mudah dan proses berpikir dari tugas-tugas user dipindahkan dalam aplikasi melalui antarmuka. Contoh : User hanya klik set up, tekan tombol next, next, next, finish, ok untuk menginstal suatu perangkat lunak.
4. Workflow compatibility
   Sebuah aplikasi sistem sudah pasti mengapdopsi sistem manualnya dan didalamnya tentunya terdapat urutan kerja dalam menyelesaikan pekerjaan. Dalam sebuah aplikasi, software engineer harus memikirkan berbagai runutan- rununtan pekerjaan yang ada pada sebuah sistem. Jangan sampai user mengalami kesulitan dalam menyelesaikan pekerjaannya karena user mengalami kebingungan ketika urutan pekerjaan yang ada pada sistem manual tidak ditemukan pada software yang dihadapinya. Selain itu user jangan dibingungkan dengan pilihan-pilihan menu yang terlalu banyak dan semestinya menu-menu merupakan urutan dari runutan pekerjaan. Sehingga dengan workflow compatibility dapat membantu seorang user dalam mempercepat pekerjaannya.
5. Consistency
   Sebuah sistem harus sesuai dengan sistem nyata serta sesuai dengan produk yang dihasilkan. Oleh karena itu software engineer harus memperhatikan hal-hal yang bersifat konsisten pada saat merancang aplikasi khususnya antarmuka, contoh : penerapan warna, struktur menu, font, format desain yang seragam pada antarmuka di berbagai bagian, sehingga user tidak mengalami kesulitan pada saat berpindah posisi pekerjaan atau berpindah lokasi dalam menyelesaikan pekerjaan. Hal itu didasarkan pada karakteristik manusia yang mempunyai pemikiran yang menggunakan analogi serta kemampuan manusia dalam hal memprediksi. Contoh : keseragaman tampilan toolbar pada Word, Excell, PowerPoint, Access hampir sama.
6. Familiarity
   Sifat manusia mudah mengingat dengan hal-hal yang sudah sering dilihatnya   atau   didapatkannya.   Secara   singkat   disebut   dengan   familiar. Antarmuka sebisa mungkin didesain sesuai dengan antarmuka pada umumnya, dari segi tata letak, model dan sebagainya. Hal ini dapat membantu user cepat berinteraksi dengan sisem melalui antarmuka yang familiar bagi user. 
7. Simplicity 
   Kesederhanaan perlu diperhatikan pada saat membangun antarmuka. Tidak selamanya antarmuka yang memiliki menu banyak adalah antarmuka yang baik.  Kesederhanaan  disini  lebih  berarti  sebagai  hal  yang  ringkas  dan  tidak terlalu berbelit. User akan merasa lelah dan bosan jika pernyataan, pertanyaan dan menu bahkan informasi yang dihasilkan terlalu panjang dan berbelit. User lebih menyukai hal-hal yang bersifat sederhana tetapi mempunyai kekuatan/ bobot.
8. Direct manipulation
   User berharap aplikasi yang dihadapinya mempunyai media atau tools yang dapat digunakan untuk melakukan perubahan pada antarmuka tersebut. User   ingin   sekali   aplikasi   yang   dihadapannya   bisa   disesuaikan   dengan kebutuhan, sifat dan karakteristik user tersebut. Selain itu, sifat dari user yang suka merubah atau mempunyai rasa bosan. Contoh : tampilan warna sesuai keinginan (misal pink) pada window bisa dirubah melalui desktop properties, tampilan skin winamp bisa diubah, dan lain-lain.
9. Control
   Prinsip control ini berkenaan dengan sifat user yang mempunyai tingkat konsentrasi yang berubah-ubah. Hal itu akan sangat mengganggu proses berjalannya sistem. Kejadian salah ketik atau salah entry merupakan hal yang biasa bagi seorang user.  Akan tetapi hal itu akan dapat mengganggu sistem dan akan berakibat sangat fatal karena salah memasukkan data 1 digit/1 karakter saja informasi yang dihasilkan sangat dimungkinkan salah. Oleh karena itu software engineer haruslah merancang suatu kondisi yang mampu mengatasi dan  menanggulangi  hal-hal  seperti  itu.  Contoh:  “illegal  command”,  “can’t recognize input” sebagai portal jika terjadi kesalahan.
10. Flexibility
    Fleksibel merupakan bentuk dari dari solusi pada saat menyelesaikan masalah. Software engineer dapat membuat berbagai solusi penyelesaian untuk satu masalah. Sebagai contoh adanya menu, hotkey, atau model dialog yang lainnya. 

Ada  5  tipe  antarmuka  yang  dapat  digunakan  untuk  menjembatani interaksi antara pengguna dengan aplikasi multimedia interaktif, yaitu direct manipulation, menu selection, form fill in, command language dan natural language.

1. Direct manipulation – pengoperasian secara langsung 
   Interaksi langsung dengan objek pada layar. Misalnya delete file dengan memasukkannya ke trash. Kelebihannya adalah waktu pembelajaran pengguna sangat singkat, umpan balik langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat. Kekurangannya adalah  antarmuka  tipe  ini  rumit  dan  memerlukan  banyak  fasilitas  pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek.

   

   Direct Manipulation

2. Menu selection – pilihan berbentuk menu 
   Memilih perintah dari daftar yang disediakan. Misalnya saat klik kanan dan memilih aksi yang dikehendaki. Kelebihannya adalah pengguna tidak perlu ingat nama perintah, pengetikan minimal, dan tingkat kesalahan  rendah. Kekurangannya adalah tidak ada logika AND atau OR, perlu ada struktur menu jika banyak pilihan, dan menu dianggap lambat oleh pengguna ahli dibanding command language.

   

   Menu Selection

3. Form fill-in – pengisian form. 
   Mengisi area-area pada form. Kelebihannya masukan data yang sederhana dan mudah dipelajari. Kekurangannya memerlukan banyak tempat di layar, harus menyesuaikan dengan form manual dan kebiasaan pengguna.

   

   Form fill in

4. Command Language – perintah tertulis.
   Menuliskan perintah yang sudah ditentukan pada program. Kelebihannya perintah diketikan langsung pada sistem, dapat diterapkan pada terminal yang murah, kombinasi perintah dapat dilakukan. Misalnya copy file dan rename nama file. Kekurangannya perintah harus dipelajari dan diingat cara penggunaannya, tidak cocok untuk pengguna biasa, sering terjadi kesalahan menggunakan perintah, perlu ada sistem pemulihan kesalahan.

   

   Command Language

5. Natural language – perintah dengan bahasa alami.
   Menggunakan  bahasa  alami  untuk  mendapatkan  hasil.  Contoh:  search engine  di  Internet.  Kelebihannya  perintah  dalam  bentuk  bahasa  alami, dengan kosa kata yang terbatas (singkat) misalnya kata kunci yang kita tentukan  untuk  dicari  oleh  search  engine.  Kekurangannya  tidak  semua sistem cocok menggunakan ini.

   

   Natural language

   (http://www.intellexer.com/natural_language.html)

Untuk lebih memahami materi ini silahkan disimak video berikut 

Materi 2: Desain/ perancangan alur utk multimedia interaktif

Analisa Perancangan Multimedia Interaktif

Dalam mengembangkan multimedia interaktif, ada beberapa hal yang harus diperhatikan, diantaranya :

• Mendefinisikan kebutuhan; analisis sistem mendefinisikan masalah kebutuhan pemakai dan menentukan bahwa pemecahannya memerlukan multimedia
• Studi kelayakan; suatu studi yang digunakan untuk menentukan kemungkinan apakan pengembangan proyek sistem multimedia layak diteruskan atau tidak.
• Analisis kebutuhan sistem; apakah sistem yang sudah ada sudah memenuhi kebutuhan minimal.
• Merancang konsep; analisis sistem dan pemakai mungkin bekerjasama denganprofesional komunikasi seperti produser, sutradara dan teknisi video, terlibat dengan rancangan konsep yang menentukan keseluruhan pesan dan memeriksa urutan utama.
• Merancang isi; pengembangan terlihat dalam rancangan isi dengan menyiapkan spesifikasi aplikasi yang rinci. pada tahap inilah media dipilih.
• Menulis naskah; dialog atau semua elemen terinci dari urutan yang ditentukan.
• Merancang grafik; grafik yang dipilih mendukung media. Latar belakang dan perlengkapan yang perlu digunakan dalam merancang media.
• Memproduksi sistem; Pengembangan sistem produksi berbagai bagian dan menyatukannya dengan sistem.
• Melakukan tes pemakai; Analisis sistem mendidik pemakai dalam menggunakan sistem dan memberikan kesempatan bagi pemakai untuk akrab dengan semua fitur.
• Menggunakan sistem; Pemakai mengunakan sistem.
• Memelihara sistem; seperti sistem berbasis komputer lain, sistem multimedia harus dipelihara perbedaan utamanya adalah pemakai tidak dapat diharapkan untuk melakukan pemeliharaan, memelihara sistem merupakan tugas dari spesialis dan profesional

Tahapan –tahap dalam perancangan dalam sistem multimedia:

1. Merancang konsep; perancangna konsep diperlukan sebagai dasar pemikiran dan kreatifitas yang sesuai dengan tujuan dibuatnya aplikasi multimedia interaktif tersebut.
2. Merancang isi; aplikasi yang dibuat akan diisi dengan beberapa elemen, antara lain gambar, suara, teks, animasi dan video.
3. Merancang struktur aplikasi; diperlukan sebagai penjelas alur program dan komponen yang dirancang aplikasi dan harus sesuai. seperti halnya dalam membuat diagram alir (flow chart) dan story board.
4. Perancangan Naskah; Perancangan naskah menjelaskan isi dari teks,kata atau kalimat yang terdapatpada aplikasi.
5. Perancangan Grafik; bentuk kegiatan yang meliputi pemilihan grafik yangmendukung dialog dan latar belakang fasilitas aplikasi multimedia yang akan digunakan.
6. Pada tahap implementasi, ada beberapa tahap yang dikerjakan dalam membangun aplikasi multimedia interaktif, diantaranya adalah produksi sistem (aplikasi), membuat pembelajaran interaktif, pengetesan sistem (Black box testing) serta memelihara sistem.

Storyboard merupakan sebuah dokumen yang penting dalam produksi multimedia interaktif. Storyboard memuat instruksi untuk pemrograman, script audio, dan deskripsi detail element-elemen visual seperti teks, video, gambar dan animasi. Sebelum membuat Storyboard, disarankan untuk membuat cakupan storyboard terlebih dahulu dalam bentuk rincian naskah yang kemudian akan dituangkan detail grafik dan visual untuk mempertegas dan memperjelas tema. Untuk mempermudah  membuat  proyek,  maka  harus  dibuat  sebuah  rencana kasar sebagai dasar pelaksanaan. Outline dijabarkan dengan membuat point- point pekerjaan yang berfungsi membantu untuk mengidentifikasi material apa saja yang harus dibuat, didapatkan, atau disusun.

Terdapat  beberapa  ketentuan  umum  dalam  pembuatan   storyboard multimedia interaktif:

1. Bentuk-bentuk   gambar   yang   disiapkan   disertai   dengan   penjelasan- penjelasan atau narasi.
2. Penulisan storyboard ini sebaiknya diisi unsur visual terlebih dahulu. 
3. Narasi  biasanya  disusun  kemudian  untuk  melengkapi  hal-hal  yang  sulit diungkapkan dalam bentuk visual.
4. Bahasa   yang   digunakan   adalah   bahasa   lisan   bukan   bahasa  tulisan(terutama yang harus dibacakan oleh narrator).
5. Struktur  kalimat  sederhana,  hindari  kalimat-kalimat  yang  panjang  dan berbelit.
6. Simbol dalam bentuk yang sederhana, jelas maknanya serta sudah diketahui oleh siswa.
7. Gambar   dalam   bentuk   yang   menarik,   warna   kontras   (kecuali   untuk background) komposisi yang tepat dan sederhana, mudah dibaca dan dipahami.

Terdapat beberapa format yang biasa digunakan dalam membuat storyboard   multimedia   interaktif,   yaitu   format   kartu,   double   coloum   dan landscape.

1. Kartu 
   Visual berisi gambar berbentuk foto atau grafis.



Storyboard format kartu

2. Double Coloumn

Storyboard format double coloumn tekstual

storyboard format double coloumn visual

Penggunaan storyboard jelas akan mempermudah pelaksanaan dalam proses produksi nantinya. Format apapun yang dipilih untuk storyboard, informasi berikut harus dicantumkan:

• Sketsa atau gambaran layar, halaman atau frame.
• Warna, penempatan dan ukuran grafik, jika perlu.
• Teks asli, jika ditampilkan pada halaman atau layar.
• Warna, ukuran dan tipe font jika ada teks.
• Narasi jika ada.
• Animasi jika ada.
• Video, jika ada.
• Audio, jika ada.
• Interaksi dengan pengguna, jika ada.
• Hal-hal yang perlu diketahui oleh staf produksi.

Storyboard dibuat oleh desainer instruksional dengan memperhatikan masukan dari anggota pengembang produk yang lain misal videographer, animator,  programmer. Storyboard  menjadi  dokumen  utama  desain  yang menjadi acuan bagi seluruh anggota tim dalam membuat produk multimedia interaktif.

Berikut adalah contoh pembuatan storyboard dengan menggunakan format double coloumn visual

contoh storyboard media interaktif berbasis aplikasi

Sebagai bentuk raw material, pemilihan bentuk storyboard lebih di tujukan pada bagaimana menampilkan bentuk yang paling mudah dipahami oleh animator atau bagian produksi. Berbeda dengan media interaktif berbasis aplikasi, media interaktif berbasis halaman web dirancang melalui sebuah flowchart (diagram alir).

flowchart multimedia interaktif berbasis web

untuk contoh pembuatan storyboard dapat dilihat dari video berikut :