presentasi IMK kelompok 7 - widiajie Ramadhan - Fitranto F - Ferdinan A - Revando LR - Pandi S

1. Choose the Proper Screen-
Based Controls
Memilih kontrol-kontrol (elemen) layar yang tepat
Ilmu Komputer – Institut Pertanian Bogor
Interaksi Manusia dan Komputer
© 2013 Kelompok 7
1

2. Anggota Kelompok
 Fithranto Faturakhman
G64124002
 Ferdinan Andreas G64124016
 Revando Lumbanraja G64124029
 Pandi Sianturi
G64124050
 Widiajie Ramadhan
G64124059
2

3. Review
(The User Interface Design
Process) Step 1 - Know Your User and Client
Paradigmanya itu bahwa kita membuat
sistem untuk user. Ini yang paling
penting.
Fokus utamanya, kenali:
- bagaimana orang berinteraksi dengan
komputer
- karakteristik, experience, skill
pengguna yang berbeda-beda
- pekerjaan mereka yang akan diadopsi
3

4. Review
(The User Interface Design
Process)
 Step 2 - Understand the Business
Function
- Kenali lebih mendalam proses bisnis
yang terjadi dan dapatkan goals-nya
- Pecah-pecah dan deskripsikan
proses tersebut dalam task analysis
beserta activities-nya
4

5. Review
(The User Interface Design
Process) Step 3 - Understand the Principles of
Good Screen Design
Pahami prinsip-prinsip desain yang
baik, dimana:
- mampu mencapai tujuan &
kebutuhan pengguna
- sistem mudah digunakan
- mencapai tujuan bisnis itu sendiri
- mulai merancang
layouting, rules, dsb
5

6. Review
(The User Interface Design
Process)
 Step 4 - Develop System Menus and
Navigation Schemes
- Menyampikan informasi yang jelas
secara general menuju spesifik salah
satunya lewat menu
- Kenali jenis-jenis menu yang ada
- Menentukan struktur, fungsi, dan
format dari menu yang akan dibuat
6

7. Review
(The User Interface Design
Process)
 Step 5 - Select the Proper Kinds of
Windows
- Antar platform memiliki karakteristik
window yang berbeda-beda
- Kenali jenis-jenis window yang ada
- Tentukan
karakteristik, komponen, cara
mengoperasikan window
7

8. Review
(The User Interface Design
Process)
 Step 6 - Select the Proper Device
Based-Controls (Input Device)
- Seiring evolusi dari graphical
system, alat input yang digunakan ikut
semakin berkembang juga
- Kenali alat input terkini yang ada
- Tentukan alat input yang tepat untuk
sistem yang dikembangkan
8

9. SUMMARY / RINGKASAN
Apa yang menjadi poin penting pada bab ini
?
 Menjelaskan ke arah lebih spesifik dari 6
step sebelumnya (level activity)
 Menjabarkan elemen-elemen pada layar
sebagai alat kontrol untuk
berinteraksi, seperti:
- mengisi atau memilih data
- mengubah data
- menampilkan data dalam bentuk
teks, gambar, dll
- mengirimkan perintah untuk melakukan
aksi tertentu
9

10. Pendahuluan
 Ketepatan dalam memilih device-based
controls (alat input) dan screen-based
controls (elemen layar) menentukan
kesuksesan sebuah sistem. Contoh:
fingerprint untuk absensi
 Sebuah alat kontrol harus:
- terlihat apa yang ia kerjakan
- bekerja sebagaimana mestinya
- bekerja sesuai dengan desain yang
ditentukan
- disajikan secara standar dan konsisten
- menampilkan dengan jelas bahwa elemen
tersebut adalah alat kontrol 10

11. Contoh aturan kontrol yang
ditetapkan Microsft
 Elemen yang timbul dapat diakses
(button)
 Elemen yang tersembunyi tidak dapat
diakses
 Elemen dengan berlatar belakang warna
putih dapat dibuka, diedit, dan
dipindahkan (textbox)
 Pada dasarnya, silahkan berkreasi
sebebasnya namun patuhi ketetapan
yang sudah ditentukan agar sistem
optimal dan tidak mengurangi nilai UX 11

12. Operable Controls
 Fokus utamanya melakukan:
- entry (textbox),
- selection (dropdown,radio,etc),
- changing (text),
- editing value (textbox),
- cause a command to be performed (button)
 Dikategorikan menjadi:
- Button
- Text entry/read-only
- Selection
- Combination entry/selection
- Other specialized controls
12

13. Button
 Berbentuk mirip persegi, persegi
panjang, dan sejenisnya yang disertai
dengan keterangan yang menjelaskan aksi
apa yang akan dilakukan
 Labelnya bisa berupa teks, gambar, atau
keduanya
13

14. Button
 Tujuannya:
- melakukan aksi tertentu
- menampilkan menu popup
 Tepat digunakan untuk:
- Aksi yang mengarah kepada window
dan sering digunakan
- Menampilkan window lain
- Menampilkan menu dari sebuah
options
- Menentukan mode dari suatu nilai
14

15. Button
 Command button, biasanya labelnya diisi
dengan teks saja
 Button bar / toolbar, biasanya labelnya
dilengkapi teks dan gambar
 Symbol button, biasanya labelnya
dilengkapi dengan gambar saja
15

16. Button
 Ukuran
- Gunakan ukuran yang relatif besar
- Jaga kekonsistenan tinggi dan lebarnya
- Khusus untuk label yang cukup panjang
diperbolehkan untuk lebih lebar
 Dalam sebuah window, jumlah sebuah button yang
disarankan 0-6 button
16

17. Text Boxes
 Berisi teks yang dimasukkan oleh
pengguna melalui keyboard.
 Bisa juga berisi teks dengan kebutuhan
untuk ditampilkan saja
 Dilengkapi dengan caption untuk
mendeskripsikan
tujuannya
17

18. Text Boxes
 Tujuannya:
- Menampilkan, mengisi, mengubah informasi
tekstual
- Menampilkan informasi yang untuk dibaca
saja (read-only)
 Tepat digunakan untuk:
- Data yang cakupannya besar
- Data yang sulit untuk dikategorikan
- Data yang memiliki panjang yang berbeda-
beda
- Ketika tidak memungkinkan menggunakan
selection list
18

19. Text Boxes
 Untuk texbox single field, posisi
caption sebelah kiri dengan dibatasi
titik dua dengan texbox di sebelah
kanannya
 Atau textbox single field, dapat dibuat
posisi caption dan titik dua di atas
textbox
 Untuk texbox multiple field posisi
caption dan titik dua di atas beberapa
textbox dengan
19

20. Single field ke kanan
Single field ke bawah
Multiple field
20

21. Text Boxes
 Ukuran
- Ukuran suatu textbox disesuaikan
dengan perkiraan inputan yang
biasanya dimasukkan
- Teks box harus cukup
memperlihatkan semua data (fixed
length)
- Teks box harus cukup
memperlihatkan data yang penting
(variable length)
21

22. REVANDO
LUMBANRAJA
Selection Controls [Radio Buttons] –
Selection Controls [Palettes]
22

23. Selection Control
Selection Control terdiri dari:
 Radio buttons
 Check boxes
 List boxes
 Drop-down/pop-up list boxes
 Palettes.
23

24. Radio Buttons
 Radio button biasanya digunakan untuk
menetapkan satu pilihan dari beberapa
pilihan yang saling eksklusif.
 Metode tampilan umum terdiri dari sebuah
lingkaran yang terkait dengan setiap
deskripsi pilihan.
24

25. Radio Buttons
 Keuntungan :
◦ Mudah diakses
◦ Mudah untuk membandingkan pilihan.
◦ Disukai oleh pengguna.
 Kekurangan:
◦ Jumlah pilihan terbatas
 Deskripsi pilihan :
◦ Ditampilkan dalam satu baris teks.
◦ Posisi deskripsi di sebelah kanan tombol dan dipisahkan
setidaknya satu ruang dari tombol.
◦ Bila pilihan tidak tersedia untuk seleksi
kondisional, tampilkan deskripsi pilihan berwarna abu-abu
atau redup.
25

26. Radio Buttons
 Contoh radio button conditional :
26

27. Radio Buttons
 Size :
◦ Menampilkan minimal dua pilihan dan maksimal delapan.
27

28. Radio Buttons
 Structure:
◦ Tombol berada di sebelah kiri deskripsi
◦ Jika ruang vertikal di layar terbatas, orientasi tombol
horizontal.
28

29. Radio Buttons
 Structure:
◦ Memberikan pemisahan yang memadai antara pilihan
sehingga tombol yang berhubungan dengan deskripsi
tepat.
◦ Menyertakan border untuk memperkuat hubungan antar
pilihan
29

30. Radio Buttons
30

31. Radio Buttons
 Organization
◦ Untuk pilihan yang tersusun dari atas ke bawah, mulai
pengorderan dari atas.
◦ Untuk pilihan yang tersusun dari kiri ke kanan, mulai
pengorderan dari kiri.
◦ Jika dalam kondisi tertentu pilihan tidak tersedia, dapat
ditampilkan dengan gradasi warna yang kurang terang
dibandingkan pilihan yang lain.
31

32. Radio Buttons
 Related control
◦ Posisi setiap kontrol terkait dengan radio button berada di
sebelah kanan deskripsi pilihan.
◦ Gunakan tanda panah (>) pada akhir deskripsi jika
deskripsi pilihan pada radio button juga bertindak sebagai
label
32

33. Radio Buttons
 Caption
◦ Radio Buttons dengan orientasi kolom
33

