Perancangan Multimedia Interaktif - Struktur Navigasi dan Flowchart

Kategori: Desain Media Interaktif | Tanggal posting: 2020-08-05 22:35:05 | Tanggal pengkinian: 2020-08-10 12:48:44 | Diposting oleh: Denny Muhardjo


Perancangan Multimedia Interaktif, struktur navigasi dan flowchart


Perancangan Multimedia Interaktif - Struktur Navigasi dan Flowchart

Multimedia interaktif adalah suatu multimedia yang dilengkapi dengan alat pengontrol serta dapat dioperasikan oleh pengguna, sehingga pengguna dapat memilih apa yang dikehendaki untuk proses selanjutnya. Ciri khas dari multimedia interaktif adalah mempunyai beberapa navigasi menggunakan GUI (Graphical User Interface), baik berupa icon, button, pop-up menu, scroll bar, dan lainnya, yang dapat dioperasikan oleh pengguna sebagai sarana untuk menjelajah berbagai jendela informasi dengan bantuan saran hyperlink.


Tahap-tahap perancangan multimedia interaktif:

  1. Merancang konsep.
    Dasar pemikiran dan kreatifitas yang sesuai dengan tujuan dibuatnya aplikasi multimedia interaktif.
  2. Merancang isi.
    Merancang isi atau konten dari aplikasi. Menentukan apakah aplikasi akan memuat semua elemen atau hanya sebagian elemen gambar, suara, teks, animasi, dan video.
  3. Merancang struktur aplikasi.
    Diperlukan sebagai penjelas alur program dan komponen program. Termasuk membuat diagram alir (flowchart) dan storyboard.
  4. Merancang naskah.
    Menjelaskan isi dari teks, kata, atau kalimat yang terdapat dalam aplikasi.
  5. Merancang grafik.
    Pembuatan dan pemilihan grafik yang akan mendukung dialog dan latar belakang aplikasi multimedia.

 

Jenis-Jenis Struktur Navigasi

1. Struktur Linier

Struktur linier merupakan struktur yang hanya mempunyai satu rangkaian cerita berurut. Biasanya digunakan untuk multimedia presentasi karena tidak diperlukan adanya interaksi, hanya menampilkan data atau informasi saja.

Struktur Linier

 

2. Struktur Hierarchical

Struktur navigasi hierarchical (hirarki/bercabang/bertingkat) adalah suatu struktur yang mengandalkan percabangan untuk menampilkan informasi yang berdasarkan kriteria tertentu. Informasi pada halaman utama disebut parent dan informasi pada cabangnya disebut child.

 

3. Struktur Non-Linier

Struktur linier merupakan pengembangan dari struktur navigasi hirarki. Perbedaannya ada pada percabangannya, struktur linier walaupun terdapat percabangan akan tetapi setiap tampilan mempunyai kedudukan yang sama tidak ada master page dan slave page.

Struktur non-linier

 

4. Struktur Composite

Struktur composite merupakan struktur gabungan dari ketiga struktur sebelumnya. Struktur ini juga disebut dengan struktur navigasi bebas. Kelebihan dari struktur navigasi ini adalah suatu aplikasi mampu memberikan keterkaitan informasinya lebih baik.

Struktur-Composite

 

Flowchart (Diagram Alir)

Flowchart adalah desain model alur berpikir isi program/aplikasi. Tujuan flowchart adalah mendapatkan suatu alur kerja yang komunikatif, mengetahui suatu alur dan jalur proses kerja yang dapat dengan mudah dipahami dan dilalui serta diikuti oleh pengguna secara menyeluruh dan bermakna.

Tujuan flowchart:

  1. Menggambarkan urutan operasi suatu program.
  2. Memfasilitasi komunikasi antar pembuat program dengan orang bisnis.
  3. Membantu dalam pemahaman logika yang kompleks.
  4. Membantu dalam penulisan atau implementasi program.
  5. Membantu menjelaskan program kepada orang lain.
  6. Merupakan dokumentasi program yang kompleks.

 

Simbol flowchart yang umum

BentukNamaKeterangan
Garis atau tanda panahMenunjukkan urutan proses. Tanda panah digunakan untuk aliran yang tidak standar yaitu aliran yang bukan aliran dari atas ke bawah atau dari kiri ke kanan.
TerminalMenunjukkan awal atau akhir dari program atau sub-proses. Biasanya berisi kata “Mulai” atau “Selesai”. Atau istilah lain yang menunjukkan dimulainya atau diakhirinya proses.


