Minggu ke 8

Desain Dialog

Dialog dapat dinotasikan dalam bentuk diagram maupun dalam bentuk tekstual. Dialog terkait dengan semantik atau apa yang dikerjakan oleh sistem dan presentasi atau bagaimana sitem ditampilkan.

Pengertian dialog adalah sebagai berikut :

1.      Umum

Dialog adalah proses komunikasi antara dua atau lebih agen. Dalam dialog, makna harus dipertimbangkan agar memenuhi kaidah semantis dan pragmatis.

2.      IMK

Dialog adalah pertukaran instruksi dan informasi yang mengambil tempat antara user dan sistem computer.

Notasi dialog pada IMK terdiri dari :

1.      Diagramatik

Dengan menggunakan teknik State Transtition Network (jaringan transisi kondisi dan status), flowchart (diagram alir) dan diagram JSD (Jackson Structured Design).

2.      Tekstual

Dengan menggunakan teknik Formal Grammar (tata bahasa formal), Production Rules (aturan produksi) dan CSP.

Pada dasarnya gaya interaksi dan dialog menggunakan menggunakan sistem tanya jawab. Sistem memerlukan input dari user  dan sistem akan menjawabapa kebutuhan  dari user. Agar user mengerti cara berkomunikasi maka user perlu memahami bahasa komputer.

Bahasa komputer mempunyai tingkatan sebagai berikut :

1.      Leksikal

Merupakan tingkat yang paling rendah, misalnya bentuk ikon pada layar atau tombol ditekan. Pada bahasa manusia ekuivalen dengan bunyi atau ejaan suatu kata.

2.      Sintaktik

Urutan dan struktur input output. Pada bahasa manusia ekuivalen dengan tatabahasa dari suatu kalimat.

3.      Semantik

Makna dari percakapan yang berhubungan dengan pengaruhnya pada struktur data internal komputer. Kondisi internal berasal dari dialog user dan sistem.

Prinsip yang digunakan dalam desain dialog adalah membagi sistem menjadi beberapa bagian yang disebut dengan modul, misalnya pembagian modul dalam sebuah sistem pemesanan buku di perpustakaan seperti gambar berikut :

Ada empat alasan utama penggunaan deskripsi pemisahan dialog, yaitu :

1.      Mudah dianalisis

2.      Pemisahan elemen interface dari semantik

3.      Dapat dilakukan sebelum program ditulis dan memberi dampak pada desain program

4.      Kadang menggunakan prototipe tool

Kondisi merupakan sesuatu pada saat sekarang yang berhubungan dengan masa lalu dan mempengaruhi masa yang akan datang.

Ada dua masalah pada kondisi, yaitu :

1.      Terlalu sedikit kondisi

Ada beberapa elemen yang hilang dari spesifikasi sehingga perlu diwaspadai, misal dialog pada tingkat spekulasi

2.      Terlalu banyak state (keadaan)

Bila state terlalu kompleks mungkin akan terjadi redudansi dan ekstensibilitas

Dialog Manusia – Komputer:

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

- Dialog berikutnya tergantung pada respon dari partisipan.

- Dialog terstruktur biasanya tidak langsung menuju pada arti katakatanya/semantik tapi pada level sintaksis.

Proses Perancangan Dialog

Advice:

1. Rangkaian dialog menggambarkan struktur tugas.

2. Beberapa rangkaian dialog tambahan digunakan untuk user support, misalnya: help system, tutorial sub-sistem.

3. Rangkaian dialog diurutkan sesuai dengan struktur tugas.

• Prinsip yang digunakan dalam desain dialog adalah membagi system menjadi beberapa bagian yang disebut module.
• Biasanya user access bukan merupakan bagian dari task desription, tapi harus dimasukan 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 mengimplementasikan user action.

- Desain micro-metaphor untuk control action dan representasi dari commands.

Dalam mendesain dialog, diperlukan deskripsi yang terpisah dari program secara keseluruhan.

Mengapa perlu digunakan notasi deskripsi dialog yang terpisah?

- Agar mudah di analisa.

- 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

Merupakan bentuk yang sering digunakan dalam notasi dialog. Kelebihannya adalah memungkinkan desainer untuk melihat secara sekilas struktur dialog. Kelemahannya adalah sulit untuk menjelaskan struktur dialog yang lebih luas dan kompleks.

Contoh Notasi Diagramatik:

1.      State Transition Network (STN)

