Mata Kuliah Dosen Pengampu

Interaksi Manusia dan Komputer Eki Saputra, S.Kom, M.Kom.

UTS
DESAIN DIALOG

Disusun Oleh:
ANGGA ARDIANSYAH
11753102109
SIF D

UNIVERSITAS ISLAM NEGERI SULTAN SYARIF KASIM RIAU

FAKULTAS SAINS DAN TEKNOLOGI
PROGRAM STUDI SISTEM INFORMASI
TA. 2020 / 2021
 PEMBAHASAN
DESAIN DILAOG

1.1 Definisi Dialog

Dialog Dalam arti umum diartikan sebagai percakapan antara dua pihak atau
lebih. Dialog juga dapat mengimplikasikan kerjasama atau sedikitnya keinginan
untuk menyelesaikan konflik. Sedangkan dialog dalam konteks perencanaan user
interface adalah struktur dari percakapan antara user dan sistem komputer.
Bahasa Komputer dapat dibagi atas tiga tingkatan:
1. Leksikal
Merupakan tingkatan yang paling rendah. Yaitu bentuk icon pada layar. Pada
bahasa manusia, ekuivalen dengan bunyi dan ejaan suatu kata.
2. Sintaksis
Yaitu urutan dan struktur dari input dan output. Pada bahasa manusia,
ekuivalen dengan grammar suatu kalimat.
3. Semantik
Yaitu arti dari percakapan yang berkaitan dengan pengaruhnya pada
struktur data internal komputer dan/atau dunia eksternal. Pada bahasa manusia,
ekuivalen dengan arti yang berasal dari partisipan dalam percakapan.
Dalam user interface, istilah dialog hampir mirip dengan tingkat
sintaksis, tetapi juga meliputi sifat-sifat leksikal.
1.2 Notasi Dialog
Notasi dialog dapat berupa Diagramatik (yaitu mudah dibaca) dan Tekstual,
(yaitu mudah untuk dilakukan analisis formal). Adapun jenis dari masing-masing
notasi yaitu sebagai berikut:
A. Digramatik.
a. State Transition Network(STN)
b. Flow Charts (Digram Alir)
c. Diagram JSD

ii
 d. Dan lain-lain,
B. Tekstual.
a. Formal Grammer (Tata bahasa formal)
b. Production Rules (Aturan Produksi)
c. Dan lain-lain,
Dialog berkaitan dengan dua unsur yaitu:
a. Semantik sistem, apa yang dilakukan oleh sistem
b. Presentasi, bagaimana tampilan sistem
1.3 Dialog User vs Sistem Komputer
Berbeda dengan dialog antar manusia pada umumnya, dialog dengan
komputer biasanya terstruktur dan terbatas. Dalam user interface, dialog user dengan
sistem komputer berada pada level sintaksis. Namun batasan antara leksikal dan
sintaksis tidak begitu jelas dan pada kenyataannya deskripsi dialog seringkali
meliputi sifat-sifat leksikal.
Beberapa ciri-ciri dari dialog terstruktur yang nantinya ditemukan dalam
dialog komputer:
a. Menyebutkan beberapa hal tertentu secara berurutan.
b. Beberapa bagian dari dialog dilakukan secara bersamaan.
c. Umumnya dialog berikutnya tergantung pada respon dari partisipan.
d. Deskripsi dialog terstruktur biasanya tidak langsung menuju pada arti
kata-katanya / semantik tapi pada level sintaksis.
1.4 Proses Desain Dialog
Dalam proses desain dialog perlu diperhatikan beberapa hal berikut ini:
a. Rangkaian dialog menggambarkan struktur tugas.
b. Beberapa rangkaian dialog tambahan digunakan untuk user support,
misalnya help system, tutorial sub-system.
c. Rangkaian dialog diurutkan sesuai dengan struktur tugas.
Prinsip yang digunakan dalam desain dialog adalah membagi sistem menjadi
beberapa bagian yang disebut modul (module). Biasanya user access bukan
merupakan bagian dari task description, tapi harus dimasukan dalam sistem baru
Empat hal utama dalam desain yang harus diperhatikan dalam GUI Metaphor:
a. Pemilihan dan representasi dari conceptual metaphor. 

