Transcript Slide 1

Ragam Dialog
PENDAHULUAN
 RAGAM DIALOG (DIALOQUE STYLE) adalah cara
pengorganisasian berbagai teknik dialog interaktif
yang memungkinkan terjadinya komunikasi antara
manusia dengan komputer.
 Tujuan perancangan antarmuka dengan berbagai
dialog pada dasarnya adalah untuk mendapatkan satu
kriteria yang sangat penting dalam pengoperasian
sebuah program aplikasi, yakni aspek ramah dengan
pengguna (user friendly).
Beberapa sifat penting ragam dialog
 Inisiatif
 Keluwesan
 Kompleksitas
 Kekuatan
 Beban informasi
 Konsistensi
 Umpan balik
 Observabilitas
 Kontrolabilitas
 Efisiensi
 Keseimbangan
Beberapa sifat (cont…)
 Inisiatif, dpt menentukan tipe-tipe pengguna yg
dituju oleh sistem yg dibangun. Ada 2 :
- inisiatif oleh komputer, pengguna memberikan
tanggapan atas prompt yg diberikan komputer
- inisiatif oleh pengguna, pengguna diharapkan
memahami sekumpulan perintah dgn sintaks
tertentu
 Keluwesan, sistem hrs menyesuaikan diri dgn
keinginan pengguna. Keluwesan juga memberi
kesempatan pada pengguna utk costumizing sistem
Beberapa sifat (cont…)
 Kompleksitas, kita tdk perlu menggunakan atau
membuat antarmuka lebih dari apa yg diperlukan.
 Kekuatan, jml kerja yg dpt dilakukan oleh sistem utk
setiap perintah yg diberikan pengguna.
misal : pengguna ahli memberikan respon positif thd
perintah2 yg powerful
 Beban informasi, penyajian informasi hrs
disesuaikan dgn aras pengguna.
Beberapa sifat (cont…)
 Konsistensi, perintah hrs mempunyai sintaksis yg
terstandarisasi dan urutan parameter hrs
mempunyai tata letak yg konsisten, format
pemasukan data hrs kompatibel.
Konsistensi bukan berarti semua interface
harus terlihat sama
Konsistensi (cont..)
 Layout
 Konsisten menggunakan tampilan sehingga user tahu dimana harus
melihat instruksi, pesan error dan status suatu informasi.
 Information coding
 warna
 highlighting
 Commands
 Penggunaan nama perintah/instruksi
 standard key bindings
e.g.
ESC selalu dipakai untuk cancel
F1 selalu dipakai untuk menampilkan help
 syntax
 Format data entry
Beberapa sifat (cont…)
 Umpan Balik, Setiap aksi dari user harus menghasilkan
suatu respon yang dapat diterima dengan baik oleh user.
Tujuannya adalah untuk mengurangi ketidakpastian
/keraguan user bahwa sistem:
 menerima input yang terakhir,
 sedang mengerjakan sesuatu yang diinginkan user,
 sedang menunggu input berikutnya.
 Instruksi atau perintah harus menghasilkan suatu perubahan
yang nampak pada interface
 Misal: ‘mail has been sent’ saat merespon ‘Send’
 Menunjukkan suatu perubahan status objek yang
merupakan refleksi perintah user
 Informasi yang tepat sebagai feedback mutlak diperlukan
Beberapa sifat (cont…)
 Observabilitas, berfungsi secara benar dan
nampak sederhana meskipun sebenarnya
pengolahan internalnya sangat rumit
 Kontrolabilitas, sistem selalu berada di bawah
kontrol pengguna.
 Efisiensi, sangat penting jika berpengaruh pada
waktu tanggap atau laju penampilan sistem,
seringkali dgn menggunakan hasil teknologi baru.
Beberapa sifat (cont…)
 Keseimbangan, perbedaan antara manusia dan
