- INTERACTION & PARADIGM -

- INTERACTION & PARADIGM - Fakultas Ilmu Komputer - 2013

Outline Interaction Ergonomi

SIKLUS INTERAKSI (execution/evaluation loop) goal execution evaluation system Donald Norman s model (7 komponen) : Menetapkan tujuan Merumuskan keinginan Menetapkan rangkaian aksi Melaksanakan aksi Melihat kondisi sistem Menginterprestasikan kondisi sistem Mengevaluasi kondisi sistem sehubungan dengan goal dan intention Model Norman berkonsentrasi pada pandangan pengguna antarmuka

SIKLUS INTERAKSI (execution/evaluation loop) goal execution system evaluation Menetapkan tujuan Merumuskan keinginan menetapkan rangkaian aksi melaksanakan aksi melihat kondisi sistem menginterprestasikan kondisi system mengevaluasi kondisi sistem sehubungan dengan goal dan intention

SIKLUS INTERAKSI (execution/evaluation loop) goal execution system evaluation menetapkan tujuan Merumuskan keinginan menetapkan rangkaian aksi melaksanakan aksi melihat kondisi sistem menginterprestasikan kondisi system mengevaluasi kondisi sistem sehubungan dengan goal dan intention

Ergonomi Mempelajari karakteristik fisik dari interaksi Juga disebut dengan faktor-faktor manusia Melihat sesuatu sebagai : Pengaturan dari berbagai kontrol dan display Lingkungan yang melingkupinya Masalah kesehatan Penggunaan warna

Ergonomi pengaturan kontrol dan tampilan

pengaturan kontrol dan tampilan

Ergonomi lingkungan sekitar

Ergonomi

Ergonomi masalah kesehatan

Ergonomi

Contoh-contoh Ergonomi pengaturan kontrol dan tampilan contoh : kontrol dikelompokkan berdasarkan fungsi atau frekuensi penggunaan, atau secara berurutan lingkungan sekitar Contoh : pengaturan tempat duduk beradaptasi untuk mengatasi semua ukuran pengguna masalah kesehatan Contoh : posisi fisik, kondisi lingkungan (suhu, kelembaban), pencahayaan, kebisingan penggunaan warna Contoh : penggunaan merah untuk peringatan, hijau untuk oke, kesadaran kebutaan warna, dll

PRINSIP ERGONOMI Prinsip Fisikal : Menjadikan segala sesuatu mudah dijangkau Bekerja dengan tinggi yang sesuai/cocok Bekerja dengan postur yang sesuai Mengurangi pengeluaran tenaga yang berlebihan Meminimalkan kepenatan/keletihan Mengurangi pengulangan yang berlebihan Memberikan jarak ruang dan akses Meminimalkan contact stress

PRINSIP ERGONOMI Prinsip Fisikal (lnjt): Memberikan mobilisasi dan mengubah postur/posisi Menahan getaran Menciptakan lingkungan yang menyenangkan : Pencahayaan yang tepat : Menghindarkan user dari cahaya langsung atau pantulannya Memperoleh keseimbangan antara kecerahan (brightness) layar tampilan dan kecerahan yang ada di depan user. Menghindari cahaya langsung atau pantulan yang langsung mengenai layar tampilan. Cahaya langsung (berasal dari matahari) Cahaya tidak langsung (pantulan dari tembok, lantai, meja, dsb) Temperatur yang tepat

GAYA INTERAKSI dialogue computer and user gaya interaksi yang berbeda Gaya interaksi berhubungan erat dengan user interface.

User Interface Command Line Interface

User Interface Form Fill - SpreadSheets

User Interface W I M P

User Interface G U I

GAYA INTERAKSI : command line interface menus natural language question/answer and query dialogue form-fills and spreadsheets WIMP point and click three dimensional interfaces

Command Line Interface Cara untuk mengekspresikan intruksi ke komputer secara langsung Tombol fungsi, karakter tunggal, singkatan pendek, semua kata, atau kombinasi Cocok untuk tugas yang berulang Lebih baik bagi pengguna ahli daripada pemula Menawarkan akses langsung ke fungsi sistem Nama perintah/ singkatan harus bermakna Contoh : Sistem Unix

