DIALOG DAN USER INTERFACE

SOFTWARE

OBJEKTIF
1. Praktikan dapat memahami jenis dialog dan jenis – jenis dialog.
2. Praktikan dapat mengetahui proses perancangan dialog.
3. Praktikan dapat membuat mendisaign interface secara menarik.
4. Praktikan dapat memahami metode tools.
5. Praktikan dapat memahami definisi model objek dari.

PENDAHULUAN

Dalam merancang sesuatu yang melibatkan user dengan komputer

hendaknya terjadi dialog yang baik. Dialog disini mengartikan bagaimana
user dengan sistem komputer dapat berkomunikasi. Hubungan tersebut
adalah hubungan dengan user dan design yang dibuat.

2.1 Dialog dan jenis-jenis dialog

Dialog dalam arti umum adalah percakapan antara dua kelompok atau
lebih. 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.

17
  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.

Dialog manusia-komputer :
o Berbeda dengan dialog antar manusia pada umumnya, dialog dengan
komputer biasanya terstruktur dan terbatas
o 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.

Jenis – jenis Dialog :

 Command Language

18
  Merupakan paradigma user interface yang pertama kali.
 Contoh : MS-Dos shell, UNIX shell, dBase.
 Keuntungan :
- lebih cepat.
- dapat melakukan kegiatan meskipun di luar batas.
- perulangan.
- implementasi yang mudah dan hemat.
 Tujuan Command Language :
 Konsistensi.
 Penamaan dan pemberian singkatan yang baik.
 Melakukan tugas perancangan dapat membantu meminimalkan
kekurangan

 WIMP
berfokus pada : Menus, Buttons, Forms, Icons

 Direct Manipulation (DM)

Definisi :
 Kesinambungan tampilan dari objek-objek dan aksi-aksi yang
dilakukan.
 Cepat, dapat dikembalikan, peningkatan aksi dimana efeknya dapat
segera terlihat.
 Penggantian dari sintaks command language dengan manipulasi
langsung pada objek.
Keuntungan :
 Mudah dipelajari dan diingat, khususnya untuk pemula.
 WYSIWYG
 Fleksibel.

19
  Menyediakan konteks dan tampilan yang cepat dari feedback
sehingga user dapat mengetahui apakah tujuan telah tercapai.
 Membatasi beberapa jenis kesalahan yang dapat terjadi.
Kekurangan :
 Penggunaan seluruh ruang pada layar.
 Harus mempelajari arti dari komponen-komponen yang tampak
pada layar.
 Tampilan visual mungkin dapat disalah-artikan.
 Penggunaan mouse dapat lebih lambat daripada pengetikan.
 Tidak ada penjelasan otomatis.
 Tidak bagus pada : pengulangan, penyimpanan history, tugas
tertentu (seperti merubah semua huruf cetak miring menjadi cetak
tebal), variabel.

 PDA dan Pen

 Menjadi lebih umum dan penggunaan yang lebih luas.
 Tampilan yang lebih kecil (160x160 atau 320x240).
 Tombol-tombol yang lebih sedikit, interaksi melalui “pen” (atau stylus).
 Peningkatan  wireless, warna, memory yang lebih besar, CPU dan
OS yang lebih baik.
 Palmtop vs Handheld

 Speech dan Natural Language

Speech (suara) adalah getaran pada suara menimbulkan bunyi “ahh”.
Mulut, tenggorokan, bibir membentuk bunyi.
 Input speech :
 Pengenalan speaker.

20
  Pengenalan suara.
 Pemahaman bahasa natural.

Natural Language :
 Memberi arti pada kata-kata.
 Input dapat berupa suara atau dari keyboard.
Keuntungan Kekurangan
1. Mudah dipelajari dan 1. Belum dapat bekerja
dengan baik.
d
2. Mengasumsikan
i
pengetahuan
i dari
permasalahan.
n
3. Membutuhkan
g keahlian
pengetikan. a Peningkatan
tidak terlihat.t
4. Implementasi
. membutuhkan
2. Lebih kuat. biaya yang mahal.
3. Cepat, efisien (tidak
s
e
l
a
l
u
)
.
4. Layar yang kecil

21
2.2 Proses Perancangan Dialog

Ada beberapa hal yang perlu diperhatikan dalam perancangan dialog, yaitu :

1. Rangkaian dialog menggambarkan struktur tugas.

