SLIDE 1A. Pengertian Komponen Antar Muka Grafis

Komponen antar muka grafis adalah bentuk bentuk tampilan yang dapat dilihat dan umumnya bersifat tetap yang selalu digunakan pada sebuah program aplikasi komputer.

Komponen antar muka grafis bertujuan untuk memenuhi salah satu kriteria interaksi antara manusia dan komputer yakni agar mendapat perhatian pengguna kepada program aplikasi yang dibuat, tentunya sebuah program aplikasi haruslah mempunyai tampilan yang menarik perhatian pengguna.

B. Tujuan Perancangan komponen antar muka grafis

Tujuan perancangan antarmuka pada dasarnya adalah untuk mendapatkan satu kriteria yang sangat penting dalam pengoperasian sebuah program aplikasi, yakni aspek ramah dengan pengguna (user friendly).

Ada beberapa aspek yang mempengaruhi keramahan dan perlu dimiliki dari sebuah antar muka grafis dengan pengguna, diantaranya :

Keluwesan

a) Antar muka grafis yang luwes atau fleksibel adalah antar muka grafis yang mempunyai kemampuan untuk mencapai suatu tujuan lewat sejumlah cara yang berbeda.

b) Karakteristik penting dalam mencapai keluwesan adalah bahwa antar muka grafis harus dapat menyesuaikan diri dengan keinginan pengguna, dan bukan pengguna yang harus menyesuaikan diri dengan kerangka antar muka grafis yang telah ditetapkan oleh perancang sistem.

c) Salah satu ciri keluwesan adalah adanya kesempatan bagi pengguna untuk melakukan customizing dan memperluas antarmuka sistem untuk memenuhi kebutuhan pribadinya.

Kompleksitas

a) Antarmuka tidak perlu dibuat atau digunakan lebih dari yang diperlukan, karena tidak ada keuntungan yang diperoleh, malah akan membuat implemen-tasinya lebih sulit.

Konsistensi

a) Merupakan atribut yang sangat penting untuk membantu pengguna mengembangkan mentalitas yang diperlukan dalam pengoperasian sebuah sistem komputer dengan antar muka grafis.

b) Antar muka grafis yang konsisten mendorong pengembangan mentalitas dengan cara memberikan semacam petunjuk kepada pengguna untuk mengekstrapolasi pengetahuan

yang dimiliki saat itu untuk dapat memahami perintah-perintah baru lengkap dengan pilihan yang ada.

c) Biasanya jika seorang pengguna sudah dapat menggunakan sebuah perintah dengan suatu pilihan, maka ia akan terdorong untuk menggunakan perintah yang sama dengan berbagai pilihan (option) yang berbeda. maka dari itu, konsistensi harus diterapkan pada semua aspek perancangan antarmuka pengguna.

Observabilitas

Sistem dikatakan mempunyai sifat observabilitas apabila dapat berfungsi secara benar dan nampak sederhana bagi pengguna, meskipun sesungguhnya pengolahan internalnya sangat rumit. Hal ini sering sukar diperoleh, khususnya jika model sederhana dari aktifitas internal yang rumit perlu disajikan kepada pengguna. Kesukaran akan muncul ketika pengguna mencoba melompati batas model sistem (misalnya karena ada kesalahan) dan sistemnya tidak mampu memberikan respon yang dapat dipahami pengguna. sebuah perancangan antar muka grafis harus memikirkan observabilitas kedalam program yang akan dibuat agar sebuah sistem itu benar-benar dapat mudah digunakan oleh pengguna walaupun program tersebut rumit.

Umpan balik

Program yang baik akan selalu memberikan umpan balik yang dapat berupa pesan tentang apa yang dikerjakan komputer serta statusnya saat itu. Untuk mencapai program yang baik itu diperlukan antar muka yang baik untuk memberikan pesan tentang apa yang dikerjakan komputer agar mudah dimengerti oleh pengguna.

Contoh umpan balik yang seringkali diperlukan, misalnya jika pengguna harus memilih suatu pilihan dari sejumlah pilihan yang ada, maka program harus memberitahu pengguna cara yang dapat dipakai untuk memilih suatu pilihan, dan jika terjadi suatu kesalahan komputasi, program akan menampilkan suatu pesan salah (error message) yang sesuai.

Kontrolabilitas