Menu Kumpulan pilihan yang ditampilkan pada layar Pilihan yang terlihat Kurang diingat mudah digunakan Mengandalkan pengenalan sehingga bermakna Seleksi oleh : Angka, huruf, tombol panah, mouse Kombinasi (mouse ditambah tombol shortcut key/ access key) Pilihan sering dikelompokkan secara hierarkis Pengelompokan yg masuk akal & cepat dimengert

Natural language Familiar dengan user Pengenalan ucapan atau bahasa alami yg diketikkan Masalah : Samar - ambigu - sulit dilakukan dengan baik Solusi Pahami subsetnya (bagian dari natural lang. yg digunakan) Pilih kata- kata kunci

Query interface User dituntun secara interaksi melalui serangkaian pertanyaan Cocok untuk user pemula tapi fungsi terbatas Sering digunakan dalam information system Query language Digunakan untuk mengambil informasi dari database Perlu pemahaman struktur database & sintaks, jadi perlu keahlian

Form Fills Terutama untuk entri data atau data retrieval Tampilan layar seperti formulir Data dimasukkan ke dalam tempat yg relevan Memerlukan : Desain yg baik Jelas fasilitas koreksi

spreadsheets Variasi bentuk pegisian yang canggih Grid sel berisi nilai atau formula Rumus dapat melibatkan nilai- nilai dari sel- lain lain Ex. Jumlah semua sel di kolom ini User dapat memasukkan data dan mengubah spreadsheets dengan tetap menjaga konsistensi VisiCalc Lotus 1-2-3 Ms.Excel

WIMP Interface Windows Icons Menus Pointers Style standar untuk sebagian besar sistem komputer interaktif, terutama PC dan mesin desktop

WIMP Interface Windows Daerah pada layar yang berlaku seperti halnya mereka itu merupakan terminal yang mandiri a. Dapat mengandung teks atau grafik b. Dapat digerakan atau diubah ukurannya c. Dapat saling menumpuk (overlapping) dan mengaburkan satu dan lainnya atau dapat ditempatkan satu dan sebelahnya seperti penempatan ubin (tiled) d. Scrollbars (balok penggulung) mengijinkan pengguna untuk menggerakkan isi dari window ke atas dan ke bawah atau dari satu sisi ke sisi lainnya e. Title bars (balok nama) menampilkan nama window

WIMP Interface Icons Gambar atau citra kecil Digunakan untuk merepresentasikan beberapa objek dalam antarmuka, seringkali sebuah pada window Windows dapat ditutup/dialihkan bentuknya ke representasi kecil (di-ikon-kan) mengijinkan berbagai window untuk bisa di akses Terdaoat berbagai macam dan variasi dari ikon gaya kelas tinggi ataupun representasi realistik

WIMP Interface Menus Tawaran di layar mengenai pemilihan operasi atau layanan yang dapat dilakukan sistem Membutuhkan opsi yang dipilih dengan pointer

WIMP Interface Pointers Komponen yang penting, karena gaya WIMP bergantung pada penunjukkan (pointing) dan pemilihan sesuatu seperti misalnya ikon dan item-item menu Biasanya menggunakan mouse untuk melakukan penunjukkan ini Joystick, trackball, tombol kursor atau pun keyboard shortcut juga menggunakannya

Interface points and Clicks Digunakan pada : Multimedia Web browser Hypertext Klik sesuatu! Icon, teks link atau lokasi pada peta Meminimalisir mengetik

Paradigma & Prinsip Interaksi Bagaimana sistem interaksi dibangun supaya mempunyai daya guna yg tinggi? Paradigma Sistem interaksi yg berhasil pada umumnya diyakini akan meningkatkan daya guna dari sistem Bagaimana mengukur atau mendemonstrasikan daya guna suatu sistem interaksi? Prinsip Interaksi efektif dari berbagai aspek pengetahuan seperti psikologi, komputasi, dan sosiologi yg mengarahkan pada peningkatan desain dan evolusi produk yg pada akhirnya akan meningkatkan daya guna sistem tsb

