Transcript pertemuan8 komponenantarmukagrafis

Pertemuan 8
Interaksi Manusia dan Komputer
Imam Bukhari, S.Kom., MM

Komponen antarmuka grafis :
bentuk –bentuk tampilan yang dipakai pada
paket-paket program aplikasi, baik yang
bekerja pada mode teks maupun grafik.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Tombol tekan
Spin Box
List Box
Combo Box
Tombol Radio/radio button
Check Button
Penggeser (Sliding Bar atau Slider)
Icon
Text Box
Editor Box


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.

Warna latar belakang untuk tombol tekan
yang sering digunakan adalah abu-abu muda
dengan pembatas tombol adalah hitam atau
abu-abu tua.


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 terdiri atas dua bagian :
- bagian untuk menampilkan nilai peubah
yang dimaksud  kotak putih
- bagian pengontrol nilai  bergambar anak
panah ke atas dan ke bawah.


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.



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).


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.
1.
2.
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).

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.



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.



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.



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.
1.
2.
3.
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.

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.



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 kirikanan (horisontal) maupun atas-bawah
(vertikal).
Ada 2 bagian penggeser :
- Penggeser horisontal
- Penggeser vertikal
vertikal
horisontal