STN atau kondisi transisi jaringan digunakan sejak tahun 1940-an. Metode ini menggunakan circle atau state  yang dihubungkan satu dengan yang lain dengan anak panah yang menandakan suatu aksi atau kejadian.

Komponen STN:

- Lingkaran

Menggambarkan “state” dari sistem.

- Tanda Panah

Yang terdapat antara state disebut juga transisi. Tanda panah ini diberi label yang menjelaskan tentang tindakan user yang menyebabkan transisi dan respon dari sistem.

STN dapat menggambarkan beberapa pilihan dialog:

- Urutan tindakan dan respon dari sistem

- Pilihan bagi user

- Iterasi

Contoh :

2.      Hierarchical State Transition Networks

Struktur Hierarchical STN mirip dengan STN, namun memiliki tambahan berupa gabungan state. Penggunaan hirarki STN ini, seperti menggabungkan beberapa STN ke dalam satu diagram besar, sehingga model ini dapat digabungkan untuk sistem-sistem yang besar. STN Hirarki dapat digunakan untuk mendeskripsikan suatu sistem yang lengkap.

3.      Harel’s State Charts

Dapat digolongkan sebagai kelompok STN. Dibangun untuk menspesifikasikan secara visual sistem reaktif yang kompleks dan mampu mengakomodasi masalah seperti concurrency dan escape.

Gambar di atas merupakan diagram kondisi dari panel kendali televisi yang terdiri dari lima tombol ON, OFF, MUTE, SEL dan RESET. Televisi tersebut hanya berada pada kondisi ON atau standby. Misal kita mulai dengan posisi standby, menekan tombol ON atau RESET akan menyebabkan TV menyala dan tombol OFF akan menyebabkan TV kembali ke posisi standby.

Pada saat TV menyala, user dapat mengendalikan suara dengan tombol MUTE yang mengatur suara menjadi ON atau OFF dan saluran TV (channel) dengan tombol SEL untuk memilih salah satu dari empat saluran yang ada. Garis putus-putus dan AND menyatakan bahwa kedua subdialog dapat dijalankan bersama-sama dalam urutan bebas. Subdialog SOUND mempunyai lingkaran kecil hitam dengan garis lengkung yang menunjukkan kondisi awal dan nilai default yaitu ON.

Subdialog CHANNEL mempunyai tanda H (history) yang mengindikasikan akan mengingat posisi channel terakhir yang diaktifkan user dan pada saat TV dihidupkan akan dimulai pada channel 1. RESET akan mengembalikan kondisi ke default awal dan tombol OFF berfungsi sebagai escape.

4.      Flowchart

Diagram alir sangat baik untuk menjelaskan dialog yang sederhana dan menggunakan berbagai jenis kotak untuk merepresentasikan berbagai jenis aktivitas yang berbeda, namun lebih merefleksikan sudut pandang pemrogram dibanding user.

Pada umumnya flowchart sangat akrab dengan pemrograman dan digunakan untuk dialog tetapi tidak untuk algoritma internal, misalnya untuk suatu proses penghapusan entitas dalam database dapat dibuat flowchart sebagai berikut :

Perbedaan utama antara menggunakan flowchart untuk perancangan dialog dengan pemrograman adalah tingkat detail pada sisi program.

5.   Jackson Diagram

Digunakan untuk berbagai aspek dari analisis tugas dan notasi dialog, misal :

Diagram JSD di atas terbagi menjadi tiga bagian yaitu LOGIN, TRANSACTION dan LOGOUT. Urutan pengoperasiannya berjalan dari kiri ke kanan. Tanda asterik (*) merepresentasikan iterasi atau pengulangan. Tanda (o) merepresentasikan pilihan atau opsional.

Dialog Style

Ragam Dialog (DIalogue Style) adalah cara yang digunakan untuk mengorganisasikan berbagai tehnik dialog.

Beberapa sifat penting yang perlu dimiliki oleh setiap ragam dialog adalah:

1.   Inisiatif

