MATERI: Komponen Antar Muka Pengguna (User Interface)

Dalam teknologi komputasi, Antarmuka Pengguna Grafis atau apg (graphical user interface atau gui) adalah jenis antarmuka pengguna yang menggunakan metode interaksi pada peranti elektronik secara grafis (bukan perintah teks) antara pengguna dan komputer.

Komponen Antarmuka Grafis
Hal yang paling penting dalam mewujudkan interaksi manusia dan komputer yang optimal adalah media perantara manusia dan komputer sehingga terciptanya sebuah interaksi antara keduanya.Media perantara tersebut adalah program aplikasi yang memiliki desain tampilan menarik perhatian pengguna, sederhana, dan mudah digunakan oleh pengguna.Dalam sejarah perkembangan komputer, dahulu tampilan pada aplikasi yang digunakan masih hanya berbentuk teks putih dan berlatarbelakang hitam.

Jika dahulu tampilan bukanlah yang utama, maka sekarang dalam perkembangan teknologi, desain tampilan dan proses sistem merupakan 2 hal yang utama dalam menciptakan aplikasi yang sesuai dengan kubutuhan pengguna. Desain tampilan saat ini sudah berkembang dengan menggunakan antarmuka grafis.Ada beberapa komponen antarmuka grafis yang perlu diketahui dan diperhatikan dalam perancangan tampilan yang mudah diterima oleh pengguna.

Dari berbagai komponen grafik yang banyak digunakan, berikut ini merupakan komponen dasar dari antarmuka grafis adalah sebagai berikut:

A. Tombol Tekan (Button)
Komponen ini digunakan untuk mengaktifkan suatu proses atau melanjutkan proses ke proses lainnya, contoh untuk tombol save, edit, delete, dan sebagainya. Tombol tekan juga harus dibuat berintegrasi dengan aksi klik mouse sehingga dapat dilakukan fungsi tekan ketika tombol akan dipilih. Untuk memudahkan pengguna mengetahui fungsi dari tombol tekan yang tersedia, biasanya tombol diberi label berupa teks. Misal tombol berfungsi untuk melakukan proses save maka label dari tombol tersebut adalah ‘SAVE’.

Tombol Tekan
Gambar A. Tombol Tekan

B. Spin Box
Komponen antarmuka grafis yang berfungsi untuk mengatur nilai suatu peubah, yang biasanya bertipe numerik, dengan menambahkan atau mengurangkannya.

Spin Box
Gambar B. Spin Box pada Format Document Word

C. List Box
Berbeda dengan spin box, list box digunakan untuk menampilkan sejumlah pilihan yang tersedia dengan mode teks atau numeric yang dapat dipilih oleh pengguna secara langsung  melalui bantuan scrollbar (penggeser) dalam box. List box biasanya dipilih jika layar kosong yang tersedia masih cukup banyak untuk menampilkan semua pilihan yang ada pada tampilan.

List Box
Gambar C. List Box


D. Combo Box
Combo box memiliki fungsi yang sama dengan list box, perbedaannya dalam penampilannya. Pada list box, isi pilihan ditampilkan langsung seluruhnya, sedangkan pilihan pada combo box tidak akan terlihat langsung oleh pengguna kecuali pengguna menekan tombol anak panah yang melekat pada combo box. Combo box biasanya dipilih, jika lebar layar tidak cukup luas untuk menampilkan semua pilihan yang ada.

Combo Box
Gambar D. Combo Box

E. Tombol Radio (Radio Button)
Komponen ini digunakan untuk memilih satu atau lebih pilihan dari sejumlah pilihan yang tersedia dengan tampilan setiap pilhan yang dipilih maka akan mengaktifkan salah satu radio button seperti tombol bullet.

Radio Button
Gambar E. Radio Button

F. Check Box
Hampir sama dengan tombol radio, perbedaannya adalah bentuk tampilan ketika salah satu pilihan dipilih akan mengaktifkan salah satu checkbox yang dipilih. Selain itu menggunakan chek box dapat memilih lebih dari satu pilihan sedangkan radio button hanya satu pilihan.

