KELOMPOK

MECI WATI PUTRI

H1101151043
RASTIKA SADILA
RAHMA
H1101151027
VIRAMITHA
CAHYANI
H1101151020

Interaksi Manusia dan

Komputer

BAB 1
PENDAHULUAN

A. Antarmuka Manusia - Komputer

Sistem komputer adalah

( input, proses, output ).

masukkan,

B. Bidang Studi

Teknik elektronika dan ilmu computer

Psikologi
Perancangan grafis dan tipografi
Ergonomik
Antropologi
Linguistik
Sosiologi

proses,

keluaran

C. Peranti Bantu Pengembang Sistem

Pengguna peranti bantu untuk mengembangkan antarmuka

mempunyai keuntungan antara lain:
1. Antarmuka yang dihasilkan menjadi lebih baik
2.Program antarmuka menjadi mudah ditulis dan lebih ekonomis
untuk dipelihara

D. Strategi Pengembangan Antarmuka

Secara garis besar, penggembangan bagian antarmuka perlu
memperhatikan beberapa hal sebagai berikut:
Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna.
Berbagai informasi yang berhubungan dengan karakteristik dialog
yang cukup lebar, seperti ragam dialog, struktur.
Penggunaan prototipe yang didasarkan pada spesifikasi dialog format
yang disusun secara bersama-sama antara (calon) pengguna dan
perancangan sistem.

BAB 2
FAKTOR MANUSIA

A. Penglihatan

Penglihatan (mata) adalah salah satu panca indra manusia yang

paling berharga.
Luminas (luminance) adalah banyaknya cahaya yang dipantulkan
oleh permukaan objek.
Kontras adalah hubungan cahaya yang dikeluarkan oleh suatu
objek dan cahaya dari latarbelakang objek tersebut.
Kecerahan adalah tanggapan subjektif pada cahaya.
Warna.

B. Pendengaran

Pendengaran adalah panca indra yang paling penting setelah

penglihatan dalam dunia komputer interaktif.

C. Sentuhan

Sentuhan adalah sarana interaksi yang menduduki urutan ke-3

setelah penglihatan dan pendengaran.

D. Pemodelan Sistem PengolahanPengolahan secara

sadar dan otomatis

Register sensori
Kanal kapasitas rendah
Memori jangka panjang
Memori jangka pendek
Sikap dan kecemasan pengguna

E. Pengendalian Motorik

Responder utama pada diri operator manusia adalah

dua buah tangan yang berisi 10 jari, dua kaki dan satu
suara. Kita perlu menyadari batasan yang dimiliki oleh
responder ini. Pengendalian motorik pada diri manusia
sebenarnya dapat dilatih untuk mencapai taraf
kemampuan tertentu

BAB 3
RAGAM DIALOG

A. Ragam Dialog Interaktif

Secara umum, ragam dialog interaktif dapat dikelompokkan

menjadi 9 kategori:
1. Dialog Berbasis Perintah Tunggal (Command Line Dialogue)
merupakan ragam yang paling konvensional.
2. Dialog Berbasis Bahasa Pemograman (Programming Longuage
Dialogue)
3. Antarmuka Berbasis Bahasa Alami (Natural Longuage Interface)
4. Sistem Menu
5. Dialog Berbasis Pengisian Borang (From Filling Dialogue)
6. Antarmuka Berbasis Ikon
7. Sistem Penjendelaan (Windowing System)
8. Manipulasi langsung
9. Antarmuka berbasis interaksi grafis

BAB 4
PERANCANGAN
TAMPILAN

A. Cara Pendekatan

Pendekatan secara user-centered design adalah perancangan

antarmuka yang melibatkan pengguna. Pelibatan pengguna disini
tidak

diartikan

bahwa

pengguna

harus

ikut

memikirkan

bagaimana implementasinya nanti, tetapi pengguna diajak untuk

aktif

berpendapat

ketika

perancang

menggambar wajah antarmuka.

antarmuka

sedang

B. Prinsip dan Petunjuk Perancangan

1. Urutan perancangan

Pemilihan ragam dialog

Perancangan struktur dialog
Perancangan format pesan
Perancangan penangahan kesalahan
Validasi pemasukkan data
Proteksi pengguna
Pemulihan dari kesalahan
Penampilan pesan salah yang tepat dan sesuai dengan
kesalahan yang terjadi pada waktu itu
Perancangan struktur data

3. Perancangan tampilan berbasis grafis

Ilusi pada objek-objek yang dapat dimanipulasi
Urutan visual dan fokus pengguna
Struktur internal
Kosakata grafis konsisten dan sesuai
Kesesuaian dengan media
4. Waktu tanggap
5. Penangahan kesalahan

