Interaksi Manusia dan Komputer [Kode Kelas]

Transkripsi

1 Interaksi Manusia dan Komputer [Kode Kelas] [ Chapter 5] Ragam dan Disain Dialog Dedy Alamsyah, S.Kom, M.Kom [NIDN : ]

2 Dialog Manusia dan Komputer 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 Delapan Golden Rules Perancangan Dialog 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)

4 1. Konsisten 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 2. Shortcut (Jalan Pintas) 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 3. Informatif 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 4. Merancang dialog untuk menghasilkan keadaan akhir (sukses, selesai) Harus ada informasi yang jelas mengenai keterangan sukses atau selesai dari suatu proses yang dilakukan

8 5. Penanganan Error (Kesalahan yang jelas) 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.

9 6. Ijinkan Pembatalan Aksi 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 7. Fasilitas Bantuan (Help) 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 8. Kurangi Beban Menghafal Orang mempunyai keterbatasan pada short-term memory-nya Orang hanya mengingat sekitar 7 chunk informasi pada satu saat

12 Sifat Penting Ragam Dialog 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 Sifat Penting Ragam Dialog (2) 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 Sifat Penting Ragam Dialog (3) 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 7. Dialog Berbasis Grafis

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 Luwes Inisiatif pada pengguna Nyaman dalam penciptaannya Memberdayakan user Cepat Efisien Akurat Kerugian 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 tugas

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 Keuntungan Tidak memerlukan sintaksis khusus Luwes dan powerful Alamiah Menggunakan inisiatif campuran Kerugian Mempunyai dualisme Bertele-tele Opaque (tidak jelas) Perancangan perangkat lunak yang rumit Tidak efisien

20 Sistem Menu 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. Main menu, iconic menus, toolbars atau palletes : menu yang digabung dengan icon-icon

22

23 2. Linear Sequences dan Multiple Menus Menu yang memandu pengguna untuk proses yang kompleks, contoh : clue cards atau Wizards

24 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

25 Strategi Pengorganisasian Menu 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 Keuntungan Proses belajar singkat Mengurangi pengetikan Kesalahan mudah diatasi Struktur terdefinisi dengan baik Beban memori rendah Perancangannya mudah Kerugian 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 dalam borang tersebut

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. 10. Penyelesaian. memberitahu pengguna bahwa seluruh proses pengisian telah selesai.

29 Borang Isian (Form Fill-In) Pengguna melihat suatu tampilan medan yang berhubungan satu sama lainnya, kursor dipindahkan sepanjang medanmedan yang ada selanjutnya data diisikan pada medan yang dikehendaki Keuntungan Proses pemasukan datanya relatif mudah Perlu sedikit pelatihan Beban memori rendah Strukturnya jelas Tersedia berbagai piranti bantu desain tampilan Perancangannya mudah Kerugian Menghabiskan ruang layar Tidak cocok untuk pemilihan instruksi Memerlukan pengontrol kursor Mekanisme navigasi tidak jelas Sering kali cukup lambat

30 Contoh Borang Isian

31 Dialog Berbasis Icon Dialog berbasis ikon adalah ragam dialog yang banyak menggunakan simbolsimbol dan tanda-tanda untuk menunjukkan suatu aktifitas tertentu

32 Sistem Window 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 Keuntungan 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 Kerugian 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

34 Contoh Manipulasi Langsung

35 Dialog Berbasis Interaksi Grafik 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 ikon akan muncul pesan yang menunjukkan arti ikon tsb.

36 Selesai Ada pertanyaan???