Interface

Prinsip Perancangan Antar Muka Pengguna (User Interface)

Tampilan visual merupakan hal yang penting dalam interaksi manusia dan
komputer. Karena keberadaan komputer adalah untuk membantu pekerjaan
manusia. Sehingga komputer dalam tampilan visual dimonitornya tersebut harus
memenuhi beberapa klasifikasi, agar mudah mengerti manusia. Kalau bahasa
aslinya komputasi itu bilangan biner, maka bingung juga tuh kalau bit-bit yang
ada tidak interpretasikan kedalam visualnya manusia. Salah satu tujuannya
simple saja, yaitu karena ingin informasi yang disampaikan lewat komputer itu
mudah dipahami. Dan kalau kita bicara tampilan maka bisa berarti tampilan
software yang kita buat, atau tampilan web yang kita buat, atau yang lainnya.

Kita akan coba akan melihat apa yang oleh Deborah J. Mayhew, dengan
General Principles Of UI Design, atau dalam bahasa kita adalah Prinsip Umum
Perancangan User Interface. Ada 17 prisip yang harus dipahami para perancang
sistem, terutama untuk mendapatkan hasil maksimal dari tampilan yang dibuat.
Anda tidak perlu bingung dengan apa yang dimaksud tampilan, karena salah
satunya adalah tampilan web ini.

Berikut adalah beberapa prinsip tersebut :

User Compatibility, yang bisa berarti kesesuaian tampilan dengan tipikal dari
user. Karena berbeda user bisa jadi kebutuhan tampilannya berbeda. Misalnya,
jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah
atau tampilan orang dewasa.
Product Compatibility, istilah ini mengartikan bahwa produk aplikasi yang
dihasilkan juga harus sesuai. Memiliki tampilan yang sama/serupa. Baik untuk
user yang awam maupun yang ahli.
Task Compatibility, berarti fungsional dari task/tugas yang ada harus sesuai
dengan tampilannya. Misal untuk pilihan report, orang akan langsung
mengartikan akan ditampilkan laporan. Sehingga tampilan yang ada bukanlah
tipe data (dari sisi pemrogram). Coba kalau pilihanya database, grafik, evaluasi
(dimana ketiga hal itu sebenarnya adalah laporan), ribet !bisa kebayang kalau
tampilan yang ada hanya untuk satu pekerjaan saja. Misal untuk kirim mail, kita
harus membuka tampilan tersendiri untuk daftar alamat.
Work Flow Compatibility. Adalah user interface yang mempermudah alur kerja
kita. Dengan satu tampilan dan memiliki fungsi Ui yang banyak / lebih dari satu
fungsi.
Consistency. Contohnya, jika anda menggunakan istilah save yang berarti
simpan, maka gunakan terus istilah itu. Kalau yang tidak konsisten, kadang
menggunakan save, kadang simpan, atau apalah.
Familiarity, untuk contoh ini saya akan contohkan dengan icon. Anda pasti akan
lebih familiar jika mengartikan icon disket sebagai perintah untuk menyimpan.
Maka jangan ganti dengan gambar kuda, mana ada yang tau kalau itu untuk
simpan.
Simplicity, semua kompleksitas.
Direct Manipulation, manipulasi secara langsung. Misalnya anda tidak perlu
menuliskan sintax yang repot hanya untuk mempertebal huruf, cukup dengan
ctrl+B.
Control, berikan kontrol penuh pada user, tentunya dengan sebaik mungkin dan
jangan sampai merusak sistem. Tipikal user biasanya tidak mau terlalu banyak
aturan.
WYSIWYG, What You See Is What You Get, buatlah tampilan mirip seperti
kehidupan nyata user. Dan pastikan fungsionalitas yang ada berjalan sesuai
tujuan. User ingin tempe jangan dikasih tahu (red : pasti bingung dg istilah ini).
Flexibility, UI tidak hanya menggunakan Keyboard saja atau mouse saja,tapi
dapat juga dengan touch screen.
Responsiveness, tampilan yang dibuat harus ada responnya. Misal, yang sering
kita lihat ketika ada tampilan please wait... 68%...
Invisible Technology. Sebagai programmer handal kita tidak boleh sombong
(dan harus tetap rajin nabung). User tidak penting mengetahui algoritma apa
yang kita gunakan, max sort, bubble sort, quick sort, atau apa sort, walaupun itu
bagian dari keahlian. Yang user tahu cukup fungsinya yaitu untuk sorting.
Tampilkan fungsionalitas, sembunyikan teknologi.
Robustness itu artinya handal, bisa mengakomodir kesalahan user. Jangan
malah error, apalagi sampai crash.
Protection adalah melindungi user dari kesalahan yang umum dilakukan.
Misalnya dengan memberikan fitur back atau undo.
Ease of Learning. Tanpa harus ada pelatihan, tanpa harus baca tutorial, tanpa
harus sekolah tinggi-tinggi, user sudah bisa menggunakan tampilan aplikasi
buatan anda. Mudah dipelajari.
Ease of use. Harus mudah digunakan. Seperti halnya menggunakan
fungsionalitas yang ada di keseharian kita. Misal tombol yang ada, harus mudah
dong nekennya, nggak usah pake tenaga ekstra.

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’.
B. Spin Box
Komponen antarmuka grafis yang berfungsi untuk mengatur nilai suatu peubah,
yang biasanya bertipe numerik, dengan menambahkan atau mengurangkannya.

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