Yaitu, sistem selalu berada dibawah kontrol pengguna. Agar tujuan ini tercapai, antarmuka harus mempunyai sarana yang memungkinkan pengguna untuk dapat menentukan :

Dimana sebelumnya ia berada Dimana ia sekarang berada

Kemana ia dapat pergi

Apakah pekerjaan yang sudah dilakukan dapat dibatalkan

C. Keuntungan Perancangan antar muka grafis

1. Antarmuka yang dihasilkan menjadi lebih baik.

Hasil rancangan sementara dapat dibuat prototipe dan diimplementasikan, bahkan sebelum aplikasinya ditulis.

Perubahan yang diinginkan pengguna dapat segera dilakukan karena antarmukanya mudah dimodifikasi.

Sebuah aplikasi dapat mempunyai lebih dari sebuah antarmuka.

Sejumlah aplikasi yang berbeda dapat mempunyai antarmuka yang konsisten, karena mereka dapat dibangun dengan menggunakan peranti bantu yang sama.

Memberikan “wajah” yang unik dari sebuah program aplikasi, dan “sentuhan” khusus kepada sebuah program aplikasi.

Memungkinkan sejumlah ahli bekerja bersama untuk memberikan kontribusinya masing-masing, misalnya ahli grafis, psikolog, ahli kognitif, maupun spesialis human factor.

2. Program antarmuka menjadi mudah ditulis dan lebih ekonomis untuk dipelihara

Program antarmuka menjadi lebih terstruktur dan lebih modular karena sudah dipisahkan dari aplikasinya. Hal ini memungkinkan pengguna untuk mengubah antarmuka tanpa mempengaruhi aplikasinya, dan memungkinkan pemrogram untuk mengubah program aplikasi tanpa mengubah antarmukanya.

Program antarmuka lebih reusable karena peranti bantu menggabungkan bagian-bagian yang sama.

Kehandalan antarmuka menjadi lebih tinggi, karena program itu dibangkitkan secara otomatis dari arah spesifikasi yang lebih tinggi.

Spesifikasi antarmuka menjadi lebih mudah dinyatakan, divalidasi, dan dievaluasi, serta dimodifikasi.

Kegayutan peranti diisolasi di dalam peranti bantu, sehingga antarmukanya lebih mudah diport ke berbagai aplikasi pada lingkungan yang berbeda.

D. Komponen Dasar Antarmuka Grafis

Komponen antar muka bekerja pada mode teks ataupun mode grafis. Dari sekian banyak antar muka grafis yang dipakai pada paket-paket program aplikasi, sering ditemukan bentuk-bentuk yang selalu tetap. Komponen itulah yang disebut dengan komponen dasar antar muka grafis.

1. Spin Box, adalah salah satu komponen antar muka grafis yang digunakan untuk mengatur suatu nilai peubah, biasanya bertipe numerik, dengan menambahkan atau mengurangkankannya dengan suatu nilai tertentu. Dalam spin box nilai maksimum dan minimum peubah harus dinyatakan dengan jelas, supaya tombol ini tidak memutar (spining) terus menerus.

Pembuatan Spin Box dengan Macromedia Dream Weaver

List Menu / Spin Box

List Menu /Pul Down Menu / List Box

Bentuk Lain Dari Spin Box

2. List Box, digunakan untuk menampilkan sejumlah pilihan yang tersedia yang dapat dipilih oleh pengguna program. Setelah pengguna memilih sekian banyak pilihan yang tersedia, pilihan terpilih akan disimpan sebagai nilai dari sebuah peubah.Combo box mirip dengan list box, tetapi memiliki perbedaan dalam penampilannya. Pada list box beberapa pilihan dapat dilihat langsung oleh pengguna, sementara pada combo box pilihan-pilihan yang ada tidak akan terlihat kecuali pengguna menekan tombol anak panah yang melekat pada tombol combo box itu.

3. Check Box, komponen ini digunakan untuk memilih satu atau lebih pilihan dari jumlah pilihan yang tersedia. Komponen ini cocok dipakai apabila pemrogram lebih memberi kebebasan kepada pengguna untuk membuat lebih dari satu pilihan.

Text Area

Text Field

4. Tombol radio, berbeda dengan check box, tombol radia hanya memungkinkan pengguna untuk memilih satu pilihan diantara beberapa pilihan yang tersedia. Contoh nyatanya adalah pemilihan jenis kelamin.