34. Radio Buttons
◦ Radio Buttons dengan orientasi horisontal
34

35. Radio Buttons
 Keyboard Equivalents
menentukan mnemonic dengan
menggarisbawahi huruf dalam
deskripsi pilihan.
35

36. Check Boxes
 Check box berbeda dari radio buttons, user
dimungkinakan memilih lebih dari satu alternatif
 Setiap opsi/pilihan bertindak sebagai switch.
 Check box terdiri dari kotak persegi dan deskripsi
pilihan.
36

37. Check Boxes
 Advantages
◦ Mudah digunakan
◦ Mudah untuk mengcompare pilihan
 Disadvantages
◦ Penggunaan ruang layar cukup besar.
◦ Jumlah pilihan Terbatas.
 Deskripsi Pilihan
◦ Deskripsi pilihan sepenuhnya dieja jelas menggambarkan
nilai-nilai atau efek yang ditetapkan oleh check box.
◦ Tampilkan dalam satu baris teks.
◦ Posisi deskripsi di sebelah kanan check box.
◦ Ketika pilihan tidak tersedia untuk seleksi
kondisional, tampilkan deskripsi pilihan dengan visual
redup.
37

38. Check Boxes
Contoh check box conditional :
38

39. Check Boxes
 Size
minimal satu pilihan, maksimal
delapan
39

40. Check Boxes
 Structure
◦ pengelompokan Check Boxes yang terkait.
◦ Rata kiri Check Boxes dan deskripsi pilihan.
40

41. Check Boxes
 Captions
- Orientasi Kolom
41

42. Check Boxes
 Captions
- Orientasi Horizontal
42

43. Check Boxes
 Keyboard Equivalents
menentukan mnemonic dengan
menggarisbawahi huruf dalam
deskripsi pilihan.
43

44. Palletes
 Kontrol yang terdiri dari serangkaian alternatif
grafis. Pilihan itu sendiri bersifat deskriptif, yang
terdiri dari warna, pola, atau gambar.
 Selain menjadi kontrol layar standar, palet juga
dapat disajikan pada menu pull-down atau pop-up
atau toolbar.
44

45. Palletes
45

46. Palletes
 Advantages:
◦ Penggunaan gambar yang membantu pemahaman.
◦ Mudah mencompare pilihan.
◦ Penggunaan ruang/space layar lebih sedikit
 Disadvantages:
◦ Jumlah pilihan yang ditampilkan terbatas
◦ Membutuhkan keterampilan dan waktu untuk merancang representasi
grafis yang bermakna dan atraktif.
 Graphical Representations
◦ Memberikan arti yang akurat, dan jelas ilustrasi yang jelas
◦ Buat gambar dengan ukuran yang sama
◦ menguji ilustrasi sebelum menerapkannya.
46

47. Palletes
 Size
◦ kemampuan perangkat keras dalam menciptakan tampilan
ilustrasi yang jelas.
◦ Keterbatasan dalam kemampuan orang untuk
membedakan jenis representasi grafis secara akurat
 Organization
◦ Untuk palet tersusun atas ke bawah, pengorderan dimulai
dari atas
◦ Untuk palet tersusun atas ke bawah, pengorderan dimulai
dari atas
◦ Jika dalam kondisi tertentu pilihan tidak tersedia, dapat
ditampilkan dengan gradasi warna yang kurang terang
dibandingkan pilihan yang lain.
47

48. Palletes
48

49. Palletes
 Orientasi Kolom
49

50. Palletes
 Orientasi Horizontal
50

51. WIDIAJIE RAMADHAN
Selection Controls [List Boxes] –
Combination Entry/Selection Controls [Combo Boxes]
51

52. List Box
 List box adalah sebuah kotak persegi
panjang yang ditampilkan secara
permanen yang berisikan daftar nilai
atau atribut dari suatu pilihan tunggal
maupun beragam / banyak.
 List box juga dapat dilakukan scroll
untuk melihat list yang sangat besar /
panjang dan user dapat memilih
dengan melakukan klik menggunakan
mouse
52

53. List Box
 Contoh :
53

54. List Box
Tujuan Penggunaan :
- Untuk menampilkan koleksi item
termasuk :
1. Mutually exclusive options
2. Non - Mutually exclusive options
54

55. List Box
Kelebihan / Keunggulan:
- Jumlah Pilihan yang tanpa batas
- Membantu mengingatkan pengguna
akan pilihan apa saja yang tersedia
- Kotak selalu terlihat
55

56. List Box
Kekurangan / Kelemahan:
- Membutuhkan ruang layar : semakin
banyak menu / list maka semakin
banyak layar yang digunakan
- Sering membutuhkan tindakan
scrolling untuk dapat melihat semua
pilihan yang ada
56