2. Beberapa rangkaian dialog tambahan digunakan untuk user support,
mis : help system, tutorial sub-sistem.
3. Rangkaian dialog diurutkan sesuai dengan struktur tugas.

G
a
m
b
a
r

1
.

DFD untuk desain dialog

 Prinsip yang digunakan dalam desain dialog adalah membagi sistem

menjadi beberapa bagian yang disebut module.
 Biasanya user acces bukan merupakan bagian dati task description,
tapi harus dimasukan dalam sistem yang baru.
 Empat hal utama dalam desain yang harus diperhatikan dalam GUI
metaphor :
 Pemilihan dan representasi dari conceptual metaphor.

22
  Representasi dari obyek interaktif dalam metaphor.
 Perancangan manipulasi untuk mengimplementasikan user action.
 Desain micro-metaphors untuk control actiondan representasi dari
commands.

Contoh Pembagian Module Dialog Sistem Pemesanan Buku di

Perpustakaan

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)

23
  Apabila notasi dialog ditulis sebelum program dibuat, maka notasi
tersebut bisa membantu desainer untuk menganalisa struktur yang
diajukan.

2.3 User Interface Software

Alat bantu User Interface

 Aplikasi apa yang biasa digunakan oleh programer untuk membuat
program.
 Kombinasi dari objek-objek interface dan perilaku manajemen.
 Sekarang sudah object-oriented.
 Pustaka dari komponen-komponen perangkat lunak dan routines yang
digunakan oleh programer :
 Xwindows : Xtoolkit & Motif
 Macintosh : Mac Toolbox, MacApp
 Windows : Windows Developer’s Toolkit
 Java : Swing

 Bagaimana cara kerja toolkit?

 Apa yang sebenarnya disediakan olehnya?
 Bagaimana mengaturnya?
 User mengadakan aksi, berinteraksi dengan interface.
 Aksi-aksi tersebut harus disampaikan kepada aplikasi dalam cara-cara
yang penuh arti.
 Aplikasi melakukan aksi yang sesuai, mungkin memperbaharui
tampilan.

24
2.4 Model objek

 UI adalah kumpulan objek yang saling berinteraksi.

 User secara langsung memanipulasi objek-objek tersebut.
 Objek-objek bertanggung jawab untuk mentransmisikan aksi-aksi user
ke aplikasi dengan cara yang berguna.

UI Application

User
2.5 Object-Oriented Systems

Analisis dan disain berorientasi objek adalah cara baru dalam

memikirkan suatu masalah dengan menggunakan model yang dibuat
menurut konsep sekitar dunia nyata. Dasar pembuatan adalah objek,
yang merupakan kombinasi antara struktur data dan perilaku dalam satu
entitas. Pengertian "berorientasi objek" berarti bahwa kita
mengorganisasi perangkat lunak sebagai kumpulan dari objek tertentu
yang memiliki struktur data dan perilakunya.

 Objek

o Identitas berarti bahwa data diukur mempunyai nilai tertentu yang

membedakan entitas disebut objek.
o Objek dapat kongkrit, seperti halnya arsip dalam sistem, atau
konseptual seperti kebijakan penjadualan dalam multiprocessing pada
sistem operasi.

25
 o Setiap objek mempunyai sifat yang melekat pada identitasnya.
o Dua objek dapat berbeda walaupun bila semua nilai atributnya identik.

 Kelas Objek

o Kelas merupakan gambaran sekumpulan Objek yang terbagi dalam

atribut, operasi, metode, hubungan, dan makna yang sama.
o Suatu kegiatan mengumpulkan data (atribut) dan perilaku (operasi)
yang mempunyai struktur data sama ke dalam satu grup.
o Kelas Objek merupakan wadah bagi Objek. Dapat digunakan untuk
menciptakan Objek.
o Objek mewakili fakta/keterangan dari sebuah kelas.

 Istilah-istilah Objek

o Atribut : Data item yang menegaskan Objek

o Operasi : Fungsi di dalam kelas yang dikombinasikan ke bentuk

tingkah laku kelas
o Metode : Pelaksanaan prosedur (badan dari kode yang mengeksekusi
respon terhadap permintaan objek lain di dalam sistem).

 Metodologi pengembangan sistem berorientasi objek mempunyai tiga

karakteristik utama :

 Encapsulation
 Inheritance
 Polymorphism

26
a. ENCAPSULATION (PENGKAPSULAN)

 Encapsulation merupakan dasar untuk pembatasan ruang lingkup