C. Peranti Bantu Sederhana

Peranti
bantu
sederhana
dapat
digunakan
untuk
mendokumentasikan wajah antarmuka yang diinginkan. Peranti
bantu berbentuk lembaran kertas. Lembaran kertas ini diberi
nama dengan Lembar Kerja Tampilan (screen design work sheet)
atau LKT. Pada dasarnya LKT ini terdiri atas 4 bagian, yaitu :
1. Nomor lembar kerja.
2. Bagian Tampilan : berisi sketsa tampilan yang akan muncul di
layar;
3. Bagian Navigator;
4. Bagian Keterangan
D. Jaring Semantik Tampilan

Jaring semantik tampilan terdiri atas dua komponen : nomor

tampilan (lembar kerja) dan transisi yang menyebabkan ke
tampilan yang lain (sesuai dengan isi bagian navigasi pada
rancangan tampilan.

BAB 5
PERANTI INTERAKTIF

A. Peranti Masukan Tekstual

Peranti masukan tekstual adalah peranti masukan standar yang

dijumpai pada semua komputer.
1. Tata letak QWERTY Tombol-tombol dalam papan ketik
dikelompokkan menjadi 4 bagian:
Tombol fungsi ( funcition key )
Tombol alphanumerik ( alphanumerik key )
Tombol kontrol ( control key )
Tombol numerik ( numeric key )
2. Tata letak Duorak dirancang pada tahun 1932 adalah
ketidakefisienan yang dijumpai pada tata letak qwerty dicoba
diperanti oleh tata letak.
3.Tata letak Alphabetik adalah papan ketik dengan tata letak
alphabetikdisusun persis seperti tata letak QWERTY maupun tata
letak duorak, tetapi susunan hurufnya berurutan seperti pada
urutan alphabet.
4. Tata letak Klockenberg

A. Peranti Masukan Tekstual

5. Tata letak yang dikembangkan dengan memasukkan unsur

ergonomik di dalamnya, selain tata letak Duorak, antara lain
adalah papan ketik dengan tata letak Klockenberg.
6. Papan tombol numerik
7. Tombol fungsi
Keuntungan tebal fungsi:
Mengurangi beban ingatan
Mudah dipelajari
Kecepatan yang lebih tinggi ( kerena berkurangnya penekanan
tombol )
Mengurangi kesalahan
Kelemahan dari tebal fungsi Kelemahannya adalah tidak adanya
standarisasi isi tombol fungsi tersebut.

B. Peranti Penuding Dan Pengambil ( Pointing And Picking

Device )

Peranti penuding dan pengambil ( pointing and picking device )

adalah peranti interaktif yang digunakan untuk menuding atau
menunjuk atau menempatkan kursor pada suatu posisi pada layar
tampilan dan untuk mengambil suatu item informasi untuk
dipindahkan ketempat lain.
1.Mouse adalah salah satu peranti interaktif yang paling banyak
digunakan pada sebagian besar pemakaiannya, mouse digunakan
untuk menempatkan kursor pada posisi tertentu di layar
komputer, mengaktifkan menu pilihan pada suatu program
aplikasi, dan bahkan untuk menggambar.
2.Joystick adalah peranti penuding tak langsung.
3.Trackball juga termasuk dalam peranti untuk menuding dan
mengambil

B. Peranti Penuding Dan Pengambil ( Pointing And Picking

Device )
4. Digitizing tablet (digitizer atau graphics tablet ) adalah peranti
pengambilan data dalam bentuk sederetan koordinat ( x, y ) yang
menentukan gerakan pena atau puck pada meja digitasi.
5. Pena cahaya ( light pen ) dapat digunakan sebagai peranti
gambar atau point-shoot device.
6. Panel sensitif sentuhan( touch sensitive panel ) adalah peranti
interaktif yang bekerja dengan cara mendeteksi ada tidaknya
sentuhan tangan atau stylus langsung ke layar komputer.
C. Layar Tampilan
Layar tampilan adalah peranti yang dipusatkkan ada pada sebuah
sistem komputer, kerena lewat layar tampilan malah pengguna
dapat melihat apa yang ia ketikan,dan informasi yang diberikan
oleh komputer sebagai hasil dari suatu proses komputasi.

D. Pengolahan Tampilan(Display Processor Atau Video Display

Adapter)

Pengolahan tampilan ( display processor atau video display

adapter ) adalah bagian yang mengubah pola bit dari pengingat
digital menjadi tegangan analog, yang selanjutnya akan
membangkitkan elektron yang digunakan untuk menembak fosfor
pada layar tampilan.

E. Tipe Layar Tampilan

Direct drive monochrome monitor

Composite monochrome monitor
Composite color monitor
Red green blue monitor ( rgb monitor )
Variable frequency monitor

F. Pengaruh Buruk Peranti Interaktif

Agar peranti-peranti interaktif dapat meningkatkan efisiensi

operator, mak ia harus ditempatkan pada posisi yang
memperhatikan faktor kenyamanan lingkungan kerja, atau lebih
dikenal dengan faktor ergonomik.

BAB 6
ASPEK ERGONOMIK

A. Pengukuran dan Antropometrik

Antropometrik adalah suatu bidang ilmu yang berhubungan

dengan pengukuran tubuh manusia. Misalnya tinggi badan dan
jangkauan tangan.

B. Aspek Ergonomik Dari Statiun Kerja

Pemasukkan data ( data entry ) adalah pekerjaan yang

berorientasi pada hard copy sehinggga operator akan jauh lebih
banyak menghabiskan waktunya untuk melakukan pengetikan
dibanding dengan melihat ke layar tampilan.
Akuisisi data adalah jenis pekerjaan yang dapat dikatakan
berkebalikan dengan pemasukan data dalam hal karakteristik
bebannya.

B. Aspek Ergonomik Dari Statiun Kerja

Pekerjaan interaktif. Ragam interaktif dari pemanfaatan layar

tampilan mempunyai variasi yang sangat banyak.
Pekerjaan pengolahan data
Ringkasan. Kunci penting dalam pengkontrolan ergonomik adalah
bahwa karakteristik pekerjaan akan menentukan intervensi yang
diperlukan untuk memberikan kenyamanan kepada orang-orang
yang melakukan pekerjaan itu

C. Pencahayaan

Tujuan utama dari perancangan pencahayaan tempat layar

tampilan diletakkan adalah untuk:
Menghindarkan pengguna dari cahaya terang langsung atau
pantulannya.

C. Pencahayaan

Memperoleh keseimbangan antara kecerahan ( bright-ness ) layar

tampilan dan kecerahan yang ada di depan pengguna.
Menghindaari cahaya langsung atau cahaya pantulan yang
langsung mengenai layar tampilan.
Memberikan keyakinan bahwa ada pencahayaan yang cukup
untuk pekerjaan yang tidak menggunakan layar tampilan
Pengendalian cahaya yang berasal dari berbagai sumber cahaya
diatas menentukan perhatian pada:
Perancangan lighting fictures dalam arti arah pencahayaan dan
kuat cahaya yang dihasilkannya.
Penutup jendela
Penempatan lighting fictures dan jendela relatif terhadap stasiun
kerja.
Faktor refleksitas dan material yanga ada di ruangan tempat
stasiun kerja ditempatkan.

D. Suhu Dan Kualitas Udara

Suhu dan kelembaban merupakan faktor yang sangat penting

dalam kualitas udara.

E. Gangguan Suara

F. Kesehatan Dan Keamanan Kerja

Kondisi-kondisi kesehatan antara lain:

Radang persendian
Penyakit gula atau diabetes
Berat badan yang berlebihan
Darah tinggi
Stress

F. Kesehatan Dan Keamanan Kerja

Merokok
Kehamilan, dan kondisi lain yang
mempengaruhi tingkat hormon
Umur yang semakin bertambah
Kondisi fisik yang jelek

G. Kebiasaan Dalam Bekerja

Bekerja sesantai mungkin dan dalam posisi yang benar
Mengubah posisi duduk anda untuk mencegah kelelahan otot
Berdiri dan mengambil beberapa menit untuk mengendorkan
tegangan otot dan lakukan olaraga ringan beberapa kali sehari
Mengusahakan untuk tidak mengetik dalam jangka waktu yang
lama yang memberikan tekanan fisik yang berat pada anda
Mengambil istirahat sejenak secara periodis
Memeriksa kebiasaan kerja anda dan tipe pekerjaan yang hendak
anda lakukan

BAB 7
TENTANG BGI

A. Unit Graph

Unit dalam Turbo Pascal adalah semacam berkas overlay yang

dapat dipanggil oleh sembarang program lain sesuai dengan
keperluannya.

B. Penggerak Grafik

CGA
MCGA
Hercules
EGA
AT dan T 400 line
3270 pc
VGA
IBM 8514

C. Inisialisasi Mode Grafik

Keadaan normal Turbo Pascal bekerja pada mode teks, sehingga

jika diinginkan untuk bekerja dalam mode grafik, harus dilakukan
inisialisasi, yang antara lain bertujuan untuk mendeteksi dan
mencocokkan penggerak grafik yang dipakai dan resolusi yang
digunakan.

D. Mengakhiri Mode Grafik

Prosedur Close Graph dieksekusi, Turbo Pascal akan membawa

tampilan ke mode sebelum mode grafik dioperasikan, dan akan
membebaskan bagian pengingat yang disebut heap, yang
sebelumnya dialoasikan untuk graphics scan buffer.

E. Pengaturan Warna Gambar

1. Mengatur warna latar depan

2. Mengatur warna latar belakang. Pada prinsipnya sama
dengan pengaturan warna latar depan. Secara normal warna
latar belakang adalah hitam.
3. Warna aktif
4. Maksimum warna
F. Kursor Grafis

Memindah cp secara absolut

Memindah cp secara relatif
Posisi cp

G. Menggambar Titik

H. Menggambar Garis

Produser line. Produser ini digunakan untuk menggambar garis

dari titik ujung ke titik pangkal yang koordinatnya diketahui.

Produser lineto. Produser dimulai dari posisi cp ketitik dengan

koordinat yang lain.

Lineral. Mempunyai kegunaan untuk menggambar garis dari

posisi cp ketitik lain yang koordinatnya ditentukan.

I. Menggambar Kotak

Bentuk kotak atau 4 persegi panjang, merupakan bentuk

geometri yang sederhana, karena tersusun atas 2 pasang garis
yang setiap pasangnya saling sejajar satu sama lain.

J. Penulisan Teks Grafis

1. Menulis teks
Produser outtext digunakan untuk menuliskan teks dimulai dari posisi
cp, dan setelah teks tersebut ditulis, posisi cpnya dapat berubah
( diperbarui secara otomatos ).
Produser outtextnya mempunyai kegunaan hampir sama dengan
produser outtext.
2. Mengatur font dan ukuran karakter
3. Mengatur perapian teks. Untuk keperluaan tertentu, ada
kemungkinannya anda harus mencetak teks secar rapi tengah
( center justified ) atau rapi kanan ( right justified ) pengaturan
perapian teks ditentukan atas dasar posisi cp.
4. Lebar dan tinggi karakter. Dua fungsi yang dimaksud adalah
textwidht yang digunakan untuk mengetahui lebar huruf, dan
fungsi textheight yang digunakan untuk mengetahui.

K. Pengaturan Teks Otomatis

Satu program yang digunakan untuk mengatur ukuran teks

secara otomatis sehingga keseluruhan teks tersebut persis
berada pada suatu kotak yang besarnya ditentukan terlebih
dahulu.

L. Pengoperasian Viewport
1. Pengaturan viewport. Viewport bisa ditentukan dengan
menggunakan produser set viewport.
2. Menghapus viewport. Produser clear device digunakan untuk
menghapus seluruh layar, sehigga layar menjadi kosong( bersih
kembali).
3. Mengetahui posisi viewport. Posisi viewport yang aktif dapat
diketahui dengan menggunakan produser get view settings.

BAB 8
PENGOPERASIAN
MOUSE

A. Pengendali Mouse

Mouse merupakan bagian terpisah dari sebuah sistem komputer

standar, karena pada dasarnya mouse merupakan sebuah
peranti.

B. Parameter Mouse
Kegunaan masing-masing parameter:
1. M1 digunakan untuk mengatur status mouse
2. M2 digunakan untuk menentukan tombol man yang ditekan
3. M3 digunakan untuk menyatakan posisi horizontal ( absis ) kursor
mouse
4. M4 digunakan untuk menyatakan posisi vertikal ( ordinat ) kursor
mouse

C. Pengoperasian Mouse

Pengoperasian mouse dimulai dengan mendeteksi terpasang

tidaknya program pengendali mouse.

D. Kursor mouse
1. Anatomi kursor mouse. Kursor mouse adalah citra yang bisa
digerakkan pada seluruh atau sebagian luas layar secara bebas.
Komponen-komponen kursor mouse:
. Topeng layar ( screen mark )
. Topeng kursor ( cursor mark )
. Posisi x
. Posisi y
2. Mengubah kursor mouse. Bentuk kursor mouse standar berupa
tanda anak panah, yang merupakan matriks pixel berukuran 16
pixel x 16 pixel.

E. Pengecekan Lokasi Mouse

1. Pengecekan di dalam kotak. Pengecekan untuk menentukan

apakah kursor mouse berada di dalam suatu daerah dengana
ukuran dari daerah yang dimaksud, serta posisi kursor mouse
pada saat itu.
2. Pengecekan mouse di dalam lingkaran
F. Unit Mouse

Setiap program yang memerlukan produser-produser dan fungsifungsi diatas cukup mencantumkan nama unit ynag dimaksud
pada deklarasi uses. Bagian interface, dari unit tersebut, dalam
hal ini disebut sebagai unit mouse

BAB 9
PEMBUATAN KOMPONEN
ANTARMUKA GRAFIS

A. Komponen Antarmuka Grafis

1. Spin box adalah salah satu komponen antarmuka grafis yng

digunakan untuk mengatur nilai suatu peubah, biasanya bertipe
numerik, dengan menambah atau mengurangkannya dengan
suatu nilai.
2. List box digunakan untuk menampilkan sejumlah pilihan yang
tersedia dapat dipilih oleh pengguna program .
3. Combo box digunakan untuk menampilkan sejumlah pilihan
yang dapat dipilih secara bebas oleh pengguna.
4. Check box digunakan untuk memilih satu atau lebih pilihan dari
sejumlah pilihan yang tersedia.
5. Tombol radio adalah cara lain untuk menyajikan sejumlah
pilihan yang memungkinkan pengguna untuk memilih salah satu
pilihan yang tersedia

B. Unit Inisialisasi Mode Grafik

Setiap kali akan masuk ke dalam mode grafik, cukup

menambahkan nama initgrp pada deklarasi perantinya, dan
selanjutnya inisialisasi mode grafik diaktifkan.

C. Tombol Tekan
1. Teknik pembuatan tombol tekan. Teknik penampilan tombol tekan
pada layar perlu diperhatikan, sehingga tampilan tombol tekan
tersebut terkesan merupakan tombol 3 dimensi yang ketik tombol
tersebut dipilih, terlihat seperti halnya jika kita menekan tombol
yang sebenarnya.
2. Tombol tekan berlabel adalah tombol tekan yang kepadanya
diletakkan suatu label.
3. Memilih tombol menggunakan mouse.

D. Penggeser

1. Anatomi penggeser. Komponen antarmuka grafis yang seolaholah dapat menggeser layar disebut dengan penggeser ( slinder
atau scroll bar ).
2. Efek penggeseran layar dikerjakan dengan cara menentukan
viewport berukuran tertentu dengan menghadapkan parameter
kelima, agar jika gambar atau teks melebihi ukuran viewport
tersebut, maka gambar atau teks yang dimaksud tidak akan
ditampilkan.
E. Medan Isian Data

Komponen antarmuka itu disebut dengan isian data disingkat

medan data ( entry field ), yang sebenarnya merupakan tiruan
poduser readln.

BAB 10
SISTEM PENJENDELAAN

A. Pengertian Jendela Dinamis

Jendela ( window ) adalah bagian dari layar tampilan yang

digunakan untuk menampilkan informasi yang berupa gambar
maupun teks. Jendela dinamis adalah suatu jendela yang
ukurannya dapat diperbesar atau diperkecil sesuai keinginan.

B. Bentuk Kursor Mouse

Dalam kaitannya dengan jendela dinamis, maka bentuk kursor

mouse perlu disesuaikan dengan keadaan pada suatu ketika

C. Contoh Program

Contoh program yang akan disajikan berikut ini adalah contoh

penerapan jendela dinamis pada penampilan informasi yang
berupa teks.

BAB 11
SISTEM MENU

A. Sistem Menu Datar

1. Contoh menu datar. Sistem menu datar pada intinya

memanfaatkan seluruh lebar layar untuk menampilkan menu
yang tersedia.
2. Strategi implementasi menu datar
3. Implementasi menu datar
B. Sistem Menu Tarik
1. Komponen menu tarik
2. Menu tarik terkontrol papan ketik
3. Unit pulldown
4. Menu tarik terkontrol mouse

BAB 12
EDITOR KURSOR
MOUSE

A. Spesikasi Editor 1. Dapat digu

1. Dapat digunakan menghidupmatikan pixel pada kursor mouse

secara interaktif
2. Dapat digunakan untuk mengubah posisi hotspot
3. Mempunyai kemampuan untuk langsung menguji coba kursor
mouse yang dirancang, sehingga pengguna dapat langsung
melihat hasil rancangan kursor mousenya
4. Mempunyai kemampuan untuk mengembalikan bentuk kursor
standar yang berupa anak panah yang mengarah ke arah kiri atas

B. Editor Topeng

Editor kursor mouse memerlukan 2 editor topeng yang terpisah.

C. Penentuan Nilai Citra Kursor

Struktur data topeng mendefinisikan format penyimpanan data

yang digunakan untuk menyimpan nilai bit pixel yang dinyatakan
sebagai data boolean yang bernilai true dan false.