<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'> </script> 02 PERANCANGAN ALUR

PERANCANGAN ALUR

A. KOMPETENSI DASAR

3.2 Memahami (desain/ perancangan alur) untuk multimedia interaktif berbasis halaman web dan media interaktif

4.2. Membuat (desain/perancangan alur) untuk multimedia interaktif berbasis halaman web dan media interaktif

B. FLOWCHART

Flowchart adalah representasi visual dari urutan langkah dan hubungan antar proses beserta instruksinya. Setiap langkah dalam urutan dicatat dalam bentuk diagram. Gambaran ini dinyatakan dengan simbol, dimana setiap simbol menggambarkan proses tertentu. Sedangkan hubungan antar proses digambarkan dengan garis penghubung dan arah panah, sehingga urutan proses kegiatan menjadi lebih jelas dan memungkinkan siapa saja untuk bisa membaca bagan alur secara logis mengikuti proses dari awal hingga akhir.

Desain dan konstruksi yang tepat, flowchart dapat mengkomunikasikan langkah-langkah dalam suatu proses dengan sangat efektif dan efisien.

Flowchart menggunakan bentuk khusus untuk mewakili berbagai jenis tindakan atau langkah-langkah dalam suatu proses. Garis dan panah menunjukkan urutan langkah dan hubungan di antara bagian ini dikenal dengan nama simbol flowchart. Di bawah ini merupakan daftar simbol flowchart, nama beserta fungsinya.

Untuk pengolahan data dengan komputer, simbol-simbol dapat dirangkum dari urutan dasar untuk pemecahan suatu masalah, yaitu :

1. START : berisi instruksi untuk persiapan peralatan yang diperlukan sebelum menangani pemecahan masalah

2. READ : berisi instruksi untuk membaca data dari suatu peralatan input

3. PROCESS : berisi kegiatan yang berkaitan dengan pemecahan persoalan sesuai dengan data yang dibaca

4. WRITE : berisi instruksi untuk merekam hasil kegiatan ke peralatan output

5. END : mengakhiri kegiatan pengolahan

Flowchart

Dalam gambar di atas, suatu flowchart harus terdapat proses persiapan dan proses akhir, serta menjadi topik dalam pembahasan ini adalah tahap proses. Walaupun tidak ada kaidah-kaidah yang baku dalam penyusunan flowchart, ada yang harus diperhatikan dalam pembuatan flowchart yaitu :

1. Hindari pengulangan proses yang tidak perlu dan logika yang berbelit sehingga jalannya proses menjadi singkat

2. Penggambaran flowchart yang simetris dengan arah yang jelas

3. Sebuah flowchart diawali dari satu titik START dan diakhiri dengan END

C. STRUKTUR NAVIGASI

Struktur navigasi adalah urutan alur informasi dari suatu aplikasi multimedia. Dengan menggunakan struktur navigasi yang tepat maka suatu aplikasi multimedia mempunyai suatu pedoman dan arah informasi yang jelas.

Salah satu ciri multimedia interaktif adalah kemudahan navigasi. Sebuah aplikasi multimedia interaktif harus dirancang sesederhana mungkin sehingga pengguna tidak akan kesulitan dalam mengoperasikannya, bahkan sampai bentuk tombol atau ikon pun harus dibuat sekomunikatif mungkin. Misalnya saat kursor berada di atas di teks/tombol yang memiliki link ke interface lain, maka kursor otomatis akan berubah menjadi ikon ‘tangan’, yang artinya menandakan bahwa pengguna dipersilakan mengklik bila ingin mengakses informasi yang ada di dalamnya.

Struktur navigasi digunakan sebagai penuntun alur sebuah aplikasi multimedia atau dapat pula dianalogikan sebagai diagram alur dalam perancangan bahasa pemrograman. Struktur navigasi berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi

Dalam pembuatan aplikasi multimedia terdapat empat macam bentuk dasar struktur navigasi yang digunakan, yaitu : Struktur Navigasi Linear, Struktur Navigasi Non Linear, Struktur Navigasi Hierarchi, dan Struktur Navigasi Composite.

a. Struktur Navigasi Linear

Merupakan struktur yang hanya mempunyai satu rangkaian cerita berurut. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya. Biasanya struktur ini digunakan Multimedia Presentasi karena tidak menuntut keinteraksian tetapi hanya memerlukan keindahan dan kemudahan menampilkan data sebagai informasi.

Gambar Struktur Navigasi Linear

b. Struktur Navigasi Non Linear

Struktur navigasi non linear ( tidak berurut ) merupakan pengembangan dari struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat pada struktur linear ini berbeda dengan percabangan pada struktur hierarki, karena pada percabangan non linear ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada master page dan slave page.

Gambar Struktur Navigasi Non Linear

c. Struktur Navigasi Hierarchi

Struktur navigasi hierarchi ( bercabang ) merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan informasi yang berdasarkan criteria tertentu. Informasi pada halaman utama disebut parent dan informasi pada cabangnya disebut child.

Gambar Struktur Navigasi Hierarchi