Inisiatif merupakan sifat dasar dari sembarang dialog, karena inisiatif akan menentukan keseluruhan ragam komunikasi sehingga dapat ditentukan tipe-tipe pengguna yang dituju oleh sistem yang dibangun. Dua jenis inisiatif yang paling sering digunakan adalah inisiatif oleh komputer dan inisiatif oleh pengguna. Dalam inisiatif oleh komputer, pengguna memberikan tanggapan atas prompt yang diberikan oleh komputer untuk memasukkan perintah atau parameter perintah, biasanya berupa serangkaian pilihan yang harus dipilih (pilihan menu), atau sejumlah kotak yang dapat diisi dengan suatu nilai parameter (seperti pengisian borang), atau suatu pertanyaan yang jawabannya harus dinyatakan dengan cara tertentu, misalnya dengan ya/tidak atau dengan bahasa alamiah. Karakteristik utamanya adalah bahwa dialog itu terdiri atas sekumpulan pilihan yang telah didefinisikan sebelumnya. Sebaliknya, inisiatif oleh pengguna mempunyai sifat keterbukaan yang lebih luas: pengguna diharapkan memahami sekumpulan perintah yang harus ditulis menurut aturan (sintaks) tertentu.

2.   Keluwesan

Sistem yang luwes atau fleksibel adalah sistem yang mempunyai kemampuan untuk mencapai suatu tujuan lewat sejumlah cara yang berbeda. Karakteristik penting dalam mencapai keluwesan suatu sistem adalah bahwa sistem harus dapat menyesuaikan diri dengan keinginan pengguna dan bukan pengguna harus menyesuaikan diri dengan kerangka sistem yang telah ditetapkan oleh perancang sistem. Keluwesan juga dapat dilihat dari adanya kesempatan bagi pengguna untuk melakukan customizing dan memperluas antarmuka dari sebuah sistem untuk memenuhi kebutuhan pribadinya.

3.   Kompleksitas

Seorang perancang sistem tidak perlu membuat atau menggunakan antarmuka lebih dari apa yang diperlukan, karena tidak ada keuntungan yang dapat diperoleh, malahan akan menjadikan implementasinya menjadi lebih sukar.

4.   Kekuatan

Kekuatan didefinisikan sebagai jumlah kerja yang dapat dilakukan oleh sistem untuk setiap perintah yang diberikan oleh pengguna.

5.   Beban Informasi

Agar penyampaian informasi itu dapat berdaya guna dan berhasil guna, beban informasi yang terkandung didalam suatu ragam dialog seharusnya disesuaikan dengan tingkat pengguna. Jika beban itu terlalu tinggi, pengguna akan merasa sangat terbebani yang akan berakibat negatif dalam hal kemampuan pengolahan kognitif dan tingkah laku pengguna akan merasa bahwa sistemnya seolah-olah menyembunyikan kinerja penggunanya sendiri.

6.   Konsistensi

Konsistensi harus diterapkan pada perancangan antarmuka pengguna. Contoh pada format pemasukan data dan format tampilan data.

7.   Umpan Balik

Pada program komputer yang tidak ramah, pengguna sering harus menunggu proses yang yang sedang berjalan, sementara pengguna tidak mengetahui status proses saat itu, apakah sedang melakukan komputasi, sedang mencetak hasil, atau bahkan komputernya macet (hang) karena suatu sebab. Program yang baik akan selalu memberikan umpan balik kepada pengguna atas apa yang dikerjakan saat itu.

8.   Observabilitas

Sistem dikatakan mempunyai sifat observabilitas apabila sistem itu berfungsi secara benar dan nampak sederhana bagi pengguna meskipun sesungguhnya pengolahan secara internalnya sangat rumit.

9.   Kontrolabilitas

Kontrolabilitas merupakan kebalikan dari observabilitas, dan hal ini berimplikasi bahwa sistem selalu berada dibawah kontrol pengguna. Agar hal ini tidak tercapai, antarmukanya harus mempunyai sarana yang memungkinkan pengguna untuk dapat melakukan kendali.

10.  Efisiensi

Efisiensi dalam sistem komputer yang melibatkan unjuk kerja manusia dan komputer secara bersama-sama adalah hasil yang diperoleh dari kerjasama antara manusia dan komputer. Sehingga, meskipun efisiensi dalam aspek rekayasa perangkat lunak sistem menjadi sangat penting jika mereka berpengaruh pada waktu tanggap atau laju penampilan sistem, seringkali perancang lebih memilih untuk memanfaatkan hasil teknologi baru untuk meminimalkan ongkos pengembangan sistem. Sebaliknya, tidak dapat dipungkiri bahwa biaya personal dari seorang ahli akan semakin meningkat dari waktu ke waktu.

11.  Keseimbangan

