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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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