Interaksi Manusia Komputer UTS 2010
• Interaksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI) adalah disiplin ilmu yang berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh manusia, serta studi fenomena-fenomena besar yang berhubungan dengannya. (Definisi oleh ACM SIGCHI)
• Fokus: perancangan dan evaluasi antarmuka pemakai (user interface).
• Antarmuka pemakai adalah bagian sistem komputer yang memungkinkan manusia berinteraksi dengan komputer.
Tujuan Rekayasa Sistem pada IMK
• Kehandalan: berfungsi seperti yang diinginkan.
• Ketersediaan: tersedia ketika hendak digunakan.
• Keamanan: terlindung dari akses yang tidak diinginkan.
• Integritas data: Terlindung dari kerusakan baik sengaja maupun tidak.
• Standardisasi: keseragaman sifat-sifat antarmuka pemakai pada aplikasi yang berbeda.
• Integrasi: keterpaduan antara paket aplikasi dan software tools.
• Konsistensi: keseragaman dalam suatu program aplikasi.
• Portabilitas: dimungkinkannya data dikonversi pada berbagai hardware dan software.
Teori-teori Tingkat Tinggi
• Explanatory theory: membantu dalam mengamati kelakuan, menggambarkan kegiatan, menghasilkan desain, membandingkan konsep tingkat tinggi beberapa perancangan, pelatihan.
• Predictive theory: memungkinkan desainer membandingkan waktu eksekusi atau tingkat kesalahan dalam desain yang diusulkan.
• Perceptual or cognitive subtasks theory: memperkirakan waktu perseptual atau kognitif: mencari item pada tampilan, perencanaan konversi huruf tebal menjadi miring.
• Motor-task performance times theory: memperkirakan waktu kinerja seperti penekanan tombol atau pergerakan mouse.
• Four-level approach (Foley dan van Dam):
• Top-down, membagi sistem interaktif menjadi tingkat:
• Konseptual: model mental pemakai tentang sistem interaktif.
• Semantik: arti yang disampaikan.
• Sintaktik: pembentukan satuan yang menyampaikan semantik.
• Leksikal: ketergantungan terhadap piranti dan mekanisme presisi.
• Sesuai dengan arsitektur software.
• Memungkinkan modularitas.
Delapan Aturan Emas Perancangan UI
• Berusaha untuk konsisten.
• Memungkinkan frequent users menggunakan shortcuts.
• Memberikan umpan balik yang informatif.
• Merancang dialog yang memberikan penutupan (keadaan akhir).
• Memberikan pencegahan kesalahan dan penanganan kesalahan yang sederhana.
• Memungkinkan pembalikan aksi yang mudah.
• Mendukung pusat kendali internal (internal locus of control).
• Mengurangi beban ingatan jangka pendek.
Organisasi Semantik Menu
– Scrolling & two-dimensional menus
– Alphasliders
– Embedded links
– Iconic menus, toolbars, or palettes
– Linear sequences & multiple menus
– Tree-structured menus
– Ketika kumpulan item berkembang dan menjadi sulit dipelihara dalam kendali intelektual, perancang dapat membentuk kategori item-item yang serupa, membentuk struktur tree.
– Contoh pengelompokan:
– Laki-laki, perempuan
– Hewan, sayuran, mineral
– Fonts, size, style, spacing
– Acyclic & cyclic menu networks
– Kadang-kadang lebih cocok daripada struktur tree.
– Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.
– Secara alami terdapat pada:
– Hubungan sosial.
– Jalur transportasi.
– Kutipan dalam jurnal ilmiah.
– Membutuhkan penelusuran balik.
Tata Letak Menu
– Judul
– Menu tunggal: Judul yang deskriptif.
– Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.
– Penamaan pilihan menu
– Gunakan peristilahan yang dikenal dan konsisten.
– Pastikan item dapat dibedakan dari pilihan lain.
– Gunakan pemilihan kata yang konsisten dan singkat.
– Tempatkan kata kunci di kiri.
– Tata letak dan desain grafis
– Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.
– Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.
Database sederhana
• Query database relasional dengan SQL
– Pemakai menulis query yang mencocokkan nilai atribut.
• SELECT NAMA, IPK FROM MAHASISWA
WHERE KOTA = ‘JAKARTA BARAT’
AND IPK > 3.9
ORDER BY NAMA
– Powerful tetapi membutuhkan pelatihan.
– Alternatif:
• Query-by-example
• Form-fillin queries
• Textual searches
• Natural-language queries
Pesan Kesalahan yang baik
– Pemilihan kata berpusat pemakai
• Minta maaf atas kesalahan.
• Jangan menyalahkan pemakai.
• Contoh:
Buruk: Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your manual for further information.
Baik: We’re sorry, but we were unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assitance.
– Format fisik yang sesuai.
• Gunakan kombinasi huruf besar dan kecil.
• Hindari tampilan hanya nomor kode kesalahan.
• Peringatan dengan suara berguna tapi dapat memalukan; pemakai harus dapat mengendalikannya.
• Antropomorfik: mempunyai sifat atau pribadi manusia.
• Contoh instruksi:
– Antropomorfik: Hi there, John! It’s nice to meet you, I see you’re ready now.
– Nonantropomorfik: Press the Enter key to begin session.
• Hal-hal yang perlu dipertimbangkan:
– Pemberian sifat cerdas, bebas, berkehen-dak bebas, dan berpengetahuan kepada komputer dapat menipu, membingungkan, dan menyesatkan pemakai.
– Penting untuk membedakan orang dengan komputer.
– Antarmuka antropomorfik dapat membuat ketegangan bagi beberapa orang.
• Sebaiknya perancang memfokuskan pada pemakai dan menghindari kata ganti.
– Buruk: I will begin the lesson when you press RETURN.
– Lebih baik: You can begin the lesson by pressing RETURN.
– Paling baik: To begin the lesson, press RETURN.
• Pedoman perancangan nonantropomorfik:
– Hindari menampilkan komputer sebagai manusia.
– Pilih tokoh yang sesuai dalam pengenalan atau sebagai pemandu.
– Hati-hati dalam merancang wajah manusia atau tokoh kartun dengan komputer.
– Tokoh kartun cocok digunakan di game atau software anak-anak.
– Rancang antarmuka yang dapat dimengerti, dapat diramalkan, dan dapat dikendalikan.
– Gunakan orientasi dan keadaan selesai dari sudut pandang pemakai.
– Jangan gunakan “I” ketika komputer menanggapi aksi pemakai.
– Gunakan “you” hanya untuk memandu pemakai dan menyebutkan fakta-fakta.
• Pedoman penggunaan warna:
– Gunakan warna secara konservatif.
– Batasi jumlah warna.
– Kenali kekuatan warna sebagai teknik pengkodean untuk mempercepat atau memperlambat tugas.
– Pastikan bahwa color coding mendukung tugas.
– Tampilkan color coding dengan usaha pemakai yang minimal.
– Tempatkan color coding di bawah kendali pemakai.
– Rancang untuk monokrom dulu.
– Gunakan warna untuk membantu pemformatan.
– Gunakan color coding yang konsisten.
– Perhatikan ekspektasi umum tentang kode warna.
– Gunakan perubahan warna untuk menunjukkan perubahan status.
– Gunakan warna pada tampilan grafis untuk kerapatan informasi yang lebih tinggi.
• Bahaya dalam penggunaan warna:
– Pemasangan warna dapat membuat masalah.
– Fidelitas warna dapat menurun pada hardware yang berbeda.
– Pencetakan atau konversi ke media lain dapat bermasalah.
Perancangan Layar
– Buat kolom data alfabetis rata kiri agar mudah ditelusuri.
– Pada tampilan banyak halaman, berikan label pada setiap halaman untuk menunjukkan hubungan dengan halaman lainnya.
– Awali setiap tampilan dengan judul atau header yang menggambarkan secara singkat isi atau tujuan tampilan; sisakan paling sedikit satu baris kosong antara judul dan isi tampilan.
– Untuk kode ukuran, simbol yang lebih besar tingginya paling sedikit 1.5 kali tinggi simbol berikut yang lebih kecil.
– Gunakan kode warna untuk aplikasi sehingga pemakai dapat membedakan dengan cepat berbagai kategori data, khususnya ketika data item terpencar pada tampilan.
11. sebutkan dan jelaskan visulisasi informasi dan contoh:
• Visualisasi adalah
– Metode penggunaan komputer untuk mentransformasi simbol menjadi geometrik.
– Memungkinkan peneliti mengamati simulasi dan komputasi.
– Memberikan cara untuk melihat yang tidak terlihat.
– Memperkaya proses penemuan ilmiah dan mengembangkan pemahaman yang lebih dalam dan tak diduga.
– Dalam berbagai bidang telah merevolusikan cara ilmuwan meneliti sains.
• Pepatah mengatakan “Sebuah gambar bernilai seribu kata”.
• Untuk beberapa tugas, presentasi visual — seperti peta atau foto — secara dramatis lebih mudah digunakan atau dipahami daripada deskripsi tekstual atau laporan yang diucapkan.
• Mantra pencarian informasi visual:
– Overview dulu,
– Zoom dan filter,
– Lalu details on demand.
Contoh :
– Temporal data
» Time line.
» Ada waktu awal dan akhir, boleh overlap.
» Tugas tambahan: menjadi kejadian sebelum, sesudah, dan pada periode tertentu.
» Mis.: Perspective Wall, Microsoft Project, Macromedia Flash, Lifeline.
• Multi-dimensional data
– Kebanyakan database relasional dan statistik.
– Mis.: DataSplash, Starfield.
• Tree data
– Koleksi item dengan setiap item terhubung dengan parent.
– Mis.: Windows Explorer, Treemaps
• Network data
– Data terhubung dengan sembarang jumlah item lain.
– Mis.: NetMap, WebMap, SeeNet, Butterfly, Visualisasi WWW lainnya.
4 main pattern (keuntungan kerugian)
query database
8 aturan emas
user (requerement, task, model, dan case)
usability (task, goes, n rest)
prototype
evaluasi cegah kesalahan
search
mantra pencaharian dan tugas informasi visualisasi
tipe data
bagian merancang user interface
kasus : model
1.menentukan bagian merancang user interface
2.komponen yang dipertimbangkan dalam mengembangkan user interface
3.desain interface dan prototype
4.empat evaluasi design dan visualisasi informasi.
use case, user requirement, user task, user model
• Interaksi Manusia dan Komputer (IMK) atau Human-Computer Interaction (HCI) adalah disiplin ilmu yang berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh manusia, serta studi fenomena-fenomena besar yang berhubungan dengannya. (Definisi oleh ACM SIGCHI)
• Fokus: perancangan dan evaluasi antarmuka pemakai (user interface).
• Antarmuka pemakai adalah bagian sistem komputer yang memungkinkan manusia berinteraksi dengan komputer.
Tujuan Rekayasa Sistem pada IMK
• Kehandalan: berfungsi seperti yang diinginkan.
• Ketersediaan: tersedia ketika hendak digunakan.
• Keamanan: terlindung dari akses yang tidak diinginkan.
• Integritas data: Terlindung dari kerusakan baik sengaja maupun tidak.
• Standardisasi: keseragaman sifat-sifat antarmuka pemakai pada aplikasi yang berbeda.
• Integrasi: keterpaduan antara paket aplikasi dan software tools.
• Konsistensi: keseragaman dalam suatu program aplikasi.
• Portabilitas: dimungkinkannya data dikonversi pada berbagai hardware dan software.
Teori-teori Tingkat Tinggi
• Explanatory theory: membantu dalam mengamati kelakuan, menggambarkan kegiatan, menghasilkan desain, membandingkan konsep tingkat tinggi beberapa perancangan, pelatihan.
• Predictive theory: memungkinkan desainer membandingkan waktu eksekusi atau tingkat kesalahan dalam desain yang diusulkan.
• Perceptual or cognitive subtasks theory: memperkirakan waktu perseptual atau kognitif: mencari item pada tampilan, perencanaan konversi huruf tebal menjadi miring.
• Motor-task performance times theory: memperkirakan waktu kinerja seperti penekanan tombol atau pergerakan mouse.
• Four-level approach (Foley dan van Dam):
• Top-down, membagi sistem interaktif menjadi tingkat:
• Konseptual: model mental pemakai tentang sistem interaktif.
• Semantik: arti yang disampaikan.
• Sintaktik: pembentukan satuan yang menyampaikan semantik.
• Leksikal: ketergantungan terhadap piranti dan mekanisme presisi.
• Sesuai dengan arsitektur software.
• Memungkinkan modularitas.
Delapan Aturan Emas Perancangan UI
• Berusaha untuk konsisten.
• Memungkinkan frequent users menggunakan shortcuts.
• Memberikan umpan balik yang informatif.
• Merancang dialog yang memberikan penutupan (keadaan akhir).
• Memberikan pencegahan kesalahan dan penanganan kesalahan yang sederhana.
• Memungkinkan pembalikan aksi yang mudah.
• Mendukung pusat kendali internal (internal locus of control).
• Mengurangi beban ingatan jangka pendek.
Organisasi Semantik Menu
– Scrolling & two-dimensional menus
– Alphasliders
– Embedded links
– Iconic menus, toolbars, or palettes
– Linear sequences & multiple menus
– Tree-structured menus
– Ketika kumpulan item berkembang dan menjadi sulit dipelihara dalam kendali intelektual, perancang dapat membentuk kategori item-item yang serupa, membentuk struktur tree.
– Contoh pengelompokan:
– Laki-laki, perempuan
– Hewan, sayuran, mineral
– Fonts, size, style, spacing
– Acyclic & cyclic menu networks
– Kadang-kadang lebih cocok daripada struktur tree.
– Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.
– Secara alami terdapat pada:
– Hubungan sosial.
– Jalur transportasi.
– Kutipan dalam jurnal ilmiah.
– Membutuhkan penelusuran balik.
Tata Letak Menu
– Judul
– Menu tunggal: Judul yang deskriptif.
– Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.
– Penamaan pilihan menu
– Gunakan peristilahan yang dikenal dan konsisten.
– Pastikan item dapat dibedakan dari pilihan lain.
– Gunakan pemilihan kata yang konsisten dan singkat.
– Tempatkan kata kunci di kiri.
– Tata letak dan desain grafis
– Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.
– Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.
Database sederhana
• Query database relasional dengan SQL
– Pemakai menulis query yang mencocokkan nilai atribut.
• SELECT NAMA, IPK FROM MAHASISWA
WHERE KOTA = ‘JAKARTA BARAT’
AND IPK > 3.9
ORDER BY NAMA
– Powerful tetapi membutuhkan pelatihan.
– Alternatif:
• Query-by-example
• Form-fillin queries
• Textual searches
• Natural-language queries
Pesan Kesalahan yang baik
– Pemilihan kata berpusat pemakai
• Minta maaf atas kesalahan.
• Jangan menyalahkan pemakai.
• Contoh:
Buruk: Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your manual for further information.
Baik: We’re sorry, but we were unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assitance.
– Format fisik yang sesuai.
• Gunakan kombinasi huruf besar dan kecil.
• Hindari tampilan hanya nomor kode kesalahan.
• Peringatan dengan suara berguna tapi dapat memalukan; pemakai harus dapat mengendalikannya.
• Antropomorfik: mempunyai sifat atau pribadi manusia.
• Contoh instruksi:
– Antropomorfik: Hi there, John! It’s nice to meet you, I see you’re ready now.
– Nonantropomorfik: Press the Enter key to begin session.
• Hal-hal yang perlu dipertimbangkan:
– Pemberian sifat cerdas, bebas, berkehen-dak bebas, dan berpengetahuan kepada komputer dapat menipu, membingungkan, dan menyesatkan pemakai.
– Penting untuk membedakan orang dengan komputer.
– Antarmuka antropomorfik dapat membuat ketegangan bagi beberapa orang.
• Sebaiknya perancang memfokuskan pada pemakai dan menghindari kata ganti.
– Buruk: I will begin the lesson when you press RETURN.
– Lebih baik: You can begin the lesson by pressing RETURN.
– Paling baik: To begin the lesson, press RETURN.
• Pedoman perancangan nonantropomorfik:
– Hindari menampilkan komputer sebagai manusia.
– Pilih tokoh yang sesuai dalam pengenalan atau sebagai pemandu.
– Hati-hati dalam merancang wajah manusia atau tokoh kartun dengan komputer.
– Tokoh kartun cocok digunakan di game atau software anak-anak.
– Rancang antarmuka yang dapat dimengerti, dapat diramalkan, dan dapat dikendalikan.
– Gunakan orientasi dan keadaan selesai dari sudut pandang pemakai.
– Jangan gunakan “I” ketika komputer menanggapi aksi pemakai.
– Gunakan “you” hanya untuk memandu pemakai dan menyebutkan fakta-fakta.
• Pedoman penggunaan warna:
– Gunakan warna secara konservatif.
– Batasi jumlah warna.
– Kenali kekuatan warna sebagai teknik pengkodean untuk mempercepat atau memperlambat tugas.
– Pastikan bahwa color coding mendukung tugas.
– Tampilkan color coding dengan usaha pemakai yang minimal.
– Tempatkan color coding di bawah kendali pemakai.
– Rancang untuk monokrom dulu.
– Gunakan warna untuk membantu pemformatan.
– Gunakan color coding yang konsisten.
– Perhatikan ekspektasi umum tentang kode warna.
– Gunakan perubahan warna untuk menunjukkan perubahan status.
– Gunakan warna pada tampilan grafis untuk kerapatan informasi yang lebih tinggi.
• Bahaya dalam penggunaan warna:
– Pemasangan warna dapat membuat masalah.
– Fidelitas warna dapat menurun pada hardware yang berbeda.
– Pencetakan atau konversi ke media lain dapat bermasalah.
Perancangan Layar
– Buat kolom data alfabetis rata kiri agar mudah ditelusuri.
– Pada tampilan banyak halaman, berikan label pada setiap halaman untuk menunjukkan hubungan dengan halaman lainnya.
– Awali setiap tampilan dengan judul atau header yang menggambarkan secara singkat isi atau tujuan tampilan; sisakan paling sedikit satu baris kosong antara judul dan isi tampilan.
– Untuk kode ukuran, simbol yang lebih besar tingginya paling sedikit 1.5 kali tinggi simbol berikut yang lebih kecil.
– Gunakan kode warna untuk aplikasi sehingga pemakai dapat membedakan dengan cepat berbagai kategori data, khususnya ketika data item terpencar pada tampilan.
11. sebutkan dan jelaskan visulisasi informasi dan contoh:
• Visualisasi adalah
– Metode penggunaan komputer untuk mentransformasi simbol menjadi geometrik.
– Memungkinkan peneliti mengamati simulasi dan komputasi.
– Memberikan cara untuk melihat yang tidak terlihat.
– Memperkaya proses penemuan ilmiah dan mengembangkan pemahaman yang lebih dalam dan tak diduga.
– Dalam berbagai bidang telah merevolusikan cara ilmuwan meneliti sains.
• Pepatah mengatakan “Sebuah gambar bernilai seribu kata”.
• Untuk beberapa tugas, presentasi visual — seperti peta atau foto — secara dramatis lebih mudah digunakan atau dipahami daripada deskripsi tekstual atau laporan yang diucapkan.
• Mantra pencarian informasi visual:
– Overview dulu,
– Zoom dan filter,
– Lalu details on demand.
Contoh :
– Temporal data
» Time line.
» Ada waktu awal dan akhir, boleh overlap.
» Tugas tambahan: menjadi kejadian sebelum, sesudah, dan pada periode tertentu.
» Mis.: Perspective Wall, Microsoft Project, Macromedia Flash, Lifeline.
• Multi-dimensional data
– Kebanyakan database relasional dan statistik.
– Mis.: DataSplash, Starfield.
• Tree data
– Koleksi item dengan setiap item terhubung dengan parent.
– Mis.: Windows Explorer, Treemaps
• Network data
– Data terhubung dengan sembarang jumlah item lain.
– Mis.: NetMap, WebMap, SeeNet, Butterfly, Visualisasi WWW lainnya.
4 main pattern (keuntungan kerugian)
query database
8 aturan emas
user (requerement, task, model, dan case)
usability (task, goes, n rest)
prototype
evaluasi cegah kesalahan
search
mantra pencaharian dan tugas informasi visualisasi
tipe data
bagian merancang user interface
kasus : model
1.menentukan bagian merancang user interface
2.komponen yang dipertimbangkan dalam mengembangkan user interface
3.desain interface dan prototype
4.empat evaluasi design dan visualisasi informasi.
use case, user requirement, user task, user model
at
11.10
Minggu, 25 April 2010
by Antonius Felix
