MAKALAH INTERAKSI MANUSIA DAN KOMPUTER

“NOTASI DESAIN DAN DIALOG”

DOSEN PENGAMPU : Herry Adi Chandra S.Kom, M.Kom

DUSUSUN OLEH :

Ahmad Indra Rahman 17630704

Muhammad Firdaus Ananda 17630590

Muhammad Rezkyadi Surya Abdie 17630489

Rahmad Afandi 17630544

FAKULTAS TEKNOLOGI IMFORMASI

PROGRAM STUDI S1 TEKNIK INFORMATIKA
UNIVERSITAS ISLAM KALIMANTAN (UNISKA)
MUHAMMAD ARSYAD AL-BANJARY
BANJARMASIN
2019
 Kata Pengantar

Rasa puji dan rasa syukur yang sedalam-dalamnya penulis aturkan kepada
kehadirat Allah SWT yang telah memberikan rahmat dan karunianya kepada
penulis,sehingga penulis dapat menyelesaikan makalah interaksi manusia dan
komputer yang berjudul “NOTASI DESAIN DAN DIALOG”.Guna untuk memenuhi
salah satu tugas mata kuliah Interaksi Manusia dengan Komputer.

Kemudian shalawat berangkaikan salam penulis sampaikan kepada allah SWT

kiranya dilimpahkan kepada junjungan kita nabi besar Muhammad SAW.

Ucapan terima kasih tidak lupa pula kami ucapkan kepada bapak Herry Adi
Chandra. S.Kom. M.Kom. selaku dosen pembimbing yang telah melakukan dan
memberi bimbingan baik secara lansung maupun tidak lansung dalam penyelesaian
makalah ini. Dan tidak lupa pula kepada teman-teman,yang telah membantu kami
dalam pembuatan makalah ini.

Dalam pembuatan makalah ini kami menyadari bahwa kami masih banyak memiliki
kekurangan. Oleh sebab itu berharap adanya kritik dan saran untuk perbaikan
pembuatan makalah selanjutnya. Terimakasih.

Banjarmasin, 18 November 2019

(Kelompok)
 DAFTAR ISI

Kata Pengantar .............................................................................................................. 2

DAFTAR ISI ................................................................................................................. 3

BAB I PENDAHULUAN ............................................................................................. 5

1.2 Tujuan Penulisan ............................................................................................ 5

1.3 Ruang Lingkup Masalah ................................................................................ 6

1.4 Batasan Masalah ............................................................................................. 6

BAB II PEMBAHASAN .............................................................................................. 7

2.1 Pengertian Dialog ........................................................................................... 7

2.2 Notasi Desain Dan Dialog .............................................................................. 8

2.3 Notasi Diagramatik ......................................................................................... 8

2.4 Notasi Tekstual ............................................................................................. 12

2.5 Semantic Dialog ........................................................................................... 13

2.6 Desain Dan Analisis Dialog ......................................................................... 13

BAB III ANALISA DESAIN SISTEM DAN PEMBAHASAN ................................ 14

3.1 Deskripsi Aplikasi ........................................................................................ 14

3.2 Perancangan Sistem dengan Unified Modelling Language (UML) ............. 14

3.2 Er-Diagram ................................................................................................... 15

3.3 Desain Tampilan Interface Aplikasi Inventaris CCIT .................................. 16

3.3.1 Desain Form Login ................................................................................... 16

3.3.2 Desain Form User ..................................................................................... 17

3.3.3 Desain Form Laporan ............................................................................... 18

 3.3.4 Desain Form Auditing .............................................................................. 19

3.3.5 Desain Form Ruangan .............................................................................. 20

3.3.6 Desain Form Barang ................................................................................. 22

3.3.7 Desain Form Ubah Password .................................................................... 23

BAB IV PENUTUP .................................................................................................... 24

DAFTAR PUSTAKA ................................................................................................. 25

 BAB I
PENDAHULUAN

1.1 Latar Belakang

