Desain GUI telah menjadi pilihan terbaik dari desain antarmuka pengguna. Namun demikian, terlepas dari popularitas GUI yang tidak terduga, beberapa program aplikasi memiliki desain antarmuka yang baik dan memenuhi prinsip-prinsip desain antarmuka pengguna grafis.

GUI menggunakan elemen struktural yang bersama-sama menentukan tampilan antarmuka. GUI menarik elemennya dari empat kelompok dasar, termasuk:

1. Kontrol masukan

Berikut adalah contoh elemen kontrol input GUI:

• Tombol: Tombol adalah lingkaran yang memungkinkan Anda membuat pilihan langsung dan mengambil tindakan. Tombol radio datang dalam kelompok di mana hanya satu tombol yang dapat dipilih pada satu waktu. Tombol label memiliki teks di atasnya. Jika Anda ingin lebih dari satu opsi dipilih, pertimbangkan untuk menggunakan kotak centang.
  

• Kotak centang: Kotak centang adalah kotak persegi dalam daftar satu atau beberapa opsi. Ketika Anda mengklik kotak, itu tetap dipilih. Mereka paling baik disajikan dalam daftar vertikal. Kotak centang dapat berupa kotak tunggal, seperti mengakui pernyataan, atau daftar item terkait, seperti daftar belanja.
  

• Pemilih tanggal: Pemilih tanggal memungkinkan Anda memilih tanggal dan/atau waktu. Pembuatnya dapat memilih kalender atau opsi pengisian. Ini memastikan bahwa format yang konsisten digunakan, seperti "hari, bulan, tahun."
  

• Daftar dropdown: Daftar dropdown memungkinkan Anda memilih satu item dalam satu waktu. Beberapa item dapat dimasukkan secara kompak. Pertimbangkan untuk menambahkan petunjuk arah, seperti "pilih salah satu" untuk memberi tahu pengguna apa yang harus dilakukan. Pencipta dapat menambah atau menghapus item untuk menjaga daftar tetap up to date.
  

• Kotak daftar: Kotak daftar memungkinkan Anda memilih beberapa item dari satu daftar ringkas. Gunakan fitur GUI ini jika Anda memiliki daftar panjang opsi untuk dipertimbangkan pengguna. Ada empat variasi kotak daftar: satu baris, multiselect, multiselect dengan kotak centang dan kotak daftar multiselect-dual.
  

• Kotak teks: Kotak teks adalah bidang yang memungkinkan Anda memasukkan teks. Pencipta dapat mengontrol berapa banyak teks yang diizinkan.
  

• Beralih: Tombol sakelar memungkinkan Anda mengubah pengaturan biasanya sebagai status mati/hidup.

2. Komponen navigasi

Berikut adalah contoh elemen navigasi GUI:

• Breadcrumbs: Breadcrumbs menyediakan jejak halaman lanjutan yang dapat diklik. Mereka memberi Anda peta visual halaman untuk kemudahan navigasi Anda.
  

• Ikon: Ikon adalah gambar kecil yang digunakan sebagai simbol untuk membantu Anda menavigasi sistem. Mereka biasanya digunakan untuk menunjukkan aplikasi, folder, file atau browser web. Menggunakan ikon adalah cara cepat untuk membuka dokumen dan menjalankan program. Juga, semua file yang Anda buat dalam aplikasi yang sama akan memiliki ikon aplikasi dan ekstensi yang sama.
  

• Korsel gambar Korsel gambar memungkinkan Anda menggulir serangkaian gambar dan memilih gambar yang ingin Anda perbesar. Korsel biasanya menyimpan gambar mini yang mungkin di-hyperlink.
  

• Pagination: Pagination membagi konten menjadi beberapa halaman dan memungkinkan Anda melewatinya atau mengikutinya secara berurutan.
  

• Bidang pencarian: Kotak pencarian memungkinkan Anda memasukkan kata kunci atau frase untuk mencari indeks untuk hasil yang relevan. Mereka biasanya adalah kotak teks satu baris dengan tombol pencarian.
  

• Penggeser: Penggeser memiliki bilah dan tanda centang yang meluncur di atasnya. Pencipta dapat mengontrol ukuran bilah dan centang, margin bilah dan orientasinya.
  

• Tag: Tag memungkinkan Anda menemukan konten dalam kategori yang sama. Opsi termasuk memberi pengguna kemampuan untuk menambahkan tag mereka sendiri ke dalam sistem.
  

• Tab: Tab adalah kotak kecil yang menampilkan nama atau ikon grafis yang terkait dengan jendela tertentu. Saat Anda memilih tab, Anda akan melihat kontrol dan informasi spesifik yang disajikan di jendela itu. Misalnya, ketika Anda membuka beberapa halaman di browser web, Anda akan melihat tab yang berbeda ditampilkan di bagian atas jendela browser.

3. Komponen informasi

Berikut adalah contoh elemen informasi GUI:

• Kotak pesan: Kotak pesan adalah jendela kecil dengan informasi seperti kebijakan atau penafian. Ini mengharuskan Anda untuk mengambil tindakan sebelum melanjutkan.
  

• Notifikasi: Notifikasi adalah kotak pesan. Biasanya, mereka digunakan untuk menunjukkan peringatan darurat, pesan kesalahan atau penyelesaian tugas.
  

• Jendela pop-up: Jendela pop-up, atau modal, mengharuskan Anda untuk berinteraksi dengannya sebelum Anda dapat kembali ke sistem.
  

• Bilah kemajuan: Bilah kemajuan menunjukkan posisi Anda dalam serangkaian langkah dalam suatu proses. Biasanya, bilah kemajuan tidak dapat diklik. Misalnya, bilah kemajuan mungkin menunjukkan status pesanan pizza Anda dalam proses pemesanan, memasak, dan pengiriman.
  

• Kiat alat: Kiat alat menawarkan lebih banyak informasi saat Anda mengarahkan kursor ke suatu item. Misalnya, Anda mungkin menerima definisi dan contoh penggunaan saat mengarahkan kursor ke kata atau frasa.

4. Wadah

Berikut adalah contoh elemen wadah GUI:

• Akordeon: Akordeon adalah daftar item bertumpuk yang memiliki fungsi tampilkan dan sembunyikan. Saat label diklik, daftar meluas ke ukuran penuhnya.

Elemen interaksi GUI

Selain elemen struktural, GUI juga menampilkan elemen interaksi, seperti:

• Kursor: Kursor menunjukkan tempat di mana sistem akan menerima input berikutnya. Ini bisa berupa penunjuk, yang mengikuti pergerakan perangkat penunjuk—seperti mouse—atau kursor teks, yang menunjukkan titik fokus dalam kotak teks saat ini.
  

• Pilihan: Pilihan mengacu pada daftar item di mana pengguna akan menerapkan operasi. Seorang pengguna akan memilih sebagian teks untuk operasi potong, salin dan tempel. Aplikasi pengeditan gambar memungkinkan pengguna untuk memilih dan memodifikasi area tertentu dari suatu gambar dengan menggunakan alat seleksi tongkat ajaib atau alat seleksi laso.
  

• Pegangan penyesuaian: Pegangan berfungsi sebagai indikator operasi seret dan lepas. Saat pengguna menempatkan penunjuk pada pegangan untuk memulai proses seret, bentuknya berubah menjadi ikon yang mewakili fungsi seret.