Check Box
Gambar F. Check Box

G. Sliding Bar / Scroll Bar (Penggeser)
Komponen sliding bar disediakan apabila ada kemungkinan pengguna membuat teks atau gambar melebih lebar laya tampilan, sehingga dibutuhkan tools untuk menampilkan gambar atau teks yang tidak muat ditampilkan pada satu layar dengan cara menggeser layar kekiri atau kekanan dan keatas atau kebawah. Komponen penggeser diataranya adalah panah penggeser dikanan dan dikiri atau diatas dan dibawah, thumbpad, dan daerah kerja thumbpad.Jika penggeser ditempatkan horizontal maka thumbpad digeser pada daerah kerjanya kea rah kiri atau kanan atau menekan tanda panah sebanyak jumlah geser.

Sliding Bar / Scroll bar
Gambar G. Sliding Bar / Scroll bar

H. Icon
Komponen ini berfungsi sama seperti tombol tekan hanya saja jika tombol tekan berbentuk sederhana sepeti persegi panjang dan sejenisnya sedangkan icon cenderung berbentuk gambar yang mewakili fungsi dari icon itu sediri ketika dipilih oleh pengguna. Cara menggunakannya sama seperti tombol tekan yaitu ditekan dengan cara diklik menggunakan mouse atau sejenisnya.

I. Text Box
Text box merupakan media pengisian data dan biasanya terhubung langsung dengan database. Data yang diisi berupa teks, dan data yang diisi tidak akan berfungsi apa-apa jika tidak ada aksi penyimpanan selanjutnya.

Setiap komponen tentunya memiliki fungsi yang berbeda-beda.Tombol tekan biasanya digunakan untuk mengaktifkan suatu aktivitas selanjutnya dari sistem apabila tombol tersebut ditekan menggunakan mouse atau diberi aksi klik mouse baik menggunakan mouse ataupun touchpad. Mode teks dan mode grafik merukan 2 hal yang tidak dapat dipisahkan dalam membuat tampilan karena apabila anda merancang komponen antarmuka grafis tanpa penjelas berupa teks hanya akan membuat pengguna tidak paham dengan tampilan yang anda buat dan hal ini dapat menyebankan tidak ada interakasi, demikian juga sebaliknya, teks tanpa komponen antarmuka grafik hanya membuat tampilan aplikasi anda terliha statis dan kaku. Oleh sebab itu komponen antarmuka grafis dapat membuat antarmuka terlihat lebih dinamis.

Dalam setiap bahasa pemograman tingkat tinggi sudah mendukung rancang bangun tampilan/ antarmuka grafis sehingga bukan hal yang sulit untuk menciptakan antarmuka grafis.Contoh bahasa pemograman tingkat tinggi yang mendukung antarmuka grafis adalah JAVA, VISUAL BASIC, HTML, dll.Sedangkan editor bahasa pemograman tingkat tinggi yang mendukung dan memudahkan desain tampilan grafis seperti NetBeans, Dreamweaver, VBNet, dll.Biasanya sebelum dapat bekerja pada mode grafik maka terlebih dahulu harus melakukan inisilisasi mode grafik.Inisialisasi bukan hal yang tidak asing lagi bagi mereka yang bekerja membuat program, proses ini merupakan tahap awal yang perlu dipersiapkan seoran programmer ataupun analis sistem.

Akan tetapi perlu diperhatikan penempatan setiap komponen antarmuka grafis harus sesuai dengan proses sistem pada setiap halaman/ antarmuka dan bentuk/ ukuran yang konsisten sehingga user memahami secara langsung fungsi setiap komponen dan mudah digunakan.  Selain penempatan hal kedua yang perlu diperhatikan adalah pemilihan warna yang mendukung komponen antarmuka grafis.


© Komponen Antarmuka Grafis - GoindoTI
Source: https://goindoti.blogspot.com/2019/04/komponen-antarmuka-grafis.html




Last modified: Friday, 15 January 2021, 7:59 AM