Iventarisasi barang merupakan pencatatan data yang berhubungan dengan
barang atau aset dalam instansi. Umumnya kegiatan dalam iventarisasi barang
adalah pencatatan pengadaan barang, penempatan, mutasi dan pemeliharaan. (Ayu
Adita Prawiyanti, 2013:1)
Hampir diseluruh lembaga memberikan fasilitas yang dapat dimanfaatkan
dalam proses belajar mengajar seperti komputer-komputer, proyektor, dan lain
sebagainya. Pada saat ini masih banyak lembaga-lembaga yang mengelola aset
atau harta kekayaannya masih secara manual belum terkomputerisasi, sehingga
membuat lembaga tersebut mengalami kesulitan, salah satu lembaga pendidikan
tersebut adalah CCIT. Pada saat ini lembaga pendidikan CCIT dalam mengelola
aset atau harta kekayaannya masih secara manual belum terkomputerisasi,
sehingga membuat lembaga CCIT mengalami kesulitan dalam memasukkan data,
mencari data, dan mengubah data-data aset tersebut.
Oleh karena itu guna mendukung kinerja yang baik pada CCIT, dibutuhkan
suatu perancangan basis data untuk membantu perusahaan dalam memasukkan,
mencari, dan meng-update data-data inventaris barang yang telah ada
CCIT.Dalam kesempatan ini kami akan membahas tentang “Aplikasi Sistem
Inventaris CCIT”.
Aplikasi Sistem Inventaris CCIT adalah suatu aplikasi dimana dapat
digunakan untuk memasukkan, mencari, dan meng-update data-data inventaris
barang yang telah ada di basis data CCIT. Sehingga mempermudah pengguna
aplikasi ini dalam melakukan pekerjaannya secara cepat dan efisien.

1.2 Tujuan Penulisan

 Adapun tujuan penulisan yang dapat diperoleh dengan dilakukannya
pembuatan makalah ini ialah sebagai berikut :

1. Mendefinisikan tentang dialog

2. Mendefinisikan notasi desain dan dialog
3. Memberikan penjelasan tentang sistem inventaris CCIT.
4. Memberikan penjelasan tentang alur kerja sistem inventaris tersebut.
5. Memberikan penjelasan dan mempermudah memasukkan, mencari, dan
meng-update data-data inventaris bagi pengguna aplikasi tersebut.
6. Memberikan informasi mengenai inventaris CCIT

1.3 Ruang Lingkup Masalah

Adapun ruang lingkup masalah dari makalah ini adalah:

1. Apakah sistem iventaris ini dapat membantu pengguna aplikasi dalam
melakukan pekerjaannya?
2. Bagaimana alur kerja sistem inventaris tersebut?
3. Bagaimana membangun sistem inventaris agar dapat mempermudah
pengguna aplikasi dalam pekerjaannya?

1.4 Batasan Masalah

Adapun batasan masalah pada makalah ini adalah :

1. Menjelaskan apa itu dialog.
2. Apa itu notasi dialog dan desain.
3. Menjelaskan berbagai macam notasi dan desain
4. Mendeskripsikan alur kerja sistem inventaris pada kegiatan pengecekan
barang.
5. Mempermudah pekerjaan pengguna aplikasi dalam melihat, menambah dan
mengurangi inventaris.
 BAB II
PEMBAHASAN

2.1 Pengertian Dialog

Dialog dalam arti umum yaitu percakapan antara dua kelompok

atau lebih, sedangkan dialog dalam konteks perancangan user interface
yaitu struktur dari percakapan antara user dan komputer.
Pada IMK dan komputer, bahasa komputer dapat dibagi atas tiga
tingkatan;

1. Leksikal merupakan tingkat yang paling rendah yaitu bentuk icon pada
layar tombol yang ditekan. 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. Simantik yaitu arti dari percakapan yang berkaitan dengan

pengaruhnya pada struktur data internal komputer dan dunia
eksternal.Pada bahasa manusia, ekuivalen dengan arti yang berasal
dari partisipan dalam percakapan.

Dialog manusia dan komputer pada umumnya berbeda dengan dialog

