Teknik Pemrograman (Coding)

Kompetensi Dasar

3.1 Menerapkan prinsip-prinsip desain user interface pada multimedia interaktif berbasis halaman web dan media interaktif

4.2 Membuat user interface menggunakan prinsip-prinsip desain user interface pada multimedia

Indikator Pencapaian Kompetensi

3.1.1 Menjelaskan prinsip-prinsip desain user interface.

3.3.2 Menguraikan interaksi pengguna pada multimedia interaktif berbasis halaman web.

4.3.1 Menyajikan pembuatan desain interface multimedia interaktif.

4.3.2 Menunjukkan user interface yang didesain berbasis halaman web.

Materi Pokok

1. Tujuan dan manfaat desain

2. Prinsip desain user interface

3. Interaksi pengguna

4. Perancangan template, menu, tombol

Kegiatan Pembelajaran

1. Mengamati untuk mengidentifikasi dan merumuskan masalah tentang prinsip-prinsip desain user interface pada multimedia interaktif untuk menumbuhkan karakter rasa ingin tahu

2. Mengumpulkan data tentang prinsip-prinsip desain user interface pada multimedia interaktif untuk menumbuhkan karakter gemar membaca

3. Mengolah data tentang prinsip-prinsip desain user interface pada multimedia interaktif untuk menumbuhkan karakter teliti dan cermat

4. Mengomunikasikan tentang prinsip-prinsip desain user interface pada multimedia interaktif untuk menumbuhkan karakter berani

5. Mengamati untuk mengidentifikasi dan merumuskan masalah tentang pengoperasian aplikasi multimedia interaktif untuk menumbuhkan karakter rasa ingin tahu

6. Mengumpulkan data tentang pengoperasian aplikasi multimedia interaktif berbasis halaman web untuk menumbuhkan karakter gemar membaca

7. Mengolah data tentang pengoperasian aplikasi multimedia interaktif berbasis halaman web untuk menumbuhkan karakter teliti dan cermat

8. Mengomunikasikan tentang pengoperasian aplikasi multimedia interaktif berbasis halaman web untuk menumbuhkan karakter berani

Penilaian

Pengetahuan:

• Tes tertulis

Keterampilan:

• Pengamatan

• Unjuk kerja

Alokasi Waktu 26 (JP)

Sumber Belajar

Tay Vaughan, 2006, Multimedia : Making it Work, Penerbit Andi, Yogyakarta

Suyanto, M., Multimedia Alat untuk Meningkatkan Keunggulan Bersaing, Penerbit Andi, Yogyakarta

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 penggunamemiliki peranti 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.

a. 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 1dan mempunyai karakter yang berbeda. Hal tersebut harus terpikirkan oleh desainer dan tidak dianjurkan merancang antar muka dengan didasarkan pada dirinya sendiri.

b. 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.

c. 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 melalui antarmuka. Contoh : User hanya klik setup, tekan tombol next, next, next, finish, ok untuk menginstal suatu perangkat lunak.

d. 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 runtutan pekerjaan. Sehingga dengan workflow compatibility dapat membantu seorang user dalam mempercepat pekerjaannya.

e. 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.

f. 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.

g. 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.

h. 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.

i. 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 system 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.

j. 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 baliklangsung 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.