Interaksi Manusia dan Komputer [Kode Kelas]

(1)

Interaksi Manusia dan Komputer

[Kode Kelas]

[ Chapter 5]

Ragam dan Disain Dialog

Dedy Alamsyah, S.Kom, M.Kom

(2)

Pengertian dialog:



Definisi Umum, dialog adalah proses komunikasi antara 2 atau

lebih 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 pengorganisasian

berbagai teknik dialog interaktif yang memungkinkan terjadinya

komunikasi antara manusia dengan komputer.



Tujuan perancangan antarmuka

dengan berbagai dialog pada

dasarnya adalah untuk mendapatkan satu kriteria yang sangat

penting dalam pengoperasian sebuah program aplikasi, yakni

aspek ramah dengan pengguna (user friendly)

(3)

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 menguasai

sistem atau inisiator, bukan responden)

8. Mengurangi beban ingatan jangka pendek(rule of thumb:

manusia mengingat 7 ± 2 satuan informasi)

Delapan “Golden Rules” Perancangan

Dialog

(4)



Informasi disusun dalam formulir-formulir, nama-nama dan

susunan 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 akan

menyebabkan user harus mempelajari kembali operasi-operasi

yang dilakukan



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

(5)



User yang bekerja dengan satu aplikasi dalam seluruh

waktunya akan menginginkan penghematan waktu

dengan 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 untuk

tugas yang diberikan



Designer dapat menyediakan fasilitas makro bagi user

untuk membuat short cuts bagi dirinya sendiri



Dengan short cut membuat user lebih produktif

(6)



Setiap aksi dari user harus ada feedback dari komputer

untuk 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 ada

informasi

(7)



Harus ada informasi yang jelas mengenai keterangan

sukses atau selesai dari suatu proses yang dilakukan

4. Merancang dialog untuk menghasilkan

keadaan akhir (sukses, selesai)

(8)



Error dapat menjadi masalah yang serius, sehingga

designer 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 mengoreksi

error 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)

(9)



User memerlukan bahwa ketika mereka sudah memilih

opsi dan membuat aksi, aktivitas itu dapat dibatalkan

atau kembali ke kondisi sebelumnya dengan mudah



Mengijinkan user untuk belajar tentang sistem dengan

melakukan eksplorasi



Jika mereka melakukan kesalahan, mereka dapat

membatalkan aksinya



Jika user akan menghapus sesuatu yang substansial (mis:

sebuah file), sistem harus meminta konformasi terhadap

aksi tersebut

(10)



User yang berpengalaman menginginkan bahwa mereka

yang mengendalikan sistem dan sistem merespon

mereka. Segala sesuatu yang mereka tidak tahu rasanya

ingin segera mendapat jawabannya, oleh sebab itu

fasilitas “help” penting untuk menolongnya agar segera

mendapatkan solusi



User yang tidak berpengalaman ketika mengalami

kesulitan dalam mengeksplorasi sistem juga perlu

mendapat pertolongan yang mudah dan sederhana,

fasilitas “help” yang lengkap, mudah dioperasikan akan

menolong mereka mengatasi kesulitannya

(11)



Orang mempunyai keterbatasan pada short-term

memory-nya



Orang hanya mengingat sekitar 7 chunk informasi pada

satu saat

(12)



Inisiatif

,

Inisiatif dapat menentukan tipe-tipe pengguna yang dituju oleh

sistem yang dibangun

.

Ada dua inisiatif yaitu :

- inisiatif oleh komputer, pengguna memberikan tanggapan atas prompt yg

diberikan komputer

-

inisiatif oleh pengguna, pengguna diharapkan memahami sekumpulan

perintah dgn sintaks tertentu



Keluwesan

Sistem komputer harus menyesuaikan diri dengan keadaan pengguna,

misalnya member kesempatan user untuk costumizing sistem.



Kompleksitas

Sistem yang dibuat sesuai dengan yang diperlukan

(13)



Kekuatan

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



Beban informasi

Penyajian informasi harus disesuaikan dengan aras pengguna.



Konsistensi

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

(14)

 Umpan balik

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

 Observabilitas

Sistem berfungsi secara benar dan nampak sederhana meskipun sebenarnya pengolahan internalnya sangat rumit.

 Kontrolabilitas

