Interaksi Manusia dan Komputer[Kode Kelas]

[ Chapter 5]Ragam dan Disain Dialog

Dedy Alamsyah, S.Kom, M.Kom[NIDN : 0410047807]

Pengertian dialog:

Definisi Umum, dialog adalah proses komunikasi antara 2 ataulebih agen, dalam dialog makna harus dipertimbangkan agar memenuhi kaidah semantis dan pragmatis

Definisi IMK, dialog adalah pertukaran instruksi dan informasi yang mengambil tempat antara user dan sistem computer

Ragam dialog (Dialoque Style) merupakan cara pengorganisasianberbagai teknik dialog interaktif yang memungkinkan terjadinyakomunikasi antara manusia dengan komputer.

Tujuan perancangan antarmuka dengan berbagai dialog padadasarnya adalah untuk mendapatkan satu kriteria yang sangatpenting dalam pengoperasian sebuah program aplikasi, yakniaspek ramah dengan pengguna (user friendly)

Dialog Manusia dan Komputer

1. Berusaha keras untuk konsisten

2. Memungkinkan pengguna menggunakan shortcuts

3. Memberikan umpan balik yang informatif

4. Merancang dialog untuk menghasilkan keadaan akhir(sukses, selesai)

5. Memberikan penanganan kesalahan yang sederhana

6. Mengizinkan pembalikan aksi (undo) dengan mudah

7. Mendukung internal locus of control ( pemakai menguasaisistem atau inisiator, bukan responden)

8. Mengurangi beban ingatan jangka pendek(rule of thumb: manusia mengingat 7 ± 2 satuan informasi)

Delapan “Golden Rules” Perancangan

Dialog

Informasi disusun dalam formulir-formulir, nama-nama dansusunan menu, ukuran dan bentuk dari ikon, dll, semuanya harus konsisten diseluruh sistem

Konsisten mengijinkan banyak aksi menjadi otomatis

Jika ada aplikasi baru hadir dengan fungsi yang berbeda akanmenyebabkan user harus mempelajari kembali operasi-operasiyang dilakukan

Mis: konsistensi di dalam menu bar untuk File, Edit dan Format

1. Konsisten

User yang bekerja dengan satu aplikasi dalam seluruhwaktunya akan menginginkan penghematan waktudengan memanfaatkan short cut

User mulai hilang kesabaran dengan urutan menu panjang ketika mereka sudah tahu pasti apa yang mereka kerjakan

Short cut keys dapat mereduksi jumlah interaksi untuktugas yang diberikan

Designer dapat menyediakan fasilitas makro bagi user untuk membuat short cuts bagi dirinya sendiri

Dengan short cut membuat user lebih produktif

2. Shortcut (Jalan Pintas)

Setiap aksi dari user harus ada feedback dari komputeruntuk menunjukkan hasil dari aksi tersebut

Mis: jika user meng-”click” sebuah button harus secara visual ada perubahan bentuk atau bisa berupa bunyi yang mengindikasikan komputer telah meresponnya

Informasi feedback sangat penting bagi user, mis:

Jika komputer sedang melakukan proses tertentu, maka perlu adainformasi

3. Informatif

Harus ada informasi yang jelas mengenai keterangansukses atau selesai dari suatu proses yang dilakukan

4. Merancang dialog untuk menghasilkan

keadaan akhir (sukses, selesai)

Error dapat menjadi masalah yang serius, sehinggadesigner harus mencoba mencegah user membuat error

Ketika errors terjadi perlu cara mengatasinya: Pesan error harus dinyatakan secara jelas apa kesalahannya

dan menerangkan bagaimana kesalahan tersebut terjadi

Hindari pesan yang menakutkan atau menyalahkan user seperti: “FATAL ERROR 2005”

Juga sediakan informasi yang memudahkan untuk mengoreksierror tersebut, mis: “the date of birth entered is not valid. Check to be sure only numeric characters in appropriate ranges are entered in the date of birth fields….”

5. Penanganan Error (Kesalahan yang

jelas)

User memerlukan bahwa ketika mereka sudah memilihopsi dan membuat aksi, aktivitas itu dapat dibatalkanatau kembali ke kondisi sebelumnya dengan mudah