Paradigma Interaksi Termasuk pergeseran paradigma : Batch processing Timesharing Video display unit Personal computing Windows system dan WIMP Multimodality Direct maipulation WWW/ hypertext Computer-supported cooperation Ubiquitous computing

paradigma awal Batch processing Data processing which: Collect Manage Grouping - Process Impersonal computing

contoh pergeseran paradigma Networking @#$%!??? Community computing

contoh pergeseran paradigma Graphical displays C P filename dot star or was it R M? Move this file here, and copy this to there. % foo.bar ABORT dumby!!! Direct manipulation

contoh pergeseran paradigma World Wide Web Global information

contoh pergeseran paradigma Ubiquitous Computing Sebuah simbiosis dunia fisik dan elektronik dalam pelayanan kegiatan seharihari.

Ubiquitas Computing

Ubiquitas Computing Sebagai contoh: sebuah lingkungan Ubiquitous Computing yang menghubungkan kontrol penerangan (lampu) dan pemanas ruangan dengan alat yang dipasang pada pakaian kita sehingga kondisi penerangan dan suhu ruangan dapat dimodulasi secara terus-menerus dan tak kentara.

Video Display Units Dapat memvisualisasikan dan memanipulasi informasi yang sama dalam representasi yang berbeda Mampu memvisualisasikan abstraksi data

video display units (VDU)

Hypertext Hypertext Penyimpanan informasi dalam format non-linear yang memungkinkan akses atau browsing secara non-linear atau random.

hypertext

Multimodality Multimodality penekanan pada penggunaan simultan saluran ganda untuk input dan output sistem multi-modal interaktif adalah sistem yang bergantung pada penggunaan beberapa saluran komunikasi pada manusia (mata, kulit, telinga)

multimodality

beberapa sifat yang mempengaruhi daya guna Learnability : Kemudahan yang memungkinkan user baru berinteraksi secara efektif dan dapat mencapai performance yang maksimal. Flexibility : Menyediakan banyak cara bagi user dan sistem untuk bertukar informasi Robustness : Tingkat dukungan yang diberikan agar user dapat menentukan keberhasilan ataupun tujuan (goal) yang diinginkan.

INTERAKSI MANUSIA & KOMPUTER - DAYA GUNA - Erika Devi Udayanti,S.Kom, M.CS Fakultas Ilmu Komputer - 2012

Daya Guna adalah tingkat produk dapat digunakan yang ditetapkan oleh user untuk mencapai tujuan secara efektif dan tingkat kepuasan dalam menggunakannya (ISO, 1998).

Faktor Daya Guna Beberapa faktor yang menentukan bahwa suatu sistem usable : Efektifitas & Efisiensi Learnabilitas Memorabilitas Kesalahan Kepuasan subjektif

Daya guna HEURISTIK 1. Dialog yang Sederhana dan Alami User interface harus seringkas mungkin dan bersifat natural. Setiap dialog seharusnya menghindari perintah-perintah yang tidak perlu dan tidak ada hubungannya dengan interface. Setiap ciri atau elemen baru yang ditambahkan berarti satu masalah baru yang harus dipelajari oleh pengguna.

Daya guna HEURISTIK Pendekatan yang harus digunakan : 1. Dialog yang Sederhana dan Alami Hanya menampilkan perintah yang diperlukan Memperhatikan bentuk elemen grafik (user interface modern) Penggunaan warna yang baik dan tidak berlebihan (sbg kategori, pembeda, penonjolan objek tertentu) Desain layar dalam bentuk yang lebih ringkas Dialog yang natural

