Komponen Antarmuka Grafis

1. Komponen Antarmuka Grafis Pertemuan 9 Interaksi Manusia dan Komputer Viska Armalina, ST., M.Eng

2. Pendahuluan • Komponen antarmuka grafis : bentuk –bentuk tampilan yang dipakai pada paket-paket program aplikasi, baik yang bekerja pada mode teks maupun grafik.

3. Macam-Macam Komponen Dasar Antarmuka Grafis • Tombol tekan • Spin Box • List Box • Combo Box • Tombol Radio/radio button • Check Button • Penggeser (Sliding Bar atau Slider) • Icon • Text Box • Editor Box

4. Tombol Tekan (1) • Digunakan untuk mengaktifkan suatu aktivitas apabila tombol tersebut ditekan menggunakan mouse (klik mouse). • Teknik penampilan tombol tekan pada layar perlu diperhatikan, sehingga tampilan tombol tekan tersebut terkesan merupakan tombol tiga dimensi yang ketika dipilih terlihat seperti jika kita menekan tombol yang sebenarnya.

5. Tombol Tekan (2) • Warna latar belakang untuk tombol tekan yang sering digunakan adalah abu-abu muda dengan pembatas tombol adalah hitam atau abu-abu tua.

6. Gambar Tombol Tekan

7. Spin Box (1) • Digunakan untuk mengatur nilai suatu peubah, biasanya bertipe numerik, dengan menambahkan atau mengurangkannya dengan suatu nilai tertentu. - Nilai peubah akan bertambah ketika pengguna menekan tombol dengan anak panah ke atas, atau berkurang ketika pengguna menekan anak panah ke bawah. • Pada spin box, nilai maksimum dan minimum peubah harus dinyatakan dengan jelas agar tombol ini tidak memutar (spinning) terus menerus.

8. Spin Box (2) • Spin Box terdiri atas dua bagian : - bagian untuk menampilkan nilai peubah yang dimaksud  kotak putih - bagian pengontrol nilai  bergambar anak panah ke atas dan ke bawah.

9. Gambar Spin Box

10. List Box (1) • Komponen antarmuka grafis yang digunakan untuk menampilkan sejumlah pilihan sekaligus pada layar tampilan yang dapat dipilih oleh pengguna. • Setelah pengguna memilih salahsatu dari sekian banyak pilihan yang tersedia di list box, pilihan terpilih tersebut akan disimpan sebagai nilai dari sebuah peubah.

11. List Box (2) • Pada dasarnya sebuah list box hanya terdiri atas bagian yang digunakan untuk menampilkan pilihan-pilihan yang tersedia. • Permasalahan yang sering terjadi: - Kadang pilihan yang ada cukup banyak sehingga list tidak mampu menampung semua pilihan yang ada. - Panjang suatu pilihan (jika berupa teks) lebih besar daripada lebar list box. • Solusi : menambahkan penggeser (scrollbar).

12. Gambar List Box

13. Combo Box • Fungsinya sama dengan list box - menampilkan sejumlah pilihan yang dapat dipilih secara bebas oleh pengguna. • Kata “combo” merupakan singkatan dari “combination” yang artinya lewat komponen itu pengguna dapat memilih pilihan dari sejumlah pilihan yang tersedia atau dapat mengetikkan pilihan dia sendiri pada tempat yang disediakan.

14. Gambar Combo Box

15. Perbedaan Combo Box dan List Box ( • Pada list box : semua atau sebagian pilihan yang tersedia langsung akan terlihat. Pada combo box : pilihan-pilihan tidak akan terlihat sampai pengguna menekan tombol kontrol pada combo box yang dimaksud. • Pada list box : pengguna hanya dapat memilih pilihan yang tersedia. Pada combo box : pengguna dapat mengetikkan pilihannya sendiri (yang mungkin tidak ada dalam daftar pilihan yang tersedia).

16. Kapan Harus Menggunakan List Box?Combo Box? • Tergantung dengan lebar layar yang tersedia untuk menampilkan pilihan-pilihan yang ada. - Jika lebar layar cukup luas, bisa menggunakan list box. - Jika lebar layar tidak cukup luas untuk menampilkan semua pilihan, bisa menggunakan combo box.

17. Check Box • Digunakan untuk memilih satu atau lebih pilihan dari sejumlah pilihan yang tersedia • Check Box biasanya dioperasikan dalam sebuah kelompok. • Check box cocok dipakai jika pemrogram memberi kebebasan pengguna untuk memilih lebih dari satu pilihan. Contoh : untuk form data pribadi harus mengisi hobi, jika mempunyai hobi lebih dari satu, maka lebih tepat menggunakan check box.

18. Gambar Check Box

19. Radio Button/Tombol Radio (1) • Pada dasarnya sama dengan check box. • Tombol radio terdiri atas 2 bagian : - bagian pengendali yang berupa lingkaran kecil - label, yang menunjukkan atribut tombol radio yang dimaksud. • Tombol radio hanya dapat menampilkan satu pilihan yang dapat bernilai ON atau OFF dengan tanda tertentu.

20. Radio Button/Tombol Radio (2) • Secara fisik, masing-masing tombol radio bersifat Otonom, artinya satu sama lain tidak saling tergantung. • Secara operasional, tombol radio dapat di ON atau OFF –kan ketika pengguna mengklik bagian pengendali atau pada bagian label. • Tapi pada program yang akan disajikan, pengguna hanya dapat mengklik bagian pengendali/lingkaran kecil saja untuk meng-ON kan sebuah tombol menu sehingga secara otomatis meng-OFF kan tombol menu lain yang semula dalam keadaan ON.

21. Gambar Radio Button/Tombol Radio

22. Persamaan Radio Button dengan Check Box • Fungsinya sama-sama untuk menampilkan sejumlah pilihan yang dapat dipilih oleh pengguna. • Secara fisik, check box maupun radio button sama-sama berdiri sendiri tanpa mempengaruhi satu sama lain. • Struktur data yang diperluka untuk membuat check box sama dengan struktur data untuk membuat radio button.

23. Perbedaan Radio Button dengan check Box • Pada sekelompok radio button yang tersedia pengguna hanya dapat memilih salah satu pilihan, sedang pada check box, pengguna dapat memilih satu atau bahkan semua pilihan yang tersedia.

24. Penggeser/Slider/Scroll bar • Digunakan untuk menggeser layar untuk memperlihatkan bagian lain dari tampilan yang semula tidak terlihat, sekaligus menghilangkan bagian yang semula terlihat. • Penggeseran dapat dilakukan pada arah kiri-kanan (horisontal) maupun atas-bawah (vertikal). • Ada 2 bagian penggeser : - Penggeser horisontal - Penggeser vertikal

25. Gambar Scroll Bar vertikal horisontal