komputer :
- manusia ;dpt menangani berbagai persoalan yg
berurusan dgn perubahan lingkungan,
pengetahuan tdk pasti dan tdk lengkap.
- komputer dpt melakukan pekerjaan yg berulang
dan rutin, penyimpanan dan pencarian data yg
handal dan memberikan hasil komputasi yg
sangat akurat
RAGAM DIALOG INTERAKTIF









Dialog Berbasis Perintah Tunggal
Dialog Berbasis Bahasa Pemrograman
Antarmuka Berbasis Bahasa Alami
Sistem Menu
Dialog Berbasis Pengisian Borang
Antarmuka Berbasis Ikon
Sistem Windows
Manipulasi Langsung
Antarmuka Berbasis Interaksi Grafis
Karakteristik Ragam Dialog yg Baik
(Neilsen)
 Menggunakan urutan dialog yang simple dan alami
 Menggunakan bahasa user
 Meminimalkan user memory load
 Konsisten
 Menyediakan Feedback
 Menyediakan shortcuts
 Menyediakan pesan error yang baik
 Mencegah errors
DIALOG BERBASIS PERINTAH TUNGGAL
 Perintah-perintah
tunggal
yang
dapat
dioperasikan biasanya tergantung dari sistem
komputer yang dipakai, dan berada dalam domain
yang disebut bahasa perintah (command
language)
 Bahasa perintah harus dirancang sedemikian rupa
shg mudah dipelajari dan diingat oleh kebanyakan
pengguna
 Contoh : Perintah-perintah yang dimiliki oleh
DOS dan UNIX
DOS
 Perintah DOS dibagi 2 :
1. Internal Command (tidak memerlukan berkas .EXE
dan .COM)
CONTOH :
C : \>DIR  menampilkan nama berkas yang terdapat
pada hardisk
C : \>COPY *.DOC A: \NASKAH  perintah membuat
salinan semua berkas berpengenal .DOC dari hardisk
C ke disket pada pemutar A dan ditempatkan dalam
direktori NASKAH.
2. External Command (memerlukan berkas .EXE dan
.COM)
CONTOH :
C : \DOS>FORMAT A: /S  perintah untuk
memformat disket pada pemutar A sekaligus
menyalin sistem ke dalam disket tsb.
Perintah ini memerlukan berkas FORMAT.COM
C : \DOS>DELTREE C : \NASKAH\SOAL 
perintah yang digunakan untuk menghapus
direktori SOAL yang berada di dalam direktori
NASKAH di dalam hardisk C
Perintah ini memerlukan berkas DELTREE.EXE
Contoh
KEUNTUNGAN DAN KERUGIAN PENGGUNAAN DIALOG
BERBASIS PERINTAH TUNGGAL
Keuntungan
Kerugian
 cepat
 akurat
 efisien
 ringkas
 luwes
 inisiatif oleh pengguna
 memerlukan pelatihan
yang lama
 membutuhkan
penggunaan yang
teratur
 beban ingatan yang
tinggi
 Jelek dalam
menangani kesalahan
Beberapa saran perlu dipertimbangkan u/ meminimalkan beban
ingatan dan kesalahan pengetikan, antara lain adalah :
 Pilihlah kata kunci yang mudah diingat
 Gunakan format perintah yang konsisten
 Gunakan untaian kata yang pendek
 Tambahkan fasilitas (help)
 Gunakan nilai-nilai default untuk mengurangi
kesalahan ketik
 Sediakan pesan-pesan yang jelas, dan jika masih
banyak kesalahan yang muncul
 Gunakan ragam inisiatif oleh komputer
DIALOG BERBASIS BAHASA PEMROGRAMAN
 Merupakan ragam dialog yang memungkinkan
pengguna untuk mengemas sejumlah perintah
kedalam suatu berkas yang sering disebut batch file.
 Perintah yang dituliskan tidak harus menggunakan