Daya guna HEURISTIK : 2. Berbicara dengan Bahasa Pengguna Dialog seharusnya menggunakan bahasa yang dipahami oleh user. Perintah-perintah yang berorientasi mesin mestinya tidak digunakan sama sekali. Selain itu frasa-frasa yang digunakan harus mudah dipahami kebanyakan user, bukan hanya segelintir saja. Penggunaan singkatan dan bahasa yang tidak jelas juga harus dihindari karena dapat disalah tafsirkan sehingga membuat user keliru Penggunaan metafora merupakan salah satu pendekatan yang boleh digunakan. Objek yang tampil di layar, jenis perintah, jenis interaksi pengguna, cara sistem memberikan feedback dan sebagainya adalah berdasarkan frasa yang biasa digunakan, misalnya desktop, icon, menu, cut, copy and paste.

Daya guna HEURISTIK : Mengurangi Beban Ingatan Pengguna User seharusnya tidak dibebani untuk mengingat atau menghapal pada saat berinteraksi dengan sistem. Sebagai contoh penggunaan menu dapat mengurangi beban user dibandingkan penggunaan baris perintah. Aplikasi yang menggunakan menu lebih memuaskan dan fleksibel. Dalam kasus-kasus tertentu format perintah perlu disampaikan dengan jelas, misalnya perintah DOS untuk menghapus dengan del dan membuat duplikasi dengan perintah copy

Daya guna HEURISTIK : Konsistensi Ciri-ciri konsisten adalah dapat menghindarkan user dari rasa was-was atau ragu-ragu di saat menggunakan suatu perintah atau fungsi. Disamping itu juga dapat mempercepat interaksi, misalnya perintah cetak dari windows dengan File > Print.

Daya guna HEURISTIK : Sistem Timbal Balik Sistem seharusnya memberitahu pengguna segala aktifitas yang sedang berlaku atau status dari sistem (menunggu input dari pengguna, memproses input, menampilkan output, dan sebagainya).

Daya guna HEURISTIK : 6. Jalan Keluar yang Jelas Sistem seharusnya dapat memberikan penjelasan tentang kondisi dan solusi untuk menghindari user terperangkap dalam aktivitas/situasi, dan tampilan-tampilan yang tidak diinginkan, pada saat berinteraksi dengan sistem.

Daya guna HEURISTIK : Example : Apabila user melakukan kesalahan dalam memilih perintah maka ia dapat keluar dari kesalahan tanpa ada masalah, misalnya perintah Undo.

Daya guna HEURISTIK : Jalan Pintas Demi kemudahan dan kecepatan interaksi di dalam menggunakan suatu sistem maka sudah seharusnya bila tersedia shortcut. Berguna untuk membantu user agar dapat menggunakan berbagai fungsi dengan mudah.

Daya guna HEURISTIK : 8. Pesan Kesalahan yang Baik (error message) Menyediakan mekanisme pemberitahuan kesalahan dan menunjukkan situasi bahwa user berada dalam kondisi bermasalah serta membantu user untuk lebih memahami sistem. Terdapat empat peraturan yang harus diikuti dalam penggunaan pesan kesalahan, yaitu : Pesan kesalahan yang digunakan harus jelas dan mudah dipahami, disampaikan dalam bentuk teks, frasa atau konsep yang mudah dipahami Pesan yang disampaikan bersifat khusus Pesan kesalahan yang disampaikan sebaiknya menyediakan cadangan penyelesaian atas kesalahan Penyampaian kesalahan dilakukan secara sopan.

contoh Error Message

Daya guna HEURISTIK : Bantuan Merupakan kemudahan yang diberikan dalam kebanyakan sistem, menjelaskan cara menggunakan sistem, ciriciri khusus sistem, dan membolehkan user untuk mengendalikan sistem dengan lebih baik.

TEKNIK DAYA GUNA SIKLUS HIDUP Siklus hidup suatu daya guna memiliki tujuh elemen, antara lain : Kenali Pengguna (Know the user) Daya guna Benchmarking Desain Interaksi Berorientasi Tujuan (Goal-Oriented Interaction Design) Interactive Design Prototyping Daya guna evaluasi (Inspection and Testing) Studi Lanjutan (Follow-Up Studies)

Know the user

Benchmarking

Goal-Oriented Interaction Design Computer vs Human Programmer vs User