Mengijinkan user untuk belajar tentang sistem denganmelakukan eksplorasi

Jika mereka melakukan kesalahan, mereka dapatmembatalkan aksinya

Jika user akan menghapus sesuatu yang substansial (mis: sebuah file), sistem harus meminta konformasi terhadapaksi tersebut

6. Ijinkan Pembatalan Aksi

User yang berpengalaman menginginkan bahwa merekayang mengendalikan sistem dan sistem meresponmereka. Segala sesuatu yang mereka tidak tahu rasanyaingin segera mendapat jawabannya, oleh sebab itufasilitas “help” penting untuk menolongnya agar segeramendapatkan solusi

User yang tidak berpengalaman ketika mengalamikesulitan dalam mengeksplorasi sistem juga perlumendapat pertolongan yang mudah dan sederhana, fasilitas “help” yang lengkap, mudah dioperasikan akanmenolong mereka mengatasi kesulitannya

7. Fasilitas Bantuan (Help)

Orang mempunyai keterbatasan pada short-term memory-nya

Orang hanya mengingat sekitar 7 chunk informasi padasatu saat

8. Kurangi Beban Menghafal

Inisiatif, Inisiatif dapat menentukan tipe-tipe pengguna yang dituju olehsistem yang dibangun.

Ada dua inisiatif yaitu :

- inisiatif oleh komputer, pengguna memberikan tanggapan atas prompt yg

diberikan komputer

- inisiatif oleh pengguna, pengguna diharapkan memahami sekumpulanperintah dgn sintaks tertentu

KeluwesanSistem komputer harus menyesuaikan diri dengan keadaan pengguna, misalnya member kesempatan user untuk costumizing sistem.

KompleksitasSistem yang dibuat sesuai dengan yang diperlukan

Sifat Penting Ragam Dialog

Kekuatan

Kekuatan merupakan jumlah kerja yang dapat dilakukan oleh sistem untuk setiapperintah yang diberikan pengguna. misal : pengguna ahli memberikan respon positifterhadap perintah-perintah yang powerful.

Beban informasi

Penyajian informasi harus disesuaikan dengan aras pengguna.

Konsistensi

Perintah harus mempunyai sintaksis yang terstandarisasi dan urutan parameter harusmempunyai 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

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

Sifat Penting Ragam Dialog (2)

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

ObservabilitasSistem berfungsi secara benar dan nampak sederhana meskipun sebenarnya pengolahan internalnyasangat rumit.

KontrolabilitasSistem selalu berada di bawah kontrol pengguna

EfisiensiEfisiensi sangat penting jika berpengaruh pada waktu tanggap atau laju penampilan sistem.

KeseimbanganDalam merancang sistem hendaknya mengetahui kemampuan antara manusia dan komputer.

Sifat Penting Ragam Dialog (3)

Macam Dialog

1. Command Language

2. Sistem Menu

3. Borang Isian (Form Fill in)

4. Sistem Windows

5. Manipulasi Langsung

6. Dialog Berbasis Icon

7. Dialog Berbasis Grafis

Command Language

Bahasa perintah biasanya diperlukan dalam sistem operasi DOS danUNIX. User menulis suatu perintah dan menunggu respon dari sistem. Jika hasilnya benar, perintah berikutnya diterbitkan, jika salah tindakanselanjutnya ada ditangan user

Contoh:

C:\>DIR - C:\>copy *.doc A:\LETTER

C:\>DIR *.DOC/s - C:\DOS>FORMAT A: /S

Keuntungan Kerugian

•Luwes

•Inisiatif pada pengguna

•Nyaman dalam penciptaannya

•Memberdayakan user

•Cepat

•Efisien

•Akurat

•Membutuhkan pelatihan yang

lama

•Membutuhkan penggunaan yang

teratur

•Beban ingatan yang tinggi

•Jelek dalam menangani

kesalahan

Command Language (2)

Beberapa pedoman:

Buatlah model eksplisit dari obyek atau tindakan

Pilihlah nama-nama yang penuh arti, spesifikdan jelas

Gunakanlah struktur hirarki

Usahakan struktur yang konsisten

Aturan-aturan penyingkatan harus konsisten

Pertimbangkan pemakaian menu-menu perintah pada tampilan berkecepatan tinggi