iii
 b. Representasi dari obyek interaktif dalam metaphor. 
c. Perancangan manipulasi untuk mengimplementasikan user action.
d. Desain micro-metaphor untuk control action dan representasi dari
command
Dalam  mendesain  dialog,  diperlukan  deskripsi  yang  terpisah  dari progra
m secara keseluruhan. Contoh: Pembagian modul dalam sebuah sistem pemesanan
buku di perpustakaan

Dalam mendesain sebuah dialog, diperlukan deskripsi yang terpisah dari

program secara keseluruhan. beberapa alasan yang mendasari hal tersebut, antara
lain :
a. Agar lebih mudah dianalisa
b. Pemisahan elemen-elemen interface dari logika program (semantik)
c. Apabila notasi dialog ditulis sebelum program dibuat, maka notasi tersebut
dapat membantu desainer untuk menganalisis struktur dialog yang diajukan
1.5 Ragam Dialog
Ragam dialog (Dialoque Style) merupakan 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).

iv
 Beberapa sifat penting ragam dialog yaitu :
a. Inisiatif
Inisiatif dapat menentukan tipe-tipe pengguna yang dituju oleh sistem yang
dibangun.
Ada dua inisiatif yaitu :
 inisiatif oleh komputer, pengguna memberikan tanggapan atas prompt
yang diberikan komputer
 inisiatif oleh pengguna, pengguna diharapkan memahami
sekumpulan perintah dgn sintaks tertentu
b. Keluwesan
Sistem komputer harus menyesuaikan diri dengan keadaan pengguna,
misalnya member kesempatan user untuk costumizing sistem.
c. Kompleksitas
Sistem yang dibuat sesuai dengan yang diperlukan.
d. Kekuatan
Kekuatan merupakan jumlah kerja yang dapat dilakukan oleh sistem
untuk setiap perintah yang diberikan pengguna. misal : pengguna ahli memberikan
respon positif terhadap perintah-perintah yang powerful.
e. Beban informasi
Penyajian informasi harus disesuaikan dengan aras pengguna.
d. Konsistensi
Perintah harus mempunyai sintaksis yang terstandarisasi dan urutan
parameter harus mempunyai tata letak yang konsisten, format pemasukan data
harus kompatibel. Konsistensi disini bukan berarti semua interface mempunyai
tampilan yang sama.
 Layout, konsisten menggunakan tampilan sehingga user tahu
dimana harus melihat instruksi, pesan error dan status suatu informasi.
 Information coding, penggunaan warna dan highlighting

v
  Commands, penggunaan nama perintah/instruksi, standard key
bindings dan sintak. Misal : ESC selalu dipakai untuk cancel dan F1
selalu dipakai untuk menampilkan help
 Format data entry, menggunakan format standard yang mudah
dimengerti user.
e. 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’ dan
menunjukkan suatu perubahan status objek yang merupakan refleksi
perintah user.
f. Observabilitas
Sistem berfungsi secara benar dan nampak sederhana meskipun sebenarnya
pengolahan internalnya sangat rumit.
g. Kontrolabilitas
Sistem selalu berada di bawah kontrol pengguna
h. Efisiensi
Efisiensi sangat penting jika berpengaruh pada waktu tanggap atau laju
penampilan sistem.
i. Keseimbangan
Dalam merancang sistem hendaknya mengetahui kemampuan antara
manusia dan komputer. Manusia dapat menangani berbagai persoalan yang
berurusan dengan perubahan lingkungan, pengetahuan tdk pasti dan tidak
lengkap. Sedangkan komputer dapat melakukan pekerjaan yang berulang dan
rutin, penyimpanan dan pencarian data yang handal dan memberikan hasil
komputasi yang sangat akurat.
1.6 Kategori Ragam Dialog.

vi
 a. Dialog Berbasis Perintah Tunggal (Command Line Dialogue).
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 sehigga mudah dipelajari dan diingat oleh kebanyakan pengguna. Contoh:
Perintah- perintah yang dimiliki oleh DOS dan UNIX.