Proses Desain Interaksi : Membuat Persona Persona adalah suatu karakteristik yang diamati oleh orang lain atau disebut juga dengan prototypical user, seperti : Imajinasi khusus, contohnya adalah user dengan tipe tertentu Tidak real tetapi hipotesis Digunakan sebagai rule play melalui desain interface

Proses Desain Interaksi : Brainstorming seat group ideas write & pain collect decision Brainstorming dengan suatu tim, misal ahli mesin, desainer grafik, penulis dan sebagainya Menggunakan kertas hasil desain yang banyak dan menempelkannya di dinding Bersifat masa bodoh Berkhayal untuk membangun suatu yang sulit dan berpikir jauh ke depan Menggambar, coret-coret dengan pulpen berwarna Semua ide yang berhasil dikumpulkan kemudian diorganisasikan dan dipilih salah satu yang terbaik dan diimplementasikan

Proses Desain Interaksi : Brainstorming Brainstorming

Brainstorming

Proses Desain Interaksi : Brainstorming Aturan waktu melakukan brainstorming : Semua ide dikumpulkan dari semua orang dalam tim dan tidak boleh dikritik oleh orang lain Semua ide yang masuk, baik yang masuk akal maupun tidak harus diterima. Semakin banyak ide yang masuk semakin baik Tidak boleh ada diskusi selama brainstorming berjalan karena diskusi akan dilakukan setelah brainstorming selesai Jangan mengkritik, menghakimi atau mentertawakan ide yang dikemukakan peserta Tulis semua ide pada papan tulis sehingga tim bisa melihat Atur waktu untuk aktivitas brainstorming misalnya 30 menit atau lebih

Daya guna Benchmarking Produk-produk kompetitif atau produk yang telah ada perlu dipelajari untuk memperbaiki sistem yang sedang dibangun. Produk tersebut bisa dijadikan prototipe terbaik untuk membangun suatu produk. Analisis perbandingan di antara beberapa produk bisa menghasilkan keputusan yang lebih baik, bahkan bisa menghasilkan panduan baru dan memberi cadangan ide yang lebih baik terhadap rekayasa bentuk.

Proses Desain Interaksi Agar proses desain interaksi dapat mencapai tujuan maka harus dilakukan hal-hal berikut : a. Wawancara user requirement elicitation b. Membuat persona c. Menjelaskan tujuan - goal d. Membuat skenario yang jelas e. Solusi desain

Proses Desain Interaksi : Membuat Persona Persona adalah suatu karakteristik yang diamati oleh orang lain atau disebut juga dengan prototypical user, seperti : Imajinasi khusus, contohnya adalah user dengan tipe tertentu Tidak real tetapi hipotesis Digunakan sebagai rule play melalui desain interface Contoh persona adalah perusahaan mobil yang mendesain produknya.

Proses Desain Interaksi : Membuat Persona Kriteria pemrogram yang memiliki persona yang baik adalah : Membuat program untuk rata-rata user, tidak hanya end user dengan tujuan agar user baru selalu mempelajarinya. Sifat user selalu elastis yang didefinisikan sebagai penampung ide-ide si pemrogram Pemrogram juga harus memperhatikan semua latar belakang user yang akan menggunakan program yang akan dibuat karena setiap individu memiliki persona yang berbeda.

Proses Desain Interaksi : Kekuatan Persona Sebagai Suatu Alat Desain Masalah yang dapat timbul selama pengembangan suatu produk : User bersifat elastis, meski hari ini user telah puas dengan produk yang digunakan belum tentu esok hari juga merasa puas. Oleh sebab itu masih ada tahap selanjutnya yaitu pengembangan produk yang telah jadi Percaya diri, karena jika ragu-ragu untuk meluncurkan produknya maka produk tersebut tidak akan pernah ada di pasaran

Proses Desain Interaksi : Brainstorming Urutan dalam brainstorming : Salah satu tim harus me-review topik yang digunakan dengan pertanyaan Why, How atau What Setiap anggota tim harus memikirkan jawaban atas pertanyaan untuk beberapa saat dan mencatatnya di kertas Setiap orang membacakan idenya atau semua ide ditulis di papan tulis