57. List Box
Digunakan untuk keperluan:
- Pemilihan nilai atau atribut
- Untuk pemilihan yang bersifat :
a. Mutually exclusive
(hanya satu yang dapat dipilih)
b. Non-mutually-exclusive
(dapat satu atau lebih dari satu
yang dapat dipilih).
- Saat ruang layar tersedia
57

58. List Box
(Lanj) Digunakan untuk keperluan:
- Untuk data dan pilihan yang :
> Dapat diwakilkan dengan teks
secara baik
> Tidak sering dipilih
> Mudah diingat
> Besar jumlahnya
58

59. Pedoman Umum Membuat List
Box
1. Tentukan Deskripsi akan isi dari
list box
> Harus jelas dan bermakna
> Pemilihan harus dari kiri ke kanan
kolom
> representasi grafis harus jelas
mewakili pilihan
59

60. Pedoman Umum Membuat List
Box
2. List Size
> Tidak ada batasan aktual dalam
ukuran
> Tampilkan seluruh alternatif yang
tersedia
> Tidak lebih dari 40 page-down
untuk
mencari daftar
60

61. Pedoman Umum Membuat List
Box
3. Ukuran Box
> Harus panjang, setidaknya cukup untuk 6 - 8 daftar
pilihan tanpa scrolling
Kecuali jika :
- terdapat kendala pada ukuran layar yang ada
maka kotak dapat dikurangi ukuranya
sehingga dapat menampilkan setidaknya 3
daftar pilihan.
> Harus cukup lebar untuk menampilkan pilihan yang
mungkin terpanjang, jika tidak cukup maka pilihan
yang panjang dapat dipersingkat dengan
menggunakan tanda (…)
61

62. Pedoman Umum Membuat List
Box
3. Ukuran Box
62

63. Pedoman Umum Membuat List
Box
4. Organization
> Pengurutan list harus logis dan
dapat
dipahami sehingga list dapat
dapat dicari dengan mudah
63

64. Pedoman Umum Membuat List
Box
5. Layout dan Separasi / pembatas
Berikan warna solid untuk border pembatas
dalam box agar memudahkan dalam membaca isi
dari list tersebut serta memberikan fungsi sebagai
pembatas antara batas kiri maupun batas kanan
list serta pembatas antara box dengan caption.
64

65. Pedoman Umum Membuat List
Box
5. Layout dan Separasi / pembatas (lanj)
 warna pembatas (border) harus sama dengan
warna deskripsi yang dipilih
 Tinggalkan satu posisi karakter kosong diantara
pilihan dengan border kiri
 Tinggalkan satu posisi karakter kosong diantara
deskripsi pilihan terpanjang di kanan border jika
memungkinkan
65

66. Pedoman Umum Membuat List
Box
6. Captions
Tampilan berupa teks / huruf penjelas
keterangan yang penempatannya
biasanya disebelah kiri kotak (untuk
kasus tertentu diperbolehkan
penempatan berada di bawah atau
sisi kanan kotak)
66

67. Pedoman Umum Membuat List
Box
7. Disabling
Bila kotak sedang tidak diaktifkan , tampilkan
isi list dalam kotak tersebut dengan warna
redup (misal abu-abu) untuk menandakan
bahwa kotak tersebut sedang tidak difungsikan
67

68. Pedoman Umum Membuat List
Box
8. Pemilihan Metode dan Indikasi
1. Pointing :
Berikan highlight pada bagian yang sedang
disorot oleh pointer (sedang ditunjuk oleh
pointer)
68

69. Pedoman Umum Membuat List
Box
8. Pemilihan Metode dan Indikasi
(lanj)
2. Seleksi
Berikan highlight pada bagian yang sedang di
seleksi / dipilih. Highlight dapat berupa warna
terang.
69

70. Pedoman Umum Membuat List
Box
8. Pemilihan Metode dan Indikasi
(lanj)
3. Aktivasi
Dibutuhkan penekanan tombol atau pemberian
perintah untuk memilih item pada list
70

71. Pedoman Umum Membuat List
Box
9. Single-Selection List Boxes
Digunakan dalam list box untuk memilih hanya 1 item
dari daftar tersebut, single selection ini dapat
menangani lebih banyak item list
71

72. Extended and Multiple-
Selection List Boxes
 multiple selection list box memungkinkan untuk
memilih banyak item dari daftar yang panjang
 terdapat operasi non-exclusive yang mirip
dengan check box.
 intinya ini sebagai List box yang dapat
menangani sejumlah list item yang sangat
banyak secara efisien.
 Multiple selection ini dioptimalkan untuk
pemilihan item yang independen
72

73. Pedoman Umum Desain
Extended and Multiple-Selection
List Boxes
1. Pilih Indikasi yang ada
- Gunakan tanda check
- Berikan tanda misal "X" atau cheklis untuk
menandai pada seblah kiri list.
73