Sistem selalu berada di bawah kontrol pengguna

 Efisiensi

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

 Keseimbangan

Dalam merancang sistem hendaknya mengetahui kemampuan antara manusia dan komputer.

(15)

Macam Dialog

1. Command Language

2. Sistem Menu

3. Borang Isian (Form Fill in)

4. Sistem Windows

5. Manipulasi Langsung

6. Dialog Berbasis Icon

(16)

Command Language

 Bahasa perintah biasanya diperlukan dalam sistem operasi DOS dan

UNIX. User menulis suatu perintah dan menunggu respon dari sistem. Jika hasilnya benar, perintah berikutnya diterbitkan, jika salah tindakan selanjutnya 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

(17)

Command Language (2)

Beberapa pedoman:



Buatlah model eksplisit dari obyek atau tindakan



Pilihlah nama-nama yang penuh arti, spesifik

dan 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 suatu

(18)

Bahasa Alami



Dialog berbasis bahasa alami merupakan dialog yang

menggunakan bahasa yang mudah dimengerti oleh

manusia. Contoh : cetak data mahasiswa yang memiliki

ipk > 3.0.



Kemudian bahasa tersebut diterjemahkan ke dalam

instruksi yang ekuivalen yang bisa di mengerti komputer,

seperti turbo Pascal

(19)

Keuntungan vs Kerugian Bahasa Alami

•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

(20)

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

(21)

1.Menu-menu Tunggal

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

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

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

 Multiple selection menus atau check boxes : tampilan menu dengan itemnya diseleksi dapat lebih dari satu.

 Pop-up menus atau context menus : tampilan menu yang diaktifkan dengan mengklik tombol kanan 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 dengan

menggeser penunjuknya.

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

(22)

(23)

2. Linear Sequences dan Multiple Menus



Menu yang memandu pengguna untuk proses yang

(24)

3. Tree-structured Menus



Menu ini terdiri dari : Tree View Menus, List View Menus, Tree structured

(25)



Pengategorian, pilihan dari tipe yang serupa ditempatkan

bersama



Urutan yang lazim, contoh : nama hari dalam seminggu



Jumlah pemakaian, pilihan yang sering digunakan

terletak dekat denganbagian atas dari menu.



Pastikan tidak ada item menu yang duplikasi atau

overlapping.

(26)

Keuntungan vs Kerugian Sistem Menu

•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

(27)

Borang Isian (Form Fill in)



Dialog berbasis pengisian borang (form filling dialogue)

merupakan suatu penerapan langsung dari aktifitas pengisian

borang dalam kehidupan sehari- hari ke dalam sistem

computer



Kualitas antarmuka berbasis pengisian boring tergantung pada

tiga aspek yaitu:

1. Tampilan pada layar monitor yang mencerminkan struktur data

masukan yang diperlukan oleh sistem.

2. Kejelasan perancangan dan penyajiannya secara visual pada layar

monitor.

3. Derajat kebenaran dan kehandalan penerimaan data masukan oleh

program lewat berbagai fasilitas pemasukan data yang ada di

(28)

Hal-hal yang perlu diperhatikan dalam

perancangan tampilan borang

1. 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, dan lain-lain.

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

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

7. Medan penghentian, masukan data dapat diakhiri dengan menekan tombol Enter atau Return atau mengisi karakter terakhir dengan karakter tertentu atau dengan cara 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 medan tersebut, dan lain-lain.

(29)

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-medan yang dikehendaki

•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

(30)

(31)

 Dialog berbasis ikon adalah ragam dialog yang banyak menggunakan

simbol-simbol dan tanda-tanda untuk menunjukkan suatu aktifitas tertentu

(32)



Sistem penjendelaan adalah sistem antarmuka yang memungkinkan

pengguna untuk menampilkan berbagai informasi ke dalam bagian-bagian

layar 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 jendela

dengan ukuran yang bervariasi.

Contoh : Microsoft Windows XP

4. Jendela non Homogen : jenis jendela yang tidak dapat dikelompokkan dalam

jendela-jendela diatas.

Contoh : ikon dan zooming window

(33)

Manipulasi Langsung

 Manipulasi langsung merupakan Ragam dialog yang menyajikan langsung suatu

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

•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