Batasi jumlah perintah untuk menjalankan suatutugas

Bahasa Alami

Dialog berbasis bahasa alami merupakan dialog yang menggunakan bahasa yang mudah dimengerti olehmanusia. Contoh : cetak data mahasiswa yang memilikiipk > 3.0.

Kemudian bahasa tersebut diterjemahkan ke dalaminstruksi yang ekuivalen yang bisa di mengerti komputer, seperti turbo Pascal

Keuntungan vs Kerugian Bahasa Alami

Keuntungan Kerugian

•Tidak memerlukan sintaksis khusus

•Luwes dan powerful

•Alamiah

•Menggunakan inisiatif campuran

• Mempunyai dualisme

• Bertele-tele

• Opaque (tidak jelas)

• Perancangan perangkat lunak yang rumit

• Tidak efisien

Pengguna menentukan satu dari sejumlah pilihan pada daftar, kemudian menerapkan sintaks untuk mengindikasikan pilihan, menegaskan pilihan, memulai aksi dan mengamati hasilnya

1. Sistem Menu Tunggal

2. Linear Sequences dan Multiple MenusMenu yang memandu pengguna untuk proses yang kompleks, contoh : clue cards atau “Wizards”.

3. Tree-structured MenusMenu ini terdiri dari : Tree View Menus, List View Menus, Tree structured menu (Tree View dan List View) pada tampilan Windows Explorer.

Sistem Menu

1.Menu-menu Tunggal

Mnemonic letters : pilihan item menggunakan huruf awal dapat berupa angka, huruf ataucampuran angka dan huruf. User harus memasukkan pilihan sesuai dengan format yang diberikan.

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

Button Choice : tampilan menu dengan menggunakan bentuk tombol/button. User meng-kliksalah satu tombol pada tampilan menu.

Multiple selection menus atau check boxes : tampilan menu dengan itemnya diseleksi dapatlebih dari satu.

Pop-up menus atau context menus : tampilan menu yang diaktifkan dengan mengklik tombolkanan mouse pada area yang ditentukan.

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

Embedded links/ Hyperlinks : tampilan menu dengan item-item disusun tidak beraturan ataumengikuti alur cerita, contoh : tampilan browser, help windows.

Main menu, iconic menus, toolbars atau palletes : menu yang digabung dengan icon-icon

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

Pengategorian, pilihan dari tipe yang serupa ditempatkanbersama

Urutan yang lazim, contoh : nama hari dalam seminggu

Jumlah pemakaian, pilihan yang sering digunakanterletak dekat denganbagian atas dari menu.

Pastikan tidak ada item menu yang duplikasi atauoverlapping.

Strategi Pengorganisasian Menu

Keuntungan vs Kerugian Sistem Menu

Keuntungan Kerugian

•Proses belajar singkat

•Mengurangi pengetikan

•Kesalahan mudah diatasi

•Struktur terdefinisi dengan baik

•Beban memori rendah

•Perancangannya mudah

• Proses sedikit lambat

• Menghabiskan ruang layar

• Kurang cocok untuk aktivitas pemasukan

data

• Memerlukan kecepatan tampilan yang

tinggi

• Tidak cocok untuk dialog terinisasi

pengguna

• Tidak cocok untuk dialog terinisasi

campuran

Borang Isian (Form Fill in)Dialog berbasis pengisian borang (form filling dialogue)

merupakan suatu penerapan langsung dari aktifitas pengisianborang dalam kehidupan sehari- hari ke dalam sistemcomputer

Kualitas antarmuka berbasis pengisian boring tergantung padatiga aspek yaitu:

1. Tampilan pada layar monitor yang mencerminkan struktur data masukan yang diperlukan oleh sistem.

2. Kejelasan perancangan dan penyajiannya secara visual pada layarmonitor.

3. Derajat kebenaran dan kehandalan penerimaan data masukan olehprogram lewat berbagai fasilitas pemasukan data yang ada di dalam borang tersebut

Hal-hal yang perlu diperhatikan dalam

perancangan tampilan borang1. Proteksi tampilan, pembatasan tampilan yg tidak dapat diakses pengguna.

2. Batasan medan tampilan, penentuan panjang yang tetap atau berubah, menggunakan format bebas atau tertentu.