Gambar Dialog baris perintah tunggal 
b. Dialog Berbasis Bahasa Pemrograman
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 bahasa pemrograman baik aras rendah maupun aras
tinggi seperti assembler, Pascal, C, FORTRAN atau BASIC, tetapi tetap harus
mengikuti aturan-aturan tertentu.
c. Dialog Berbasis Bahasa Alami
Dialog berbasis bahasa alami merupakan dialog yang menggunakan
bahasa yang mudah dimengerti oleh manusia. Contoh : cetak data mahasiswa
yang memiliki ipk > 3.0.
Kemudian bahasa tersebut diterjemahkan ke dalam instruksi yang ekuivalen
yang bisa di mengerti komputer, seperti turbo Pascal.
while not eof (T) do begin readln(T,S) ;
if S.IpSem > 3.0 then
writeln(S.NamaMahasiswa);

vii
 end;
Keuntungan menggunakan dialog berbasis bahasa alami yaitu :
 Tidak memerlukan sintaksis khusus.
 Luwes dan powerful
 Alamiah
 Menggunakan inisiatif campuran
Kerugiannya yaitu:
 mempunyai dualisme
 bertele-tele
 Opaque (tidak jelas)
 Perancangan perangkat lunak yang rumit
 Tidak efisien
d. Struktur Menu
Menu adalah daftar sejumlah pilihan dalam jumlah terbatas. Jenis menu
dapat dikelompokkan sebagai berikut:
1. Menu-menu Tunggal
 Mnemonic letters : pilihan item menggunakan huruf awal dapat
berupa angka, huruf atau campuran angka dan huruf. User harus
memasukkan pilihan sesuai dengan format yang diberikan.

Gambar Mnemonic letters

 Radio Buttons : tampilan menu dengan bentuk radio button User
harus memilih salah satu pilihan yang disediakan.

viii
 Gambar Penggunaan Radio button
 Button Choice : tampilan menu dengan menggunakan bentuk
tombol/button. User meng-klik salah satu tombol pada tampilan menu.

Gambar Penggunaan Button choice

 Multiple selection menus atau check boxes : tampilan menu
dengan itemnya diseleksi dapat lebih dari satu.
 Pop-up menus atau context menus : tampilan menu yang
diaktifkan dengan mengklik tombol kanan mouse pada area yang
ditentukan.

Gambar Penggunaan Pop-Up menu

ix
  Scrolling list box choice : tampilan menu dengan menggunakan
bentuk listbox
 Scrolling combo box choice : tampilan menu dengan
menggunakan bentuk combobox
 Trackbar menu atau alpha slider menu : tampilan menu yang
itemnya dipilih dengan menggeser penunjuknya.
 Embedded links/ Hyperlinks : tampilan menu dengan item-item
disusun tidak beraturan atau mengikuti alur cerita, contoh :
tampilan browser, help windows.
 Main menu, iconic menus, toolbars atau palletes : menu yang
digabung dengan icon-icon.

Gambar Penggunaan Main menu

2. Linear Sequences dan Multiple Menus
Menu yang memandu pengguna untuk proses yang kompleks, contoh : clue
cards atau “Wizards”.
3. Tree-structured Menus
Menu ini terdiri dari : Tree View Menus, List View Menus, Tree structured
menu (Tree View dan List View) pada tampilan Windows Explorer.

x
 Gambar Tree-structured menus

e. Dialog Berbasis Pengisian Borang

Dialog berbasis pengisian borang (form filling dialogue) merupakan
suatu penerapan langsung dari aktifitas pengisian borang dalam kehidupan sehari-
hari ke dalam sistem komputer. Kualitas antarmuka berbasis pengisian borang
tergantung pada tiga aspek yaitu:
 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-hal yang perlu diperhatikan dalam perancangan tampilan borang yaitu :
 Proteksi tampilan, pembatasan tampilan yg tidak dapat diakses pengguna
 Batasan medan tampilan, penentuan panjang yang tetap atau
berubah, menggunakan format bebas atau tertentu.
 Isi medan, petunjuk pengisian tampilan.
 Medan opsional, dinyatakan secara tekstual atau menggunakan aturan
tertentu, seperti penggunaan warna berintensitas rendah, warna
tampilan yang berbeda, dan lain-lain.
 Default, tentukan tempatnya, apakah pada bagian yang tidak dapat