74. Pedoman Umum Desain
Extended and Multiple-Selection
List Boxes
1. Pilih Indikasi yang ada (lanj)
Kelompokan list yang sudah dipilih atau diberi
tanda pada satu tempat baru
74

75. Pedoman Umum Desain
Extended and Multiple-Selection
List Boxes
1. Pilih Indikasi yang ada (lanj)
- Gunakan tombol / keterangan pilih dan
batalkan
- Berikan keterangan akan jumlah dari list
yang sudah dipilih / diberi tanda
75

76. List View Controls
 List view control adalah special extended-
selection dari list box yang menampilkan isi
dari masing-masing item yang terdiri dari icon
dan label.
 List view control dapat berisikan daftar is dari
4 pandangan yang berbeda seperti : icon
besar, icon kecil, list, dan report.
76

77. List View Controls
Contoh :
77

78. Drop-down/Pop-up List Boxes
merupakan bidang persegi panjang tunggal
dengan tombol kecil pilihan disampingnya dan
berisikan daftar tersembunyi terkait pilihan
tersebut
- Ketika tompol tersebut dipilih, maka akan
muncul box berukuran besar yang berisiikan
daftar yang haris dipilih salah satu.
- seleksi menggunakan mouse untuk memilih
dan klik.
- teks yang panjang tidak dapat dituliskan disini.
78

79. Drop-down/Pop-up List Boxes
Digunakan pada saat :
Digunakan untuk memilih satu dari banyak daftar /
list disaat terdapat keterbatasan ukuran layar
Kelebihan :
- Jumlah pilihan yang tak terbatas
- Mengingatkan user akan pilihan yang
tersedia
- Menghemat ukuran layar
79

80. Drop-down/Pop-up List Boxes
Kekurangan :
- Membutuhkan aksi tambahan untuk
menampilkan daftar pilihan
- Saat ditampilkan, semua pilihan mungkin
tidak langsung terlihat, dibutuhkan scrolling
80

81. Drop-down/Pop-up List Boxes
Contoh :
Figure 7.70 Drop-down list boxes. There are four unopened boxes.
Figure 7.71 Drop-down list box opened for Country.
81

82. Prompt Button
Digunakan untuk memberikan isyarat berupa
visual bahwa di dalam kotak tersebut terdapat
suatu isi / pilihan yang akan terlihat setelah
tanda panah penunjuk kebawah tersebut
ditekan
Contoh :
82

83. Combination Entry/Selection
Controls
 1. Spin Boxes
adalah salah satu komponen antar muka grafis yang
digunakan untuk mengatur suatu nilai
peubah, biasanya bertipe numerik, dengan
menambahkan atau mengurangkannya dengan suatu
nilai tertentu. Dalam spin box nilai maksimum dan
minimum peubah harus dinyatakan dengan
jelas, supaya tombol ini tidak memutar (spining) terus
menerus.
Spin boxes.
83

84. Combination Entry/Selection
Controls
 2. Combo Box
Adalah sebuah kotak persegi panjang yang
memiliki isi
didalamnya dan kotak pada isi (list)
merupakan kotak
berbentuk persegi panjang yang lebih besar
(menyerupai dropdown list box) .
84

85. Combination Entry/Selection
Controls
 2. Combo Box (lanj)
85

86. Combination Entry/Selection
Controls
 2. Combo Box (lanj)
Kegunaan :
Combo Box berguna untuk memilih objek atau
atribut pengaturan yang mutually exclusive.
Keuntungan : - Jumlah entri dan piilihan yang tanpa batas
- Mengingatkan user akan pilihan yang ada
- Flexible
Kerugian : - Memakan banyak tempat
- Semua pilihan dalam list box tidak selalu
terlihat,
harus menggunakan scrolling
86

87. PANDI SIANTURI
Combination Entry/Selection Controls [Drop Down] –
Presentation Controls [Column Headings]
87

88. Drop-down/Pop-up Combo
Boxes
 Deskripsi
- Sebuah kotak teks persegi panjang dengan tombol kecil di
sampingnya.
- Tombol memberikan isyarat visual bahwa kotak teks
tersebut terkait tersedia pilihan yang tersembunyi.
 Tujuan
Untuk mengentri atau seleksi dari daftar pilihan dalam kotak
teks sesuai kebutuhan.
 Keuntungan
- Tidak terbatasnya jumlah entri dan pilihan.
- Mengingatkan pengguna akan pilihan yang tersedia.
- Fleksibel, memungkinkan pemilihan atau entri pengetikan.
- Entri tidak terbatas
88

89. Drop-down/Pop-up Combo
Boxes
 Kekurangan
- Butuh langkah tambahan untuk menampilkan daftar pilihan.
- Bila ditampilkan, semua pilihan kotak mungkin tidak selalu
terlihat, membutuhkan scroll.
- Pengguna mungkin mengalami kesulitan dalam mengingat apa
yang harus diketik.
- Isi Daftar dapat berubah, sehingga sulit untuk menemukan item.
- Daftar dapat dipesan dengan cara yang tak terduga, sehingga sulit
untuk menemukan item.
 Penggunaan yang benar