antar manusia, dialog dengan komputer biasanya terstruktur dan terbatas.
Karakteristik Dialog User- Sistem Komputer;

 Partisipan harus menyebutkan dialognya dalam urutan yang jelas.

 Beberapa dialog telah ditetapkan sebelumnya.

 Beberapa bagian tertentu dari dialog dilakukan secara bersamaan.

  Umumnya dialog berikutnya bergantung pada respon partisipan.

2.2 Notasi Desain Dan Dialog

Dalam desain dialog harus diperhatikan beberapa hal yaitu;

1. Rangkaian dialog mempresentasikan struktur tugas.

2. Beberapa rangkaian dialog tambahan digunakan untuk user support,

misalnya help system, tutorial sub system .

3. Rangkaian dialogdiurutkan sesuai struktur tugas

2.3 Notasi Diagramatik

Notasi diagramatik merupakan bentuk yang paling sering digunakan

dalam desain dialog. Kelebihan dalam bentuk ini adalah memungkinkan
desainer untuk melihat secara sekilas struktur dialog sedangkan
kelemahannya sulit untuk menjelaskan struktur dialog yang lebih luas dan
kompleks.
Ada 5 metode yang digunakan untuk notasi dramatic, yaitu;

1. State Transition Network (STN).

Komponen STN:

 Lingkaran, menggambarkan “state” dari system.

 Tanda panah, yang terdapat antara state disebut juga

transisi.Tanda panah ini diberi label yang menjelaskan tentang
tindakan user yang menyebabkan transisi dan response dari
system.

STN dapat menggambarkan beberapa pilihan dialog:

 Urutan tindakan dan response dari sistem (sequence)

 Pilihan bagi user (choice)

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)
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.
2. Hirarchical State Transition Network
Karakteristiknya yaitu;

 Digunakan untuk deskripsi sistem yang lebih lengkap.

 Mirip dengan STN, dengan fitur tambahan berupa gabungan

state (composit state).

 Digunakan untuk system yang besar.

Contohnya; Pada drawing tool terdapat 3 sub-menu yaitu
grapich, text dan paint.
3. Harel State Chart
Karakteristiknya yaitu;

 Digunakan untuk spesifikasi system reaktif yang kompleks secara

visual.

 Mampu mengakomodasi masalah seperti concurrency dan escape.

Contohnya; Panel kendali TV dengan 5 tombol kendali ( On, Off,
Mute, Set, Reset).

4. Flow Chart
Karkteristiknya yaitu:

 Mendeskripsikan dialog yang sederhana .

 Sederhana dan mudah dimengerti.

 Merefleksikan sudut pandang programer dari pada user.

5. JSD Diagram
Karakteristiknya yaitu;
  Jackson Stuctured Design digunakan untuk berbagi aspek dari
analisis tugas dan desain dialog.

 Digunakan untuk system yang sederhana, terbatas dan berbasis

menu.

2.4 Notasi Tekstual

Dalam notasi tekstual ada 3 metode yang digunakan, yaitu;

1. Tata Bahasa / Grammer

Notasi dialog tekstual focus pada aksi yang dilakukan oleh

user. Ada 2 jenis grammer yaitu BNF, Regular Expression.
Karakteristiknya yaitu;
Regular Expression banyak digunakan untuk mendeskripsikan kriteria
pencarian tekstual yang kompleks.

 Regular Expression digunakan untuk analisis leksikal bahasa

pemograman

 Regular Expression dan BNF tidak digunakan untuk mere-

presentasikan councurency dialog.

2. Aturan Produksi

Bentuk umumnya if conditional then action, karena

menggunakan if kondisi then.
Karakteristiknya yaitu;

 Berorientasi pada event, state atau gabungan keduanya,

 Baik untuk task parallel bukan task sequence.

 3. CSP dan Proses Aljabar
Digunakan untuk proses sekunsial (urut) pada natural langange based
dan bersama-sama . Misalnya dalam penggunaan mouse, keyboard dan
draw menu secara bersama-sama.

2.5 Semantic Dialog

Biasanya structur dialog bersifat sintaksis, dialog semantic memberi

tambahan catatan dialog formal mengenai arti suatu aksi dan user
dibiarkan menginterpretasikan sendiri.
Ada 2 aspek dalam dialog aplikasi dan user, pendekatan yang dilakukan ;