salah satu bhs pemrograman baik aras rendah
maupun aras tinggi seperti assembler, Pascal, C,
FORTRAN atau BASIC, tetapi tetap harus mengikuti
aturan-aturan tertentu.
DIALOG BERBASIS ALAMI
 Pada dialog berbasis bahasa alami pengguna
menggunakan instruksi-instruksi dalam bahasa alami
yang lebih umum sifatnya, pengguna dapat secara
bebas memberikan instruksinya dengan kalimatkalimat yang lebih “manusiawi”.
 Contoh instruksi bahasa alami :
Cetak daftar semua mahasiswa yang
mempunyai IP semester lebih besar dari 3,0
 Bahasa diatas kemudian diterjemahkan ke dalam
instruksi yang ekuivalen dengan dbase atau
foxpro, sebagai :
 DISPLAY ALL FOR IPSEM > 3.0
 Atau dalam dialek Turbo Pascal
while not eof (T) do
begin
readln(T,S) ;
if S.IpSem > 3.0 then
writeln(S.NamaMahasiswa);
end;
Keuntungan dan kerugian penggunaan antarmuka berbasis bahasa
alami
Keuntungan
 tidak memerlukan
sintaksis khusus
 luwes dan powerful
 alamiah
 merupakan inisiatif
campuran
Kerugian
 mempunyai dualisme
 bertele-tele
 opaque (tidak jelas)
 perancangan
perangkat lunak yang
rumit
 tidak efisien
SISTEM MENU
 Menu adalah daftar sejumlh pilihan dlm jml terbatas.
 Berdasarkan teknik penampilan pilihan-pilihan,
dikenal 2 sistem menu : Menu datar dan Menu tarik
(pulldown).
 Sistem menu datar adalah sistem menu yang
menampilkan semua pilihan secara lengkap.
 Sistem menu tarik adalah sistem menu yang akan
menampilkan pilihan dalam kelompok-kelompok
tertentu.
Sistem Menu (cont..)
 ragam interaksi pada sistem menu datar dapat berupa:
 Selektor pilihan, dpt berupa angka, huruf atau
campuran angka dan huruf.
 Penggunaan tanda terang, dgn bantuan tombol khusus ;
, , atau bantuan mouse
 Kombinasi dari kedua ragam di atas.
Sistem Menu (cont..)
Utk menu yg mempunyai banyak pilihan, biasanya
menggunakan menu tarik. Beberapa pilihan menu
tarik :
- Status
- Shortcut, kombinasi tombol2 khusus
misal :Ctrl + N
Struktur Pohon Sistem Menu Tarik
Menu utama
File
Edit
Draw table
Table
Table
Insert
Column to right
Delete
Column to left
Contoh :
Keuntungan dan kerugian sistem menu
 Keuntungan :
- Memerlukan sedikit pengetikan
- Beban memori rendah
- Struktur terdefinisi dengan baik
- Perancangan yang mudah
 Kerugian
- Seringkali lambat
- Memakan ruang layar
- Tidak cocok untuk aktifitas Pemasukan data
- Tidak cocok untuk dialog terinisasi pengguna
- Tidak cocok untuk dialog terinisasi campuran
DIALOG BERBASIS PENGISIAN BORANG
 Teknik dialog berbasis pengisian borang (form
filling dialogue) merupakan suatu penerapan
langsung dari aktifitas pengisian borang dalam
kehidupan sehari-hari dimana pengguna akan
dihadapkan suatu bentuk borang yang ada di layar
komputer yang mereka gunakan.
 Kualitas antarmuka berbasis pengisian borang
tergantung pada tiga aspek:
 Tampilan pada layar monitor yang mencerminkan struktur data
masukan yang diperlukan oleh sistem.
 Kejelasan perancangan dan penyajiannya secara visual pada layar
monitor.
 Derajat kebenaran dan kehandalan penerimaan data masukan oleh