diakses pengguna ataukah pada bagian pemasukan data.

xi
 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.
 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.

Gambar Form filling dialogue

Keuntungan ragam dialog berbasis borang yaitu :
 Pengguna sudah terbiasa dengan pengisian borang
 Isian data yang disederhanakan .
 Beban memori rendah
 strukturnya jelas
 Perancangan mudah
 Tersedia berbagai piranti bantu perancangan tampilan
Kerugian ragam dialog berbasis borang yaitu :

xii
  Seringkali lambat
 Memakan ruang layar
 Tidak cocok untuk pemilihan perintah/instruksi
 Memerlukan pengontrol kursor
 Mekanisme navigasinya tidak terlihat secara eksplisit
 Memerlukan suatu bentuk pelatihan
f. Dialog Berbasis Ikon
Dialog berbasis ikon adalah ragam dialog yang banyak menggunakan
simbol-simbol dan tanda-tanda untuk menunjukkan suatu aktifitas tertentu.Dialog
berbasis ikon seperti pada gambar di bawah:

Gambar 4.9 Dialog berbasis ikon

Permasalahan yang muncul adalah bagaimana menentukan seberapa tepat arti
suatu nama atau ikon. Dari sudut pandang psikologi dianggap bahwa mereka harus
dipilih berdasarkan seberapa lazim atau diimajinasikan Namun hal ini tidak
sederhana, masalahnya adalah dengan menggunakan kata-kata yang lazim atau
mudah diingat. Hal ini menjelaskan bahwa kata tersebut dapat
membingungkanjika digunakan dalam kawasan komputasi.
g. Dialog Berbasis Interaksi Grafik
Dialog berbasis interaksi grafik (GUI) merupakan dialog yang
menggunakan bentuk-bentuk visual, seperti grafik, ikon dan animasi.
Contoh: Pada Microsoft Word ketika kursor mendekati suatu ikon akan
muncul pesan yang menunjukkan arti ikon tsb.
1.7 Notasi Diagramatik
Notasi Diagramatik paling sering digunakan dalam desain dialog.
Kelebihanya yaitu memungkinkan desainer untuk melihat secara sekilas struktur

xiii
dialog. Kekuranganya yaitu sulit untuk menjelaskan struktur dialog yang lebih luas
dan kompleks.
1. State Transition Networks (STN).
Metode ini menggunakan circle atau state yang dihubungkan satu dengan
yang lain dengan anak panah yang menandakan suatu aksi atau kejadian.
Aturan dalam STN adalah :
a. Dimulai dari START state
b. State tengah berhubungan dengan arah panah
c. State kadang berputar (iterasi)
d. State mungkin meliputi pilihan user
e. Diakhiri dengan FINISH state
Contoh State Transition Networks untuk menu Drawing Tools,

Keterangan:
- Lingkaran: "state" dari sistem
- Tanda panah : transisi.
- Label : tindakan user yang menyebabkan transisi dan responsedari sistem
2. Hierarchical STN
Struktur Hierarchical State Transition Network mirip dengan STN namun
memiliki tambahan berupa gabungan state (composite state) yang digambarkan
dengan persegi panjang dengan gambar struktur STN berukuran kecil di dalamnya.
STN Hirarki dapat digunakan untuk mendeskripsikan suatu sistem yang
lengkap. Penggunaan hirarki ini tidak mengubah notasi dasar STN namun

xiv
menggabungkan beberapa STN ke dalam satu diagram besar sehingga model ini
dapat digunakan untuk sistem-sistem yang besar.

3. Harel’s State Charts

Memiliki Karakteristik yaitu sebagai berikut:
a. Digunakan untuk spesifikasi sistem reaktif yang kompleks secara visual
b. Mampu mengakomodasi masalah seperti concurency dan escape
c. Struktur hirarki dalam satu diagram tunggal yang membagi elemen mana
yang merepresentasikan state alternatif dan yang merepresen- tasikan
aktifitas konkuren
Contoh pada Panel kendali televisi dengan 5 tombol kendali: On, Off, Mute,
Sel dan Reset.
4. Traditional Flow Diagrams (Flow Charts).
Memiliki Karakteristik yaitu sebagai berikut:
a. Mendeskripsikan dialog yang sederhana
b. Sederhana dan mudah dimengerti
c. Merefleksikan sudut pandang programer daripada user
d. Simbol kotak mewakili proses atau keputusan
Flowchart menggunakan berbagai jenis kotak untuk merepresentasikan
berbagai jenis aktifitas yang berbeda, namun lebih merefleksikan sudut pandang
programmer dibandingkan user.

