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