program lewat berbagai fasilitas pemasukan data yang ada di dalam
borang tersebut.
Hal yg perlu diperhatikan dalam perancangan tampilan
Proteksi tampilan, pembatasan tampilan yg
tidak dapat diakses pengguna.
2. Batasan medan tampilan, penentuan panjang
yang tetap atau berubah, menggunakan format
bebas atau tertentu.
3. Isi medan, petunjuk pengisian tampilan.
4. Medan opsional, dinyatakan secara tekstual
atau menggunakan aturan tertentu, seperti
penggunaan warna berintensitas rendah, warna
tampilan yang berbeda, dan lain-lain.
1.
Hal yg perlu diperhatikan (cont..)
 Default. tentukan tempatnya, apakah pada bagian
yang tidak dapat diakses pengguna ataukah pada
bagian pemasukan data.
 Bantuan, bantuan (help) cara pengisian borang.
 Medan penghentian. Masukan data dapat diakhiri
dengan menekan tombol Enter atau Return atau
mengisi karakter terakhir dengan karakter tertentu
atau dengan cara berpindah ke medan lain.
 Navigasi. menggunakan tombol Tab untuk urutan
yang tetap, atau dapat pula digerakkan secara bebas
menggunakan mouse.
Hal yg perlu diperhatikan (cont..)


Pembetulan kesalahan. menggunakan tombol
BackSpace dengan menindihi (overwrite) isian
lama, dengan jalan membersihkan dan mengisi
kembali medan tersebut, dan lain-lain.
Penyelesaian. memberitahu pengguna bahwa
seluruh proses pengisian telah selesai.
Keuntungan dan kerugian Dialog Berbasis Pengisian
Borang
Keuntungan
Kerugian
 pengguna sudah terbiasa  seringkali lambat
dengan pengisian borang
 memakan ruang
 isian
data
yang (khususnya untuk
disederhanakan
 diperlukan sedikit pelatihan
 beban memori rendah
 strukturnya jelas
 perancangan mudah
 tersedia berbagai piranti
bantu perancangan tampilan
layar
menu
datar)
 tidak
cocok
untuk
pemilihan perintah/instruksi
 memerlukan
pengontrol
kursor
 mekanisme navigasinya
tidak terlihat secara eksplisit
 memerlukan suatu bentuk
pelatihan
DIALOG BERBASIS IKON (icon-based user interface)
 Adalah ragam dialog yang banyak menggunakan
simbol-simbol
dan
tanda-tanda
untuk
menunjukkan suatu aktifitas tertentu.
 Keuntungannya gambar bersifat umum, mudah
diingat,mudah dipelajari shg mempertinggi
kinerja pengguna, tidak bergantung pada suatu
bahasa.
 Kerugian : cenderung membingungkan, boros
tempat, dan sangat tidak efektif, tidak adanya
standarisasi bentuk-bentuk ikon seringkali
menimbulkan persoalan tersendiri.
Contoh :
SISTEM PENJENDELAAN
 Jendela (window) adalah bagian dari layar yang
digunakan untuk menampilkan informasi.
 Sistem penjendelaan adalah sistem antarmuka
yang
memungkinkan
pengguna
untuk
menampilkan berbagai informasi baik sendirisendiri maupun secara bersama-sama ke dalam
bagian-bagian
layar
yang
tidak
saling
mempengaruhi.
 Jenis-jenis jendela




Jendela TTY
Time-Multiplexed Windows
Space-Multiplexed Windows
Jendela non Homogen
 Jendela TTY : jendela paling sederhana, contohnya
adalah ketika anda berada pada dot prompt.
 Time-Multiplexed Windows : jendela yang dapat
digeser (scrollable windows), dan frame-at-a-time
windows. Contoh : text editor atau menu tarik
 Space-Multiplexed Windows : lebar layar dibagi
menjadi beberapa jendela dengan ukuran yang
bervariasi. Contoh : Microsoft Windows XP
 Jendela non Homogen : jenis jendela yang tidak
dapat dikelompokkan dalam jendela-jendela
diatas. Contoh : ikon dan zooming window
Pemanfaatan Sistem Penjendelaan