Strategi yang diambil dalam perancangan sistem manusia komputer haruslah dapat membagi-bagi pekerjaan antara manusia dan komputer seoptimal mungkin. Manusia dapat menangani persoalan yang berurusan dengan perubahan lingkungan, pengetahuan yang tidak pasti dan tidak lengkap, sementara komputer lebih cocok untuk pekerjaan yang bersifat perulangan dan rutin, penyimpanan dan pencarian kembali data secara handal dan memberikan hasil komputasi yang sangat akurat dalam hal pengolahan numerik dan logika. Tabel berikut menunjukkan kecakapan relatif manusia dan computer.

1.      Command Language

Bahasa Perintah dan Bahasa Alami

• 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:

- Konsistensi.

- Penamaan dan pemberian singkatan yang baik.

- Melakukan tugas perancangan dapat membantu meminimalkan kekurangan.

2. WIMP (Window, Icon, Menu, Pointer)

Berfokus pada Menus, Buttons, Forms, Icons. WIMP sangat umum digunakan pada kebanyakan sistem, sehingga banyak orang yang menganggap bahwa GUI adalah WIMP. Padahal, masih ada bentuk lain GUI selain WIMP, salah satunya adalah ZUI (Zoomable User Interface atau Zooming User Interface). ZUI merupakan inovasi GUI yang dimulai pada suatu proyek bernama Pad++ yang dirintis oleh Ken Perlin, Jim Hollan, dan Ben Bederson di New York University. Namun, ZUI mungkin saja sudah mati jika tidak ada Jef Raskin (alm) dengan proyeknya, Archy. Pada konsep ZUI, tidak ada window. Yang terdapat pada layar adalah sebuah permukaan 2 dimensi yang tak terbatas, dengan objek-objek seperti dokumen, gambar dan sebagainya terletak di atas permukaan tersebut. Pengguna dapat menggeser-geser permukaan ini (atas-bawah maupun kiri-kanan) dan memperbesar (zoom in) pada suatu objek untuk melihat atau meng-edit objek tersebut atau memperkecil (zoom out) untuk berpindah ke objek lain.

3. Direct Manipulation

• 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

- Menyediakan konteks dan tampilan yang cepat dari feedback, sehingga user dapat mengetahui apakah tujuan telah tercapai.

- Membatasai 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.

4. 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.

5. Speech dan Natural Language

Speech (Suara)

Adalah getaran pada suara menimbulkan bunyi “ahh”. Mulut, tenggorokan, bibir membentuk bunyi.

• Input speech:

- Pengenalan speaker.

- Pengenalan suara.

- Pemahaman bahasa natural.

• Natural Language:

- Memberi arti pada kata-kata.

- Input dapat berupa suara atau dari keyboard.

• Keuntungan:

- Mudah dipelajari dan diingat.

- Lebih kuat.

- Cepat, efisien (tidak selalu).

- Layar yang kecil.

• Kekurangan:

- Belum dapat bekerja dengan baik.

- Mengasumsikan pengetahuan dari permasalahan.

- Membutuhkan keahlian pengetikan. Peningkatan tidak terlihat.

- Implementasi membutuhkan biaya yang mahal.

User Interface Software

Alat Bantu User Interface:

• Aplikasi apa yang biasa digunakan oleh programmer 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 programmer:

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

Model Seeheim

Model Percakapan

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.

OBJECT-ORIENTED SYSTEMS

• Pemrograman GUI Java dikerjakan dengan AWT dan Swing.
• Lebih banyak model terdistribusi.
• Aksi utama disini adalah mengirimkan event ke objek-objek sebagai pesan.
• Pendelegasian yang penting _ dapat membuat beberapa objek tertentu bertanggung jawab untuk menangani event.

GUI Builder Tools (Alat Pembuat GUI)

• Mengapa membangun interface grafis dengan perintah-perintah tekstual?
• Mengapa tidak menunjukkan apa yang Anda suka?
• Visual builder tools: Visual Basic, Visual C++, Borland Delphi, Symantec Café.

Metode-metode Tool

• Area kerja (interface yang sedang dibangun).
• Pindahkan dan letakkan interaktor ke dalam area kerja.
• Spesifikasi lokasi, warna, tampilan, dsb.
• Biasanya menyediakan mode Build/Pengujian.

Sumber:

-          Buku Interaksi Manusia dan Komputer Penerbit GUNADARMA

-          Surbekti, Irfan: Santosa, Insap ; Interaksi Manusia dan Komputer, edisi Jurusan Teknik Informatika-ITS, 2006

-          Sudarmawan; Ariyus, Dony; Interaksi Manusia dan Komputer, Andi Offset Yogyakarta, 2007