xv
 Perbedaan utama antara menggunakan flowchart untuk perancangan dialog
dengan pemrograman adalah tingkat detail pada sisi program.
Misalkan, jika pembacaan record karyawan melibatkan pencarian secara
sequential pada file untuk mencari file tertentu, maka flowchart program akan
menyertakan loop pencarian tersebut. Sedangkan pada flowchart dialog, sama sekali
tidak akan dicantumkan loop semacam itu.
5. JSD Diagrams
Jackson Structured Design digunakan untuk berbagai aspek dari analisis
tugas dan desain dialog, biasanya digunakan untuk sistem yang sederhana, terbatas
dan berbasis menu. Namun JSD Diagram Kurang ekspresif. Contoh JSD Diagrams
Untuk Sistem Kepegawaian.

xvi
1.8 Notasi
a. Formal grammar :
Merupakan Notasi dialog tekstual yang fokus pada aksi yang dilakukan oleh
user. Ada 2 Jenis formal grammar yaitu: BNF (Backus-Naur Form) dan Regular
Expression
Adapun karakteristik sebagai berikut:
 Regular Expression banyak digunakan untuk mendeskripsikan kriteria
pencarian tekstual yang komplek
 Regular Expression digunakan untuk analisis leksikal bahasa
pemrograman
 Regular Expression dan BNF tidak digunakan untuk mere-presentasikan
concurency dialog
Memiliki Kelebihan yaitu mudah diimplementasikan karena sudah ada tools
yang memadai.
Contoh pada RE untuk menggambar garis select-line click click* double-click
tanda * berarti perulanagn
Contoh pada BNF (Backus-Naur Form) some-thing ::= thing + some-thing
tanda + berarti sequencing
b. Production Rules berorientasi event :
1) User events

xvii
 Diawali huruf kapital à Sel-line (user memilih Line pada menu), C-
point untuk single click dan D-point untuk double click
2) Internal events
Diawali huruf kecil, untuk mencatat history state dialog à rest-line
adalah state stl titik pertama garis dipilih oleh user
3) System response event
Ditandai tanda < > à <draw line> adalah efek sistem yg dapat didengar
atau dilihat

xviii
 DAFTAR PUSTAKA

Anisya, S.Kom., M.Kom. Interaski Manusia dan Komputer, Bahan Ajar-

Insitut Teknologi Padang
https://sisfo.itp.ac.id/bahanajar/BahanAjar/Anisya/Lesson%2001.pdf
Dr. Ir. Made Sudarma, M.A.Sc. Interaksi Manusia dan Komputer, Bahan Ajar
- Universitas Udayana, 2019
https://elearning.unud.ac.id/course/view.php?id=705
Dr. Ratna Wardani, S.Si.,M.T. Interaksi Manusia dan Komputer, Bahan Ajar
- Universitas Negeri Yogyakarta
http://staff.uny.ac.id/sites/default/files/pendidikan/Dr.%20Ratna%20Wardani,
%20S.Si.,M.T./HCI-9%20Notasi%20Desain%20dialog.pdf
Dyah Ayu Irawati, ST., M.Cs dan Ariadi Retno THR, M.Kom. “Interaksi
Manusia Dan Komputer, Diktat Kuliah RIF 3090”, Buku Ajar IMK - Politeknik
Negeri Malang,
https://www.slideshare.net/BiyyRobbyy/buku-ajar-imk-dyah-ayu-irawati
Surbati, Irfan, M.Sc. Eng ; Interaksi Manusia Dan Komputer, Edisi Jurusan
Teknik Infromatika-ITS, 2006
http://ahmad_hidayat.staff.gunadarma.ac.id/Downloads/files/52679/Irfan+Su
bakti+-+2006-07-08+Interaksi+Manusia+dan+Komputer.pdf

xix