1. Spesifikasi notasi semantik untuk spesial purpose

2. Berhubungan dengan bahasa pemrograman dengan menyertakan

beberapa koding dalam notasi dialog

3. Berhubungan dengan spesifikasi notasi formal.

2.6 Desain Dan Analisis Dialog

Ada 3 pendekatan dalam perancangan dialog:

1. Berfokus pada aksi user; apakah terspesifikasi dengan baik

2. Memperhatikan kondosi dialog

3. Isu presentasi dan leksikal; bagaimana tampilan dan fungsi tombol

 BAB III
ANALISA DESAIN SISTEM DAN PEMBAHASAN

3.1 Deskripsi Aplikasi

Aplikasi Inventaris CCIT merupakan aplikasi yang dapat

memberikan kemudahan dalam memproses pengolahan barang dalam
suatu ruangan.Adapun fasilitas keamanan yang diberikan oleh aplikasi ini
yaitu menerapkan sistem enkripsi dan auditing. Proses enkripsi dalam
aplikasi ini berfungsi untuk membuat password yang dimiliki oleh
seorang user tidak dapat terbaca oleh user manapun, sedangkan proses
auditing sendiri berfungsi untuk melakukan pencatatan terhadap kegiatan
yang dilakukan oleh setiap user. Aplikasi ini juga dilengkapi oleh fasilitas
yang dapat membuat laporan barang yang dapat dicetak.
Pada dasarnya aplikasi ini dibuat untuk melakukan proses
penginputan suatu barang dalam suatu ruangan. Selain itu aplikasi ini juga
dilengkapi dengan proses pencarian yang dapat mempermudah seorang
user untuk mencari pencarian suatu barang berdasarkan nama barang
maupun berdasarkan nama ruangan.

3.2 Perancangan Sistem dengan Unified Modelling Language (UML)

Perancangan sistem dibutuhkan untuk membantu proses

pengembangan dan untuk dokumentasi perangkat lunak sistem. Pada tahap
ini, perancangan desain sistem dibangun dengan menggunakan Unified
Modelling Language (UML). Gambar dibawah menunjukkan Use Case
sistem yang terdiri dari dua aktor, yaitu Admin dan manager. Masing-
masing aktor mempunyai tugas dan fungsi yang berbeda-beda. Dalam use
 case diagram sistem ini menjelaskan kegiatan yang dapat dilakukan oleh
Admintetapi tidak dapat dilakukan Pegawai.

Gambar 3. 1 UseCase

3.2 Er-Diagram

Dalam pembuatan aplikasi Inventaris CCIT ini, dibuatlah sebuah

ERD dimana ERD ini merupakan proses dari alur aplikasi ini. Berikut
merupakan alur dari ERD yaitu :
 Gambar 3. 2 ERD

3.3 Desain Tampilan Interface Aplikasi Inventaris CCIT

Dalam pembahasan desain tampilan ini akan dijelaskan desain-

desain setiap form dan cara kerja Sistem Inventaris CCIT. Dalam aplikasi
ini admin bertugas untuk mengelola data user dan menerima laporan yang
dihasilkan oleh aktifitas Pegawai. Dalam aplikasi ini Pegawai bertugas
untuk mengelola data barang dan ruangan.

3.3.1 Desain Form Login

Form login digunakan untuk melakukan pembedaan hak akses pada

masing-masing jabatan, sehingga ketika si user salah memasukkan
password dan username maka tidak akan bisa masuk ke dalam aplikasi.
Dalam penggunaan login juga diterapkannya konsep-konsep keamanan.
Sehingga sistem dapat dijaga dengan aman.

Dalam Aplikasi ini terdapat 2 Aktor yaitu Admin dan Pegawai.

Masing-masing dari aktor tersebut memiliki hak akses yang berbeda-beda.
Admin memiliki hak akses untuk mengelola data user dan melihat laporan
 dari kegiatan pegawai, sedangan pegawai sendiri memiliki hak akses untuk
mengelola data ruangan dan data barang.

Gambar 3. 8 Form Login

Dalam form ini kami menggunakan konsep sederhana. Dalam title