5. Tombol tekan, biasanya digunakan untuk mengaktifkan suatu aktivitas apabila tombol tersebut ditekan menggunakan mouse (klik mouse). Jenis tombol ini disebut tombol tekan karena tombol ini seolah-olah masuk kedalam layar komputer, seperti halnya anda menekan sebuah tombol. Teknik penampilan tombol tekan pada layar perlu diperhatikan, sehinngga penampilan tombol

tekan tersebut terkesan merupakan tombol 3 dimensi yang ketika tombol tersebut dipilih, terlihat seperti menekan tombol yang sebenernya.

E. Strategi Pengembangan Antarmuka Grafis

Dari beberapa hal yang dijelaskan di atas bahwa sebuah program aplikasi terdiri atas dua bagian penting.

Bagian pertama adalah bagian antarmuka yang berfungsi sebagai sarana dialog antara manusia dengan komputer.

Bagian kedua adalah bagian aplikasi, merupakan bagian yang berfungsi untuk menghasilkan informasi berdasar olahan data yang sudah dimasukan oleh pengguna lewat algoritma yang diisyaratkan oleh aplikasi tersebut.

Secara garis besar, pengembangan bagian antarmuka perlu memperhatikan beberapa hal sebagai berikut:

Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna komputer. Hal ini menyangkut antara lain psikologi kognitif, tingkat perseptual, dan kemampuan motorik dari pengguna.

Berbagai informasi yang berhubungan dengan karakteristik dialog yang cukup lebar, seperti ragam dialog, struktur, isi tekstual dan grafis, tanggapan waktu, dan kecepatan tampilan. Pengetahuan umum (common sense) sering menjadi salah satu petunjuk penting dalam pembangunan antarmuka, tetapi perancang tidak boleh hanya mengandalkan pada pengetahuan umum ini.

Penggunaan protitipe yang didasarkan pada spesifikasi dialog formal yang disusun secara bersama-sama antara (calon) pengguna dan perancang sistem, serta peranti yang mungkin dapat digunakan untuk mempercepat proses pembuatan prototipe.

Teknik evaluasi yang digunakan untuk mengevaluasi hasil proses prototipe yang telah dilakukan, yaitu secara analitis berdasarkan pada analisis atas transaksi dialog, secara empirik menggunakan uji coba pada sejumlah kasus, umpan balik pengguna yang dapat dikerjakan dengan tanya jawab maupun kuesioner, dan beberapa analisis yang dikerjakan oleh ahli antarmuka.

F. Strategi Pembuatan Antar Muka Grafis Berbasis Pengisian (Form Filling)

Form filling digunakan untuk aktivitas pemasukan data atau pemanggilan data, pada umumnya Layout layar tampilan mirip dengan form tercetak.

Kualitas antarmuka berbasis pengisian barang tergantung pada tiga aspek:

1. Tampilan pada layar monitor yang mencerminkan struktur data masukan yang diperlukan oleh sistem.

2. Kejelasan perancangan dan penyajiannya secara visual pada layar monitor.

3. Derajat kebenaran dan kehandalan penerimaan data masukan oleh program lewat berbagai fasilitas pemasukan data yang ada di dalam form tersebut.

Berikut ini adalah hal-hal yang perlu diperhatikan dalam pembuatan antar muka berbasisikan form filling :

1. Proteksi tampilan . Adanya pembatasan agar pengguna tidak dapat mengakses semua tampilan yang ada di layar monitor.

2. Batasan medan tampilan . Medan data dapat ditentukan mempunyai panjang yang tetap atau berubah, menggunakan format bebas atau tertentu.

3. Isi medan . Pengguna biasanya mempunyai sejumlah gambaran tentang isi medan yang diperbolehkan. Petunjuk pengisian dapat juga ditampilkan sebagai bagian dari tampilan

4. Medan opsional . Beberapa medan isian dapat bersifat opsional. Medan opsional dapat dinyatakan secara tekstual atau menggunakan aturan tertentu, seperti penggunaan warna berintensitas rendah, warna tampilan yang berbeda, dan lain-lain.

5. Default . Apakah dalam medan isian dimungkinkan adanya nilai default. Jika ya, tentukan tempatnya, apakah pada bagian yang tidak dapat diakses pengguna ataukah pada bagian pemasukan data.