program terhadap data yang diproses.
 Data dan prosedur atau fungsi dikemas bersama-sama dalam suatu
objek, sehingga prosedur atau fungsi lain dari luar tidak dapat
mengaksesnya.
 Data terlindung dari prosedur atau objek lain, kecuali prosedur yang
berada dalam objek itu sendiri.

b. INHERITANCE (PEWARISAN)
 Inheritance adalah teknik yang menyatakan bahwa anak dari objek
akan mewarisi data/atribut dan metode dari induknya langsung.
Atribut dan metode dari objek dari objek induk diturunkan kepada
anak objek, demikian seterusnya.
 Inheritance mempunyai arti bahwa atribut dan operasi yang dimiliki
bersama di anatara kelas yang mempunyai hubungan secara
hirarki.
 Suatu kelas dapat ditentukan secara umum, kemudian
ditentukan spesifik menjadi subkelas. Setiap subkelas
mempunyai hubungan atau mewarisi semua sifat yang dimiliki
oleh kelas induknya, dan ditambah dengan sifat unik yang
dimilikinya.
 Kelas Objek dapat didefinisikan atribut dan service dari kelas
Objek lainnya.
 Inheritance menggambarkan generalisasi sebuah kelas
Contoh :
- Sedan dan Sepeda Motor adalah subkelas dari Kendaraan
Bermotor.

27
 - Kedua subkelas mewarisi sifat yang dimiliki oleh Kendaraan
Bermotor, yaitu mempunyai mesin dan dapat berjalan.
- Kedua subkelas mempunyai sifat masing-masing yang
berbeda, misalnya jumlah roda, dan kemampuan untuk
berjalan mundur yang tidak dimiliki oleh sepeda motor.

c. POLYMORPHISM (POLIMORFISME)

 Polimorfisme yaitu konsep yang menyatakan bahwa seuatu yang

sama dapat mempunyai bentuk dan perilaku berbeda.
 Polimorfisme mempunyai arti bahwa operasi yang sama
mungkin mempunyai perbedaan dalam kelas yang berbeda.
 Analisis dan Perancangan Sistem Halaman 4
 Kemampuan objek-objek yang berbeda untuk melakukan
metode yang pantas dalam merespon message yang sama.
 Seleksi dari metode yang sesuai bergantung pada kelas yang
seharusnya menciptakan Objek.

2.6 Metode Tools

Metode-metode tool
 Area kerja (interface yang sedang dibangun)
 Pindahkan dan letakkan interaktor ke dalam area kerja.
 Spesifikasikan lokasi, warna, tampilan, dan sebagainya.
 Biasanya menyediakan mode Buil/Pengujian.

CONTOH PROGRAM
Ketik program berikut pada notepad

28
Jika sudah selesai, simpan dengan ekstensi .html kemudian jalankan.
maka outputnya seperti dibawah ini :

29
 Jika ada yang tidak diisi maka akan muncul dialog atau pesan
kesalahan pada layar.

Rangkuman

Dialog beserta jenis-jenisnya berguna untuk menjadi komunikasi yang

baik antara user dengan komputer. Maka dari itu hendaknya dalam

30
 membuat design disesuaikan dengan unsur-unsur yang terdapat di
dalamnya. Lalu senadakan dengan notasi dan model-model yang ada.

Tuntunan 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. Bertindaklah
seakan anda sebagai interface designer yang mendesain dialog antara
konsumen dan mesin penjual minuman.

Latihan

1. Buatlah 2 design mesin minuman dibawah ini dengan menggunakan

aplikasi dreamweaver !
2. Tulis kelebihan dan kekurangan masing-masing desgin mesin minuman
untuk membandingkannya.
Jawab

31
1. Design 1

Selamat Menikmati Minuman Kami

Jenis minuman

Jumlah minuman
Membayar dengan Bank:
 BCA
 Mandiri
 BNI
 ATM Bersama

Design 2

Jenis Minuman

Jumlah minuman
Membayar dengan bank:
 Mandiri

Membayar Menggunakan Kartu Kredit  BCA

 BNII
 ATM bersama

32
2. Dari ke dua output di atas sudah terlihat jika design yang ke 2 lebih mudah
karena bisa di bayar lewat kartu kredit sedangkan design nomer 1 hanya
menggunakan bank saja dengan memasukkan nomer rekening

33