Komponen Antarmuka Grafis

Report
Komponen Antarmuka Grafis
Pertemuan 9
Interaksi Manusia dan Komputer
Viska Armalina, ST., M.Eng
Pendahuluan
• Komponen antarmuka grafis :
bentuk –bentuk tampilan yang dipakai pada
paket-paket program aplikasi, baik yang bekerja
pada mode teks maupun grafik.
Macam-Macam Komponen Dasar
Antarmuka Grafis
1. Tombol tekan
2. Spin Box
3. List Box
4. Combo Box
5. Tombol Radio/radio button
6. Check Button
7. Penggeser (Sliding Bar atau Slider)
8. Icon
9. Text Box
10. Editor Box
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.
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.
Gambar Tombol Tekan
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.
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.
Gambar Spin Box
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.
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).
Gambar List Box
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.
Gambar Combo Box
Perbedaan Combo Box dan List Box (
1. 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.
2. 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).
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.
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.
Gambar Check Box
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.
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.
Gambar Radio Button/Tombol Radio
Persamaan Radio Button dengan Check
Box
1. Fungsinya sama-sama untuk menampilkan
sejumlah pilihan yang dapat dipilih oleh
pengguna.
2. Secara fisik, check box maupun radio button
sama-sama berdiri sendiri tanpa mempengaruhi
satu sama lain.
3. Struktur data yang diperluka untuk membuat
check box sama dengan struktur data untuk
membuat radio button.
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.
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
Gambar Scroll Bar
vertikal
horisontal

similar documents