6. Bantuan . Adanya bantuan (help) yang menunjukkan cara pengisian borang, tetapi harus terpisah dari bentuk dasar borang. Jika terdapat fasilitas bantuan, pengguna perlu diberitahu cara mengakses.

7. Medan penghentian . Masukan data dalam medan dapat diakhiri dengan jalan menekan tombol Enter atau Return atau mengisi karakter terakhir dengan karakter tertentu atau dengan cara berpindah ke medan lain.

8. Navigasi . Kursor dapat digerakan di sekeliling layar menggunakan tombol Tab untuk urutan yang tetap, atau dapat pula digerakkan secara bebas menggunakan mouse.

9. Pembetulan kesalahan . Pengguna dapat membetulkan kesalahan dengan menggunakan tombol BackSpace dengan menindihi (overwrite) isian lama, dengan jalan membersihkan dan mengisi kembali medan tersebut, dan lain-lain.

10. Penyelesaian . Perlu diperhatikan cara yang digunakan untuk memberitahu pengguna bahwa seluruh proses pengisian telah selesai.

G. Strategi Pembuatan Antar Muka Grafis Berbasiskan WIMP

Yaitu antar muka yang merupakan ragam default dari sebagian besar aplikasi sistem komputer saat ini.

WIMP adalah ragam interaksi yang berbasis pada :

a. Window

Adalah area pada layar yang mempunyai sifat seperti terminal yang independent. dapat terdiri dari teks atau grafis. Dapat saling overlap dan menutupi yang lain, atau tersusun seperti keramik lantai. Fasilitas scrollbars memungkinkan pengguna untuk menggerakkan isi window ke atas-bawah atau menyampin dengan title bars yang menunjukkan nama window. Window dapat ditutup menjadi semacam representasi kecil, sehingga dapat memuat/mengaktifkan banyak window.

Document Window

Utility Window

b. Icon

Icon Berupa lukisan atau gambar berukuran kecil mewakili suatu obyek dalam antarmuka, dapat suatu window atau tindakan. Icon dapat bervariasi, mulai dari simbol yang abstrak sampai gambaran realitas

c. Menu

Menu berupa pilihan operasi atau fungsi yang disediakan pada layar. Pemilihan pada menu dilakukan dengan menggunakan pointer. Kelemahan: menu dapat memakan ruang layar. Solusi: menu hanya muncul saat dibutuhkan.

d. Pointer / Pull Up (Down)

Pointer Merupakan komponen penting. Ragam WIMP bertumpu pada proses penunjukkan dan pemilihan sesuatu yang biasanya dilakukan dengan menggunakan mouse atau dapat juga menggunakan joystick, trackball, atau tombol panah pada keyboard.

e. Komponen tambahan

Beberapa komponen tambahan dalam model WIMP, diantaranya :

a) Button (tombol) :

radio button : kumpulan pilihan yang harus memilih salah satu, tak boleh lebih dari 1

check box : kumpulan dari pilihan-pilihan yang boleh memilih 1/lebih dari 1

b) Pallettes (palet) : kumpulan kemungkinan mode yang tersedia, ditambah mode yang aktif saat itu, biasanya adalah sekumpulan icon yang ditata secara berdampingan (tiled icons) contoh : paket untuk menggambar memiliki palet yang mengindikasikan apakah kotak, lingkaran, garis atau teks yang akan digambar, dan yang lain lagi mengindikasikan warna-warna yang tersedia pada paket tersebut.

c) Combo box, list box

d) Kotak dialog : jendela yang berisi informasi penting, seperti pada saat user akan menyimpan file, maka muncul kotak dialog untuk memberi nama file tersebut. Setelah file disimpan, kotak dialog selesai tugasnya dan menghilang dari layar.

e) Kotak peringatan, muncul untuk memberitahu kesalahan atau tuntunan

H. Strategi Pembuatan Antar Muka Grafis Berbasiskan Sistem Menu

