INTERAKSI MANUSIA
DAN
KOMPUTER
UNIVERSITAS ISLAM KALIMANTAN
FAKULTAS TEKNIK INFORMATIKA
BIDANG ILMU INTERAKSI
MANUSIA DAN KOMPUTER
adalah ilmu yang mempelajari tentang bagaimanamendesain, mengevaluasi, dan mengimplementasikansistem komputer yang interaktif sehingga dapatdigunakan oleh manusia dengan mudah atau bisadikatakan dialog antara user dengan komputer.
JENIS INTERAKSI DIALOG ANTARA
USER & KOMPUTER,ANTARA LAIN :
1) Command line interface (perintah baris tunggal)
Contoh : unix, linux, dos
2) Menu (menu datar dan menu tarik)
Contoh : semua software menggunakan menu
3) Natural language (bahasa alami)
Contoh : bahasa pemrograman terstruktur
4) Form-fills and spreadsheets
contoh : excel, lotus, dll
5) WIMP
- Windows Icon Menu Pointer
- Windows Icon Mouse Pulldown Menu
Komponen WIMP : button, dialogue
boxes, pallettes, dll
PRINSIP UTAMA MENDESAIN
ANTARMUKA (INTERFACE)
1) Cocok dengan User
2) Produk yg dihasilkan kompatibel dengan user
3) Cocok dengan penyelesaian tugas yg
diharapkan user
4) Konsisten
5) Familiar
6) Mudah
PRINSIP UTAMA MENDESAIN
ANTARMUKA (INTERFACE)
7) Sederhana
8) Fleksibel
9) Responsip
10) Keamanan
11) Ease of Learning and Ease of Use
INDERA YANG BERHUBUNGAN
& BERKAITAN PADA IMK :
Penglihatan
Pendengaran
Sentuhan
PENGLIHATAN
1. Luminans (Luminance)
2. Kontras
3. Kecerahan
4. Sudut dan Ketajaman Penglihatan
5. Medan Penglihatan
6. Warna
Beberapa hal yang mempengaruhi mata
dalam menangkap sebuah informasi dengan
melihat :
WARNA
Beberapa aspek yang perlu diperhatikan dalam
menggunakan warna :
Aspek Psikologi
Aspek Perceptual (persepsi)
Aspek Kognitif
KOMBINASI_WARNA.XLSX
Saluran Input pada Manusia
Mata
Telinga
Tangan (Sentuhan)
Hidung (Mencium)
Mata
Interaksi mata melalui :
Penglihatan
Pencahayaan
Warna
“Kemampuan mata bisa membaca yaitu 250
kata/menit”
Telinga
Batasan telinga menerima suara yang bisa
didengar yaitu : 20 Hz (min) - 20KHz (maks)
Sentuhan
Dengan sentuhan kita bisa merasakan kontur yang
kita sentuh (lembut,kasar,bergelombang,dsb)
Contoh terjemahan suatu masukkan yg menjadi
suatu informasi yg akan diproses :
Size
Brightness & Kontras (Kecerahan)
Sharpness (Kelembutan Warna)
Warna
Kepala & Mata terdapat 2 cara perekaman untuk
dikonversikan kedalam input data,yaitu :
1. Metode pertama
Electrophysiological
2. Metode Kedua
Photoelectric Reflection
Komputer Secara Umum
Terdiri atas :
Monitor
Keyboard
Mouse
Alat – alat tersebut diatas mendukung interaksi
untuk menjalankan sistem serta menentukan
gaya interaksi yg didukung oleh sistem
Peralatan Interaksi pada Komputer
dipengaruhi oleh :
Peralatan Masukan ( Input )
Peralatan Keluaran ( Output)
Input – Output pada Komputer
Input Device
( Keyboard,Mouse, touch paneL, Joy
stick, scanner, Barcode, trackball )
Output Device
( Monitor, Printer ,speaker )
Prosessor
Penyimpanan
( RAM, Harddisk )
Peralatan Masukkan Teks
1. Keyboard (papan ketik)
Digunakan untuk memasukkan data secara
textual dan perintah – perintah dengan
kombinasi dari beberapa tombol.
Jenis – jenis Keyboard
1. QWERTY Keyboard
Layout yg standar
Pola tidak optimal
Lebih Cocok digunakan untuk yg Kidal
Dihubungkan dengan kabel atau tanpa kabel
Kecepatan pengetikan tergantung pd pengalaman
2. Alfabetik Keyboard
Tombol diatur berdasarkan urutan abjad
Tidak mempercepat bagi yg sudah mahir
mengetik dengan 10 jari
Cukup rumit bagi pemula
Kalah populer dengAn Qwerty
3. Dvorak
Huruf yg sering dipakai ditempatkan pada jari – jari
yg dominan
Huruf yg lain diletakkan diantaranya
Diperuntukkan untuk pengguna tangan kanan
Menambah kecepatan mengetik sekitar (10-15 %)
4. Chord Keyboard
Untuk penyingkatan kata
Efektif untuk mencatat ucapan seseorang
Hanya 4 / 5 tombol yang digunakan
Huruf diketikkan sebagai kombinasi dari penekanantombol
Berukuran compact, portable
Waktu belajar singkat
Cepat pengetikannya
Pemakaian dengan waktu yg lama menyebabkankelelahan
Biasanya digunakan pada piano
Menggunakan paduan tombol yg ditekan
bersamaan utk menghasilkan suatu kata/suku
kata dan operator yg terlatih dpt mencapai 200
kata /menit - lebih
Peralatan masukan teks yg lain
Pengenal Tulisan Tangan
Contohnya : Pena Komputer dan tablet digital
Permasalahannya dalam memasukkan data :
1. Memisahkan suatu tulisan kedalam tulisandengan karakter yg berbeda
2. Penguasaan atas gaya penulisan tangan ygberbeda
Pengenal Suara
Sistem kosakata nya terbatas
Masalah yg dihadapi :
1. Kebisingan
2. Ketidaktepatan pengucapan
3. Aksen, dialek
PANDUAN MERANCANG IMK
Pertimbangan dalam merancang
IMK :
1. Kemampuan Navigasi
2. Sederhana
3. Tekanan / Perhatian
4. Font Types
1. Kemampuan Navigasi
Sebagai penunjuk arah untuk kembali
atau untuk menuju ke menu
sebelumnya, contohnya pada web
browser ada menu
Home (untuk kembali kelayar utama)
Back (untuk kembali ke menu sebelumnya)
2. Sederhana
Layar seharusnya sederhana, teratur
rapi komponennya, elemennya
(tombol,icon) mudah dikenal dan
mudah ditemukan
3. Tekanan / Perhatian
Elemen yang penting seharusnya
diposisikan pada posisi yang mudah
serta cepat ditemukan dan melalui
tekanan seperti teks yang tebal atau
warna
4. Font Types
Sebaiknya gunakan tidak lebih dari tiga tipe
font dan tiga ukuran font didokumen
interface yang berbeda
PANDUAN MEMBUAT MENU
Hal – hal yang perlu diperhatikan :
1. Pilihan yang dapat diseleksi
2. Informasi Visual
3. Akhir dari proses seleksi
Pilihan yang dapat diseleksi
Diseleksi pilihan yang tidak dapat dijalankan
atau tidak berfungsi seharusnya dihilangkan
agar tidak memperlambat kerja sistem dan
tidak memperlambat user untuk berinteraksi
Informasi Visual
Informasi visual seharusnya tersedia agar
membantu pemakai untuk mengerti
menu, contohnya :
-> Item dibawah pointer diberi highlight
-> Menggaris bawahi huruf untuk mempercepat
-> Menampilkan tombol shortcut
-> Menempatkan tanda pada item yg dipilih
Bisa berupa tanda cek atau merubah warna
Akhir dari Proses Seleksi
Hal yang biasa terjadi pada saat seleksi
sudah terjadi menu akan menghilang dan
sebaiknya usahakan saat eksekusi menu
terjadi untuk menu akan tetap tampil
Jenis – Jenis Menu
1. Menu Tunggal
2. Menu Multiple
3. Menu dengan struktur Pohon
1. Menu Tunggal
Delphi 7
Panduan dalam membuat menu
Disusun secara sistematis sebuah daftar
menu, maksimum ada 10 menu pada kotak
interface
Menu yang mendalam atau melebar tapi
disesuaikan dengan kotak interface yang
dirancang
2. Menu Multiple
Contohnya pada menu wizard
3. Menu struktur pohon
Contohnya pada menu di windows explorer
Icon
Icon merupakan simbol bergambar
yang apabila didesain secara tepat
akan mempermudah penyampaian
fungsi kepada user
Contoh dalam toolbar MS.Word
Objek Printer : digunakan untuk
merepresentasikan proses pencetakan
Objek Gunting : mewakili pemotongan / cut
Objek Disket : digunakan untuk proses
penyimpanan
Keuntungan penggunaan icon
© Mudah diingat & dikenali
© Efisiensi tempat
© Mudah dipahami
© Mudah didapat
Panduan untuk merancang Icon
Menampilkan object dalam bentuk yang
familiar
Batasi jumlah icon (biar tidak terlalu rumit)
Pisahkan icon dari latar belakang nya
Pertimbangkan Icon 3 dimensi sehingga
mudah dilihat sehingga tidak menyusahkan
Pastikan Icon yang dipilih sangat jelas
Buat setiap icon berbeda
Buat kesesuaian dari icon yang masih terkait
Rancang suatu animasi untuk gerakan
Informasi tambahan
Cari bentuk icon baru untuk operasi baru
PENGATURAN TAMPILAN & WARNA
27 APRIL 2011
INTERAKSI
MANUSIA & KOMPUTER
Pengaturan Tampilan & Warna
1. Kejelasan Teks
2. Pengkodean Visual
3. Warna
4. Tuntunan Umum
1. Kejelasan Teks
Gunakan peraturan standart huruf kecil &
huruf besar,
“ JANGAN MENGGUNAKAN HURUF BESAR
SEMUA KARENA MEMPERSULIT
PEMBACAAN APABILA DENGAN TEKS YG
PANJANG DAN MEMAKAN WAKTU LEBIH
LAMA”
Jenis – jenis huruf yang lucu mungkin tampak
dekoratif tapi belum tentu jelas terbaca,
Sejumlah hal yang menentukan kejelasan teks
Jenis – jenis huruf yang umum seperti :
Times New RomanCourier
Verdana
2.Pengkodean Visual
Elemen – elemen tertentu dilayar yang
digunakan untuk menarik perhatian dan untuk
memusatkan perhatian antara lain :
1. Pemilihan bentuk yang unik
2. Warna & Shading Bayangan
1. Pemilihan bentuk yang unik
Sebagai contoh teks diletakkan didalam bentuk
awan atau dalam bentuk kotak yang akan lebih
mencolok dari sekelilingnya
Interaksi ManusiaKomputer
Next
Preview
2. Warna & Shading Bayangan
Digunakan untuk memberi efek yang bagus
Beberapa hal yang perlu diperhatikan :
Garis bawah
Video yang berkedip atau diputar balik dan
icon yang bergerak
Garis bawah & Shading
Warna dan shading / bayangandapat digunakan untuk memberi
efek yang bagus
Garis bawah dan shading
3. Warna
Ada 3 (tiga) jenis warna yang mempengaruhi selmata : merah, jingga, hijau , kuning, biru
Kombinasi warna yang paling mencolok danmenghasilkan efek yang buruk yaitu :
Merah / Biru
Hijau / Magenta
“ Warna diatas bisa dikombinasikan denganmenambahkan warna lembut ( warna putih) ”
Tuntunan untuk menggunakan warna
Dalam layar – layar yang kebanyakan terdiri
dari teks, warna dapat membantu ketika
pengguna harus mencari atau membedakan
bagian – bagian tertentu
Untuk bagian yang sejenis dapat diberi kode
warna yang sama
Warna digunakan untuk membedakan
anatara lain :
Data lama dan data baru
Figur asli dengan figur buatan
Judul dan badan teks
Data yang disediakan user dengan data pada
komputer
Data yang sudah pernah digunakan dan yang
belum
Garis Bawah tidak dianjurkan pada teks yg
dicetak karena hal ini mengganggu ujung –
ujung bawah huruf
Awalnya menarik tetapi juga dapat
mengganggu setelah beberapa waktu, kecuali
jika tujuannya untuk memperingati tindakan
yang salah dan efek itu akan hilang saat
kesalahan sudah dibetulkan
Peralatan Penempatan
Posisi & Penunjuk
1. Mouse
2. Joystick
3. Tracball
4. Layar Sentuh
5. Light Pen
6. Tablet Digital
7. Cursor Keys
8. Roda Jempol
9 Keymouse
10 Sarung Tangan ( Data Glove)
11 Penangkap Pandangan (Eye Gaze)
Mouse
Alat penunjuk yang dipegang
Bentuk sudah dikenal
Mudah digunakan
Cara kerja ada 2 (dua) metode :
1. Mekanik
2. Optical ( cahaya )
1. Metode Mekanik
Bola dibagian bawah mouse bergerak seiring
gerakan mouse
Bola menggerakan potensiometer orthogonal
Dapat digunakan pada hampir semua
permukaan datar
2. Metode Optical
Menggunakan LED dibagian bawah mouse
Ditempatkan pada tempat seperti alas
mouse, sedikit rentan terhadap debu &
Kotoran
Mendeteksi perubahan berdasarkan
perbedaan intensitas pantul saat mouse
digerakkan
Karakteristik mouse
Bergerak di bidang datar
Diletakkan diatas permukaan / meja
Tidak melelahkan
Gerak mouse sesuai dengan gerak kursor di
layar
Tidak mengganggu layar
Mampu menunjuk secara akurat, cepat
karena kursor nya terlihat
Ada mouse kaki, digrakkan dengan kaki tapi
jarang digunakan
2. Joystick
Hanya membutuhkan tempat sedikit
Dikontrol oleh :
Gerakan : posisi dari joystick
berhubungan dengan posisi kursor
Tekanan : tekanan pada stik / batangnya
berhubungan dengan kecepatan kursor
Biasanya dilengkapi dengan tombol – tombol
untuk memilih
Tidak mengaburkan / mengganggu layar
Murah
Sering digunakan untuk permainan pada
komputer
3. Trackball
Bekerja seperti mouse dalam posisi terbalik
Peralatan penunjuk tidak langsung
Cukup akurat
Ukuran & perasaan dalam menggerakan bola
sangat penting
Memerlukan ruang yang sedikit
Cocok untuk notebook
4. Layar Sentuh
Layar yang sensitif terhadap sentuhan
Mendeteksi adanya jari di layar
Bekerja dengan cara mendeteksi perubahan
intensitas cahaya yg memantul
Termasuk peralatan penunjuk langsung
Sekarang sudah hampir sepopuler mouse
Keuntungan
Cepat dan tidak membutuhkan pointer khusus
Baik untuk pemilihan khusus
Cocok digunakan dilingkungan yg sempit
karena tidak perlu tempat
Kerugian
Jari – jari dapat mengotori layar
Sulit untuk memilih area yang kecil dengan
tepat dan akurat
Selalu mengangkat tangan sehingga cepat
lelah
5. Light Pen
kabel spiral dihubungkan antara pena dengan
layar
Merupakan alat penunjuk langsung
Akurat sehingga dapat digunakan untuk
menggambar dan memilih yg baik
Belum sepopuler mouse
Masalah : Kepekaan pena sering berubah
: Mudah rusak, patah, pecah
: Mudah hilang diarea meja kerja yg
penuh barang
: Lelah dilengan karena hampir sama
dengan pen biasanya
Cara Kerja : Pena disentuhkan kelayar
6. Tablet Digital
Resolusi tinggi, dengan jangkauan ukuran
sampai A5 sampai 60 x 60 inch
Ukuran penarikan antara 50 & 200 Herz
Dapat digunakan untuk mendeteksi gerak
relatif / absolut
Dapat digunakan untuk masukan teks dengan
dukungan s/w pengenal char
Membutuhkan ruang kerja yg besar
7. Tombol Kursor
Empat tombol anak panah pada keyboard
Sangat murah tapi lambat
Berguna hanya untuk pergerakan pengolahan
kata
Tak ada layout yang standar
8. Roda Jempol
Dua lempeng pengatur ortogonal untuk
mengatur posisi kursor
Murah tapi lambat
9. Mouse Tombol
Tombol Tunggal
Kecil, portable, dan mempunyai umpan balik
sangat kecil & tidak handal
10. Sarung Tangan
Sarung tangan khusus dengan sensor serat
optik
Mendeteksi sudut temu dan posisi tangan
secara 3D
Keuntungan
Mudah digunakan
Secara potensi amat kuat & ekspresif
Potensi
-. Pengenal gerak tubuh
-. Interpretasi bahasa simbol / syarat
Kerugian
Sulit digunakan dengan keyboard
Mahal
11. Eye Gaze
Headset mendeteksi gerakan mata pengguna
untuk mengontrol kursor
Sangat cepat & akurat
Mahal
PERALATAN OUTPUT
Layar Komputer
1. CRT
2. LCD
1. CRT
Keuntungan
Murah
Cukup cepat untuk animasi yg butuh
kecepatan
Mampu menampilkan warna yg banyak
Penambahan resolusi menambah harga
Kelemahan
Memakan banyak tempat karena bentuknya
besar
Saran
o Jaga jarak mata dengan layar
o Jangan gunakan font yg terlalu kecil ukurannya
o Jangan memandangi layar dalam waktu lama
tanpa istirahat
o Jangan tempatkan layar secara langsung
didepan jendela yang terang cahaya
o Kerjalah dalam cahaya yang memadai & nyaman
2. LCD
Lebih kecil, ringan, tanpa masalah radiasi
Pengalamatan dengan matriks
Digunakan pada notebook
Tingkat kelelahan mata yg ditimbulkan lebih
sedikit dari CRT
Mahal
Memungkinkan munculnya warna
Top Related