bar form login terdapat lambang lembaga CCIT, dan tulisan login untuk
menunjukan bahwa pengguna sedang membuka form login, serta tombol
close di sebelah kanan atas untuk keluar dari form. Form berlatar
belakang abu-abu dengan font kuning untuk memperjelas tampilan font,
sehingga pengguna jelas membacanya. dalam form ini terdapat dua text
box untuk memasukan username dan password dan dua tombol yaitu
login dan reset.

3.3.2 Desain Form User

Form User digunakan untuk mengelola data user, baik itu menginput,
mengupdate, maupun mendelete. Yang nantinya user tersebut bisa
digunakan untuk menggunakan aplikasi Inventaris CCIT sesuai dengan hak
aksesnya. Didalam form ini juga terdapat beberapa validasi yaitu, kolom
nama yang tidak dapat diinput dengan angka dan kolom no_telp yang tidak
dapat diinput dengan menggunakan huruf.
 Gambar 3. 9 Form User

Dalam form user ini disebelah kanan terdapat kolom-kolom untuk

mengisi data user, dibawahnya terdapat tiga tombol, yaitu reset simpan,
dan kembali. Disebelah kiri terdapat tampilan tabel untuk mempermudah
user melihat data yang sudah di input. Dibawah tabel terdapat tiga tombol
tambah, ubah, hapus. Ketiga tombol tersebut diletakan dibawah agar
mempermudah user menggunakannya. Disebelah atas kiri tedapat kolom
cari untuk mencari data user yang ingin dicari. Disebelahnya terdapat
labelyang memberi tahu user yang sedang menggunakan aplikasi. Form
user di lambangkan dengan logo map dan icon manusia, karena dalam
menyimpan suatu data-data user, kita bisa menggunakan map untuk wadah
penyimpanannya dan icon manusia dialambangkan sebagai user maka
kami mengggunkan logo map dan icon manusia.

3.3.3 Desain Form Laporan

 Form Laporan digunakan untuk mempermudah admin dalam
melakukan pencarian berdasarkan nama barang maupun berdasarkan nama
ruangan, yang nantinya hasil dari pecarian tersebut bisa digunakan sebagai
laporan yang dapat dicetak.

Gambar 3. 10 Form Laporan

Dalam form laporan ini ditampilkan preview laporan-laporan yang

akan dicetak pengguna, sehingga pengguna bisa melihat laporan yang
akan dicetak. Di atas preview terdapat toolbar formating untuk mencari
kata, memperbesar dan lain sebagainya. Form print ini di lambangkan
dengan logo printer, karena dalam mencetak suatu data s menggunakan
printer maka kami mengggunkan logo printer.

3.3.4 Desain Form Auditing

Form audit digunakan untuk mengawasi aktifitas yang dilakukan

oleh user saat berhubungan dengan database, proses pengawasan ini mulai
dari user login sampai dengan logut., sehingga jika sewaktu-waktu terjadi
hal yang tidak diinginkan akan lebih mudah untuk menyelikinya.
 Gambar 3. 10 Form Audit

Dalam form audit ini hanya terdapat tampilan berupa table yang
berisi data-data yang mengakses aplikasi ini. Form berlatar belakang putih
untuk mempermudah user untuk membaca Tulsan dan tidak membuat mata
perih saat membacanya. Form auditing di lambangkan dengan logo pensil,
karena dalam mengedit atau pencatatan suatu data dalam kertas
menggunakan pensil maka kami mengggunkan logo pensil.

3.3.5 Desain Form Ruangan

Form Ruangan digunakan oleh pegawai untuk mengelola data

ruangan yang nantinya ruangan tersebut digunakan sebagai tempat untuk
menyimpan barang.
 Gambar 3. 11 Form Ruangan