ProsesMewakili sebuah operasi yang akan merubah nilai, bentuk, atau lokasi dari data.
KeputusanMenunjukkan operasi kondisional yang menentukan satu dari dua jalur yang akan dipakai program. Operasi ini biasanya adalah pertanyaan “ya/tidak” atau “benar/tidak”.
Input/OutputMenunjukkan proses peng-input-an dan peng-output-an data, contohnya untuk memasukkan atau menampilkan data.
Anotasi (komentar)Mengindikasikan informasi tambahan tentang suatu langkah di dalam program. Digambarkan dengan sebuah segi empat terbuka dengan garis utuh atau garis putus-putus yang menghubungkannya dengan simbol tertentu di flowchart.


Predefined processPredefined process (proses yang sudah ditentukan sebelumnya) menunjukkan proses yang sudah didefinisikan di tempat lain.
On-page ConnectorOn-page Connector (konektor di dalam satu halaman) adalah sepasang konektor berlabel yang digunakan untuk menggantikan garis yang panjang atau yang membingungkan. Digambarkan dengan lingkaran kecil dengan sebuah huruf di dalamnya.


Off-page ConnectorOff-page Connector (konektor di luar halaman) adalah konektor berlabel yang digunakan ketika targetnya berada di halaman lain.

 

Simbol Flowchart lainnya

BentukNamaKeterangan
File data atau basis dataData yang diwakili oleh silinder (disk drive).
Dokumen (tunggal)Dokumen tunggal.
Dokumen (lebih dari satu)Dokumen yang jumlahnya lebih dari satu.
Operasi ManualMenunjukkan suatu operasi atau penyesuaian proses yang hanya bisa dilakukan secara manual.
Input ManualInput manual
Persiapan atau InisialisasiAwalanya digunakan untuk langkah-langkah seperti menyiapkan saklar atau menginisialisasi sebuah routine (serangkaian kode yang digunakan berkali-kali dalam sebuah program).

 

Flowchart juga bisa dikatakan sebagai perencanaan suatu tindakan atau perencanaan atas kemungkinan-kemungkinan yang mungkin terjadi.

Flowchart dibutuhkan dalam kehidupan sebagai penyederhanaan rencana dari tindakan-tindakan yang akan kita lakukan. Ketika ingin melakukan sesuatu jangan terlalu banyak berharap bahwa semua tindakan akan berjalan lancar, pasti akan ada kesulitan atau rintangan-rintangan. Dengan melakukan suatu perencanaan kita bisa mempersiapkan diri terlebih dahulu ketika ada kesulitan/rintangan/hambatan yang menghadang.

Buat perencanaan (hidup) dengan hasil akhir yang ideal terlebih dahulu, kemudian baru pikirkan tentang kesulitan/rintangan/hambatan yang mungkin terjadi. Pikirkan apa yang harus dilakukan ketika muncul suatu kesulitan/rintangan/hambatan. Pikirkan apa solusi idealnya, apa solusi yang realistis, dan apa yang harus dilakukan jika tidak menemukan solusinya.

"Hidup ini butuh perencanaan karena hidup ini adalah pilihan"

 

Contoh-Flowchart:

1. Flowchart pergi ke sekolah menggunakan sepeda

Contoh-Flowchart-pergi-ke-sekolah

Pada gambar flowchart di atas, tergambar flowchart tentang perencanaan pergi ke sekolah menggunakan sepeda. Dalam flowchart ini bisa dilihat walaupun sudah berancana naik sepeda, sudah dipersiapkan untuk kemungkinan jika sepeda dalam kondisi tidak baik atau tidak layak maka harus menggunakan pilihan naik angkot, naik ojek atau menggunakan pilihan lainnya.

Penjelasan logika flowchart pergi ke sekolah menggunakan sepeda:

  1. Memeriksa kondisi sepeda, apakah kondisinya baik atau tidak?
  2. Jika kondisinya baik, bisa pergi ke sekolah menggunakan sepeda.
  3. Jika kondisinya tidak baik, apakah menggunakan angkot?
  4. Kalau menggunakan angkot, berarti ke sekolah menggunakan angkot.
  5. Kalau tidak menggunakan angkot, apakah menggunakan ojek?
  6. Kalau menggunakan ojek, berarti cari ojek kemudian berangkat ke sekolah menggunakan ojek.
  7. Kalau tidak menggunakan ojek, berarti cari pilihan lain untuk berangkat ke sekolah.

 

