- 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
evaluation system
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
evaluation system
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
evaluation system
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
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
gaya
… computer and user
interaksi yang berbeda
Gaya interaksi berhubungan erat dengan user interface.
User Interface Command Line Interface
User Interface Form Fill - SpreadSheets
User Interface WIMP
User Interface GUI
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
Menu
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
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
multimodality
multimodality
beberapa sifat yang mempengaruhi daya guna
Learnability :
Flexibility :
Kemudahan yang memungkinkan user baru berinteraksi secara efektif dan dapat mencapai performance yang maksimal.
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 1. Dialog yang Sederhana dan Alami Pendekatan yang harus digunakan : 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 : 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) Kenali
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