Penampilan lebih banyak informasi
Pengaksesan lebih banyak sumber informasi
Pengkombinasian berbagai sumber informasi
Pengontrolan bebas atas sejumlah program
Pengingatan
Command context/active form
Penyajian jamak
MANIPULASI LANGSUNG
 Ragam dialog yang menyajikan langsung suatu aktifitas
oleh sistem kepada pengguna sehingga aktifitas itu akan
dikerjakan oleh sistem komputer ketika pengguna
memberikan langsung instruksi lewat manipulasi langsung
dari semacam kenyataan maya (virtual reality) yang
terpampang lewat tampilan yang muncul di layar.
 Penerapan manipulasi langsung :
- kontrol proses
contoh : sistem pembangkitan dan penyaluran listrik
yang terhubung dengan sistem secara online
- Simulator
Adalah sistem miniatur yang mencoba menirukan kerja
suatu sistem yang berskala sangat besar atau sangat kecil
jika dilihat dari kacamata orang awam.
contoh : Simulator penerbangan
- Kontrol lalu lintas penerbangan
Dunia 3 dimensi tempat sebuah pesawat sedang
menjelajahi dunia akan diterjemahkan ke dalam
layar 2 dimensi yang ada di hadapan seorang
operator.
Lewat tampilan 2 dimensi yang merefleksikan
dunia 3 dimensi itulah seorang operator dapat
mengontrol lalu lintas penerbangan
- Perancangan berbantuan komputer
Atau (Computer Aided Design)
contoh : penggunaan program AutoCAD,
Keuntungan dan kerugian Penggunaan Dialog
Berbasis Manipulasi Langsung
Keuntungan
Kerugian
 mempunyai analogi yang jelas  memerlukan
dengan suatu pekerjaan nyata
 mengurangi
waktu
pembelajaran
 memberikan tantangan untuk
eksplorasi pekerjaan yang nyata
 penampilan visual yang bagus
 mudah dioperasikan
 tersedianya
berbagai
perangkat bantu u/ merancang
ragam
dialog
manipulasi
langsung
program yang
rumit dan berukuran besar
 memerlukan tampilan grafis
berkinerja tinggi
 memerlukan piranti masukan
seperti mouse, trackball
 memerlukan
perancangan
tampilan dengan kualifikasi
tertentu
DIALOG BERBASIS INTERAKSI GRAFIS
 Agak susah dibedakan dengan antarmuka berbasis
manipulasi langsung.
 Secara umum, keuntungan dan kerugian teknik
antarmuka berbasis interaksi grafis sama dengan
keuntungan
dan
kerugian
menggunakan
manipulasi langsung
 Contoh : Pada Microsoft Word ketika kursor
mendekati suatu ikon akan muncul pesan yang
menunjukkan arti ikon tsb.
TUGAS
 Cari contoh studi kasus di dunia nyata!
 Buat interface untuk studi kasus tersebut!
Keterangan :
 Dialog Berbasis Bahasa Pemrograman
 Dialog Berbasis Pengisian Borang
 Manipulasi Langsung
Contoh :
Ragam dialog pengisian borang
Keterangan :
Dialog ini digunakan untuk memasukkan data pemohon
beasiswa di universitas trunojoyo.
REFERENSI
 Andy Downtown, Graham Leedham, “Human Aspect




of Human Computer Interaction” in Engineering the
Human Computer Interface, Mc Graw Hill
International Edition, 2003
Shneiderman, Ben, “Designing the user interface :
strategies for effective human-compver interaction,
third edition”, Addison Wesley, 1996
Santosa, Insap Interaksi Manusia dan Komputer,
Teori & Praktek, Andi Yogyakarta
Surbakti, Irfan; Santosa, Insap; Interaksi Manusia
Dan Komputer, Edisi Jurusan Teknik Informatika-ITS,
2006
Modul interaksi manusia dan komputer