NOTASI DIALOG DAN DESAIN
APAKAH DIALOG ITU?
Dialog dalam arti umum adalah:
percakapan antara dua kelompok atau lebih
Dialog dalam konteks perancangan user interface adalah:
struktur dari percakapan antara user dan sistem
komputer
Bahasa komputer dapat dibagi atas tiga tingkatan:
1. Leksikal
¾ merupakan tingkat 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 para partisipan dalam percakapan
Dalam user interface, istilah dialog hampir mirip dengan
tingat sintaksis, tapi juga meliputi sifat-sifat leksikal.
Dialog manusia-komputer
• Berbeda dengan dialog antar manusia pada umumnya,
dialog dengan komputer biasanya terstruktur dan
terbatas
IMK – Notasi Dialog dan Desain 1/8
• Beberapa ciri-ciri dari dialog terstruktur yang nantinya
ditemukan dalam dialog komputer:
- menyebutkan beberapa hal tertentu secara berurutan
- beberapa bagian dari dialog dilakukan secara
bersamaan (concurrently)
- dialog berikutnya tergantung pada respons dari
partisipan
- dialog terstruktur biasanya tidak langsung menuju
pada arti kata-katanya / semantik tapi pada level
sintaksis
PROSES PERANCANGAN DIALOG
Advice:
1. Rangkaian Dialog menggambarkan struktur tugas, i.e. 1
rangkaian dialog 1 goal
achieve
2. Beberapa rangkaian dialog tambahan digunakan untuk
user support, mis. help system, tutorial sub-sytem
3. Rangkaian dialog diurutkan sesuai dengan struktur
tugas
IMK – Notasi Dialog dan Desain 2/8
DFD untuk desain dialog
Task Design Task Specification
Specify UI Specification Add User
Interface Access &
Modules Control
Design Metaphor
designs
Prototype Standard designs
Using UI
Design
component Design
GUI design Metaphor
& GUI
Design
Interaction
Dialogue
Dialogue network
Detail
Evaluation
UI program Checked design Verify
specification Dialogue
Code and
Implementation
• Prinsip yang digunakan dalam desain dialog adalah
membagi sistem menjadi beberapa bagian yang disebut
module
IMK – Notasi Dialog dan Desain 3/8
Contoh: Sistem Pemesanan Buku di Perpustakaan
Reservation
Borrower details Book reservation
Reader Reader First title More
number details reservation
(input) (display)
Title Title Titles
code details
Module-1 (input) (display)
Module-2
Title Title
code details
(input) (display)
• Biasanya user access bukan merupakan bagian dari
task description, tapi harus dimasukkan dalam sistem
yang baru
• Empat hal utama dalam desain yang harus diperhatikan
dalam GUI metaphor:
- Pemilihan dan representasi dari conceptual metaphor
- Representasi dari obyek interaktif dalam metaphor
- Perancangan manipulasi untuk mengimplemen-
tasikan user action
- Desain micro-metaphors untuk control action dan
representasi dari commands
IMK – Notasi Dialog dan Desain 4/8
Dalam mendesain dialog, diperlukan deskripsi yang
terpisah dari program secara keseluruhan.
Mengapa perlu digunakan notasi deskripsi dialog yang
terpisah?
• Agar mudah dianalisa
• Pemisahan elemen-elemen interface dari logika
program (semantik)
• Apabila notasi dialog ditulis sebelum program dibuat,
maka notasi tersebut bisa membantu desainer untuk
menganalisa struktur yang diajukan.
NOTASI DIAGRAMATIK
• Notasi diagramatik paling sering digunakan dalam
desain dialog
• Kelebihan:
¾ Memungkinkan desainer untuk melihat secara
sekilas struktur dialog
• Kekurangan:
¾ Sulit untuk menjelaskan struktur dialog yang lebih
luas dan kompleks
Contoh notasi diagramatik adalah :
State transition networks (STN)
Harel's state charts
Traditional flow diagrams
JSD diagrams
State transition networks (STN)
Komponen STN:
• Lingkaran, menggambarkan "state" dari sistem
• Tanda panah, yang terdapat antara state; disebut juga
transisi.
IMK – Notasi Dialog dan Desain 5/8
Tanda panah ini diberi label yang menjelaskan tentang
tindakan user yang menyebabkan transisi dan response
dari sistem.
STN dapat menggambarkan beberapa pilihan dialog:
• Urutan tindakan dan response dari sistem (sequence)
• Pilihan bagi user (choice)
dari contoh: dari state Menu, user dapat memilih
"Circle" sehingga sistem berpindah ke state Circle-1
sehingga option "Circle" highlight; alternatif lain, user
dapat memilih "Line" sehingga sistem berpindah ke
state Line-1.
• Iterasi (iteration)
dari contoh: terdapat pilihan dari state Line-2: user
dapat melakukan double click pada suatu titik dan
menyelesaikan polyline, berpindah ke state Finish; atau
user dapat melakukan single click yang berarti
menambah titik baru pada polyline sehingga terjadi
transisi kembali ke state Line-2
STN Hirarki dapat digunakan untuk mendeskripsikan
suatu sistem lengkap.
(lihat contoh pada file gambar_1Notasi.doc, A-6/8)
Flow Chart
• Flow Chart digunakan untuk mendeskripsikan dialog
yang sederhana
• Flow Chart mudah dimengerti dan simple
IMK – Notasi Dialog dan Desain 6/8
Contoh penggunaan flow chart dalam desain dialog:
Delete D1
Please enter
Employee no. : _______
C1
read record
Delete D2 Delete D3
Name : Alan Dix Name : Alan Dix
Dept : Computing Dept : Computing
delete? (Y/N) : ________ delete? (Y/N) : ________
Please enter Y or N
C2 other
answer?
N
Y Finish
C3
delete record
Finish
IMK – Notasi Dialog dan Desain 7/8
Keterangan:
• Persegi panjang adalah screen yang digunakan untuk
berkomunikasi dengan user
• Segi-enam adalah proses dan keputusan yang dibuat
oleh sistem
• Elips "Finish" berarti kembali ke menu utama
• Tape berarti membaca atau mengubah database
LINK TO PROGRAMMING LANGUAGE
• Sequences dalam notasi dialog dapat langsung
ditransformasikan ke bahasa pemrograman dalam
bentuk Sequence and Selection
• Modularity dalam desain dialog Î event handling
dalam bahasa pemrograman (misal VB)
SOAL LATIHAN
Suatu perusahaan minuman akan mengeluarkan mesin penjual
minuman yang nantinya akan diletakkan di beberapa tempat
umum, seperti bandara, stasiun KA.
Untuk itu dibentuk satu tim yang terdiri dari ahli elektronik
untuk menangani masalah hardware dan ahli interface designer
untuk menangani masalah interface.
Dalam hal ini para interface designer benar-benar dituntut untuk
mendesain suatu interface yang baik dan mudah dimengerti
karena hasil penjualan sangat tergantung dari hal tersebut.
Konsumen tidak akan membeli minuman lewat mesin tersebut
apabila mereka mengalami kesulitan atau kebingungan saat akan
melakukan transaksi.
Sekarang anda diminta bertindak sebagai interface designer
yang mendesain dialog antara konsumen dan mesin penjual
minuman.
IMK – Notasi Dialog dan Desain 8/8