2. Flowchart makan sarapan

Contoh-flowchart-sarapan

Pada gambar flowchart di atas, tergambar flowchart tentang perencanaan seseorang untuk makan sarapan. Di flowchart ini dimulai dengan memeriksa apakah sarapan sudah tersedia, kemudian dipersiapkan rencana jika tidak ada sarapan apa yang harus dilakukan. Dipersiapkan rencana memasak sarapan dan beli sarapan jika memang sarapan tidak tersedia, juga dipersiapkan rencana untuk tidak sarapan

Penjelasan logika flowchart makan sarapan:

  1. Memeriksa apakah makanan tersedia atau tidak?
  2. Jika tersedia, sarapan dapat dimulai.
  3. Jika tidak tersedia, apakah ingin memasak sarapan terlebih dahulu atau tidak?
  4. Jika tidak ingin memasak, apakah tetap ingin sarapan?
  5. Jika tetap ingin sarapan, berarti harus beli sarapan.
  6. Jika tidak ingin sarapan, berarti tidak sarapan.
  7. Jika ingin memasak, periksa apakah ada bahan makanan?
  8. Jika ada bahan makanan, berarti masak sarapan dan kemudian mulai makan sarapan.
  9. Jika tidak ada bahan makanan, apakah tetap ingin sarapan?
  10. Jika tetap ingin sarapan, berarti harus beli sarapan atau beli bahan makanan.
  11. Jika tidak ingin sarapan, berarti tidak sarapan.

 

3. Flowchart login

Contoh-form-login

Di sini kita akan mempelajari bagaimana membuat flowchart untuk form login menggunakan contoh gambar form login di atas.

  1. Tentukan tujuan form tersebut, apakah untuk login?
  2. Tentukan syarat-syarat untuk login. Apakah hanya memasukkan alamat surel dan kata kunci saja, atau ada syarat lain?
  3. Apakah syarat-syarat tersebut harus secara tepat dan akurat diperiksa atau tidak?
  4. Apakah yang akan terjadi jika pengguna tidak memenuhi syarat-syarat tersebut?
  5. Apakah masing-masing syarat akan diperlakukan berbeda?
  6. Apakah masing-masing kesalahan input akan menghasilkan kejadian/event yang berbeda?
  7. Apakah pengguna dapat terus mencoba untuk login? Jika tidak, sampai berapa kali? Dan apa yang akan terjadi ketika pengguna sudah melewati batas tersebut?

 

 Contoh flowchart login

Pada gambar flowchart di atas tergambar alur ketika seorang pengguna ingin masuk atau login ke dalam sistem. Di sini digambarkan apa yang akan terjadi ketika pengguna salah memasukkan username, password, dan menceklis Google Re-Captch. Dan tergambar pengecekan berapa kali pengguna bisa mencoba untuk masuk atau login.

Penjelasan flowchart form login:

  1. Pengguna memasukkan username dan password.
  2. Pengguna menceklist Google Re-Captcha. Proses ditangani oleh Google Re-Captcha.
  3. Pengecekan username, password dan output dari Google Re-Captcha.
  4. Jika sukses, akan tampil pesan “Login Sukses” dan pengguna akan diarahkan ke menu utama.
  5. Jika galat/error, akan ada pengecekan berapa kali pengguna sudah mencoba.
  6. Jika belum 3 kali, maka akan tampil pesan kesalahan dan pengguna dapat mencoba kembali memasukkan username, password, dan menceklist Google Re-Captcha.
  7. Jika sudah 3 kali, maka penguna akan di-banned.

 

Daftar Pustaka:

  1. Ricky Firmansyah. (2019). Desain Media Interaktif SMK/MAK untuk Kelas XII. Bandung: HUP.
  2. Nanik Sri Rahayu. (2013). Desain Multimedia untuk SMK/MAK Kelas XI. Kementrian Pendidikan dan Kebudayaan Republik Indonesia.
  3. https://en.wikipedia.org/wiki/Flowchart

Affiliates:

Cloudmatika | Instant Trusted Advance Ardhosting | faster, reliable webhosting