Mengenal User Interface

Apa Itu User Interface?

UI (User Interface) adalah bagian visual dari website, aplikasi, software, atau hardware yang menentukan bagaimana seorang pengguna berinteraksi dengan produk tersebut. User interface design sendiri menggabungkan konsep desain visual, desain interaksi, dan infrastruktur informasi menjadi satu dengan tujuan untuk meningkatkan kemudahan penggunaan sebuah produk.

Apa Saja Fungsi User Interface?

Kemampuan berkomunikasi di dunia digital perlu diperkenalkan, dengan mengenalkan “sign” (simbol, tanda yang umum digunakan, seperti halnya siswa mengenal “sign” di dunia nyata. Jika di dunia nyata anak perlu mengenal tanda lalu lintas, tanda­tanda petunjuk agar dapat hidup sebagai warga yang baik, di dunia digital pun siswa perlu mendapatkan pengenalan akan “sign” yang biasa dipakainya.

Siswa perlu mengenal simbol-simbol (ikon) dan interaksi standar yang di dunia digital dikenal sebagai Graphical User Interface (GUI).Pengenalan ikon­ikon ini akan membentuk pola interaksi dan pengenalan, yang akan memudahkan siswa belajar aplikasi apa pun secara intuitif. Aktivitas ini akan dimulai dengan siswa mencoba dan mengabstraksikan fungsinya, selanjutnya guru akan memberikan penjelasan menyeluruh.

Kita menggunakan tombol untuk menghidupkan atau mematikan perangkat televisi, mesin cuci, atau pendingin ruangan, yang bisa diwakili dengan alat pengendali jarak jauh (remote control). Teknologi saat ini mampu menangani interaksi perangkat dengan pengguna melalui tombol nyata, papan kunci (keyboard), sentuhan ke antarmuka grafis yang biasa disebut Graphical User Interface (GUI), maupun suara atau Voice User Interface (VUI). Untuk perangkat komputer, ponsel/smartphone, perangkat game, pemutar MP3, dan sebagainya, interaksi yang digunakan umumnya adalah GUI.

 

Graphic User Interface (GUI)

Apa itu GUI?

Graphical User Interface adalah adalah sistem antarmuka yang memungkinkan manusia berinteraksi dengan komputer melalui tampilan grafis sebagai pengganti perintah berbasis teks yang ditikkan. GUI memudahkan setiap orang bahkan yang awam ilmu komputer agar dapat menggunakan komputer dengan mudah. GUI menjadi populer karena lebih intuitif, mudah digunakan dan dipelajari daripada model interaksi Command Line Interface (CLI) yang memerlukan perintah yang harus ditik. Dengan CLI, jika pengguna tidak tahu perintahnya atau salah tik, perintah tidak dapat dimengerti oleh komputer. Dengan GUI, pengguna tinggal memilih perintah yang disediakan. Seperti halnya menggerakan Cursor pada layar menggunakan mouse, atau membuka program atau menu dengan mengklik ikon nya. GUI menjadi standar desain yang berpusat pada pengguna dalam pemrograman aplikasi perangkat lunak, memberikan pengguna kemampuan untuk mengoperasikan komputer dan perangkat elektronik lainnya secara intuitif melalui manipulasi langsung ikon grafis seperti tombol, scroll bar, window, tab, menu, kursor, dan mouse. Dimasa kini banyak penerapan GUI yang menghadirkan fitur touchscreen dan voice command pada sistemnya.

 

Bagaimana cara kerja GUI?

Prinsip-prinsip desain GUI sesuai dengan pala perangkat lunak model-view-controller, yang memisahkan representasi internal informasi dari cara di mana informasi disajikan kepada pengguna, menghasilkan sebuah platform di mana pengguna diperlihatkan fungsi mana yang mungkin dilakukan tanpa memasukkan code perintah.

 

 

Gambar 1. Schema Layer GUI

Pengguna berinteraksi dengan informasi dengan memanipulasi widget visual, yang dirancang untuk merespons sesuai dengan jenis data yang mereka pegang dan mendukung tindakan yang diperlukan untuk menyelesaikan tugas pengguna. Tampilan dari sistem operasi atau perangkat lunak aplikasi dapat dirancang ulang sesuka hati karena sifat GUl yang independen dari fungsi aplikasi. Aplikasi biasanya menerupkan elemen tampilan GUI unik mereka sendiri di samping elemen GUI yang sudah ada pada sistem operasi yang ada. Pengujian GUI mengacu pada proses sistematis yang menghasilkan kasus pengujian untuk mengevaluasi fungsionalitas sistem dan elemen desainnya.

 

Apa Saja Manfaat dari GUI?

Tidak seperti sistem operasi Command Line Interface (CLI) atau CUI, seperti Unix atau MS-DOS, sistem operasi GUI jauh lebih mudah untuk menggunakannya karena perintah tidak perlu dihafalkan. Selain itu, pengguna tidak perlu mengetahui bahasa pemprograman apapun. Karena kemudahan penggunaan, sistem operasi GUI telah menjadi sistem operasi yang dominan digunakan oleh end-users hari ini.

 

Apa Kelebihan GUI?

Desain yang menarik

Dengan adanya mode grafis pada antarmuka GUI ini, bisa membuat pengguna menjadi lebih nyaman dan cenderung bisa mengubah perasaan pengguna ketika menggunakan tampilan GUI.

Memudahkan Interaksi Pengguna dan Komputer

Interaksi yang dilangsungkan antara pengguna dengan komputer menjadi jauh lebih mudah dan lebih baik karena dengan mode grafis tidak membuat pengguna kebingungan. Hal ini memudahkan mereka dalam melakukan sesuatu dikomputer seperti membuat dokumen, mengedit gambar, maupun memindahkan folder.

Mudah Digunakan

Kemudahan yang ditonjolkan pada antarmuka GUI memang begitu banyak, sehingga dalam penggunaan GUI ini memiliki kelebihan dalam kemudahan penggunaan. Dalam penggunaan, hanya sedikit pengguna yang menemui kesulitan, bahkan bisa dibilang tidak ada sama sekali, Kemudahan digunakan di sini banyak sekali jika diberikan dalam segi contoh, seperti untuk membuka aplikasi tidak momerlukan penulisan perintah pada CMD. Kamu hanya perlu mengklik shortcut icon untuk membukan oplikasi tersebut.

Mudah Dipalajari

Sistem GUI memungkinkan pengoperasian komputer menjadi lebih intuitif dan mudah dikuasai tanpa harus praktik sebelumnya atau memiliki pengetahuan tentang mesin komputasi atau bahasa programing. Aplikasi GUI bersifat Self Descriptive, Feedback yang diberikan pun langsung. Sekali kamu klik suatu icon program, maka otomatis program tersebut akan dijalankan atau dibuka.

 

Apa Kekurangan GUI?

• Menggunakan lebih banyak memori komputer karena tujuannya adalah untuk membuatnya ramah pengguna dan bukan sumber daya yang dioptimalkan. Akibatnya bisa menjadi lambat pada komputer dengan spesifikasi rendah.

• GUI menjadi lebih kompleks jika pengguna perlu berkomunikasi dengan komputer secara langsung.

• Tugas tertentu mungkin memakan waktu lama karena banyak menu untuk memilih pilihan yang diinginkan.

• Perintah tersembunyi harus dicari menggunakan file Bantuan (Help).

• Aplikasi berbasis GUI membutuhkan lebih banyak RAM untuk dapat dijalankan.

• Menggunakan lebih banyak daya dalam pemrosesannya dibandingkan dengan jenis antarmuka lainnya.

Komponen UI

Komponen Komponen Tools Pada Netbeans Swing Containers

No.	Tools	Fungsi
1.	Panel	Untuk mengelompokkan komponen-komponen.
2.	Split Pane	Menampilkan dua komponen dalam ruang yang tetap, memungkinkn user untuk menentukan ukuran ruang yang dipilih untuk setiap komponen.
3.	Tool Bar	Sebagai tempat untuk menampilkan tool-tool yang bertujuan mempermudah user dalam mengoperasikan beberapa tool-tool yang mungkin sering digunakan.
4.	Internal Frame	Merupakan frame internal (di dalam frame utama). membuat banyak window (multi-window) di dalam satu frame.
5.	Tabbed Pane	Membuat frame yang terdiri dari tab-tab yang bisa dipilih oleh user.
6.	Scroll Pane	Menyediakan scroll bar di sekeliling perubahan ukuran komponen.
7.	Desktop Pane
8.	Layered Pane	Menyediakan tiga lapis dimensi untuk memposisikan komponen.

    Swing Controls

No.	Tools	Fungsi
1.	Label	Untuk memberikan keterangan tambahan atau indentitas pada tombol atau perintah lainnya.
2.	Toggle Button	Button yang selalu berada dalam salah satu dari dua kondisi. Setiap klik pada button akan merubah dari kondisi satu ke kondisi lainnya.
3.	Radio Button	Untuk meminta user agar memilih satu dari lebih dua pilihan, contoh penggunaannya adalah ketika kita mengisi data diri untuk pilihan jenis kelamin.
4.	Combo box	Berfungsi untuk menyisipkan beberapa pilihan / perintah, sehingga dengan Combo Box ini lebih menghemat tempat, karena dalam Combo Box ini terdiri dari beberapa pilihan.
5.	Text Field	Untuk membuat kolom agar kelak bisa diisi perintah-perintah teks atau angka oleh user, semisal pada pembuatan aplikasi kalkulator “text field” berfungsi menampilkan hasil dari hitungan kalkulator tersebut.
6.	Scroll Bar	Untuk menggeser jendela (windows) secara vertikal.
7.	Progress Bar	Digunakan untuk menampilkan status proses.
8.	Password Field	Tempat untuk mengisikan password yang kita miliki.
9.	Separator	Berfungsi sebagai “sekat” atau pemisah antar garis yang ada pada aplikasi atau software yang nantinya akan dibuat.
10.	Editor Pane	Sebuah  panel yang digunakan untuk mengedit tulisan.
11.	Tabel	Menampilkan atau menyisipkan tabel pada aplikasi yang nantinya akan kita buat.
12.	Button	Kontrol yang tampil pada layar dengan bentuk tertentu yang mirip dengan tombol persegi panjang dengan tulisan di tengahnya.
13.	Check Box	Memilih lebih dai satu pilihan, dengan menyimpan data dan akan menampilkannya ketika di klik.
14.	Button Group	Untuk menggabungkan seluruh button supaya menjadi satu kesatuan fungsi.
15.	List	Untuk menampilkan beberapa item.
16.	Text area	Tempat mengetikkan tulisan yang berada dalam kotak yang mempunyai fungsi scroll.
17.	Slider	Berfungsi sebagai visualisasi proses perjalanan dari sebuah musik atau video.
18.	Formatted Field
19.	Spinner	Berisi angka yang diletakkan secara ringkas atau berupa daftar, ketika kita membutuhkan angka lebih kecil, kita tinggal klik tanda panah      sampai muncul angka yang kita inginkan, atau sebaliknya misalkan kita butuh angka lebih besar klik tanda panah sampai muncul angka yang kita inginkan.
20.	Text pane	Menampilkan teks dan membolehkan user untuk mengeditnya.
21.	Tree	Menampilkan data dalam bentuk hirarkis.

           Swing Menus

No.	Tools	Fungsi
1.	Menu Bar	Untuk menciptakan tab-tab menu yang nantinya dipergunakan untuk perintah menu yang diinginkan.
2.	Menu	Membentuk perintah menu yang masih bisa dilanjutkan ke menu yang lebih khusus.
3.	Menu Item	Berisi perintah-perintah spesifik yang ada dalam menu bar, sehingga perintah-perintah pada menu item lebih khusus.
4.	Menu Item/CheckBox	Memberi tanda (V) pada menu perintah tertentu supaya komputer melakukan seperti apa yang kita perintahkan.
5.	Menu Item/Radio Button	Untuk melakukan rating atau survey sesuatu alamat website atau digunakan pada perintah pemilihan halaman cetakan pada printer.
6.	Popup Menu	Menu yang akan tampil secara otomatis atau apabila kita menggerakkan kursor mouse pada area tertentu, biasanya berisi tentang informasi suatu obyek/icon/menu.
7.	Separator	Berfungsi sebagai “sekat” atau pemisah antar garis yang ada pada aplikasi atau software yang nantinya akan dibuat.

  sumber data : berbagai sumber