Sistem menu merupakan pilihan yang tepat untuk menunjukkan kemampuan dan fasilitas yang dimiliki oleh sebuah program aplikasi kepada pengguna. Menu adalah daftar sejumlah pilihan dalam jumlah terbatas, yang biasanya berupa suatu kalimat atau kumpulan beberapa kata. Ditinjau dari teknik penampilan pilihan-pilihan pada sebuah sistem menu, dikenal dua jenis sistem menu: sistem menu datar dan sistem menu tarik (pulldown) yang berbasis pada struktur hirarki pilihan (struktur pohon pilihan). Sistem menu datar, adalah sistem menu yang menampilkan semua pilihan secara lemgkap. Sistem menu tarik adalah sistem menu yang akan menampilkan pilihan dalam kelompok-kelompok tertentu.

a. Sistem Menu Datar

Dalam sistem menu datar, kemampuan dan fasilitas yang dimiliki oleh suatu program aplikasi akan ditampilkan secara lengkap, dan biasanya menggunakan kalimat-kalimat yang cukup panjang.

Penentuan pilihan pada menu datar depat dikerjakan dengan dua cara. Cara pertama adalah dengan menggunakan selektor dari setiap pilihan yang tersedia, dan cara kedua adalah dengan menggerakkan tanda terang (highlight marker) ke suatu pilihan dan kemudian dikonfirmasikan dengan menekan tombol Enter. Dari sisi implementasi, cara pertama lebih mudah diimplementasikan dibandingkan dengan cara kedua. Tetapi dari sisi pengguna, cara kedua biasanya lebih disukai, karena tampilannya tidak monoton. Secara terinci kedua cara penentuan pilihan disajikan berikut ini:

b. Selektor Pilihan

Untuk memudahkan pengguna dalam melakukan pilihannya, pada setiap pilihan biasanya disertakan suatu selektor yang dapat berupa angka, huruf, atau campuran antara angka dan huruf. Dalam menentukan jenis selektor yang akan digunakan (angka, huruf, atau kombinasinya) salah satu bahan pertimbangannya adalah banyaknya pilihan yang akan disediakan. Jika banyak pilihan sama dengan atau kurang dari 10 buah. Anda dapat menggunakan selektor yang berupa angka (ingat bahwa kita mempunyai 10 buah angka, dari 0, 1, 2, sampai 9).

Tetapi jika jumlah pilihan lebih dari 10 buah, penggunaan selektor yang berupa angka kurang cocok, karena pengguna harus menekan dua buah tombol untuk memilih pilihan dengan nomor elektor 10 atau lebih. Keadaan seperti ini tidak selalu diinginkan, terutama bagi paera pengguna yang sudah terbiasa menggunakan komputer. Sehingga, jika banyaknya pilihan lebih dari 10 buah, akan lebih sesuai apabila Anda menggunakan selektor yang berupa huruf, karena kita mempunyai 26 huruf alphabet. Jika cacah pilihan lebih besar dari 26 buah, selektornya dapat berupa campuran angka dan huruf.

c. Penggunaan Tanda Terang

Cara lain untuk menentukan pilihan pada daftar menu datar adalah menggunakan suatu mekanisme yang disebut tanda terang (highlight marker) yang dapat digerakkan pada semua pilihan yang ada dilayar Dengan cara ini, pengguna – dengan bantuan tombol khusus seperti ¬, , ®, atau ¯, atau dengan menggunakan mouse – memenpatkan tanda terang ke suatu pilihan yang ia inginkan. Kemudian, pengguan harus menekan tombol Enter atau mengklik mouse untuk mengkonfirmasikan pilihannya.

d. Daya Tarik

Sebuah menu tarik pada dasarnya adalah sistem menu yang pilihan-pilihannya dikelompokkan menurut menurut kategori tertentu atau menurut cara tertentu sehingga mereka membentuk semacam hirarki pilihan. Pada hirarki paling tinggi, pilihan-pilihan itu disebut denganpilihan/menu utama. Sebagian atau semua pilihan/menu utama dapat mempunyai salah satu atau lebih subpilihan/submenu. Sebuah subpilihan/submenu dari suatu pilihan/menu utama dapat mempunyai satu atau labih sub-subpilihan, dan seterusnya. Struktur ini membentuk semacam struktur pohon. Gambar 3.8 menunjukkan contohstruktur pohon dari suatu menu tarik.

e. Shorcut

Shortcut adalah cara pemilihan suatu manu dengan cara yang biasa digunakan. Shortcut ini biasanya diimplementasikan menggunakan kombinasi tombol-tombol khusus, misalnya kombinasi antara tombol Ctrl dengan Ins, Ctrl dengan A, dan lain-lain.