Dalam form ruangan dibagi dua grup pengisian data yaitu data
ruangan dan informasi ruangan. Hal ini dilakukan untuk mempermudah
user untuk mengetahui pembagian data. Di sebelah kanan terdapat data
informasi ruangan yang berisi kolom-kolom untuk info ruangan,
dibawahnya terdapat tiga tombol yaitu reset simpan, dan kembali.
Disebelah kiri terdapat data ruangan dimana dalam data ruangan ini
terdapat kolom untuk mencari ruangan dan dibawahnya terdapat tapilan
table ntuk mempermudah user untuk melihat data ruangan, dibawah table
terdapat tombol tambah, ubah, dan hapus. Tombol di letakan dibawah
mempunyai maksud untuk mempermudah user dalam menggunakan
tombol pada bagian masing-masing data. Form ruangan di lambangkan
dengan logo rumah, karena dalam rumah terdapat banyak ruangan sehingga
kami mengggunkan logo rumah untuk form ruangan.
3.3.6 Desain Form Barang

Form Barang adalah Form yang digunakan untuk mengelola data

barang, dalam form ini selain pegawai dapat menginput data barang,
pegawai juga dapat melakukan pengecekan barang, jika sewaktu-waktu
terjadi sesuatu dengan barang tersebut.

Gambar 3. 12 Form Barang

Dalam form barang terdapat tiga pengelompokan data yaitu data

barang, input barang, dan pengecekan barang. Disebelah kanan atas terdapat
kelompok input barang, dibawah terdapat kelopok pengecekan barang dan
disebelah kiri terdapat tampilan tabel untuk mempermudah user melihat data-
data barang. Form barang di lambangkan dengan logo mobil truk, karena
dalam mobil truk sebagai tempat penyimpanan dan pengiriman barang
sehingga kami mengggunkan logo mobil truk untuk form barang.
3.3.7 Desain Form Ubah Password

Form ini digunakan untuk meningkatkan keamanan password setiap

user, dimana setiap user yang login dapat mengubah passwordnya
kapanpun.

Gambar 3. 13 Form Change Password

Dalam for ubah password ini terdapat kolom-kolom untuk mengubah

password lama ke password baru, terdapat dua tombol yaitu save dan back
terletak di bawah untuk memudahkan user untuk menggunakannya. Form
berlatar belakang keabu-abuan dengan font berwarna hitam untuk
mempermudah user untuk membacanya.
 BAB IV
PENUTUP
A. Kesimpulan

Dialog adalah percakapan antara dua atau lebih pihak. Dalam mendesain
sebuah dialog, diperlukan deskripsi yang terpisah dari program secara keseluruhan agar
mudah dianalisa. Notasi Dialog Diagramatik terbagi atas State Transition Network
(STN), Petri Net, Heral’s State Chart, Flowchart, Jackson Structured Design (JSD)
Diagram.Notasi Dialog Tekstual terbagi atas Grammars (tata bahasa), Production
Rules (aturan produksi), CSP (Communicating Sequential Processes) dan proses
aljabar. Pada dialog semantic terdapat dua aspek dialog, yaitu aplikasi dan user.

Berbagai properti dalam desain dan analisa dialog.

Properti aksi, Properti kondisi Presentasi leksikal, Presentasi leksikal.

Klasifikasi Kesalahan dalam desain analisa dan dialog yaitu: Mistakes, Slips, Capture
error, Description error, Data driven error, Associative activation error, Loss of
activation error, Keliru.

B. Saran

Kami sebagai penyusun menyadari bahwa dalam penulisan makalah ini

termasuk jauh dari sempurna. Oleh karena itu, kami sangat mengharapkan saran dan
kritik yang membangun dari para pembaca. Semoga makalah ini dapat memberi
manfaat kepada kami dan para pembaca pada umumnya.
 DAFTAR PUSTAKA
 http://sia201108s.wordpress.com/2012/08/07/pengertian-dan-
tujuan-imk/
 http://as270488.blogspot.com/2011/03/makalah-imk.html
 http://sia201108s.wordpress.com/2012/08/07/pengertian-dan-
tujuan-imk/
 http://as270488.blogspot.com/2011/03/makalah-imk.htmlx
 http://adityanugroho90.blogspot.com/2010/03/pengertian-dialog-
manusiakomputer.html

 http://fadilahharokah.blogspot.com/2012/06/desain-dialog.html

 http://i-jakarta.blogspot.com/2010/03/dialog-desain.html