3. Isi medan, petunjuk pengisian tampilan.

4. Medan opsional, dinyatakan secara tekstual atau menggunakan aturan tertentu, seperti penggunaan warna berintensitas rendah, warna tampilan yang berbeda, danlain-lain.

5. Default, tentukan tempatnya, apakah pada bagian yang tidak dapat diaksespengguna ataukah pada bagian pemasukan data.

6. Bantuan, bantuan (help) cara pengisian borang.

7. Medan penghentian, masukan data dapat diakhiri dengan menekan tombol Enteratau Return atau mengisi karakter terakhir dengan karakter tertentu atau dengancara berpindah ke medan lain.

8. Navigasi, menggunakan tombol Tab untuk urutan yang tetap, atau dapat pula digerakkan secara bebas menggunakan mouse.

9. Pembetulan kesalahan, menggunakan tombol BackSpace dengan menindihi(overwrite) isian lama, dengan jalan membersihkan dan mengisi kembali medantersebut, dan lain-lain.

10. Penyelesaian. memberitahu pengguna bahwa seluruh proses pengisian telah selesai.

Borang Isian (Form Fill-In)

Pengguna melihat suatu tampilan medan yang berhubungan satu sama lainnya, kursor dipindahkan sepanjang medan-medan yang ada selanjutnya data diisikan pada medan yang dikehendaki

Keuntungan Kerugian

•Proses pemasukan datanya

relatif mudah

•Perlu sedikit pelatihan

•Beban memori rendah

•Strukturnya jelas

•Tersedia berbagai piranti bantu

desain tampilan

•Perancangannya mudah

•Menghabiskan ruang layar

•Tidak cocok untuk pemilihan

instruksi

•Memerlukan pengontrol kursor

•Mekanisme navigasi tidak jelas

•Sering kali cukup lambat

Contoh Borang Isian

Dialog berbasis ikon adalah ragam dialog yang banyak menggunakan simbol-simbol dan tanda-tanda untuk menunjukkan suatu aktifitas tertentu

Dialog Berbasis Icon

Sistem penjendelaan adalah sistem antarmuka yang memungkinkanpengguna untuk menampilkan berbagai informasi ke dalam bagian-bagianlayar yang tidak saling mempengaruhi

Jenis-jenis jendela

1. Jendela TTY : jendela paling sederhana.Contohnya adalah ketika anda berada pada dot prompt.

2. Time-Multiplexed Windows : jendela yang dapat digeser (scrollable windows),dan frame-at-a-time windows.

Contoh : text editor atau menu tarik

3. Space-Multiplexed Windows : lebar layar dibagi menjadi beberapa jendeladengan ukuran yang bervariasi.

Contoh : Microsoft Windows XP

4. Jendela non Homogen : jenis jendela yang tidak dapat dikelompokkan dalamjendela-jendela diatas.

Contoh : ikon dan zooming window

Sistem Window

Manipulasi Langsung Manipulasi langsung merupakan Ragam dialog yang menyajikan langsung suatu

aktifitas oleh sistem kepada pengguna, sehingga aktifitas itu akan dikerjakan olehsistem komputer. Ketika pengguna memberikan langsung instruksi lewat manipulasilangsung dari semacam kenyataan maya (virtual reality) yang terpampang lewattampilan yang muncul di layar

Keuntungan Kerugian

•Mempunyai analogi yang jelas

dengan suatu pekerjaan nyata

•Mengurangi waktu pembelajaran

•Memberikan tantangan untuk

eksplorasi pekerjaan yang nyata

•Penampilan visual yang bagus

•Mudah dioperasikan

•Tersedianya berbagai perangkat

bantu untuk merancang ragam

dialog manipulasi langsung

•Memerlukan program yang rumit

dan berukuran besar

•Memerlukan tampilan grafis

berkinerja tinggi

•Memerlukan peranti masukan

seperti mouse, trackball, dll

•Memerlukan perancangan

tampilan dengan kualifikasi

tertentu

Contoh Manipulasi Langsung

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 ikonakan muncul pesan yang menunjukkan arti ikon tsb.

Dialog Berbasis Interaksi Grafik

Selesai

Ada pertanyaan ???