- Untuk memasuki atau memilih objek atau nilai-nilai atau atribut
pengaturan.
- Untuk informasi yang saling eksklusif (hanya satu yang dapat
dimasukkan atau dipilih).
- Ketika pengguna mungkin merasa praktis untuk memilih jenis
informasi dari pada memilih jenis informasi dari daftar.
89

90. Drop-down/Pop-up Combo
Boxes
- Pengguna dapat mengingat dan mengetikkan informasi lebih cepat
dari pada memilih dari daftar.
- Menyarankan pengguna untuk mengingat pilihan yangtersedia.
- Data harus dimasukkan karena tidak terdapat dalam daftar pilihan.
- Ruang layar terbatas.
- Untuk data dan pilihan yang:
• Terbaik diwakili tekstual.
• Agak akrab atau dikenal.
• Sering berubah.
• besar jumlahnya.
• Variabel atau panjang daftar yang tetap.
90

91. Drop-down combo box, tertutup.
Drop-down combo box, terbuka.
Drop-down combo box, tertutup.
91

92. Slider
 Keterangan
- Sebuah skala memperlihatkan tingkatan
kualitas pada sebuah kontinum.
- Termasuk sebagai berikut:
• Sebuah poros atau bar.
• Sebuah rentang nilai dengan label yang
sesuai.
• Sebuah kelompok yang menunjukkan
pengaturan relatif melalui lokasinya di
poros.
• Opsional, sepasang tombol untuk
memungkinkan gerakan tambahan slider
kelompok.
• Opsional, kotak teks untuk mengetik
atau menampilkan nilai yang
pasti. 92

93. Slider
• Opsional, posisi detent untuk nilai-nilai khusus.
- Dapat berorientasi vertikal maupun horizontal.
- Dipilih dengan menggunakan mouse untuk:
• Scroll di skala sampai nilai yang diinginkan tercapai.
• Tombol “point at” di salah satu ujung skala dan
mengklik untuk mengubah nilai.
 Tujuan:
- Untuk membuat pengaturan ketika penyesuaian kualitatif
terus menerus dapat diterima, maka
berguna untuk melihat nilai saat ini relatif terhadap rentang
nilai yang mungkin.
 Keuntungan:
- Representasi spasial pengaturan relatif.
- Visual khas.
93

94. Slider
 Kekurangan:
- Tidak tepat sebagai indikasi alfanumerik.
- Membutuhkan ruang layar.
- Biasanya lebih kompleks daripada kontrol lainnya.
 Penggunaan yang benar:
- Untuk mengatur atribut.
- Untuk pilihan saling eksklusif.
- Ketika sebuah objek memiliki rentang yang terbatas
dari pengaturan yang mungkin.
- Ketika rentang nilai adalah kontinu.
- Bila pilihan dapat meningkatkan atau menurunkan
dalam beberapa hal yang dikenal, diprediksi, dan
mudah dipahami.
- Ketika representasi ruang akan meningkatkan
pemahaman dan penafsiran.
- Bila menggunakan slider memberikan akurasi yang
memadai.
94

95. Slide
r
95

96. Tabs
 Keterangan:
- Sebuah jendela yang berisi pembagi tab yang
membuat halaman atau bagian.
 Tujuan:
- Untuk menyajikan informasi yang dapat secara logis
diatur dalam halaman atau bagian dalam jendela yang
sama.
 Keuntungan:
- Menyerupai berbasis kertas yang sama.
- Secara visual terlihat berbeda.
- Efektif mengatur tidak terjadinya pengulangan dan
informasi yang berhubungan.
 Kekurangan:
- Secara visual terlihat rumit.
96

97. Tabs
 Proper penggunaan:
- Untuk menyajikan informasi yang berlainan, secara
logis terstruktur, memiliki keterkaitan.
- Untuk menyajikan pilihan pengaturan yang bisa
diterapkan pada suatu objek.
- Ketika label tab yang pendek bisa menjelaskan isi tab.
- Ketika urutan penggunaan informasi bervariasi.
97

98. Tabs from Microsoft Windows.
98

99. Date Picker
 Keterangan:
- Sebuah daftar drop-down box yang menampilkan
kalender 1 bulan di list box drop-down.
- Bulan yang ditampilkan dapat diubah melalui tombol
perintah menekan dengan kiri dan kanan menunjuk
panah.
- Sebuah tanggal untuk list box dapat dipilih dari
kalender drop-down.
 Tujuan:
- Untuk memilih tanggal dalam kotak daftar drop-down.
 Keuntungan:
- Menyediakan representasi dari kalender fisik.
- Pencatatan kalender dalam cara yang diprediksi.
- Secara visual terlihat berbeda.
99