d. Struktur Navigasi Composite

Struktur Navigasi Composite ( campuran ) merupakan struktur gabungan dari ketiga struktur sebelumnya. Struktur ini disebut juga struktur navigasi bebas. Kelebihan dengan menggunakan struktur navigasi ini adalah suatu aplikasi mampu memberikan keterkaitan informasinya lebih baik.

Gambar Struktur Navigasi Composite

D. STORYBOARD

Storyboard atau papan cerita merupakan serangkaian sketsa dibuat berbentuk persegi panjang yang menggambarkan suatu urutan (alur cerita) elemen-elemen yang diusulkan untuk aplikasi multimedia. Storyboard digunakan untuk mengilustrasikan dan mengorganisasikan ide-ide dan sangat bermanfaat karena dapt digunakan sebagai acuan utama dalam pembuatan multimedia interaktif. Storyboard dapat dikatakan juga visual script yang akan dijadikan outline dari sebuat pproyek, ditampilkan shot by shot yang biasa disebut dengan istilah scene. Outline dijabarkan dengan membuat point-point pekerjaan yang berfungsi membantu untuk mengidentifikasi material apa saja yang harus dibuat, didapdatkan, atau disusun. Menurut Surjono, H.D (2017:69-70) manfaat storyboard antara lain :

1. Memberikan ringkasan . garis besar dari sitem

2. Memperlihatkan fungsionalitas dari elemen-elemen storyboard

3. Memperlihatkan skema navigasi

4. Dapat mengecek apakah presentasi sudah akurat dan lengkap

5. Dapat dievaluasi oleh user

Format storyboard sendiri memiliki berbagai macam variasi dari sederhana sampai yang paling lengkap. Semakin lengkapi isi storyboard , semakin memudahkan dalam pengembangan multimedia interaktif karena storyboard menjadi dokumen utama desain yang menjadi acuan dalam membuat produk multimedia interaktif. Berikut beberapa contoh storyboard :

E. Mockup, Wireframe dan Prototype

Dalam sebuah proyek, UX designer biasanya membuat berbagai macam deliverables sebagai media berkomunikasi saat dilakukannya user research. Di antara banyak macam deliverables, kita mengenal istilah wireframe, mockup dan prototype. Tiga istilah ini dikenal sebagai deliverables yang powerful, karena mudah dimengerti dan berbentuk user interface.

Diagram di atas menjelaskan perbedaan dari prototype dengan dua lainnya, yaitu prototype adalah dinamis dan dapat diklik, sedangkan wireframe dan mockup adalah statis. Hal yang membedakan wireframe dengan mockup adalah tingkatan dari fidelity, mockup termasuk ke dalam high fidelity sedangkan wireframe termasuk ke dalam low fidelity.

Wireframe dapat disebut sebagai blueprint dalam arsitektur. Tujuan dibuatnya wireframe bukan desain visual, namun menyampaikan susunan, struktur, layout, navigasi dan organisir konten. Maka dari itu, biasanya wireframe dibuat dengan warna hitam putih. Wireframe lebih menekankan isi dari konten.

Berikut adalah beberapa kelebihan wireframe:

1. Menggambarkan layout umum dari website atau aplikasi

2. Membangun kepercayaan dengan user dan stakeholders

3. Menghemat biaya dan waktu

Berbeda dari wireframe, mockup menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup memberikan gambaran secara detail sebelum produk dibuat.

Berikut adalah beberapa kelebihan mockup:

1. Mengorganisir detail dari proyek

2. Menemukan error

3. Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders

4. Menyampaikan ide kepada anggota tim

5. Implementasi desain

6. Perspektif user

Perbedaan yang mendasar dari Wireframe dan Mockup dapat dilihat dari tingkat fidelity, arti kata fidelity sendiri artinya presisi. Wireframe termasuk kedalam low fidelity sedangkan Mockup teramasuk high fidelity, keduanya masih bersifat statis. Untuk Prototype sudah bersifat dinamis sehingga dapat berinteraksi dengan user dengan cara mengklik pada interface.

Yang telah disinggung sebelumnya bahwa low fidelity adalah Design yang tingkat presisi nya masih rendah. Sering disebut sebagai wireframe dan memang bertujuan untuk menentukan tata letak. sedangkan high fidelity adalah Design yang tingkat presisinya tinggi. Sudah memiliki warna, ukuran , jarak dan bentuk elemennya juga sudah dibuat dengan tingkat presisi dan akurasi yang detail.

Prototype dapat diklik dan anda akan mendapat respon. Prototype mensimulasikan bagaimana user berinteraksi dengan user interface secara nyata, meningkatkan komunikasi yang efektif sehingga memungkinkan desainer untuk menguji user journey dan menemukan masalah potensial pada tahap awal.

Wireframe, mockup, dan prototype memiliki ciri khasnya masing-masing. Penggunaannya dapat disesuaikan dengan kebutuhan. Namun, satu hal yang harus diingat yaitu: jangan membuat wireframe, mockup, atau prototype tanpa adanya pemikiran terhadap user.

DAFTAR PUSTAKA