100. Date Picker
 Kekurangan:
- Membutuhkan langkah tambahan untuk menampilkan
kalender.
- Bila ditampilkan, semua pilihan bulan tidak
terlihat, membutuhkan bentuk scrolling untuk
mengakses pilihan yang diinginkan.
 Proper penggunaan:
- Untuk memilih dan menampilkan satu tanggal dalam
jarak dekat bulanan ke default bulan disajikan pada
kotak daftar drop-down.
A date-picker control.
100

101. Tree View
 Keterangan:
- Sebuah kotak control list khusus yang
menampilkan satu set objek sebagai kerangka
teridentasi.
- Tercakup, opsional, tombol yang membuka dan
menutup garis besarnya.
• Sebuah tombol bertuliskan tanda tambah
(+)
• Sebuah tombol bertuliskan tanda kurang (-)
- Elemen yang opsional dapat ditampilkan
adalah:
• Ikon.
• Graphics, seperti kotak centang.
• Garis untuk menggambarkan hubungan
hirarki.
 Tujuan dan penggunaan yang tepat: 101

102. A tree view control.
102

103. Scroll Bars
 Keterangan:
- Sebuah persegi panjang yang terdiri dari:
• Sebuah daerah scroll.
• Sebuah kotak slider di dalamnya.
• Tombol tanda panah atau anchor di kedua ujung.
- Tersedia jika diperlukan di jendela primer dan
sekunder untuk melakukan pengendalian.
- Dapat berorientasi vertikal atau horizontal di tepi
jendela atau halaman.
 Tujuan:
- Untuk mencari dan melihat informasi yang
membutuhkan lebih banyak ruang daripada tampilan
yang diberikan.
 Keuntungan:
- Memungkinkan melihat data ukuran terbatas.
103

104. Scroll Bars
 Kekurangan:
- Membutuhkan ruang layar.
- Bisa merepotkan untuk dioperasikan.
 Tepat digunakan:
- Ketika informasi yang tersedia lebih banyak daripada
ruang jendela untuk menampilkannya.
- Jangan gunakan untuk menetapkan nilai.
Scroll bar.
104

105. Static Text Fields
 Keterangan:
- Hanya bacaan informasi tekstual.
 Tujuan:
- Untuk mengidentifikasi kontrol dengan
menampilkan caption kontrol.
- Untuk memperjelas layar dengan memberikan
petunjuk atau informasi .
- Untuk menyajikan informasi deskriptif.
 Proper penggunaan:
- Untuk menampilkan teks keterangan kontrol.
- Untuk menampilkan informasi instruksional.
- Untuk menampilkan informasi deskriptif.
105

106. Aturan Pembuatan Static Text
Fields
 Sertakan titik dua (:) sebagai bagian dari
judul.
 Sertakan mnemonic untuk akses
keyboard.
 Ketika kontrol terkait
dinonaktifkan, menampilkannya redup.
 Ikuti semua petunjuk yang disajikan
untuk penyajian keterangan dan layout.
 Tampilan dalam gaya font yang unik dan
konsisten untuk pengenalan yang mudah
dan sebagai pembedaan.
106

107. Static text field.
107

108. Group Boxes
 Keterangan:
- Sebuah bingkai persegi panjang yang
mengelilingi sebuah kontrol atau kelompok
kontrol.
- Sebuah keterangan opsional dapat dimasukkan
dalam pojok kiri atas bingkai.
 Tujuan:
- Untuk visual menghubungkan elemen kontrol.
- Untuk visual menghubungkan sekelompok
kontrol terkait.
 Penggunaan yang benar:
- Untuk memberikan batas sekitar radio button
atau check box.
- Untuk memberikan batas sekitar dua atau lebih
kontrol terkait fungsional.
108

109. Group Boxes
 Pedoman:
- Label atau heading:
• Biasanya, menggunakan frase nomina
atau kata benda untuk label atau
heading.
• Memberikan label singkat atau heading,
sebaiknya satu atau dua kata.
• Kaitkan label atau konten heading
terhadap isi kotak kelompok.
• Mendayagunakan huruf pertama dari
setiap kata yang signifikan.
• Jangan menyertakan dan mengakhiri
titik dua (:).
- Ikuti semua petunjuk yang disajikan untuk
kontrol dan perbatasan bagian.
109

110. Group Box.
110

111. Column Headings
 Keterangan:
- Hanya Informasi tekstual yang berfungsi sebagai
sebuah heading di atas kolom teks atau angka.
- Dapat dibagi menjadi dua bagian atau lebih.
 Tujuan:
- Untuk mengidentifikasi kolom informasi dalam sebuah
tabel.
 Proper penggunaan:
- Untuk menampilkan heading di atas kolom informasi
dalam sebuah tabel.
 Pedoman:
- Heading:
• Memberikan sebuah heading singkat.
• Dapat mencakup teks dan gambar grafis.
• Mendayagunakan huruf pertama dari setiap kata yang
signifikan.
111

112. Column Headings
 • Jangan menyertakan titik dua (:).
- Lebar kolom harus sesuai dengan ukuran rata-rata
entri kolom.
- Tidak mendukung akses keyboard.
Column heading Column part.
112

113. FITHRANTO
FATURAKHMAN
Presentation Controls [Tool Tips] –
Selecting Proper Controls [Choosing a Control Form]
113

114. TOOL TIP
Deskripsi:
Sebuah jendela pop-up kecil berisi teks deskriptif yang
muncul ketika pointer digerakkan di atas kontrol atau
elemen .
Tujuan :
Untuk memberikan informasi deskriptif tentang suatu
kontrol atau elemen layar.
Contoh ToolTip
114

115. TOOL TIP
Keuntungan:
-Mengidentifikasi kontrol jika tidak teridentifikasi.
-Mengurangi kekacauan layar mungkin disebabkan
oleh keterangan kontrol dan deskriptif
Kerugian :
- Tidak jelas, karena harus di telaah
- Penampilan yang sengaja dapat menggangu
115

116. BALLON TIP
Deskripsi:
Sebuah jendela pop-up kecil yang berisi informasi
dalam balon kata. Letaknya berdekatan dengan item
atau elemen yang diterapkan.
Tujuan:
Untuk memberikan informasi deskriptif atau status
tambahan tentang elemen layar.
Contoh Balloon Tip ------>
116

117. BALLON TIP
Keuntungan:
- Menyediakan pengingat berguna dan informasi
status.
Kerugian:
- Dapat merusak penampilan jika digunakan
berlebihan .
Penggunaan yang ideal:
-Gunakan sebagai pengingat informasi.
117

118. PROGRESS INDICATOR
Deskripsi:
Sebuah persegi panjang yang mengisi sebagai suatu
proses yang sedang dilakukan, yang menunjukan
persentasi proses yang telah selesai
Tujuan:
- memberikan feedback terhadap proses yang telah
berjalan
Contoh progress Indicator --- ->
118

119. Sample Box
Deskripsi:
Sebuah kotak menggambarkan apa yang akan
muncul di layar berdasarkan parameter yang dipilih.
Tujuan:
Untuk memberikan representasi dari isi layar yang
sebenarnya berdasarkan parameter yang dipilih.
-Contoh Sample Box --------- >
119

120. Scrolling Tickers
Deskripsi:
Teks yang secara horizontal tampil melalui jendela
container.
Tujuan:
- Untuk memberikan informasi secara sekilas.
-Contoh Scrolling Tickers---- >
120

121. Seleksi Kontrol yang Tepat
Survei terlebih dahulu beberapa studi penetlitian
tentang seleksi kontrol.
Hasil penelitian tersebut dimasukan menjadi pedoman
seperti yang dibahas sebelumnya.
Kriteria dalam pemilihan kontrol di ringkas, dan
beberapa panduan seleksi disajikan.
121

122. Memilih Tipe kontrol
Untuk data yang sudah dikenal, gunakan tipe kontrol
yang memiliki keystrokes sedikit.
Untuk data yang tidak dikenal dan rentan terhadap
kesalahan, gunakan teknik seleksi.
Aided vs Unaided Entry
- Menyediakan entri bantuan bila memungkinkan.
- Mengurangi setiap penekanan tombol ekstra yang
tidak perlu.
- Memberikan sinyal pemberitahuan bahwa
autocomplete telah dilakukan.
122

123. Comparison of GUI Controls
Direct Manipulation
1. Drag and drop
item di seret ke lokasi item yang diinginkan
2. Drag and drop beetwen
item diseret ke lokasi antara dua item yang
diinginkan.
Selection
1. Icon
ikon diposisikan antara setiap pasangan item.
2. Radio Buttons
Item yang disajikan dalam bentuk matrix
123

124. Comparison of GUI Controls (continue)
Selection (continue)
3. Drop down
ketika dropdown aktif maka item yang terdapat
padalokasi tersebut terpilih.
Entry
1. One entry area
kolom teks tunggal
2. Four entry area
4 kolom teks.
124

125. Kriteria dalam pemilihan kontrol
1. Data consideration
2. Task consideration
3. User consideration
4. Display consideration
125

126. Kontrol seperti apa yang harus dipilih
John esgard et all, 1995
Keterangan lebih lanjut terdapat pada buku galitz hal 504-506
Task Best Control If Screen Space
Constraint Exist
Mutually exclusive Radio button Dropdown
Not mutually exclusive Check boxes Multiple-selection box
Select or type a value
text entry field
Radio button with
other
Dropdown /combo box
Setting a value within
a range
Spin button Text box
126

127. SEKIAN..
TERIMA KASIH..
Semoga bermanfaat..
127