Modul Pembelajaran: Interaksi Manusia & Komputer

MODUL PEMBELAJARAN
INTERAKSI MANUSIA & KOMPUTER
Di susun oleh:
Supriyanta, M.Kom.
Program Studi Sistem Informasi

Fakultas Teknik dan Informatika
Universitas Bina Sarana Informatika
KATA PENGANTAR
Puji syukur yang sedalam-dalamnya kepada Allah SWT atas limpahan rahmatNya
sehingga modul ini bisa terselesaikan. Manusia bekerja dengan berbagai alat bantu, diantaranya
komputer. Pada saat memakai komputer maka terjadi interaksi antara manusia dengan
komputer. Pada proses interaksi biasanya manusia memberikan perintah atau data, kemudian
di proses dengan cepat oleh CPU dan akan tampil hasilnya, dengan informasi dari output
komputer yang didapat bisa mengambil keputusan dengan tepat.
Terjadinya interaksi antara manusia dan komputer mengalami perubahan dari waktu ke
waktu, semakin lama semakin memudahkan dan menyenangkan manusia. Secara umum
komputer di beri perintah dengan menuliskan program berupa tulisan, kemudian memakai
tampilan simbol atau gambar sehingga lebih mudah di pahami manusia. Trend yang ada saat
ini adalah pemakaian touchsreen atau layar sentuh.
Pengembangan terus di lakukan sehingga di mungkinkan akan ada perubahan dalam

sistem interaksi antara manusia dengan komputer. Pemakaian komputer yang terus-menerus,
rutin setiap hari dari pagi sampai sore perlu memperhatikan kesehatan jangka panjang.
Ergonomi adalah ilmu yang terkait dengan pemanfaatan alat dengan memperhatikan sisi
kesehatan manusia. Hal ini penting untuk meningkatkan produktivitas kerja dan mengurangi
keluhan-keluhan pekerja.
Setelah semua materi di sampaikan di bagian akhir semester ada tugas akhir semester,
mahasiswa di minta membuat tugas gabungan matakuliah: Manajemen Proyek Sistem
Informasi, Analisa Perancangan Sistem Informasi, Web Programming 3 dan Interaksi Manusia
dan Komputer. Dari sisi penilaian matakuliah IMK mahasiswa di minta memberikan
penjelasan tampilan antarmuka (interface) yang dibuat bersama kelompoknya dilanjutkan
diskusi/tanya jawab.
Banyak hal yang perlu dipertimbangkan dalam proses pembuatan sistem interaksi
manusia dengan komputer, buku ini memberikan berbagai informasi yang perlu agar dapat
membuat program dan membuat antar muka dengan baik dan bermanfaat bagi banyak orang.
Kritik dan saran membangun di perlukan untuk menyempurnakan buku ini, semoga
bermanfaat.
Yogyakarta, 23 Maret 2020
Supriyanta, M.Kom.
ii
DAFTAR ISI
Halaman Judul ...................................................................................................................... i

Kata Pengantar ...................................................................................................................... ii
Daftar Isi ............................................................................................................................... iii
Bab 1 Pengertian Interaksi Manusia & Kompute ..................................................................... 1
1.1 Pengertian Interaksi Manusia Dan Komputer .............................................................. 1
1.2 Bidang Studi Yang Terkait Imk ................................................................................... 5
1.3 Piranti Bantu Pengembangan Sistem ........................................................................... 7
1.4 Pengelompokan Piranti Bantu ...................................................................................... 7
1.5 Strategi Pengembangan Antarmuka ............................................................................. 8
Bab 2 Faktor Manusia.................................................................................................................... 9
2.1 Tiga Aspek Sistem Komputer ...................................................................................... 9
2.2 Faktor Manusia............................................................................................................. 10
Bab 3 Piranti Interaktif .................................................................................................................. 15
3.1 Keyboard ...................................................................................................................... 15
3.2 Penunjuk ....................................................................................................................... 17
3.3 Pengambil Gambar Terformat ...................................................................................... 20
3.4 Pengambil Gambar Tak Terformat .............................................................................. 24
3.5 Gerakan ........................................................................................................................ 25
3.6 Layar Tampilan ............................................................................................................ 25
Bab 4 Ragam Dialog ...................................................................................................................... 28
4.1 Sifat Ragam Dialog ...................................................................................................... 28
4.2 Karakteristik Ragam Dialog ......................................................................................... 29
4.3 Kategori Ragam Dialog................................................................................................ 29
Bab 5 Desain Antarmuka ....................................................................................................... 32
5.1 Dasar Desain Interface ................................................................................................. 32
5.2 Desain Software Yang Baik ......................................................................................... 33
5.3 Tiga Model Aplikasi Desain Layout ............................................................................ 33
5.4 Design Interface .......................................................................................................... 34
Bab 6 Graphical User Interface .................................................................................................... 40
6.1 Pengertian GUI............................................................................................................. 40
6.2 Sistem Koordinat .......................................................................................................... 41
6.3 Pengaturan Warna ........................................................................................................ 42
6.4 Membuat Garis ............................................................................................................. 43
6.5 Membuat Gambar......................................................................................................... 44
Bab 9 Pembuatan Komponen Antarmuka Grafis ....................................................................... 47
9.1 Tombol Tekan .............................................................................................................. 47
9.2 Spin Box ....................................................................................................................... 48
9.3 List Box ........................................................................................................................ 49
9.4 Combo Box .................................................................................................................. 49
9.5 Tombol Radio............................................................................................................... 50
9.6 Check Box .................................................................................................................... 51
9.7 Label Box ..................................................................................................................... 51
9.8 Mendesain Window...................................................................................................... 51
Bab 10 Aspek Ergonomik ............................................................................................................. 64
10.1 Pentingnya Ergonomi ................................................................................................. 64
iii
10.2 Permasalahan.............................................................................................................. 65
10.3 Pengertian Ergonomik ................................................................................................ 68
10.4 Aspek-Aspek Ergonomik ........................................................................................... 68
10.5 Menggunakan Komputer Secara Ergonomis.............................................................. 70
10.6 Bekerja Dengan Komputer ......................................................................................... 73
10.7 Kebisingan Dan Radiasi ............................................................................................. 73
Bab 11 Internet Interaktif .............................................................................................................. 75
11.1 Pengertian Internet ..................................................................................................... 75
11.2 Cara Mengakses Internet ............................................................................................ 75
11.3 Sumber Daya Internet................................................................................................. 76
11.4 Pengenalan Pembuatan Web Page ............................................................................. 76
11.5 Internet Dan E-Business ............................................................................................ 77
11.6 E-Intermediary ........................................................................................................... 78
Bab 12 Presentasi Tugas................................................................................................................ 80
Daftar Pustaka ....................................................................................................................... 81
iv
BAB 1
PENGERTIAN
INTERAKSI MANUSIA & KOMPUTER
Gambar 1.1 Interaksi Manusia & Komputer
Manusia bekerja dengan berbagai macam alat bantu, salah satunya adalah komputer.
Pada saat bekerja terjadi komunikasi atau interaksi antara manusia dan komputer. Komputer di
atur atau diperintah oleh manusia, dipakai untuk mengerjakan sesuatu agar tujuan tercapai.
Manfaat komputer yang terus berkembang berdampak pada banyak bidang yang bisa ditangani
dengan komputer. Sekarang ini hampir semua bidang pekerjaan memakai komputer untuk
bekerja.
Untuk bekerja dengan komputer setiap orang tidak harus mengerti tentang mesin
komputer atau program secara detail. Program yang dibuat oleh ahli komputer (programmer)
akan membantu mempermudah pemakaian komputer. Seorang kasir di toko misalnya, tidak
harus belajar tentang komputer secara detail, cukup belajar dasar-dasar memakai komputer,
selanjutnya dengan program yang disediakan untuk bekerja melayani pembeli, seorang kasir
akan bekerja dengan cepat dan mudah. Kasir dan komputer bisa berinteraksi dengan baik
karena ada program yang dibuat khusus untuk perhitungan belanja.
1.1 PENGERTIAN INTERAKSI MANUSIA DAN KOMPUTER

Bidang Ilmu Interaksi Manusia dan Komputer adalah: “Ilmu yang mempelajari
bagaimana mendesain, mengevaluasi dan mengim-plementasikan sistem komputer yang
interaktif sehingga dapat digunakan oleh manusia dengan mudah ”
Definisi Interaksi Manusia dan Komputer :
1
“Sebuah hubungan antara manusia dan komputer yang mempunyai karakteristik tertentu untuk
mencapai suatu tujuan tertentu dengan menjalankan sebuah sistem yang menggunakan
antarmuka (interface).”
Definisi Antarmuka Manusia dan Komputer

“Media yang memungkinkan manusia berinteraksi dengan komputer untuk memberikan suatu
perintah kepada komputer ”
Bentuk interaksi antara manusia dan komputer memakai antarmuka, pada awal generasi
awal PC menggunakan antarmuka Command Driven, pada sistem ini pemakai diberikan tanda
prompt shell dan pemakai mengetikan perintah untuk mengatur komputer. Sekarang dengan
GUI, pemakai menggunakan mouse untuk memilih menu pilihan yang dikemas dalam bentuk
menu atau ikon. Pemakai tinggal point and click untuk memakai komputer. Bahkan dengan
fasilitas touch screen, pemakai bisa menggunakan jarinya untuk mengatur perintah dalam
komputer (Kadir, Triwahyuni :2003).
Contoh gambar seorang manusia memperhatikan/ berinteraksi dengan komputer,

melalui tampilan layar monitor.
Gambar 1.2 Manusia berinterkasi dengan komputer
Sebuah program aplikasi terdiri dari 2 bagian yaitu:

a. Bagian Antarmuka
Bagian antar muka yang berfungsi sebagai sarana dialog antara manusia dengan komputer.
Gambar 1.3 Contoh antarmuka
2
b. Bagian Aplikasi
Bagian aplikasi yang merupakan bagian yang berfungsi untuk menghasilkan informasi
berdasarkan olahan data yang sudah dimasukan oleh pengguna lewat algoritma yang
diisyaratkan oleh aplikasi tersebut.
Gambar 1.4 Contoh Kode Program
Media antarmuka manusia dan komputer terbagi menjadi 2 yaitu :

a. Media tekstual/ CUI (Character User Interface)
Media Tekstual adalah “bentuk sederhana dialog atau komunikasi antara manusia dan
komputer yang hanya berisi teks dan kurang menarik“.
Contoh tampilan, menu pilihan berbasis teks.
Gambar 1.5 Tampilan Menu berbasis teks
3
Dari gambar tampak tulisan-tulsan berupa pilihan-pilihan untuk kita bekerja membuat
laporan evaluasi program studi. Ada beberapa keterangan di bagian bawahnya. Semuanya
character bukan graphical atau gambar. Dulu program di buat dengan bentuk tampilan
seperti itu, untuk bekerja bisa menggunakan anak panah kiri kanan atas bawah kemudian
di enter. Model tersebut di atas sekarang sudah ketinggalan jaman dan tidak di pakai lagi.
Gambar 1.6 Tampilan form berbasis teks
Untuk mengisi data bisa dilakukan dengan mengisi form seperti pada gambar. Tampak
sederhana sekali tampilan userfacenya. Ada petunjuk perintah di bagian bawahnya.
Contoh listing program dengan Borland C++ :
#include <stdio.h>
#include <conio.h>
main()
{
clrscr();
printf("Selamat Belajar\n");
printf("Borland C++");
getch();
}
/------------------------------------/
OUTPUT dari perintah di atas adalah :
Gambar 1.7 contoh tampilan berbasis teks
4
b. Media GUI (Graphical User Interface) adalah “bentuk dialog atau komunikasi antara
manusia dan komputer yang berbentuk grafis dan sangat atraktif”.
Contoh antarmuka manusia dengan komputer yang berbentuk grafis menggunakan

pemrograman visual (Visual Basic) :
Gambar 1.8 tampilan berbasis grafis
Gambar 1.9 tampilan berbasis grafis
1.2 BIDANG STUDI YANG TERKAIT IMK
Untuk membuat media interaksi manusia dan komputer yang lebih baik maka harus
mempelajari dan memahami bidang ilmu. Tampilan di monitor yang menghubungkan pemakai
(manusia) dengan komputer tentu harus di rancang dengan baik, mudah dipakai,
menyenangkan, ada gambar yang menarik, memakai bahasa yang mudah dimengerti dan lain-
lain. Bidang ilmu yang terkait dengan materi ini adalah :
5
Gambar 1.10 tampilan di monitor
a. Psikologi : Memahami bagaimana pengguna dapat menggunakan sifat dan kebiasaan

baiknya agar dapat menjodohkan mesin dengan manusia sehingga dapat bekerjasama.
b. Ergonomik : Berhubungan dengan aspek fisik untuk mendapatkan lingkungan kerja yang
nyaman ketika berinteraksi dengan komputer.
c. Sosiologi : Berkaitan dengan studi tentang pengaruh sistem manusia dengan komputer
dalam struktur sosial. Misal: Dampak komputerisasi terhadap keberadaan seorang user di
sebuah perusahaan.
d. Ilmu komputer dan teknik : Berhubungan dengan perangkat keras untuk merancang sistem
interaksi manusia dan komputer.
e. Desain grafis dan tipografi : Memanfaatkan gambar sebagai sarana dialog yang cukup
efektif antara manusia dan komputer.
f. Antropologi : Pandangan mendalam tentang cara kerja berkelompok yang masing-masing
anggotanya diharapkan memberikan kontribusi teknologi pengetahuan sesuai dengan
bidangnya masing-masing.
g. Linguistik : Bahasa merupakan sarana komunikasi yang akan mengarahkan pengguna
ketika ia berinteraksi dengan komputer.
Gambar 1.11 ilustrasi hubungan IMK dengan ilmu lain
6
1.3 PIRANTI BANTU PENGEMBANGAN SISTEM
Untuk mempercepat proses perancangan dan pengembangan antarmuka (interface)
diperlukan piranti pengembangan sistem seperti pemrogaman visual (Visual Basic, Visual
Foxpro, Delphi, Visual C++ dan lain-lain).
Gambar1.12 Tampilan awal Visual Basic 6.0
Gambar 1.13 Tampilan Delphi
Keuntungan menggunakan piranti bantu adalah :

• Antarmuka yang dihasilkan menjadi lebih baik
• Program antarmukanya menjadi mudah, lebih cepat ditulis dan lebih ekonomis dalam
pemeliharaannya.
1.4 PENGELOMPOKAN PIRANTI BANTU
Berdasarkan fungsinya piranti bantu terbagi menjadi 2 yaitu :

• Piranti bantu Aplikasi (Application Software)
7
Program yang biasa dipakai oleh pemakai untuk melakukan tugas-tugas, misalnya
membuat dokumen, manipulasi photo dan membuat laporan.
• Piranti bantu Sistem (System Software)
Program yang digunakan untuk mengontrol sumberdaya komputer seperti CPU dan
hardware masukan/keluaran.
1.5 STRATEGI PENGEMBANGAN ANTARMUKA

Beberapa hal yang harus diperhatikan dalam pengembangan antarmuka/ Interface :
• Pengetahuan tentang mekanisme fungsi manusia sebagai pengguna komputer.
• Informasi tentang ragam dialog, struktur, isi tekstual dan grafis, tanggapan waktu,
kecepatan tampilan.
• Penggunaan prototipe yang disusun secara bersama-sama antara calon
pengguna dan perancang sistem.
• Teknik evaluasi dengan menggunakan uji coba sejumlah kasus, tanya jawab dan kuisioner.
Tugas 1
1. Apa pengertianmu tentang IMK ?

2. Apa perbedaan interface CUI dan GUI ?
3. Ilmu pengetahuan apa saja yang terkait dengan IMK ?
Kerjakan pada Microsoft Word, Simpan dengan nama Tugas1_namamu, kirim ke alamat
email dosen sebelum pertemuan berikutnya !
8
BAB 2
FAKTOR MANUSIA
Gambar 2.1 Manusia bekerja dengan komputer
Sistem adalah kumpulan dari elemen yang saling terkait dengan tujuan tertentu. Dalam
sistem komputer ada aspek-aspek yang harus diperhitungkan agar bisa berjalan dengan baik.
2.1 TIGA ASPEK SISTEM KOMPUTER
a. Aspek Perangkat Keras (Hardware).

Serangkaian unsur-unsur yang terdiri dari beberapa perangkat keras komputer yang
digunakan untuk membantu proses bekerja manusia (Brainware ). Contoh : CPU, Monitor,
Keyboard, Harddisk, Disk drive, printer, mouse, Barcode Reader, Komputer Tablet, Laptop,
netbook dll. Semua alat yang terkait komputer masuk pada aspek ini.
b. Aspek Perangkat Lunak (Software).
Serangkaian unsur-unsur yang terdiri dari beberapa perangkat lunak program komputer
yang digunakan untuk membantu proses kerja manusia (Brainware). Contoh : Sistem
Software, Application Software, Package Software. Semua program yang dipakai, sistem
operasi, bahasa pemrograman, program aplikasi yang di instal termasuk dalam pengertian
perangkat lunak.
c. Aspek Manusia (Brainware).
Tenaga pelaksana yang menjalankan serta mengawasi pengoperasian sistem unit komputer
didalam proses pengolahan data untuk menghasilkan suatu informasi yang tepat waktu,
tepat guna dan akurat. contoh : Sistem Analis, Programmer, operator, Technical Support.
9
Manusia dalam berbagai profesi dan kemampuan, yang bekerja dengan menggunakan
komputer.
2.2 FAKTOR MANUSIA

Manusia selaku pembuat program atau programmer dalam merancang antarmuka harus
memperhitungkan banyak hal agar rancangannya bisa diterima dengan baik. Hal ini harus dan
penting karena program dipakai oleh orang yang bermacam-macam fisiknya, tua muda, besar
kecil, laki-laki atau perempuan, normal atau kurang normal panca indranya. Programmer harus
berpikir luas dan mempertimbangkan berbagai macam pengguna. Berbagai hal yang harus
dipertimbangkan adalah:
Gambar 2.2 Manusia
1. Penglihatan
Pada saat bekerja dengan komputer, mata manusia sangat penting untuk berinteraksi.
Banyaknya manusia pemakai komputer ada yang normal atau kurang normal matanya
misalnya plus atau minus, perlu diperhatikan. Beberapa pengertian terkait penglihatan
adalah :
a. Luminas : Banyaknya cahaya yang dipantulkan oleh permukaan obyek. Satuannya lilin/
m2 . Luminans semakin besar maka rincian obyek yang dapat dilihat mata akan semakin
bertambah.
b. Kontras : Hubungan antara cahaya yang dikeluarkan oleh suatu obyek dan cahaya dari
latar belakang obyek. Atau selisih antara luminans obyek dengan latar belakangnya
dibagi dengan luminans latar belakang.
c. Kecerahan : Tanggapan subjektif pada cahaya. Luminans yang tinggi berimplikasi pada
kecerahan yang tinggi pula.
d. Sudut dan Ketajaman Penglihatan : sudut penglihatan didefinisikan sebagai sudut yang
berhadapan oleh obyek pada mata. Sudut penglihatan minimum ketika mata masih
dapat melihat sebuah obyek dengan jelas
10
e. Medan Penglihatan : udut yang dibentuk ketika mata bergerak ke kiri terjauh dan ke
kanan terjauh, di bagi 4 daerah :
• Penglihatan binokuler : kedua mata mampu melihat sebuah obyek dalam keadaan
sama.
• Monokuler kiri : tempat terjauh yang dapat dilihat oleh mata kiri ketika mata kiri
kita gerakkan ke sudut paling kiri.
• Monokuler kanan : tempat terjauh yang dapat dilihat oleh mata kiri ketika mata kiri
kita gerakkan ke sudut paling kanan.
• Daerah buta daerah yang sama sekali tidak dapat dilihat kedua mata.
f. Warna : Keselarasan penggunaan warna
Mata normal mampu membedakan 128 warna yang berbeda. Penggunaan warna dalam
penampilan informasi pada monitor merupakan isu yang menarik. Warna yang sesuai
akan mempertinggi efektifitas tampilan grafis, tapi jika tidak sesuai dengan pengguna
justru penggua akan menerima informasi yang salah. Tidak ada standar / acuan resmi
untuk penggunaan warna yang bagus karena perspektif tiap orang berbeda.
Tabel 2.1 Kombinasi warna terbaik

Latar Garis Tipis & Teks Garis Tebal & Teks
Belakang
Putih Biru 94%, Hitam 63%, Merah 25% Hitam 69%, biru 63%, Merah 31%
Hitam Putih 75%, Kuning 63% Kuning 69%, Putih 59%, Hijau 25%
Merah Kuning 75%, Putih 56%, Hitam 44% Hitam 50%, Kuning 44%, Putih 44%,
Cyan 31%
Hijau Hitam 100%, Biru 56%, Merah 25% Hitam 69%, Merah 63%, Biru 31%
Biru Putih 81%, Kuning 50%, Cyan 25% Kuning 38%, Magenta 31%, Hitam
31%, Cyan 31%, Putih 25%
Cyan Biru 69% Hitam 56%, Merah 37% Merah 56%, Biru 50%, Hitam 44%,
Magenta 25%
Magenta Hitam 63%, putih 56%, Biru 44% Biru 50%, hitam 44%, Kuning 25%
Kuning Merah 63%, Biru 63 %, Hitam 56% Merah 75%, Biru 63%, Hitam 50%
Pemakaian warna dalam program aplikasi harus di atur sedemikian rupa, sehingga mata
tidak harus melakukan penyesuaian berulang kali.
Gambar 2.3 Campuran warna
11
Petunjuk dari Aspek Psikologis
Hindari penggunaan tampilan yang secara simultan, menampilkan warna tajam. Merah,
jingga, kuning dan hijau dapat dilihat bersama-sama tanpa perlu pemfokusan kembali,
tetapi cyan, biru dan merah tidak dapat dilihat secara serempak dengan mudah.
Pemfokusan kembali mata yang berulang-ulang akan menyebabkan kelelahan
penglihatan.
Tabel 2.2 Kombinasi warna terjelek

Latar Garis Tipis & Teks Garis Tebal & Teks
Belakang
Putih Kuning 100%, Cyan 94% Kuning 94%, Cyan 75%
Hitam Biru 87%, Merah 44%, Magenta 25% Biru 81%, Magenta 31%
Merah Magenta 81%, Biru 44%, Hijau & Magenta 69%, Biru 50%, Hijau
Cyan 25% 37%, Cyan 25%
Hijau Cyan 81%, Magenta 50%, Kuning Cyan 81%, Magenta & Kuning
37% 44%
Biru Hijau 62%, Merah & Hitam 37% Hijau 44%, Merah & Hitam 31%
Cyan Hitam 81%, Kuning 75%, Putih 31% Kuning 69%, Hijau 62%, Putih
56%
Magenta Hijau 75%, Merah 56%, Cyan 44% Cyan 81%, Hijau 69%, Merah 44%
Kuning Putih & Cyan 81% Putih 81%, Cyan 56%, Hijau 25%
• Hindarkan warna biru murni untuk teks, garis tipis dan bentuk yang kecil. Mata kita
tidak diset untuk rancangan yang terinci, tajam dan bergelombang pendek.
• Hindarkan warna berdekatan yang hanya berbeda dalam warna biru. Sudut-sudut
yang berbeda hanya pada prosentase warna biru akan terlihat sama.
• Pengamat yang lebih tua perlu aras ketajaman yang lebih untuk membedakan
warna.
• Warna akan berubah kenampakannya ketika aras cahaya sekeliling berubah.
Tampilan akan berubah warna di bawah cahaya sekeliling yang berbeda. Perubahan
juga terjadi karena ada penambahan / penurunan kontras serta pergeseran
sensitifitas mata.
• Besarnya perubahan warna yang dapat dideteksi bervariasi untuk warna yang
berbeda. Perubahan kecil merah dan ungu sukar dideteksi dibanding kuning dan
biru-hijau. Mata kita tidak siap merasakan perubahan warna hijau.
• Hindarkan merah dan hijau yang ditempatkan secara berseberangan pada tampilan
berskala besar. Yang cocok biru dan kuning.
• Warna yang berlawanan bisa dipakai bersama-sama. Merah dengan hijau atau
kuning dengan biru, kombinasi yang baik untuk tampilan sederhana. Kombinasi
merah dengan kuning atau hijau dengan biru menghasilkan citra yang jelek.
• Untuk pengamat yang mengalami kekurangan dalam melihat warna, hindarkan
perubahan warna tunggal.
Petunjuk Dari Aspek Perseptual

• Kita perlu perubahan besar dalam panjang gelombang agar dapat merasakan
perubahan warna pada suatu bagian spektrum dan perubahan yang lebih kecil pada
bagian spektrum yang lain.
12
• Luminans tidak sama dengan kecerahan.Dua luminans yang sama tapi beda warna
menyebabkan perbedaan kecerahan.
• Ketajaman (lightness) dan kecerahan (brightness) dapat dibedakan pada bentuk
tercetak tapi tidak pada tampilan warna.
• Tidak semua warna mudah dibaca. Warna latar belakang gelap seperti merah, biru,
magenta, coklat dll akan memberi kenampakan yang lebih baik dibanding warna
yang lebih cerah.
Petunjuk Dari Aspek Kognitif

• Jangan menggunakan warna yang berlebihan. Gunakan warna yang berpasangan
untuk menarik perhatian atau pengelompokan informasi.
• Warna yang sama “membawa” pesan serupa.
• Kecerahan akan menarik perhatian.
• Warna hangat dan dingin sering dipakai untuk menunjukkan aras tindakan. Warna
hangat perlu tindakan/ tanggapan, warna dingin menunjukkan status atau informasi
latar belakang.
2. Pendengaran
Manusia mendengar dengan indera telinga. Kemampuan mendengar antar manusia yang
satu dengan yang lain berbeda-beda. Kebanyakan manusia mendeteksi suara dalam
frekuensi 20 Hertz – 20 Khertz. Manusia juga mendengar suara antara 50 dB (decible) – 70
dB. Telinga manusia akan rusak mendengar lebih dari 140 dB. Manusia tidak mendengar
frekuensi kurang dari 20 dB.
3. Sentuhan
Dalam bekerja manusia juga menggunakan tangan untuk menyentuh sesuatu. Sentuhan
merupakan sarana manusia untuk berinteraksi. Sebagai contoh dalam penggunaan papan
ketik (keyboard) atau tombol, maka manusia akan lebih nyaman apabila tombol atau
keyboard tidak berat proses penekanannya. Perkembangan teknologi mengarah pada
pemakaian komputer dengan sistem sentuhan layar atau touch screen.
4. Pemodelan Sistem Pengolahan

Model sistem pengolahan manusia terdiri dari pengolahan perseptual, pengolahan
intelektual dan pengendalian motorik yang beinteraksi dengan memori manusia. Model
sistem komputer terdiri dari pengolah (processor) dan memori. Interaksi keduanya melalui
bus.
5. Pengendalian Motorik
Motorik pada manusia dapat dilatih untuk mencapai taraf tertentu seperti mengetik 10 jari
untuk kecepatan 1000 huruf permenit
13
Gambar 2.4 Manusia bekerja dengan komputer
Tugas 2
1. Apa pengertianmu tentang Brainware ?

2. Sebutkan panca indra manusia yang dipakai pada saat interaksi dengan komputer !
3. Sebutkan kombinasi warna yang warna !
14
BAB 3
PIRANTI INTERAKTIF
Gambar 3.1 Komputer
Ada banyak peralatan dalam sistem komputer. Untuk berinteraksi dengan komputer
diperlukan alat-alat untuk memasukkan data (input device) dan mengeluarkan hasil olahan
(output device). Berikut ini di bahas berbagai alat yang dipakai manusia untuk berinteraksi
dengan komputer.
3.1 KEYBOARD
Gambar 3.2 Keyboard
15
Tombol pada papan ketik (keyboard) dikelompokkan menjadi 4 bagian :
a. Tombol Fungsi (function key)
b. Tombol Alphanumerik (alphanumeric key)
c. Tombol Kontrol (control key)
d. Tombol Numerik (numeric key)
Jenis-jenis tata letak papan ketik (keyboard) yaitu :

a. Tata Letak QWERTY
Gambar 3.3 Keyboard QWERTY

b. Tata Letak Dvorak
Gambar 3.4 Keyboard Dvorak
c. Tata Letak Alphabetik
Gambar 3.5 Keyboard Alhabetik
d. Tata Letak Klockenberg
Gambar 3.6 Keyboard Klockenberg
16
e. Papan Ketik untuk penyingkatan kata, dibagi menjadi 2 yaitu :
- Tata letak Palantype
Gambar 3.7 Keyboard Palantype
- Tata letak Stenotype
Gambar 3.8 Keyboard Stenotype

f. Papan Tombol Numerik
Gambar 3.9 Papan Tombol Numerik
3.2 PENUNJUK
“Peranti interaktif yang digunakan untuk menunjuk/menuding atau menempatkan kursor
pada suatu posisi dilayar tampilan dan untuk mengambil suatu item informasi untuk
dipindahkan ketempat lain “.
Peranti interaktif harus memenuhi syarat yaitu “ dalam pengontrolan kursor harus ada
umpan balik (feedback) yang segera nampak dilayar komputer ketika ada gerakan peranti
interaktif “.
Perbandingan (ratio) kontrol/tampilan :

Gerakan tangan atau respon
K/T = -----------------------------------------
Gerakan kursor
17
Peranti penujuk (pointing device) atau penuding dan pengambil terdiri dari :
a. Mouse
Gambar 3.10 Mouse Mekanis
• Mouse Mekanis : Bola yang terdapat di mouse akan menggerakan beberapa sensor
ketika mouse digerakan.
Gambar 3.11 Mouse Optic
• Mouse Optic : Terdiri dari 2 LED (Light Emitting Diode) dan 2 lensa (photo-
transistor) untuk medeteksi gerakan. Salah satu LED akan mengeluarkan cahaya
berwarna merah dan LED yang lain mengeluarkan cahaya inframerah
b. Joystick : Gerakan kursor dikendalikan oleh gerakan tuas atau dengan tekanan pada
tuas. Biasa dipakai untuk aplikasi permainan (game).
Gambar 3.12 Joystick
18
c. Trackball : Prinsip kerjanya sama dengan mouse, tapi berbeda dalam cara penggunaanya.
Yaitu dengan memutar bola trackball dengan tangan ke arah yang di kehendaki.
Gambar 3.13 Trackball
d. Pointing Stick : Prinsip kerjanya sama dengan mouse dan cara penggunaannya sama
dengan trackball
Gambar 3.14 Pointing Stick
e. Touch Pad : penunjuk berupa tempat datar guna menggeser penunjuk pada layar/
monitor dengan cara menggeserkan tangan di atasnya.
Gambar 3.15 Touch Pad
f. Touch Screen atau layar sentuh adalah piranti penunjuk berupa monitor yang sangat
peka sehingga memungkinkan pemakai untuk menunjuk dan menyentuh gambar di
layar secara langsung guna mengaktifkan perintah.
19
Gambar 3.16 Touch Screen
g. Digitizing tablet / Graphics tablet : Peranti pengambil data dalam bentuk sederatan
koordinat (x,y) yang menentukan gerakan pena pada media digitasi.
Gambar 3.17 Digitizing Tablet
h. Light Pen : Prinsip kerjanya adalah memantau selisih antara waktu saat elektron mulai
melakukan gerakan dan pada saat lokasi tempat pena menyala.
Gambar 3.18 Light Pen
3.3 PENGAMBIL GAMBAR TERFORMAT

Dipergunakan untuk mengambil citra terformat, bentuk dan format hurufnya sudah
ditentukan. Kategori peranti ini adalah :
a. Bar code Reader
Gambar 3.19 Barcode
20
Gambar 3.20 Barcode Reader
Pola garis-garis hitam putih yang sering djumpai pada barang-barang yang dijual di
toko swalayan.
b. Magnetic Ink Character Recognation (MICR)
Gambar 3.21 MICR
Digunakan untuk membaca karakter-karakter khusus yang dicetak dengan tinta khusus
pula. Karakter yang telah dicetak dengan tinta dimagnetisasi oleh Peranti MICR,
sehingga dapat dibaca dan diterjemahkan menjadi sinyal digital.
c. Optical Mark Recognation (OMR)
Gambar 3.22 OMR
21
Peranti yang membaca tulisan pensil dan mengubahnya menjadi bentuk yang dapat
dibaca oleh komputer dengan bantuan refleksi optik dengan mengenali ketebalan
tulisan.
d. Optical Character Recognation (OCR)
Gambar 3.23 OCR
Peranti yang dapat membaca teks dengan mengonversikannya ke dalam kode digital.
Dapat mengubah teks menjadi suara, merekam naskah.
e. Kode QR atau QR Code

Adalah bentuk evolusi dari kode batang atau bar code dari satu dimensi menjadi dua
dimensi. Penggunaan kode QR sudah sangat lazim di Jepang Hal ini dikarenakan
kemampuannya menyimpan data yang lebih besar dari pada kode batang sehingga
mampu mengkodekan informasi dalam bahasa Jepang sebab dapat menampung
huruf kanji. Kode QR telah mendapatkan standardisasi internasional dan standardisasi
dari Jepang berupa ISO/IEC18004 dan JIS-X-0510 dan telah digunakan secara luas
melalui ponsel di Jepang.
Gambar 3.24 QR Code
Kode QR berfungsi bagaikan hipertaut fisik yang dapat menyimpan alamat dan URL,
nomer telepon, teks dan sms yang dapat digunakan pada majalah, surat harian, iklan,
pada tanda-tanda bus, kartu nama ataupun media lainnya. Atau dengan kata lain sebagai
penghubung secara cepat konten daring dan konten luring. Kehadiran kode ini
memungkinkan audiens berinteraksi dengan media yang ditempelinya
22
melalui ponsel secara efektif dan efisien. Pengguna juga dapat menghasilkan dan
mencetak sendiri kode QR untuk orang lain dengan mengunjungi salah satu dari beberapa
ensiklopedia kode QR .
Selain itu, desain QR memungkinkan penggunanya untuk memasukkan logo perusahaan,

klip video ataupun foto ke kode QR, tanpa menghilangkan substansi informasi apapun
dari sumber yang dimasukkan. Contoh penggunaan kode QR yang didalamnya memuat
konten klip video adalah kode QR yang digunakan oleh kelompok penyanyi
dari Inggris bernama Pet Shop Boys pada tahun 2007. Ketika kode dipindai dengan
benar, maka pengguna akan diarahkan ke situs Pet Shop Boys. Selain itu pada
tahun 2009 kode QR digunakan untuk kampanye pemasaran Movie 9 di San Diego
Comic Con. Pada saat itu, pelanggan diberikan kartu yang menampilkan kode QR yang
telah terintegrasi dengan karya seni yang bersangkutan. Jadi, pelanggan dapat mengakses
cuplikan film melalui kode QR tersebut.
Gambar 3.25 Memotret QR Code
Kode QR dapat dimanfaatkan sebagai keamanan makanan dengan cara menambahkan

kode QR yang berisikan data-data mengenai kandungan nutrisi dan masa kadaluarsa pada
tiap label makanan sehingga pelanggan dapat merasa lebih aman dalam memilih
makanan yang dibeli sebab mereka dapat mengetahui informasi-informasi tentang
makanan tersebut. Di Jepang, hal ini telah diterapkan oleh McDonald. Terdapat 19 jenis
"sandwich" yang diberi kode QR yang mengandung informasi alergi, jumlah kalori dan
nutrisi yang terkandung dalam sandwich tersebut. Selain itu kode QR juga dapat
diberikan di halte bus, sehingga penumpang dapat mengetahui keberadaan bus yang
sedang ditunggu. Cara kerjanya adalah dengan memberikan hipertaut ke
kamera CCTV di setiap jalan melalui koneksi internet pada ponsel. Lebih lanjut lagi,
kode QR dapat dipasang pada kartu pelajar, sehingga akan mempermudah proses absensi
siswa, dan mempermudah akses bagi para siswa,guru, dan orang tua murid kepada
informasi proses belajar mengajar.
Kode QR memiliki kapasitas tinggi dalam data pengkodean, yaitu mampu menyimpan
semua jenis data, seperti data numerik, data alphabetis, kanji, kana, hiragana, simbol
dan kode biner. Secara spesifik, kode QR mampu menyimpan data jenis numerik sampai
dengan 7.089 karakter, data alphanumerik sampai dengan 4.296 karakter, kode binari
sampai dengan 2.844 byte, dan huruf kanji sampai dengan 1.817 karakter. Selain itu kode
QR memiliki tampilan yang lebih kecil daripada kode batang. Hal ini dikarenakan kode
QR mampu menampung data secara horizontal dan vertikal, oleh karena itu secara
otomatis ukuran dari tampilannya gambar kode QR bisa hanya seperspuluh dari ukuran
sebuah kode batang. Tidak hanya itu kode QR juga tahan terhadap kerusakan, sebab kode
QR mampu memperbaiki kesalahan sampai dengan 30%. Oleh karena itu, walaupun
sebagian simbol kode QR kotor ataupun rusak, data tetap dapat disimpan dan dibaca.
23
Tiga tanda berbentuk persegi di tiga sudut memiliki fungsi agar simbol dapat dibaca
dengan hasil yang sama dari sudut manapun sepanjang 360 derajat
3.4 PENGAMBIL GAMBAR TAK TERFORMAT

Dipergunakan untuk mengambil gambar atau citra yang belum memiliki format baku.
Kategori peranti ini adalah :
a. Image Scanner : Peranti yang dapat mengambil masukan data gambar, foto bahkan juga
tulisan tangan. Hasilnya kemudian diubah menjadi menjadi isyarat digital.
Gambar 3.26 Scanner
b. Kamera Digital : Mengubah citra optik ke sebuah replika film atau elektronis.
Menggunakan lensa untuk membuat citra dari sebuah obyek.
Gambar 3.27 Kamera Digital
c. Pembaca Retina Mata : Berfungsi membaca retina mata dan menghasilkan identitas
retina mata.
Gambar 3.28 Pembaca Retina Mata
24
3.5 GERAKAN
Peranti yang digunakan untuk memantau gerakan manusia yang banyak dimanfaatkan
pada virtual reality adalah :
a. Headset : Peranti yang dipasang di kepala, menutup mata, yang digunakan untuk
menangkap dan merekam gerakan kepala, serta menayangkan berbagai macam
gambar ke mata pemakai.
b. Glove : Peranti berbentuk sarung tangan yang digunakan untuk merekam jenis serta
kekuatan gerakan jari dan tangan pemakai.
Gambar 3.29 Glove
3.6 LAYAR TAMPILAN

Layar monitor terus dikembankan terbagi dalam CRT (Cathode Ray Tube) dan layar
datar (flat panel display). Umumnya berukuran 14 inch, resolusi 1024 x 768 artinya monitor
mengandung 1024 baris piksel dan 768 kolom piksel. Makin tinggi resolusinya maka
gambarnya semakin bagus. Piksel berasal dari picture element). Dot pitch (dp) adalah jarak
antara dua piksel, makin dekat makin bagus karena gambar terlihat makin halus, .28 dp berarti
jarak antara dua piksel adalah 28/100 mm.
a. Pengingat digital (frame buffer)
Citra yang akan ditampilkan ke layar disimpan sebagai matrix nilai elemennya
menunjukkan intensitas dari citra grafis yang akan ditampilkan.
b. Pengendali tampilan (display controller)
Berfungsi untuk melewatkan isi pengingat digital dan mengolahnya untuk di tampilkan
ke layar.
Gambar monitor
Gambar 3.30 Monitor
• Pada pengingat digital (frame buffer), citra grafis ditampilkan sebagai pola bit.
• Dengan mengolah pola bit menjadi pixel.Untuk gambar hitam-putih, warna hitam
menggunakan bit 1 dan warna putih menggunakan bit 0.
c. Pengolah Tampilan (display processor)
Bagian yang mengubah pola bit dari pengingat digital menjadi tegangan analog, yang
selanjutnya akan membangkitkan elektron yang digunakan untuk menembak fosfor
pada layar tampilan.
25
Jenis adapter atau pengolah tampilan yang digunakan pada komputer adalah :
• MDA (Momochrome Display Adapter) : punya 2 warna
Gambar 3.31 Monitor MDA
• CGA (Color Graphics Adapter) : di buat oleh IBM tahun 1981, punya variasi 4
warna, resolusi 329 x 200 piksel.
Gambar 3.32 Monitor CGA
• EGA (Enhanced Graphic Adapter) : muncul tahun 1984, punya 16 warna, resolusi
640 x 350 piksel.
• VGA (Video Graphics Array) : muncul tahun 1987 pada komputer 80386 atau
80486. Punya 256 warna.
Gambar 3.33 Monitor VGA
26
• SVGA (Super Video Graphics Array) : punya jumlah piksel 800 x 600 artinya punya
800 baris dan 600 kolom piksel, dapat menghasilkan 16 juta warna, biasanya 14
atau 15 inch.
Gambar 3.34 Monitor SVGA
• XGA (Extended Graphics Array) : punya jumlah piksel 1024 x 768, menghasilkan
65.536 warna, biasaya 17 atau 19 inch.
• SXGA (Super Extended Graphics Array) : punya jumlah piksel 1280 x 1024,
biasaya 19 atau 21 inch.
• UXGA (Ultra Extended Graphics Array) : punya jumlah piksel 1600 x 1200,
biasaya 21 inch di rancang untuk desain grafis.
d. Tipe Layar Tampilan

Beberapa jenis tipe layar tampilan :
• Direct-drive Monochrome Monitor
• Composite Monochrome Monitor
• Composite Color Monitor
• Red-Green-Blue Monitor
• Variable Frequency
Tugas 3
1. Sebutkan peralatan input unit !

2. Sebutkan perkembangan bermacam-macam monitor !
3. Apa pengertianmu tentang QR Code ?
27
BAB 4
RAGAM DIALOG
Gambar 4.1 Dialog manusia dengan komputer
Ragam dialog (Dialoque Style) : “Cara yang digunakan untuk mengorganisasikan

berbagai tehnik dialog”
4.1 SIFAT RAGAM DIALOG

a. Inisiatif
Pengguna memberikan tanggapan atas prompt yang berikan oleh komputer untuk
memasukkan perintah atau parameter perintah
b. Keluwesan
Pengguna mempunyai kesempatan melakukan customizing dan memperluas antarmuka
dari sebuah sistem untuk memenuhi kebutuhan.
c. Kompleksitas
Pengelompokan dalam menerapkan model yang diinginkan pengguna ke dalam sistem dan
hal ini dapat diperoleh dengan menggunakan hirarkhi atau ortogonalitas atau keduanya.
d. Kekuatan
Kekuatan didefinisikan sebagai jumlah kerja yang dapat dilakukan oleh sistem untuk setiap
perintah yang diberikan oleh pengguna.
e. Beban Informasi
28
Dalam hal ini menitik beratkan pada penyajian informasi yang dihasilkan komputer kepada
pengguna. Agar penyampaian informasi itu dapat berdaya guna dan beban informasi yang
terkandung di dalam suatu ragam dialog seharusnya disesuaikan dengan aras pengguna.
Gambar 4.2 bentuk dialog dalam program
4.2 KARAKTERISTIK RAGAM DIALOG

a. Konsistensi
Sistem yang konsisten akan mendorong pengembangan mentalitas dengan memberikan
petunjuk kepada pengguna untuk mengekstrapolasi pengetahuan yang ia miliki untuk
memahami perintah yang baru lengkap dengan pilihan yang ada.
b. Umpan Balik
Pada ragam dialog jika pengguna melakukan kesalahan komputasi, maka program akan
menampilkan suatu pesan kesalahan.
c. Observabilitas
Sistem dikatakan mempunyai sifat observabilitas apabila sistem itu berfungsi secara benar
dan nampak sederhana bagi pengguna, meskipun sesungguhnya pengolahan secara
internalnya sangat rumit.
d. Kontrolabilitas
Kontrolabilitas merupakan kebalikan dari observabilitas, dan hal ini berimplikasi bahwa
sistem selalu berada di bawah kontrol pengguna. Agar hal ini tidak tercapai, antarmukanya
harus mempunyai sarana yang memungkinkan pengguna untuk dapat melakukan kendali.
e. Efisiensi
Efisiensi melibatkan unjuk kerja manusia dan komputer secara bersama-sama adalah
throughput yang diperoleh dari kerjasama tersebut.
f. Keseimbangan
Strategi yang diambil dalam perancangan sistem manusia komputer haruslah dapat
membagi-bagi pekerjaan antara manusia dan komputer seoptimal mungkin.
4.3 KATEGORI RAGAM DIALOG

Dalam berinteraksi dengan komputer terdapat berbagai cara yang bisa dilakukan oleh
manusia.
29
a. Dialog berbasis perintah tunggal (Command line dialogue).
“Perintah-perintah tunggal yang dioperasikan tergantung dengan sistem operasi komputer
yang dipakai “. contoh :
• DOS (dir, delete, format, copy, dll)
• Unix / Linux (ls, vi, who, passwd, dll)
b. Dialog berbasis bahasa pemrograman (Programming language dialogue).

“Dialog yang dikemas sejumlah perintah ke dalam suatu bentuk berkas (file) berupa batch
file”.
c. Antarmuka berbasis bahasa alami (Natural language interface).

“Dialog yang berisikan instruksi-instruksi dalam bahasa alami (manusia) yang
diterjemahkan oleh sistem penterjemah“.
d. Sistem Menu
“Dialog yang menampilkan daftar sejumlah pilihan dalam jumlah terbatas” Sistem Menu
terbagi menjadi 2 yaitu :
• Sistem Menu Datar (Selektor pilihan atau Penggunaan Tanda terang (highlight marker)
• Sistem Menu Tarik (Pulldown)
e. Dialog berbasis pengisian formulir (Form filling dialogue).

“Dialog dimana pengguna (user) dihadapkan ke suatu bentuk formulir dilayar komputer
yang berisi sejumlah pengisian data dan opsi (option) yang telah ditentukan”.
f. Antarmuka berbasis ikon (icon)

“Dialog yang menggunakan simbol atau tanda untuk menunjukan suatu pilihan aktifitas
tertentu”.
g. Sistem Penjendelaan
“Sistem antarmuka yang memungkinkan pengguna untuk menampilkan berbagai informasi
pada satu atau lebih jendela (window)“.
Ada beberapa fungsi yang dapat dimanfaatkan oleh dengan adanya dialog berbasis jendela
ini, yaitu :
• Lebih banyak informasi yang bisa ditampilkan.
• Kemungkinan memasukkan lebih dari sebuah sumber informasi.
• mengkombinasikan sejumlah sumber informasi yang berbeda.
• Pengendalian secara bebas dari setiap program yang ada.
• Sebagai saran untuk mengingatkan, bisa digunakan sebagai sarana untuk penyajian
berganda.
Jenis-jenis jendela (window) :

• Jendela TTY (TeleTYpe atau TeleTYpewriter)
Jendela TTY merupakan jenis jendela yang paling sederhana. Secara sekilas jenis
jendela ini mirip dengan tampilan apa adanya karena jendela TTY hanya terdiri atas
sebuah jendela yang mempunyai fasilitas pemindahan halaman (scrolling) secara
otomatis pada satu arah.
Contoh sederhana dari jendela TTY adalah jendela (tampilan) pada saat Anda berada
pada dot prompt.
30
• Time-Multiplexed Windows
Pemikiran yang mendasari digunakannya istilah time-multiplexed windows adalah
bahwa layar tampilan merupakan sumber daya yang bisa digunakan secara bergantian
oleh sejumlah jendela pada waktu yang berlainan. Jenis jendela ini banyak diterapkan
pada editor teks
• Space multiplex window

Dalam space-multiplexed windows, lebar layar dibagi bagi menjadi beberapa jendela
dengan ukuran yang bervariasi, dan jenis jendelanya dapat ditentukan berdasarkan
ketergantungan antara satu bisa diletakkan “diatas” jendela yang lain, dan apakah
masing-masing jendela bisa diubah ukurannya. Contoh sistem jendela pada perangkat
lunak Bravo, pada pengolah kata Word Perfect versi DOS misalnya Word Perfect versi
5.0 atau 5.1, pada Lotus 123 versi DOS
• Non Homogen
Dua dari beberapa jenis jendela homogen adalah ikon, dan zooming window. Pada
zooming window, pengguna dapat melihat bagian tertentu dari obyek yang diamati
secara lebih terinci, karena jendela ini dapat di perbesar maupun diperkecil sesuai
dengan kebutuhan
i. Manipulasi Langsung.
Pengertian “Penyajian langsung aktifitas kepada pengguna (user) sehingga aktifitas akan
dikerjakan oleh komputer ketika pengguna memberikan instruksi langsung yang ada pada
layar komputer“.
Penerapan :
• Kontrol Proses
• Editor Teks
• Simulator
• Kontrol Lalu lintas penerbangan
• Perancangan Bentuk/model (computer aided design)
j. Antarmuka Berbasis Interaksi Grafis.

“Dialog berbentuk pesan atau informasi pada suatu gambar atau link yang tampil ketika
pengguna melakukan suatu aktifitas“.
Tugas 4
1. Apa pengertian ragam dialog ?

2. Apa saja sifat ragam dialog ?
3. Buatlah interface suatu dialog yang menarik!
31
BAB 5
DESAIN ANTARMUKA
Gambar 5.1 Ilustrasi bekerja dengan komputer
Perkembangan dalam desain antarmuka mengikuti perkembangan perangkat keras

komputer, tampilan yang dulu sederhana, dengan variasi warna sedikit, sekarang bisa dibuat
jauh lebih bagus dengan variasi warna yang sangat menarik. Kalau dulu harus berpikir dalam
menuliskan perintah, sekarang tinggal tunjuk dan pilih.
5.1 DASAR DESAIN INTERFACE

a. Merefleksikan Model Mental User
Merefleksikan kombinasi pengalaman dunia riil, pengalaman dari software lain, dan
penggunaan komputer secara umum.
b. Explicit and Implied Action
• Explicit actions : Kondisi yang jelas dalam memberikan petunjuk untuk manipulasi
suatu obyek.
• Implied actions : Kondisi yang hanya memberikan kesan visual untuk memanipulasi
obyek.
c. Direct Manipulation
User mendapatkan dampaknya dengan segera setelah melakukan suatu aksi.
d. User Control
Mengijinkan user mengontrol dan menginisialisasi aksi.
e. Feedback and Communication
Selalu memberitahukan user apa yang terjadi dari suatu aksi.
f. Consistency
User dapat mentransfer pengetahuan dan kemampuan dari suatu aplikasi ke aplikasi lain.
g. WYSIWYG (What You See Is What You Get)
32
Tidak ada perbedaan antara yang dilihat di layar dengan hasil outputnya.
h. Aesthetic Integrity
Informasi diorganisasikan dengan baik dan konsisten dengan prinsip desain visual yang
baik.
5.2 DESAIN SOFTWARE YANG BAIK

a. High Performance, software punya performance yang baik walaupun di pakai secara
bersama-sama oleh banyak pengguna.
b. Mudah digunakan, software bisa digunakan dengan mudah, cepat di pahami oleh pengguna
tanpa kesulitan atau butuh waktu lama untuk memahami.
c. Penampilan yang baik, tampilan software menarik, warna-warni di atur agar bagus dan
nyaman di pakai, menyenangkan bagi pengguna dan tidak membosankan.
d. Reliability, software handal fungsinya, menghasilkan output seperti yang di harapkan.
e. Mampu beradaptasi terhadap adanya perkembangan ilmu pengetahuan dan teknologi.
f. Interoperability, software bisa berinteraksi dengan software lain misalnya adanya fasilitas
export atau import data dari aplikasi lain yang berbeda.
g. Mobility, software bisa dijalankan pada berbagai macam sistem operasi.
Mengambil Keputusan Dalam Desain

1. Aplikasi semakin membesar dan menjadi semakin lambat prosesnya.
2. User Interface pada aplikasi semakin kompleks.
3. Waktu yang diperlukan untuk mengembangkan fitur-fitur baru menjadi lebih lama.
4. Dokumentasi aplikasi dan dokumen help menjadi lebih melebar.
5. Resiko adanya efek pada fitur yang sudah ada.
6. Meningkatkan waktu yang diperlukan untuk memvalidasi aplikasi
5.3 TIGA MODEL APLIKASI DESAIN LAYOUT

1. Berbasis Dokumen
Microsoft Word
Gambar 5.2 Tampilan Microsoft Word
33
2. Berbasis Non Dokumen
Microsoft Outlook 2003
Gambar 5.3 Tampilan Microsoft Outlook
3. Utilitas
Gambar 5.4 Tampilan Power DVD
5.4 DESIGN INTERFACE
Gambar 5.5 Tablet dengan ilustrasi interface
34
1. Cara Pendekatan
Terdapat 2 pendekatan dalam merancang tampilan yaitu :
a. User centered design approach.
Pendekatan perancangan berbasis pengguna merupakan istilah yang yang pakai untuk
menggambarkan filosofi perancangan. Konsepnya user menjadi pusat dalam proses
pengembangan sistem dan tujuan/sifat-sifat, konteks dan lingkungan sistem semua
didasarkan dari pengalaman pengguna. Hal-hal yang harus diperhatikan :
• Perancangn harus terkait langsung dengan pengguna sesungguhnya atau calon
pengguna melalui berbagai macam cara misalnya interview atau survei. Tujuannya
untuk memahami kognisi, karakter, dan sikap pengguna.
• Perancangan harus mencakup antarmuka pengguna, sistem bantuan, dukungan
teknis serta prosedur instalasi dan konfigurasi.
• Agar sukses diperlukan observasi tentang kelakuan pengguna, evaluasi umpan-
balik yang cermat, wawasan pemecahan terhadap masalah yang ada.
• Sistem yang dikembangkan harus didefinisikan, dirancang dan di uji berulang kali
dengan melibatkan pengguna.
b. User design approach.
Pendekatan perancangan interface yang dibuat oleh programmer untuk user.
Programmer berusaha membuat interface sebaik-baiknya berdasarkan pengalamannya,
setelah jadi diberikan ke user.
2. Prinsip dan Petunjuk Perancangan

a. Urutan Perancangan
• Pemilihan ragam dialog
Dalam memilih ragam dialog dipengaruhi oleh adanya karakteristik pengguna (ada
pengguna pemula, menengah, atau pengguna yang ahli), tipe dialog yang
diperlukan dan adanya kendala teknologi dalam mengimplementasikan ragam
dialog. Ragam dialog dapat berupa sebuah program tunggal atau sekumpulan ragam
dialog yang satu sama lain saling mendukung.
• Perancangan struktur dialog
Ialah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut
untuk membentuk struktur dialog yang sesuai. Pada tahap ini pengguna dilibatkan,
sehingga pengguna bisa memberikan masukan terkait dengan perancangan dialog.
• Perancangan format pesan
Perhatikan tata letak tampilan dan keterangan tekstual secara terinci. Proses
memasukan data harus di atur agar pengguna dalam memasukkan data ke dalam
komputer bisa efektif dan efisien. Misalnya dengan menggunakan kode, barcode,
mengefektifkan penggunaan tombol.
• Perancangan penanganan kesalahan
Penanganan kesalahan yang dilakukan misalnya :
✓ Validasi pemasukan, bila ada data yang tidak sesuai maka harus ada mekanisme
untuk mengulang proses pemasukan data tersebut.
✓ Proteksi pengguna, program memberi peringatan ketika ada pengguna
melakukan suatu tindakan secara tidak sengaja, misalnya penghapusan berkas.
✓ Pemulihan dari kesalahan, tersedianya mekanisme untuk membatalkan tindakan
yang baru saja dilakukan.
✓ Penampilan pesan salah (error message) yang tepat dan sesuai dengan
kesalahan yang terjadi.
• Perancangan struktur data
35
Struktur data dan antar muka harus sesuai, sesulit atau semudah apapun struktur
data yang akan digunakan, struktur data tersebut harus diturunkan dari spesifikasi
antarmuka yang telah dibuat. Hal ini perlu ditekankan agar keinginan pengguna dan
model sistem yang telah dirancang saling mempunyai kecocokan satu sama lain.
b. Perancangan tampilan berbasis teks

Contoh tampilan berbasis teks pada saat Pengisian Data Pribadi
Nama : Arroyan Prilian

Tempat/ Tgl lahir : Klaten, 8 Januari 1980
Alamat : Jalan Palagan 7a Yogyakarta
Kelamin : Laki-laki
Pekerjaan : Wiraswasta
Pendidikan
SD : SD N Ungaran I, Yogyakarta
SMP : SMP N 1 Medan
SMU : SMU N 2 Jakarta
Berjalan : Universitas Merdeka, Jakarta
urut
longgar relevansi
Pengisian Data Pribadi sederhana
Nama : Arroyan Prilian

Tempat/ Tgl lahir : Klaten, 8 Januari 1980
Kelamin : Laki-laki
Alamat : Jalan Palagan 7a Yogyakarta
pengelompokankan
Pendidikan
SD : SD N Ungaran I, Yogyakarta
SMP : SMP N 1 Medan
SMU : SMU N 2 Jakarta
Berjalan : Unmer Jakarta
Pekerjaan : Wiraswasta konsistensi
Gambar 5.6 Tampilan berbasis teks

• Urutan penyajian
Urut-urutan dalam penyajian data harus disesuaikan dengan model pengguna.
Biasanya berdasarkan kesepakatan dengan calon pengguna tentang urutan tampilan
yang akan digunakan.
• Kelonggaran
Penyusunan tata letak dengan memberi jarak spasi yang cukup akan memperindah
dan memudahkan pengguna dalam pencarian suatu teks.
• Pengelompokan
Data-data yang terkait atau sejenis di kelompokkan.
• Relevansi
Tampilkan pesan-pesan yang relevan dengan topik yang ada.
• Konsistensi
36
Perancang konsisten dalam memanfaatkan ruang tampilan yang ada.
• Kesederhanaan
Buatlah informasi tampak sederhana dan mudah di pahami.
c. Perancangan tampilan berbasis Grafis, perlu 5 faktor yaitu:

Tampilan berbasis Grafis menampilkan berbagai macam gambar yang punya makna
tertentu misalnya gambar disket berarti untuk menyimpan, gambar printer berarti untuk
mencetak, gambar gunting untuk menghapus atau memotong dan lain-lain.
• Ilusi pada obyek-obyek.
✓ Pakai obyek yang sesuai dengan aplikasi yang akan dibuat. Jika obyek-obyek
belum ada maka kita dapat mengembangkannya sendiri.
✓ Obyek grafis harus dibuat dengan keyakinan bahwa ia akan dengan mudah
dimengerti oleh pengguna.
✓ Gunakan mekanisme yang konsisten untuk memanipulasi obyek yang akan
muncul dilayar.
• Urutan visual dan fokus pengguna.
Pada antarmuka untuk menarik perhatian pengguna bisa dengan membuat suatu
obyek berkedip, memakai warna tertentu untuk obyek-obyek tertentu, serta
membuat animasi yang akan lebih menarik perhatian pengguna. Penggunaan
rangsangan visual dibuat secukupnya agar pengguna tidak bingung dan merasa
nyaman.
• Struktur Internal.
Pada pengolah kata kita sering menulis beberapa kata yang berbeda dengan kata
yang lain, misal ada kata yang ditebalkan, miring atau diberi garis bawah. Pada
salah satu pengola kata, kita dapat melihat apa yang disebut dengan reveal
code, yakni suatu tanda khusus yang digunakan untuk menunjukkan adanya
perbedaan font style. Reveal code ini tdak akan ikut dicetak, tetapi digunakan untuk
menunjukkan kepada pengguna antara lain tentang font style yang digunakan, batas
kiri dan batas kanan dari halaman teks setrta informasi yang lain. Reveal
code biasanya berupa suatu karakter khusus.
• Kosakata grafis yang konsistensi dan sesuai.
Simbol-simbol obyek atau ikon, memang tidak ada standarnya dan biasanya
disesuaikan dengan kreatifitas perancangnya. Pemakaian simbol yang sudah ada
dapat mempermudah pemahaman pengguna.
• Kesesuaian dengan media.
Media seperti Monitor terus berkembang, semakin bagus mutunya sehingga
tampilan gambar atau obyek dari tahun ke tahun semakin menarik. Karakteristik
khusus dari layar tampilan yang digunakan akan mempunyai pengaruh yang besar
terhadap keindahan “wajah” antarmuka yang akan ditampilkan. Pada layar tampilan
yang masih berbasis pada karakter, misalnya CGA, pemunculan gambar tidak akan
secantik apabila kita menggunakan layar tampilan yang sering disebut dengan
bitmap atau raster display. Dengan semakin canggihnya teknologi layar tampilan
saat ini, kreatifitas perancang dituntut untuk memenuhi permintaan pengguna akan
aspek kenyamanan dan keramahan antarmuka.
d. Waktu tanggap
Waktu tanggap pada saat proses dalam komputer harus diusahakan cepat. Manusia
selalu ingin bergerak cepat, jangan sampai terjadi proses menunggu yang lama dalam
setiap proses dalam komputer.
37
e. Penanganan Kesalahan
Penanganan terhadap kesalahan yang terjadi biasa dilakukan dengan memberi pesan
umpan balik kepada pengguna akan keadaan eksekusi program saat itu. Kesalahan pada
program dapat disebabkan oleh dua hal: pertama kesalahan sintaksis yang bisa dideteksi
kompiler biasa disebut compile-time error dan kedua kesalahan logika ketika program
dijalankan biasa disebut run-time error atau fatal error.
3. Peranti Bantu Sederhana

Perancang seharusnya membuat dokumentasi akan bentuk-bentuk tampilan yang akan
diimplementasikan. Peranti bantu sederhana yang dapat digunakan misalnya adalah lembar
kerja tampilan/LKT (screen design work sheet). Pada LKT, disajikan empat bagian:
1. Nomor lembar kerja
2. Bagian tampilan
3. Bagian navigasi
4. Bagian keterangan
Gambar 5.7 contoh Lembar Kerja Tampilan
4. Jaring Semantik Tampilan

Dipakai untuk mempermudah programmer saat ia menulis program untuk disesuaikan
dengan navigasi pada setiap lembar kerja. Pada jaring semantik tampilan terdiri atas dua
komponen: nomor tampilan (biasa diberi notasi dengan lingkaran) dan transisi yang
menyebabkan perpindahan perpindahan ke tampilan yang lain (biasa diberi notasi dengan
anak panah).
38
Gambar 5.8 Jaring Sematik Tampilan
Tugas 5
1. Bagaimanakah desain interface yang menarik ?

2. Apa Prinsip dan Petunjuk Perancangan?
3. Sebutkan 5 faktor perancangan tampilan berbasis Grafis !
39
BAB 6
GRAPHICAL USER INTERFACE
Perkembangan pemrograman komputer, mengarah kepada pemakaian gambar atau

grafis untuk pembuatan antarmuka. Gambar tertentu dengan maksud tertentu dibuat agar
pilihan menjadi lebih menarik dan gampang dihafalkan. Gambar di buat agar mencerminkan
maksud/perintah misalnya gambar gunting untuk menghapus.
Gambar 6.1 Menu berbasis GUI
6.1 PENGERTIAN GUI

Interface atau antarmuka adalah tampilan yang ada di monitor, dengan interface orang yang
awam atau hanya sedikit mengerti tentang pemrograman bisa bekerja dengan baik, mudah dan
cepat. Interface menghubungkan manusia dengan komputer, komunikasi bisa lebih lancar,
pekerjaan bisa dikerjakan dengan menyenangkan. Dengan memakai GUI (Graphical User
Interface) bisa ditampilkan dengan lebih menarik, lebih mudah bahkan pemakai atau user
diarahkan untuk mengikuti jalannya program sehingga cepat memahami dan mengurangi
terjadinya kesalahan. Berikut ini contoh interface GUI
• Graphical User Interface adalah bentuk dialog atau komunikasi antara manusia dan
komputer yang berbentuk grafis dan sangat atraktif.
• Contoh antarmuka manusia dengan komputer yang berbentuk grafis menggunakan
pemrograman visual (Visual Basic, Visual Foxpro, Delphi dan lain-lain).
• Sistem Operasi Windows merupakan sistem operasi berbasis Grafis.
• Windows menyediakan suatu pustaka yang berisi kumpulan dari ratusan fungsi yang
disebut Windows API (Application Programming Interface).
• Pemrograman grafis pada sistem operasi Windows selalu menggunakan antar muka yang
disebut GDI (Graphics Device Interface).
• Dalam pembahasan GUI akan digunakan bahasa pemrograman Visual Basic 6.0
40
• Visual Basic 6.0 merupakan salah satu bahasa pemrograman yang mendukung GUI
• Desain Suatu Program Grafis ditentukan oleh komposisi gambar-gambar yang digunakan
meliputi Letak dari obyek gambar pada screen (Sistem Koordinat), Tata warna yang
digunakan (Pewarnaan), Ukuran dll
Tampilan Visual Basic 6.0
Gambar 6.2 Tampilan Microsoft Visual Basic
6.2 SISTEM KOORDINAT

Sistem Koordinat merupakan letak dari objek gambar di monitor. Sebagian besar kegiatan pada
pemrograman grafis bekerja dengan sistem kordinat, seperti berpindah tempat, perubahan
ukuran dan sebagainya. Hal-hal tersebut akan terlihat jika anda membuat program animasi.
Pada layar monitor setiap titik menempati koordinat tertentu, setiap karakter atau gambar
tertentu akan menempati koordinat yang ada dimonitor, berikut gambaran dari sistem
koordinat.
Gambar 6.3 sistem koordinat
41
Sistem koordinat pada pemrograman Windows terdiri dari :
1. Koordinat Fisik
Merupakan koordinat yang dipakai oleh peralatan fisik (misal : Layar monitor). Layar
monitor mempunyai titik PUSAT koordinator fisik di kiri atas dengan sumbu “x” positif
berasal dari pusat menuju ke kanan dan sumbu “y” positif berasal dari pusat menuju ke
bawah Digunakan penulisan (x,y), dimana standart awal berada di (0,0) yaitu pada titik
paling kiri atas obyek yang akan didefinisikan koordinatnya
2. Koordinat Logika
Merupakan koordinat yang dipakai dalam program. Windows akan memetakan sistem
koordinat logika dalam program ke koordinat fisik
6.3 PENGATURAN WARNA
Gambar 6.4 antarmuka berwarna
Warna akan menarik perhatian, membedakan satu hal dengan hal lainnya. Dalam komputer
program mewarnai akan lebih bervariasi, pencampuran warna-warna dasar bisa menjadikan
warna baru yang berbeda dengan warna aslinya. Programmer bisa mengatur warna dasar
berbeda dengan warna tulisan, garis tepi, gambar tertentu (icon) sehingga hasilnya program
menarik dan tidak membosankan.
Berikut ini gambar perpaduan warna yang menghasilkan warna-warna baru sehingga ada
banyak sekali warna.
Gambar 6.5 Kombinasi warna
42
Pemakaian warna dalam pemrograman grafis bisa dikatakan sangat dominan. Pemakaian
kombinasi warna yang serasi akan membuat tampilan objek lebih menarik. Visual Basic 6.0
menyediakan fungsi RGB (Red Green Blue). Pada dasarnya seluruh warna yang ada bermula
dari Merah, Hijau dan Biru. Semua warna bisa dihasilkan dari campuran ketiga warna primer
tersebut. Setiap warna primer dinyatakan dengan bilangan bulat antara 0 Sampai dengan 255.
Jika nilai yang diberikan lebih dari 255 maka nilai tersebut akan dianggap nilai 255. Model
warna pada windows bisa menangani jumlah warna maksimal 256 x 256 x 256 =
16777216/16,8 Juta warna.
Tabel 6.1 tentang warna standar yang diambil dari warna primer
Contoh Program Visual Basic 6.0 Untuk Pewarnaan

Private Sub Form_Activate()
MsgBox "Ingin warna HITAM , Klik OK"
Form1.BackColor = RGB(0, 0, 0)
MsgBox "Ingin warna MERAH , Klik OK"
MsgBox "Ingin warna HIJAU , Klik OK"
MsgBox "Ingin warna BIRU , Klik OK"
MsgBox "Ingin warna PUTIH , Klik OK"
MsgBox "Keluar dari Program ? , Klik OK"
End
End Sub
6.4 MEMBUAT GARIS

Membuat garis dapat dilakukan dengan mengklik icon Line pada toolbox, Pilih jenis garis yang
diinginkan :
0 – Transparant : bentuk garis tidak ditampilkan

1 – Solid : Bentuk garis utuh
2 – Dash : Bentuk garis terputus-putus dalam bentuk garis
3 – Dot : Bentuk garis terputus-putus dalam bentuk Titik
43
4 – Dash-Dot : Bentuk garis terputus-putus dalam bentuk garis & titik
5 – Dah-Dot-Dot : Bentuk garis terputus-putus dalam bentuk garis
dan dua titik
6 – Inside solid : Bentuk garisnya sama dengan solid
Gambar 6.6 Membuat garis
6.5 MEMBUAT GAMBAR

a. Membuat kotak, Oval, Lingkaran
Klik Icon Shape kemudian pilih bentuk pada properti shape
Gambar 6.7 Membuat shape
a. Membuat Grafik
Langkah-langkah dalam pembuatan Grafik :
• Aktifkan komponen grafik dengan cara buka menu Project dan klik Components
• Pada kotak dialog Components klik tab Controls
• Berikan checklist pada Microsoft Chart Control
• Muncul icon MSChart
44
Gambar 6.8 Grafik
b. Membuat Circle
Digunakan untuk menggambar lingkaran, ellips atau garis lengkung. Bentuk penulisan dari
metode circle adalah sbb:
Object Circle [step](x,y), Radius, [Color,start,end,aspect]

Langkah pembuatan circle :
• Buat sebuah form
• Ketik listing dibawah ini
Private Sub Form_Click()

Dim cx, cy, radius, limit
ScaleMode = 3
cx = ScaleWidth / 2
cy = ScaleHeight / 2
If cx > cy Then limit = cy Else limit = cx
For radius = 0 To limit
Circle (cx, cy), radius, RGB(Rnd * 255, Rnd * 255, Rnd * 255)
Beep
Next radius
End Sub
Gambar 6.9 Lingkaran
45
Tugas 6
1. Apakah pengertian Graphical User Interface ?

2. Jelaskan pengertian koordinat di layer monitor !
3. Buatlah rancangan interface laporan berupa gambar !
46
BAB 9
PEMBUATAN KOMPONEN
ANTARMUKA GRAFIS
Gambar 9.1 Antarmuka grafis
Salah satu kriteria penting agar program aplikasi yang kita buat mempunyai sifat ramah dengan
pengguna (user friendly) adalah program aplikasi tersebut haruslah mempunyai tampilan yang
menarik perhatian user, biasanya berkaitan dengan antarmuka grafis yang mampunyai banyak
kelebihan dalam memperindah tampilan dibandingkan dengan tektual.
Untuk itu kita harus mempelajari bagaimana cara pembuatan komponen antarmuka grafis.
Komponen Antarmuka Grafis adalah bentuk–bentuk tampilan antarmuka yang dipakai pada
paket–paket program aplikasi, baik yang bekerja pada mode teks maupun pada mode grafik
Komponen Antarmuka grafis antara lain : Tombol Tekan, Spin Box, List Box, Combo Box,
Tombol Radio, Check Box, Label Box.
9.1 TOMBOL TEKAN

• Digunakan untuk mengaktifkan suatu aktivitas apabila tombol tersebut ditekan
menggunakan mouse (Click Mouse).
• Jenis tombol dinamakan tombol tekan karena ketika kita menekan (click) tombol tersebut
maka akan terlihat bahwa seolah-olah tombol “masuk” ke dalam layar monitor, seperti
halnya ketika kita menekan sebuah tombol pada HP.
47
Gambar 9.2 Command Button
9.2 SPIN BOX
• Komponen antarmuka grafis yang digunakan untuk mengatur nilai suatu peubah, biasanya
bertipe numerik, dengan menambah atau mengurangkannya dengan suatu nilai tertentu dan
nilai maksimum dan minimum peubah dinyatakan dengan jelas
• Pada dasarnya, sebuah spin box digunakan untuk menampilkan suatu peubah saat itu dan
kemudian nilai perubah tersebut akan bertambah ketika user menekan tombol dengan anak
panah ke atas, atau berkurang ketika user menekan tombol anak panah ke bawah.
• Pertambahan atau pengurangan nilai peubah tersebut dapat diatur sesuai kebutuhan.
• Dalam spin box, nilai maksimum dan minimum peubah harus dinyatakan dengan jelas agar
tombol tidak memutar (spinning) terus-menerus.
Gambar 9.3 Spin Box
48
9.3 LIST BOX
• Digunakan untuk menampilkan sejumlah pilihan yang tersedia yang dapat dipilih oleh
pengguna program.
• Biasanya pilihan yang dapat dipilih berupa pilihan tunggal, tetapi dalam kondisi tertentu
juga dimungkinkan untuk membuat pilihan jamak (multiple choices).
• Pada dasarnya, sebuah list box hanya terdiri atas bagian yang digunakan untuk
menampilkan pilihan-pilihan yang tersedia.
• Terkadang terjadi suatu keadaan dimana panjang suatu pilihan lebih besar dibandingkan
dengan lebar list box.
• Untuk itu, list box tersebut harus ditambahkan penggeser (scrollbar), baik vertikal maupun
horizontal.
Contoh
Gambar 9.4 List Box
9.4 COMBO BOX

Mempunyai fungsi yang sama dengan list box, yaitu untuk menampilkan sejumlah pilihan yang
dapat dipilih secara bebas oleh pengguna.
2 perbedaan antara list box dengan combo box:
• Jika pada list box semua atau sebagian pilihan yang tersedia langsung akan terlihat,
sedangkan pada combo box pilihan tidak akan terlihat sampai pengguna menekan tombol
kontrol.
• Pada list box pengguna hanya dapat memilih pilihan yang tersedia, sedang pada combo box
pengguna dapat memasukkan pilihan yang mungkin tidak ada dalam daftar pilihan yang
tersedia.
49
Combo Box
Gambar 9.5 Combo Box
Kapan Penggunaan List Box dan Combo Box

• Telah disebutkan bahwa list box dan combo box mempunyai fungsi yang sama, yaitu
sama-sama untuk menampilkan sejumlah pilihan yang dapat dipilih oleh user.
• Kapan sebaiknya menggunakan list box dan kapan sebaiknya menggunakan combo box ?
• Pertimbangan untuk memilih salah satu dari kedua komponen tersebut, terutama
tergantung dari seberapa besar bagian layar yang akan digunakan untuk menampilkan
komponen-komponen tersebut.
• Jika layar cukup lebar, maka sebaiknya menggunakan list box karena user dapat
mengetahui secara langsung sebagian atau seluruh pilihan yang tersedia.
• Tapi jika layar tidak cukup luas untuk menampilkan pilihan, maka jalan terbaik adalah
menggunakan combo box.
9.5 TOMBOL RADIO

Sejumlah pilihan yang memungkinkan pengguna untuk memilih salah satu pilihan yang
tersedia, pilihan tersebut dapat bernilai on atau off yang ditandai dengan tanda tertentu.
Contoh
Gambar 9.6 Tombol Radio
50
9.6 CHECK BOX
Sejumlah pilihan yang memungkinkan pengguna untuk memilih salah satu atau lebih pilihan
yang tersedia.
Contoh
Gambar 9.7 Check Box
9.7 LABEL BOX

Digunakan untuk memberikan komentar atau memberi nama pada masing – masing komponen
antarmuka grafis
Gambar 9.8 Label Box
9.8 MENDESAIN WINDOW

1. Memilih Jenis Window
• Document window
51
Gambar 9.9 Microsoft Word
• Application window
Gambar 9.10 MYOB
• Utility window
Gambar 9.11 Utility Font
52
• Dialogs and Alerts
Gambar 9.12 pesan
2. Mendesain bagian window

3. Mendesain Primary Window
• Mendesain Title
• Mendesain Border and Windows Command
• Modality
• Focus
Tampilan Windows XP
Gambar 9.13 Windows XP
Tampilan Windows Classic
Gambar 9.14 Windows Classic
53
Tampilan Window B II for Linux
Gambar 9.15 Windows B II for Linux
1. Mendesain Title
Setiap window sebaiknya diberi judul (title). Sebuah judul window yang bagus berisi
informasi yang relevan. Beri judul yang berbeda pada tiap window yang sedang dibuka.
Gambar 9.16 Title
2. Mendesain Border and Windows Command
Gambar 9.17 Border
54
3. Shape Window
Gambar 9.18 Shape Window
3. Modality
Sebuah modal window melarang user berinteraksi dengan window lain dalam aplikasi
yang sama (application modal) atau aplikasi yang lain termasuk desktop itu sendiri
(system modal) Non-Modal window tidak melarang berhubungan dengan aplikasi utama
atau window lain.
4. Focus
Tiga mekanisme:
• Click to focus : berarti sebuah window mendapat focus karena di klik oleh user Focus
berarti user menentukan window mana yang seharusnya menerima data dari keyboard,
mouse, atau device input yang lain.
• Point to focus : berarti sebuah window mendapat focus karena ditunjuk oleh mouse.
Dikenal juga dengan “sloppy focus”
• Keyboard focus : berarti sebuah window mendapat focus karena dipilih user
menggunakan shortcut keyboard seperti Alt+Tab.
Mendesain Primary Window

Primary window umumnya mempresentasikan data user seperti dokumen teks pada
aplikasi word processor, gambar pada aplikasi pengolah gambar, spreadsheet pada aplikasi
seperti excel, dsb.
Normalnya primary window mempunyai sebuah border, sebuah menubar, dan sebuah
status bar, dan mungkin juga mempunyai satu atau lebih toolbar.
1. Mendesain Title
55
2. Window Commands
Pada primary window, mempunyai beberapa perintah yang terdapat pada control boxnya:
• Close : Keluar dari window
• Maximize : Memperbesar Window
• Minimize : Memperkecil tampilan window
• Restore Down : Kembali ke tampilan awal
3. Hubungan dengan dokumen dan window

• Single Document Interface (SDI)
Aplikasi single document interface menempatkan masing-masing dokumen pada
sebuah primary window tersendiri. Jadi tiap – tiap dokumen terasa sebagai sebuah
aplikasi yang berdiri sendiri.
Contoh aplikasi SDI adalah Microsoft Word
Gambar 9.19 Microsoft Word
• Controlled Single Document Interface (CSDI)

CSDI adalah aplikasi yang ruangnya untuk menu tidak cukup untuk masing – masing
dokumen yang terbuka, sehingga tampak ada primary window yang hanya terdiri dari
menu, sedangkan primary window lainnya berisi dokumen, dimana dokumen tersebut
dikontrol melalui primary window control (yang berisi menu).
Contoh aplikasi CSDI adalah GIMP
56
Gambar 9.20 Aplikasi CSDI
• Multiple Document Interface (MDI)

• MDI menampilkan beberapa dokumen dalam window tunggal.
• Window ini dapat menggunakan panned, tabbed, atau menampilkan lebih dari satu
sekaligus.
Contoh aplikasi MDI adalah Macromedia Flash MX
Gambar 9.21 Aplikasi MDI
4. Mendesain Utility Window

• Instanst Apply
Window yang mengijinkan user mengubah nilai atau setting seperti property atau
preference, update nilai–nilai atau setting akan serta merta membuat perubahan pada
window.
Contoh Instant Apply adalah Customize pada Microsoft Word
57
Gambar 9.22 Instanst Apply
• Explicit Apply
Window yang dapat merubah suatu nilai – nilai dengan secara eksplisit.
Ciri khas explicit apply yaitu mempunyai 3 button :
• Apply : Mengimplementasikan semua setting dalam window, tetapi utility window
tidak langsung ditutup
• Cancel : Mereset semua perubahan pada setting dimana nilai – nilai dikembalikan
ke keadaan saat window ini dibuka.
• Ok : Mengimplementasikan semua setting pada window dan menutup window
preference
Contoh Explicit Apply
Gambar 9.23 Explicit Apply
• Property Window
Adalah tempat user dapat melihat dan mengubah karakteristik sebuah objek, seperti
dokumen, file, atau aplikasi.
Contoh property pada MS.Word
58
Gambar 9.24 Property
• Preferences Window
Adalah window tempat user dapat memodifikasi tampilan window maupun tingkah
lakunya.
Contoh Option pada MS. Word
Gambar 9.25 Options
• Toolboxes
Window untuk mengakses sekumpulan aksi maupun toggle dengan tampilan toolbar
kecil seperti button.
Contoh Toolboxes pada VB 6.0
59
Gambar 9.26 Toolboxes
• Toolbox Categories
Pengelompokkan Toolbox berdasarkan fungsinya
Contoh :
Gambar 9.27 Toolbox Categories

5. Mendesain Alerts
Alert menyediakan informasi tentang keadaan sebuah sistem aplikasi atau menanyakan
informasi penting tentang proses selanjutnya dari sebuah task khusus.
• Alert Text
Terdiri dari dua jenis :
1. Primary text, menyediakan informasi singkat atau usulan tindakan kepada user yang
terdiri dari satu kalimat.
2. Secondary text, menyediakan informasi yang lebih detail tentang problem atau
anjuran tindakan kepada user.
• Alerts Button
Menyediakan tombol persetujuan untuk melupakan alert atau melakukan tindakan
selanjutnya berdasarkan informasi pada Primary text.
Button–button yang biasa ada di alert :
Cancel, Help, Yes, No, Save, Abort, dsb
• Spacing and Positioning
Pedoman membuat alert:
• Border mengelilingi semua sisi alert
• Spasi antara icon dan teks adalah 12 pixel
• Spasi horizontal antar button adalah 6 pixel
• Spasi di bawah baik primary text maupun secondary text adalah 24 pixel
60
Gambar 9.28 Alerts
• Information Alerts
Memberitahukan sebuah informasi kepada user sebelum melanjutkan aksinya atau
menampilkan informasi yang memang diminta oleh user.
Gambar 9.29 Information Alerts
• Error Alerts
Digunakan untuk menampilkan peringatan error saat operasi yang diminta tidak dapat
dilakukan secara lengkap.
Gambar 9.30 Error Alerts
• Confirmation Alerts
Melakukan konfirmasi ketika user ingin menghapus datanya atau melakukan aktivitas
yang akan menimbulkan resiko.
Gambar 9.31 Confirmation Alerts
• Save Confirmation Alerts

Membantu user agar tidak kehilangan dokumen/ perubahan pada dokumen ketika
menutup aplikasi.
61
Gambar 9.32 Save Confirmation Alerts
• Authentication Alerts
Memaksa user memasukkan informasi yang diperlukan untuk dapat mengakses informasi
lebih lanjut.
Gambar 9.33 Authentication Alerts
6. Mendesain Dialog Boxes

Dialog boxes (kotak dialog) menyediakan pertukaran informasi, atau dialog, antara user dan
aplikasi. Dapat menggunakan kotak dialog untuk menangkap informasi yang diperlukan
dari user untuk tugas atau aksi tertentu, misalkan percetakan
• Additional Button
Kita dapat menambahkan button tambahan selain affirmative button (tombol
persetujuan) dan cancel
Pedoman memberi button tambahan :
o Tempatkan button tambahan dalam satu area di bagianbawah kotak dialog di
sebelah kiri button standar.
o Aturlah button berdekatan dengan kontrol yang berhubungan dengan button
tersebut.
• Layout
Sebaiknya menyusun kontrol dengan memperhatikan arah pengguna aplikasi membaca
dimana umumnya biasanya dari kiri ke kanan dan dari atas ke bawah. Karena itu
tempatkan kontrol utama sedekat mungkin dengan posisi ujung kiri atas.
62
Contoh pada Macromedia Flash MX
Gambar 9.34 Layout Macromedia Flash MX
Tugas 9
1. Apakah pengertianmu tentang List Box ?

2. Apakah pengertianmu tentang Combo Box ?
3. Sebutkan berbagai model tampilan interface grafis !
63
BAB 10
ASPEK ERGONOMIK
Gambar 10.1 Posisi Kerja
10.1 PENTINGNYA ERGONOMI
Banyak pekerjaan bisa diselesaikan dengan memakai komputer. Pekerjaan yang

sulit, dengan rumus-rumus yang rumit, dilakukan secara rutin atau berulang-ulang bisa
dipermudah dengan komputer. Misalnya pemakaian komputer dalam dunia perbankan,
data-data transaksi keuangan, menabung, perhitungan bunga berbunga, kredit, debet,
pencarian data transfer dan lain-lain bisa di proses dengan cepat dan tepat. Agar pekerjaan
bisa dilaksanakan secara maksimal maka banyak hal yang harus dilakukan diantaranya
menerapkan ilmu ergonomi dalam komputer.
Ergonomi bisa diterapkan di semua bidang pekerjaan, disetiap tempat, organisasi

atau lembaga. Setiap lembaga atau organisasi menginginkan karyawan atau pegawainya
bekerja secara produktif, sehingga mampu memberikan kontribusi yang nyata bagi
perkembangan lembaga tersebut. Agar produktivitas karyawan selalu terjaga bahkan
terus meningkat maka perlu pemahaman dan pengertian apa saja faktor yang berpengaruh
dan menerapkan untuk mencapai hasil yang maksimal.
Produktivitas merupakan satuan ukuran yang menunjukkan perimbangan antara

masukan (input) dan keluaran (output) ( Hadipranata : 1987). Sedangkan rumusan non
teknis produktivitas diartikan sebagai rasio kepuasan yang diperoleh atas usaha yang
64
dilakukan. Diakui para ahli bahwa produktivitas kerja karyawan di Indonesia masih jauh
tertinggal dibandingkan dengan negara-negara maju. Seorang karyawan dikatakan
produktif bila karyawan tersebut menunjukkan hasil atau output yang lebih besar dengan
input yang relatif kecil.
Faktor-faktor yang mempengaruhi produktivitas kerja adalah faktor yang

bersumber dari individu yang bersangkutan atau internal factor (behavioral) dan faktor-
faktor yang berada di luar individu atau external factor (As’ad : 1987).
1. Faktor internal
Faktor internal meliputi:
a. Kondisi Fisik seperti bentuk tubuh, kesehatan, ada cacad fisik atau tidak,
penampilan fisik bila kerja dibidang yang berhubungan dengan pihak lain.
b. Intelegensi ialah kemampuan untuk menyesuaikan diri dalam memecahkan
masalah.
c. Inisiatif, minat, bakat dan sikap karyawan yang positif terhadap pekerjaannya.
d. Taraf aspirasi karyawan terhadap bidang yang dihadapinya dan hal ini
mempengaruhi kepuasan kerjanya.
e. Moralitas kerja, keinginan berpartisipasi aktif dalam mencapai visi dan misi
lembaga atau kerja tim.
f. Usia karyawan, semakin tua seseorang biasanya kesigapan, kecekatan, kekuatan
fisik dan kondisi kesehatan semakin menurun sehingga cenderung tidak
produktif.
g. Lama kerja akan mendorong kesetiaan terhadap lembaga, kemampuan dan
penguasaan terhadap bidang kerja juga semakin baik sehinga makin produktif.
h. Motivasi kerja, orang yang bermotivasi kuat akan semakin produktif.
2. Faktor eksternal.
Faktor eksternal meliputi:
a. Kondisi lingkungan kerja, misalnya pencahayaan, pemilihan warna, kebisingan,
temperatur, sirkulasi udara, alat-alat pekerja dan aspek lainnya.
b. Waktu istirahat, sifat manusia antara lain mudah lelah sehingga setelah beberapa
jam bekerja perlu istirahat.
c. Musik pengiring, irama musik dapat menimbulkan kegembiraan dalam diri
karyawan sehingga berpengaruh pada produktivitas kerja.
d. Sistem penggajian (insentif), gaji merupakan penghargaan energi karyawan yang
dimanivestasikan sebagai hasil produksi.
e. Lama waktu kerja yaitu lama kerja dalam sehari.
Disamping faktor-faktor tersebut di atas bisa juga ditambahkan faktor religiusitas

karyawan, kondisi sosial budaya, pola kepemimpinan atau manajemen yang diterapkan,
kebijakan pemerintah dan sebagainya.
10.2 PERMASALAHAN
Seorang karyawan yang bekerja secara rutin setiap hari dengan menggunakan alat
bantu tertentu. Menempati ruang secara bersama-sama, mamakai meja dan kursi
sederhana, ada suara hiruk pikuk, ada komunikasi dan tekanan dari berbagai hal, tempat
kerja dengan suhu yang panas, udara yang tidak mengalir dengan lancar, berdebu dan
lain-lain sulit untuk produktif. Bekerja sebentar saja sudah akan merasa cepat, apalagi
kalau di tekan sedemikian rupa misalnya produksi harus mencapai angka tertentu.
65
Gambar 10.2 Kelelahan kerja
Bekerja dengan komputer, dengan data yang banyak, tersebar dan di tuntut dengan
hitungan yang tepat tentu memerlukan suasana yang aman, nyaman, tempat kerja yang
kondusif, yang mendukung pekerjaan sehingga selama bekerja tidak cepat lelah, tidak
mengeluh badan terasa sakit, bisa bekerja lebih tahan lama dan lebih produktif. Untuk
mewujudkan hal tersebut perlu dipikirkan banyak hal diantaranya aspek ergonomis.
Pekerjaan yang dilakukan secara terus menerus dengan menggunakan alat bantu
kerja berdampak terhadap kondisi fisik atau kesehatan pekerja. Secara garis besar
gangguan kesehatan akibat pemakaian komputer yang salah dapat dikelompokkan
menjadi tiga yaitu:
• Gangguan pada bagian mata dan kepala kita sering disebut dengan computer vision
syndrome, mulai dari nyeri atau sakit kepala, mata kering dan iritasi, mata lelah,
hingga gangguan yang lebih serius dan lebih permanen seperti kemampuan fokus
mata menjadi lemah, penglihatan kabur (astigmatisma, myopi, presbyopi),
pandangan ganda, hingga disorientasi warna.
• Gangguan pada lengan dan telapak tangan mulai dari nyeri pada pergelangan tangan
karena gangguan pada otot tendon di bagian pergelangan, nyeri siku, hingga cidera
yang lebih serius seperti Carpal Tunnel Syndrome yaitu terjepitnya syaraf di bagian
pergelangan yang menyebabkan nyeri di sekujur tangan. Cidera ini harus segera
diatasi sebelum terlambat, karena pada stadium lanjut tindakan operasi terpaksa harus
dilakukan.
• Gangguan pada leher, pundak dan punggung. Yaitu adanya gangguan berupa nyeri
pada bagian leher, pundak, punggung dan pinggang. Nyeri di bagian ini sering pula
mengakibatkan gangguan nyeri di bagian paha dan betis.
Berdasarkan penelitian yang dilakukan terhadap suatu perusahaan yang banyak

menggunakan komputer yaitu perusahaan asuransi diperoleh data keluhan nyeri otot
akibat pemakaian komputer sebagai berikut:
• 25 % karyawan mengeluh nyeri pada bahu.
• 19 % karyawan menderita nyeri pergelangan tangan.
• 15% karyawan mengalarni nyeri pada leher secara berkala.
• 14 % karyawan mengeluh nyeri punggung.
66
Hasil lain diperoleh pada biro pariwisata yang banyak menggunakan komputer,
memberikan data keluhan nyeri otot sebagai berikut:
• 54 % karyawan mengeluh nyeri pada bahu.
• 32 % karyawan merasakan nyeri pada pinggang bagian bawah
• 24 % karyawan mengalami nyeri tungkai.
• 18 % karyawan menderita nyeri leher.
• 6 % karyawan mengatakan nyeri kepala, lengan dan pergelangan tangan.
Data-data nyeri otot tersebut di atas merupakan gabungan nyeri yang disebabkan
oleh keyboard, layar monitor, meja dan kursi komputer serta printer.
Gambar 10.3 Posisi komputer pada saat bekerja
Setiap orang yang merasakan aman dan nyaman pasti bisa berbuat atau bekerja secara
maksimal. Tempat yang bersih, alat bantu yang cukup lengkap dan memenuhi standard kerja
diperlukan untuk mendukung proses menyelesaikan pekerjaan serta kebijakan organisasi yang
tepat akan dapat meningkatkan produktivitas karyawan dalam bekerja. Pemakaian alat bantu
seperti komputer bisa dimaksimalkan dengan mempelajari dan memahami hal-hal sebagai
berikut:
a. Pengaturan tata ruang kerja yang baik.
b. Pengaturan atau penempatan alat-alat kerja yang tepat.
c. Pengaturan suasana kerja, suhu udara dan pencahayaan yang nyaman.
d. Pemakaian alat-alat dengan benar dan sesuai aturan.
e. Memperhatikan posisi duduk, kaki tangan dan Panca indra.
f. Menggunakan alat-alat yang berfungsi untuk mencegah atau mengurangi dampak
penggunaan komputer sepert radiasi dengan penggunaan filter screen.
Pekerja seharusnya berpikir positif terhadap fasilitas kerja yang telah disiapkan oleh
perusahaan. Banyak perusahaan yang belum memperhatikan unsur ergonomi karena dirasakan
masih terasa mahal untuk biaya pengadaan perlengkapan. Perusahaan-perusahaan yang sudah
mapan seperti perbankan biasanya mampu memberikan fasilitas yang sudah mengarah pada
penerapan ergonomi.
Sikap tubuh dalam bekerja perlu diperhatikan dengan sebaik-baiknya sehingga keluhan
atau rasa sakit bisa di hindari. Setiap pekerja perlu berusaha meningkatkan produktivitas kerja
dengan mendalami ilmu ergonomi sehingga pada akhirnya bisa bertindak efektif dan efisien.
67
Produktivitas yang bagus akan menghasilkan keuntungan yang tinggi dan pada akhirnya
fasilitas untuk bekerja yang memenuhi persyaratan akan dapat terpenuhi.
10.3 PENGERTIAN ERGONOMIK

Peningkatan produktivitas dalam bekerja sangat penting, karyawan di tuntut agar bisa
bekerja dengan baik, efektif dan efisien. Diharapkan dengan sumber daya yang sekecil-
kecilnya di capai hasil yang sebesar-besarnya. Banyak faktor yang mempengaruhi
produktivitas kerja, diantaranya adalah penerapan ilmu ergonomi. Dengan ergonomi akan
dapat meningkatkan produktivitas dan di sisi lain akan memberikan kenyamanan dan
keamanan dalam bekerja sehingga karyawan bisa bekerja dengan tenang, aman, nyaman, tidak
cepat lelah atau merasakan gangguan dalam bekerja. Ergonomi seharusnya diterapkan pada
semua bidang pekerjaan. Berikut ini dibahas penerapan ergonomi untuk meningkatkan
produktivitas kerja berkaitan dengan penggunaan komputer sebagai alat bantu.
Ergonomik adalah sebuah ilmu terapan yang mengkaji tentang metode atau pola kerja
dan bagaimana meningkatkannya sehingga produktivitas tinggi (Sigit Wasi Wasisto : 2005 ).
Ergonomik akan mengkaji dan berusaha mencari kesesuaian antara kondisi fisik pekerja,
lingkungan kerja dan jenis aktivitasnya.
Hasilnya dapat berupa desain cara kerja atau linkungan bekerja yang lebih baik dengan
metode kerja, perangkat kerja, tempat kerja, dan lain-lain. Hasil penelitian menyatakan bahwa
penerapan ergonomi yang tepat di tempat kerja akan meningkatkan produktivitas kerja hingga
25 %. Memang ergonomi sangat luas, karena semua jenis dan bentuk pekerjaan akan
membutuhkan ergonomi, demikian pula dengan pekerjaan yang memanfaatkan komputer.
Ergonomik adalah faktor kenyamanan kerja yang mempunyai pengaruh nyata dalam hal
peningkatan maupun penurunan efisiensi dan efektifitas kerja.
10.4 ASPEK-ASPEK ERGONOMIK

a. Pengukuran dan Antropometrik
Antropometrik : Bidang ilmu yang berhubungan dengan pengukuran tubuh manusia. Misal:
tinggi badan dan jangkauan tangan. Tujuan dari mempelajari antropometrik adalah untuk
memperoleh keseimbangan antara teori yang diperoleh dari sejumlah acuan dan suasana
kerja yang sebenarnya sehingga kenyamanan kerja dapat dicapai yang pada gilirannya akan
meningkatkan efisiensi kerja.
b. Aspek Ergonomik dari stasiun kerja

Pemasukan data. Pekerjaan berorientasi pada hardcopy, lebih banyak memerlukan
pengetikan daripada melihat ke layar tampilan. Operator membutuhkan kursi yang baik dan
dapat diatur, papan ketik yang dapat diatur, posisi dokumen yang tepat dan kualitas
dokumen sumber yang baik. Akuisisi data dan Pengolahan Kata Pekerjaan yang lebih
banyak menatap layar tampilan. User sebaiknya disediakan layar tampilan dengan kualitas
karakter yang baik, kontrat karakter ke layar yang tinggi serta kendali kilau yang memadai.
Pekerjaan Interaktif. Pekerjaan yang variatif, user tidak diam ditempat tetapi bergerak
dalam pekerjaannya.
c. Pencahayaan
Untuk menghindari adanya kilau yang ditimbulkan oleh layar monitor adalah dengan
memasang filter anti kilau dan pengaturan pencahayaan. Tujuan utama dari perancangan
pencahayaan mengenai peletakkan layar monitor antara lain :
68
• Menghindarkan user dari cahaya terang langsung maupun pantulannya yang mengenai
layar monitor.
• Menghindari adanya kecerahan pada bagian depan user yang berlebihan dibandingkan
kecerahan layar monitor.
• Memberikan keyakinan bahwa adanya pencahayaan yang cukup untuk pekerjaan yang
tidak menggunakan layar monitor.
Cahaya dalam sebuah ruangan dapat berupa :

a. Cahaya tak langsung
b. Cahaya langsung
Contoh letak layar monitor yang menyebabkan silau :
Gambar 10.4 Posisi penerangan
d. Suhu dan Kualitas Udara

Suhu dan kelembaban merupakan faktor yang sangat penting dalam kualitas udara. Suhu
udara yang panas dapat membuat berkurangnya konsentrasi kerja. Solusinya adalah dengan
pemasangan pengontrol udara dalam ruangan. Letak pengontrol udara harus diatur
sedemikian rupa sehingga arah aliran udara yang dihasilkan tidak langsung mengenai user.
e. Gangguan Suara
Manusia sebenarnya sangat sensitif terhadap perubahan suara yang kecil sekalipun.
Manusia seringkali tidak sadar dengan adanya suatu suara yang tetap asalkan suara tersebut
tidak berlebihan (kebiasaan). Kepekaan masing-masing orang terhadap gangguan suara
tidaklah sama. Tetapi orang cenderung tidak menyukai adanya suara yang selalu
mengalami perubahan keras dan tinggi-rendah secara tidak beraturan.
f. Kesehatan dan Kenyamanan Kerja

Aspek keamanan dan kenyamanan kerja dapat dipengaruhi oleh kondisi umum kesehatan
seseorang. Rutinitas pekerjaan juga dapat menyebabkan penurunan kondisi kesehatan
seseorang. Sebagai contoh adalah pekerjaan seorang sekretaris yang mengharusnya duduk
lama untuk melakukan tugas pengetikan dan pengecekan dokumen, sehingga lambat laun
ia akan mengalami kelelahan otot dan persendian.
g. Kebiasaan dalam Bekerja

Bekerja dalam keadaan se-santai mungkin dan dalam kondisi yang benar, Mengubah posisi
duduk secara periodik untuk mencegah Agar seseorang selalu merasa nyaman dalam
bekerja, sebaiknya membiasakan diri untuk selalu : kelelahan otot, Berdiri dan mengambil
beberapa menit untuk mengendurkan ketegangan otot dan lakukan olahraga ringan
69
beberapa kali sehari. Mengusahakan untuk tidak mengetik dalam jangka waktu yang lama
tanpa diselingi istirahat beberapa saat. Mengambil istirahat sejenak secara periodik.
10.5 MENGGUNAKAN KOMPUTER SECARA ERGONOMIS

Menggunakan komputer dengan menerapkan prinsip-prinsip ergonomis merupakan
cara jitu dalam menghindari ketidaknyamanan yang pada akhirnya akan menimbulkan
gangguan kesehatan seperti yang dijelaskan di atas. Berikut beberapa panduan cara kerja dan
pengaturan tempat maupun perangkat kerja yang akan mampu menghindarkan anda dari
ketidaknyamanan berkomputer.
Gambar 10.5 Ruang Kerja
a. Tempat bekerja
Mengatur elemen atau komponen tempat kerja sehingga sesuai dengan kebutuhan
merupakan faktor paling penting untuk mendapatkan kondisi kerja yang nyaman. Pikirkan
dan tentukan bagaimana layout dan posisi terbaik perangkat kerja yang dipakai (komputer,
telepon, dan lain-lain) dan bagaimana tempat kerja dapat dimanfaatkan secara efektif.
Langkah ini akan dapat menghemat waktu dan tenaga dalam menyelesaikan pekerjaan.
Pastikan bahwa cukup tempat di meja kerja untuk menata posisi yang paling nyaman untuk
CPU, Monitor, Keyboard, Mouse, Printer, Penyangga buku, dan piranti lainnya seperti
telepon, dan lain-lain.
• Atur meja kerja dengan mempertimbangkan bagaimana perangkat itu tersebut akan
digunakan. Perangkat yang paling sering digunakan seperti keyboard, mouse dan
telepon, tempatkan di posisi yang paling mudah dijangkau.
• Atur pencahayaan ruang kerja secara optimal, cahaya yang terlalu kuat mengakibatkan
tampilan monitor tidak tajam, cahaya rendah berpotensi menyebabkan gangguan pada
mata. Hindari lampu yang menyorot langsung ke monitor karena akan memunculkan
pantulan di layar. Usahakan posisi sejajar terhadap jendela, jangan berhadapan atau
membelakangi.
• Buku, laporan, atau bahan cetakan lain yang dibutuhkan dalam bekerja dengan
komputer sebaiknya diletakkan di dekat monitor. Bisa di bawah atau disampingnya.
b. Kursi
Kursi salah satu komponen penting di tempat kerja anda. Kursi yang baik akan mampu
memberikan postur dan sirkulasi yang baik dan akan membantu menghindari
ketidaknyamanan. Pilih kursi yang nyaman, dapat diatur tinggi rendahnya, bisa diputar,
ada pegangan tangan di kiri kanannya, ada roda dibagian bawah dan memiliki penyangga
punggung. Aturlah kursi sebagai berikut sehingga:
70
• Paha dalam posisi horisontal dan punggung bagian bawah atau pinggang terdukung.
Tanpa ini, punggung dan pinggang berpotensi mendapatkan gangguan.
• Bila kursi kurang dapat diatur, bagian bawah punggung dapat dibantu dengan diberi
bantal.
• Telapak kaki harus dapat menumpu secara rata di lantai ketika duduk dan ketika
menggunakan keyboard. Apabila tidak dapat maka kursi mungkin terlalu tinggi dan
dapat manfaatkan penyangga kaki.
• Ubahlah posisi duduk selama bekerja karena duduk dalam posisi tetap dalam jangka
lama akan mengakibatkan ketidaknyamanan.
c. Keyboard.
Keyboard sebagai penghubung antara manusia dengan komputer merupakan salah satu
sumber penyebab penyakit akibat kerja yang pada urnumnya berupa nyeri otot. Pada saat
ini banyak pilihan keyboard di pasaran, misalnya keyboard dengan tataletak QWERTY,
ALHABETIK, DVORAK, KLOCKENBERG.
Sebagai perangkat input, saat ini keyboard mutlak diperlukan dan selalu kita pegang ketika
kita bekerja dengan komputer. Untuk pemakaian yang nyaman usahakan dalam posisi
sebagai berikut:
• Posisikan Keyboard sehingga lengan dalam posisi relaks dan nyaman, posisi lengan
bagian depan dalam posisi horisontal.
• Pundak dalam posisi relaks tidak tegang dan terangkat ke atas.
• Pergelangan tangan harus lurus, tidak menekuk ke atas atau kebawah. Ketika
mengetik tangan harus ikut bergeser kekiri kanan sehingga jari tidak dipaksa meraih
tombol-tombol yang dimaksud.
• Jangan memukul tombol, tekan tombol secara halus sehingga tangan dan jari tetap
relaks.
• Perimbangkan untuk memanfaatkan keyboard ergonomik yang dirancang untuk dapat
diatur sesuai ukuran jari dan posisi lengan.
• Manfaatkan fitur shortcut dan macro untuk melakukan suatu aktivitas di komputer.
Misal; Ctrl+S untuk menyimpan. Shortcut atau macro akan mampu mengurangi
aktivitas penekanan tombol.
• Seperti penjelasan di atas, postur dan posisi yang salah dalam pemakaian keyboard
maupun mouse berpotensi menyebabkan gangguan Carpal Tunnel Syndrome.
d. Mouse
Sehubungan dengan penggunaan mouse tersebut ada beberapa hal yang harus diperhatikan
antara lain:
• Tempatkan mouse di dekat dan di permukaan yang sama dengan keyboard sehingga
dapat mudah meraih dan menggunakannya tanpa harus meregangkan tangan ke posisi
yang berbeda.
• Pegang mouse secara ringan dan klik dengan tegas. Gerakkan mouse dengan lengan,
jangan hanya dengan pergelangan. Jangan tumpukan pergelangan atau lengan bagian
depan di meja ketika menggerakkan mouse.
• Untuk jenis rolling-ball mouse, bersihkan mouse secara periodik karena mouse yang
kotor akan mengganggu pergerakan kursor dan menyebabkan pergelangan menjadi
tegang.
• Pertimbangkan untuk menggunakan scroll-point mouse, sehingga gerakan scrolling
pada layar dapat lebih mudah dilakukan.
71
• Gunakan optical mouse untuk memperoleh gerakan kursor yang lebih presisi.
Pekerjaan di bidang Cad atau grafis sebaiknya menggunakan mouse jenis ini. Usaha
untuk mengarahkan kursor secara presisi akan cenderung meningkatkan ketegangan di
otot lengan dan bahu.
e. Monitor
• Letakkan layar monitor sedemikian rupa sehingga tidak ada pantulan cahaya dari
sumber cahaya lain seperti lampu ruang kerja dan sinar dari luar jendela yang dapat
menyebabkan kesilauan pada mata.
Gambar 10.6 Posisi pandangan
• Agar mata dapat membaca dengan nyaman, letakkan layar komputer lebih rendah dari
garis horizontal mata dengan membentuk sudut hurang lebih 30 derjat. Keadaan ini
dapat dicapai bila pusat layar monitor terletak sekitar 25 cm dari garis horizontal mata
sehingga mata akan mengarah ke bawah (ke layar monitor). Atur posisi sehingga jarak
mata dan monitor berkisar 50 cm – 60 cm. Monitor yang terlalu dekat mengakibatkan
mata anda tegang, cepat lelah, dan potensi gangguan penglihatan. Posisi monitor tepat
lurus di depan anda, jangan sampai memaksa kepala menoleh untuk melihat layar.
• Buatlah cahaya latar pada layar komputer dengan warna yang dingin, misalnya putih
keabu-abuan dengan warna huruf yang kontras. Hindari penggunaan font huruf yang
terlalu kecil (kecuali terpaksa). Font huruf yang termasuk norrnal adalah font 12, lebih
kecil dari ini mengakibatkan mata akan cepat lelah membacanya. Resolusi layar
monitor sudah barang tentu sangat berpengaruh terhadap ketajaman huruf maupun
gambar. Layar monitor SVGA akan jauh lebih baik dari pada layar monitor VGA
apalagi dengan yang monokrom.
• Agar mata tidak kering, sering-seringlah berkedip dan sesekali pindahkan arah
pandangan mata ke luar ruangan. Bila perlu usaplah kelopak mata secara lembut
(memijit ringan bola mata).
• Kurangi radiasi dengan memasang filter di depan layar monitor .
• Untuk kenyamanan, atur monitor sehingga mata sama tingginya dengan tepi atas layar,
sekitar 5-6 cm di bawah bagian atas casing monitor. Monitor yang terlalu rendah akan
menyebabkan leher dan pundak anda nyeri.
• Sedikit tengadahkan monitor sehingga bagian atas monitor sedikit kebelakang.
• Atur level brightness dan contrast monitor senyaman mungkin. Jangan terlalu redup
jangan terlalu terang. Ketika kondisi cahaya di ruang berubah, sesuaikan lagi brightness
dan contrast monitor .
72
• Bersihkan layar monitor secara periodik. Layar yang kotor akan menimbulkan efek
pantulan dan tampilan buram.
• Apabila anda mengalami kesulitan untuk melihat tampilan layar dengan jarak 50 cm -
60 cm, coba besarkan tampilan atau resolusi layar. Apabila resolusi 1024 x 768 terlalu
kecil, ubah ke 800 x 600. Juga atur warna dan ukuran font apabila perlu.
f. Printer
Printer sebagai alat pencetak hasil kerja dengan komputer ternyata dapat pula
menimbulkan kelelahan kerja. Operator komputer seringkali merasa terganggu karena
kebisingan yang ditimbulkan oleh mesin printer. Printer yang baik pada umumnya tidak
menimbulkan kebisingan, sedangkan printer yang tidak baik kebisingan yang ditimbulkan
cukup tinggi. Printer yang menggunakan sistim buble jet kebisingannya relatif lebih
rendah bila dibandingkan dengan printer sistem dot matrix.
Saat ini printer yang paling rendah kebisingannya adalah sistim laser printer. Kebisingan
yang tinggi dapat mempengaruhi syaraf manusia dan hal ini dapat berakibat pada kelelahan
maupun rasa nyeri. Adapun batas kebisingan yang diizinkan untuk bekerja selama kurang
dari 8 (delapan) jam per hari adalah 80 dB. Sedangkan ruang kerja yang ideal adalah
dengan kebisingan sekitar 40 - 50 dB. Apabila di dalam ruang kerja terdapat mesin
pendingin (AC), maka kebisingan akan bertambah selain dari suara printer. Masalah
kebisingan ini kiranva perlu diperhatikan juga agar penyakit akibat kerja dapat ditekan
sekecil mungkin.
10.6 BEKERJA DENGAN KOMPUTER

Variasilah dalam bekerja dan istirahat atau break secara periodik. Hal ini untuk
mengurangi kemungkinan kelelahan dan ketidaknyamanan. Ikuti aturan 20/20/20, yaitu:
setiap 20 menit bekerja, break selama 20 detik, dengan alihkan pandangan ke jarak ± 6
meter.
Mengambil napas merupakan fungsi yang otomatis, tetapi ketika kita

berkonsentrasi di depan layar monitor cenderung sering menahan napas, terlebih apabila
pekerjaan kita diburu waktu. Ambil beberapa detik untuk menarik napas panjang.
Jangan lupa kedipkan mata saat memandang layar komputer. Ketika memandang
layar monitor, kita cenderung akan lebih jarang berkedip daripada ketika kita bekerja
dalam jarak dekat lainnya, misal: menulis surat di kertas, dan lain-lain. Berkediplah dengan
dengan penuh dan sering. Bisa dipertimbangkan juga untuk memasang reminder atau
pengingat di layar. Jangan lupa untuk memeriksakan mata secara rutin, ukurlah jarak
pandang dan lakukan konsultasi ke dokter mata.
10.7 KEBISINGAN DAN RADIASI

Perangkat komputer merupakan perangkat elektronis yang telah didesain untuk
digunakan di lingkungan perkantoran yang tenang (quiet office environtment). Standar
kebisingan yang aman untuk pemakaian perangkat elektronik adalah 40-45 dB pada jarak
1 (satu) meter dari sumber. Untuk perangkat komputer saat ini, sumber kebisingan utama
lebih pada CPU. Di waktu lalu, monitor CRT memegang peran penting sebagai sumber
kebisingan, tetapi saat ini monitor hadir dengan sweep rate frekeuensi tinggi (30 Khz atau
lebih) hingga monitor LCD yang lebih tenang dan ramah. Kebisingan dari CPU sebagian
73
besar disebabkan suara colling fan baik cooling fan power unit, processor, display adapter
dan piringan harddisk.
Langkah antisipasi dengan cara pemilihan perangkat yang memenuhi standar

kebisingan yang ditetapkan. Khususnya untuk perangkat CPU rakitan, perlu dicermati
aspek ini. Untuk perangkat yang telah kita miliki, dapat dipertimbangkan untuk menata
letak CPU sehingga dapat mengurangi tingkat kebisingannya.
Radiasi dari perangkat komputer lebih pada komponen VDT atau Visual Display
Terminal dalam hal ini monitor. Seperti halnya televisi, radasi berupa gelombang
elektromagnetik dihasilkan dari monitor, dari bagian CRT (Cathode ray tubes) dan
komponen elektronis lainnya. Tetapi berdasarkan riset, kontribusi radiasi baik jenis
ionizing maupun no-ionizing dari pemakaian perangkat VDT (monitor) selama rata-rata 8
jam per hari sangatlah kecil dibandingkan dengan kontribusi radiasi dari consumer product
lainnya (reff:www.lenovo.com).
Karena telah ditetapkannya standar internasional untuk emisi radiasi yang aman,
maka pemilihan perangkat komputer harus memperhatikan apakah telah mengikuti dan
sesuai dengan standar radiasi yang berlaku, khususnya untuk perangkat monitor. Sekali
lagi, masalah kesehatan berkomputer saat ini masih kurang atau belum mendapat perhatian
dari para pengguna komputer. Kita masih terlalu asyik pada tahapan bagaimana memiliki
perangkat komputer, bagaimana memanfaatkan komputer, apa teknologi tercanggih yang
harus dimiliki, dan lain-lain. Apabila kesadaran ini tidak segera digugah dan dimunculkan,
maka di kurun waktu 3 – 5 tahun kedepan dampaknya pasti akan dirasakan oleh para
pengguna komputer termasuk kita. Dan yang perlu kita beri perhatian khusus adalah anak-
anak dan para remaja yang saat ini semakin akrab dengan komputer.
Kesadaran berkomputer secara sehat akan menghindarkan mereka dari keharusan

menggunakan kacamata secara dini, kelainan pada postur tubuh, cidera berkepanjangan,
dan lain-lain.
Tugas 10
1. Apakah pengertian ergonomis?

2. Apa permasalahan yang timbul bila bekerja dengan tidak ergonomis?
3. Bagaimana cara bekerja dengan komputer secara ergonomis?
74
BAB 11
INTERNET INTERAKTIF
11.1 PENGERTIAN INTERNET

Internet adalah jaringan komunikasi global yang terbuka dan menghubungkan
ribuan jaringan komputer, melalui sambungan telepon umum maupun pribadi
(pemerintah atau swasta). Secara individual, jaringan komponennya dikelola oleh agen-
agen pemerintah, universitas, organisasi komersial maupun sukarelawan (Bride:1997)
Secara teknis, Internet (International Networking) merupakan dua komputer atau

lebih yang saling berhubungan membentuk Suatu jaringan komputer hingga meliputi
jutaan komputer di dunia, yang saling berinteraksi dan bertukar informasi.
Dilihat dari segi komunikasi, Internet merupakan sarana yang sangat efisien dan
efektif untuk melakukan pertukaran informasi jarak jauh maupun di dalam lingkungan
perkantoran.
Dari beberapa definisi di atas, dapat disimpulkan bahwa pengertian Internet adalah
“Sebuah jaringan komputer yang menghubungkan jutaan komputer yang tersebar di
seluruh dunia“.
Dilihat dari segi ilmu pengetahuan, Internet merupakan sebuah perpustakaan besar
yang di dalamnya terdapat jutaan (bahkan milyaran) informasi atau data yang dapat
berupa teks, grafik, audio, animasi, dan bentuk media elektronik lainnya.
Karakteristik dunia maya atau cyberspace antara lain : beroperasi secara virtual/
maya, berubah dengan cepat, tidak mengenal batas-batas teritorial, dapat beraktivitas
tanpa harus menunjukkan identitasnya, informasinya bersifat publik (Wahyono:2009).
Terkait dengan materi interaksi manusia dan komputer perlu memikirkan masyarakat
dunia global dalam membuat software yaitu adanya berbagai macam perbedaan sehingga
diperlukan wawasan yang luas.
11.2 CARA MENGAKSES INTERNET

Internet bisa diakses dengan berbagai macam cara, bisa dengan komputer, laptop,
netbook, tablet atau smartphone dihubungkan dengan modem lalu disambungkan dengan
saluran komunikasi. Setelah diseting kemudian jalankan program browser, Nescape,
Internet Explorer, Spry Mosaic, Google Chrome, Opera, Mozila Firefox atau lainnya
maka kita siap mengakses internet.
75
1. Penyedia layanan internet (Internet Service Provider/ISP)
ISP merupakan perusahaan jasa yang menginvestasikan modalnya untuk membangun
jaringan dan menyewakan kepada pelanggan agar meraka dapat mengakses internet.
ISP merupakan pintu gerbang untuk koneksi ke internet. Koneksi dapat dilakukan atas
dasar jumlah jam akses atau hak pakai selama 24 jam. Contoh ISP di Indonesia adalah
: Telkom, INDO.NET, IndosatNET, WasantaraNET, CBN, RADNET.
2. Melalui jaringan TV kabel

Cara akses ini umumnya ditawarkan di kota-kota besar dan dikenal dengan istilah
Internel Kabel. User cukup membayar sewa yang relatif murah dan biasanya disertai
dengan bonus menggunakan saluran-saluran TV satelit seperti CNN dan Discovery
Channel.
11.3 SUMBER DAYA INTERNET

Perkembangan terjadi terus menerus dibidang teknologi informasi, hampir semua orang
dan semua bidang kehidupan bisa memanfaatkan internet. Sumber daya internet luar
biasa, sangat bermanfaat untuk manusia.
a. Email, digunakan untuk melakukan pertukaran surat elektronis.

b. Mailing List (Milis), kelompok diskusi dengan menggunakan e-mail.
c. Newsgroup, forum diskusi, tidak menggunakan email, diskusi dilakukan melalui
koneksi langsung ke lokasi newsgroup. Perlu perangkat lunak newsreader yaitu
program yang dipasang di komputer klien. Contoh program newsreader adalah
WinVn.
d. Telnet, fasilitas yang memungkinkan user melakukan koneksi ke suatu sistem
komputer dari jarak jauh. Untuk melakukan telnet perlu program klien telnet
misalnya Cute.
e. FTP (File Transfer Protocol), sarana untuk melakukan transfer file dari komputer
lokal ke suatu komputer lain dan sebaliknya. Proses mengirim berkas ke server FTP
disebut upload, untuk mengambil berkas disebut download.
f. IRC (Internet Relay Chat) atau disingkat chat, bisa dipakai untuk dialog secara
langsung dalam bentuk tertulis. Perlu program misalnya mIRC.
g. VOIP (Voice Over Internet Protocol) adalah teknologi yang memungkinkan
percakapan suara melalui internet. Dengan VOIP biaya komunikasi jarak jauh jadi
lebih murah. Memungkinkan untuk rapat online (e-conference) yang bisa menghemat
biaya rapat, perjalanan, waktu, cocok untuk perusahaan dengan banyak cabang.
h. WWW (World Wide Web), sistem yang memungkinkan pengaksesan informasi
dalam internet melalui pendekatan hypertext.
WWW atau web merupakan sumber daya dalam internet yang dapat digunakan untuk
memperoleh informasi atau bahkan melakukan transaksi pembelian barang. Untuk
mengakses web dibutuhkan software yang disebut browser. Browser terpopuler saat
ini antara lain Internet Explorer, Netscape Communicator, Mozilla Firefox. Aplikasi
web biasanya dibuat menggunakan HTML (HyperText Markup Language). HTML
merupakan suatu bahasa pemrograman yang menggunakan tanda-tanda tertentu
(disebut sebagai Tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh
11.4 PENGENALAN PEMBUATAN WEB PAGE

Aplikasi web biasanya dibuat menggunakan HTML (HyperText Markup Language).
HTML merupakan suatu bahasa pemrograman yang menggunakan tanda-tanda tertentu
76
(disebut sebagai Tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh
browser agar web page dapat ditampilkan secara benar. Dokumen HTML sebenarnya
hanya berupa dokumen teks biasa, yang mempunyai tujuan agar dapat dengan mudah
dipindah-pindahkan antar berbagai platform. Contoh : Microsoft FrontPage.
Gambar 11.1 Website BSI
Aplikasi web dapat dibagi menjadi 2 jenis, yaitu web statis dan web dinamis. Web statis
dibentuk dengan menggunakan kode-kode HTML saja, sedangkan web dinamis
melibatkan kode-kode lain seperti PHP. Sebagai implementasinya, aplikasi web dapat
dikoneksikan ke database, sehingga perubahan informasi dapat dilakukan oleh orang
yang bertanggung jawab terhadap update data, dan tidak menjadi tanggung jawab
programmer atau webmaster
11.5 INTERNET DAN E-BUSINESS

Internet membawa perubahan cukup besar terhadap bisnis hingga melahirkan istilah e-
business. Menurut O’Brien, e-business didefinisikan sebagai penggunaan teknologi
internet untuk menghubungkan dan memberdayakan proses bisnis, perdagangan
elektronis, dan komunikasi serta kolaborasi dalam sebuah perusahaan dan dengan para
pelanggan, pemasok, dan mitra bisnis yang lain. E-business merupakan suatu aktivitas
bisnis yang memanfaatkan teknologi internet sebagai penghubung untuk melaksanakan
bisnis tersebut.
Electronic Commerce (e-commerce) adalah sistem perdagangan yang menggunakan

mekanisme elektronik yang ada dijaringan internet. Kegiatan perdagangan dilakukan
secara elektronik dan online. (Wahyono:2009).
a. Sistem Bisnis Internal

Sistem bisnis internal digunakan untuk melayani proses dan bisnis secara internal.Melalui
sistem ini dapat dilakukan beberapa hal, seperti pemantauan aktivitas dalam perusahaan,
pengendalian proses, pemrosesan transaksi secara internal, dan juga dapat digunakan
sebagai sistem pendukung menajemen. Untuk mendukung sistem bisnis internal, maka
dibutuhkan portal perusahaan, yaitu sarana informasi berbasis web yang ditujukan secara
khusus untuk pegawai perusahaan tersebut.
77
b. Perdagangan Elektronis
Perdagangan elektronis atau e-commerce merupakan segala bentuk kegiatan pembelian dan
penjualan, pemasaran produk, jasa dan informasi yang dilakukan secara elektronis. Jenis-
jenis e-commerce antara lain : Business to Business (B2B), Business to Consumer (B2C),
Consumer to Consumer (C2C), Consumer to Business (C2B)
1. Business to Business (B2B)

Business to Business (B2B) menyatakan bentuk jual beli produk atau jasa yang
melibatkan dua atau lebih perusahaan dan dilakukan secara elektronis. Keuntungan
B2B antara lain :
• Mempercepat transaksi antara penjual dan pembeli.
• Menurunkan biaya transaksi kedua belah pihak.
• Menciptakan pasar baru tanpa dibatasi wilayah geografis.
• Meningkatkan komunikasi dan kolaborasi antara penjual dan pembeli.
2. Business to Consumer (B2C)

Business to Consumer (B2C) merupakan bentuk jual-beli produk atau jasa yang
melibatkan perusahaan penjual dan konsumen akhir yang dilakukan secara elektronis.
Beberapa perusahaan yang melayani B2C antara lain Amazon (www.amazon.com),
Dell (www.dell.com), Cisco (www.cisco.com). B2C banyak diminati karena transaksi
dapat dilakukan secara mudah dan cepat, harganya murah, serta dapat menggunakan
kartu kredit sebagai media pembayaran.
3. Consumer to Consumer (C2C)

Consumer to Consumer (C2C) atau bisa juga disebut Person to Person, adalah model
perdagangan yang terjadi antar konsumen dan dilakukan secara elektronis. Situs seperti
e-Bay (www.ebay.com) menyediakan sarana yang memungkinkan orang-orang (para
konsumen) untuk dapat menjual atau membeli produk diantara mereka sendiri.
4. Consumer to Business (C2B)

Consumer to Business (C2B) merupakan kebalikan dari Business to Consumer (B2C),
dimana konsumen akhir bertindak sebagai penjual sedangkan perusahaan bertindak
sebagai pembeli dan aktivitas ini dilakukan secara elektronis. Sebagai contoh adalah
situs Priceline (www.priceline.com) yang memungkinkan seorang menjual rumah ke
suatu perusahaan.
11.6 E-INTERMEDIARY
E-commerce melahirkan pula perantara yang berbasis internet (e-intermediary).
Menurut Ebert dan Griffin, e-intermediary adalah para anggota saluran distribusi internet
yang melakukan aktivitas mengumpulkan informasi tentang para penjual dan
menyajikannya dalam bentuk yang praktis kepada para konsumen serta dapat juga
membantu menyalurkan produk-produk internet ke konsumen. Terdapat 3 macam e-
intermediary, yaitu penjual bersindikat, agen pembelajaan, dan makelar B2B.
a. Penjual Bersindikat (Syndicated Seller)

Penjual bersindikat adalah sebuah situs yang menawarkan hubungan kepada
konsumen ke web lain dan atas jasa ini web yang menghubungkan ke web lain akan
78
mendapatkan komisi. Hubungan tersebut dibentuk melalui iklan (banner ad) yang
dipasang dalam web page. Konsumen akan dihubungkan ke web bersangkutan
sekiranya meng-klik gambar iklan tersebut. Sebagai contoh adalah banyak situs yang
menanyangkan iklan dari toko buku online Amazon.
b. Agen Pembelanjaan (Shopping Agent)

Agen pembelajaan atau lebih dikenal dengan e-agent,merupakan suatu situs yang
membantu para konsumen dengan memberikan kemudahan untuk mendapatkan
informasi yang diperlukan konsumen dalam rangka membuat keputusan membeli.
Perantara seperti ini umumnya tidak memiliki produk sendiri yang dijual. Fokus
perantara seperti ini adalah menyediakan informasi dari sejumlah situs lain yang
menjual produk yang dicari oleh konsumen. Sebagai contoh adalah PriceSCAN
(www.pricescan.com) yang merupakan e-agent untuk mencari informasi tentang
komputer dan berbagai produk lain beserta harganya, atau Travelocity
(www.travelocity.com) adalah e-agent yang memungkinkan seseorang memesan tiket
pesawat terbang ataupun memesan kamar hotel.
c. Makelar B2B (Business to Business Broker)

Seperti halnya e-agent, makelar B2B tidak memiliki produk sendiri untuk dijual.
Makelar B2B menyediakan sarana komunikasi antar pelaku bisnis. Sebagai contoh
adalah Edfex (www.edfex.com) yang menyediakan informasi-informasi terkini
mengenai produk dan harga yang berasal dari pemasuk maupun konsumen yang lain.
M-Commerce atau Mobile Commerce adalah generasi berikutnya setelah E-

Commerce, yaitu bentuk penjualan dan pembelian produk yang dilakukan dengan
peranti telpon seluler atau PDA. Dengan alat tersebut pemakai dapat mengakses
internet. Teknologi ini ditunjang oleh adanya WAP (Wireless Application Protocol)
yaitu teknik jaringan tanpa kabel.
Tugas 11
1. Apakah pengertian internet?

2. Apakah sumberdaya internet?
3. Ceritakan pengalamanmu pada saat menerima pelayanan memakai internet!
79
BAB 12
Presentasi Tugas Mahasiswa
Tugas akhir semester mahasiswa di minta membuat tugas gabungan, Kolaborasi matakuliah:
Manajemen Proyek Sistem Informasi, Analisa Perancangan Sistem Informasi, Web
Programming 3 dan Interaksi Manusia dan Komputer. Dari sisi penilaian matakuliah IMK
mahasiswa di minta memberikan penjelasan tampilan antarmuka (interface) yang sudah dibuat
bersama kelompoknya, mahasiswa bisa menampilkan aplikasi yang sudah dibuat, di berikan
informasi antarmuka/interfacenya dan dilanjutkan diskusi/tanya jawab.
Sementara matakuliah yang lain misalnya Manajemen Proyek Sistem Informasi (MPSI) akan
memberikan penilaian dari sisi yang berbeda sesuai dengan matakuliah tersebut. Demikian juga
oleh Dosen matakuliah Analisa Perancangan Sistem Informasi (APSI) dan Web Programming
3 akan diberikan nilai sesuai dengan materi kuliah Dosen masing-masing. Satu tugas buat
aplikasi program di nilai dari 4 sudut pandang matakuliah yang berbeda-beda.
Bila ada banyak mahasiswa, ada banyak kelompok maka diberikan waktu hingga pada
pertemuan berikutnya sehingga benar-benar diberikan kesempatan kepada Mahasiswa untuk
unjuk presentasi dan diskusi tentang IMK dengan waktu yang cukup. Dari presentasi tugas dan
diskusi antar mahasiswa, diharapkan kelak kemudian hari Mahasiswa bisa membuat
antarmuka/interface yang sebaik-baiknya sesuai dengan matakuliah IMK.
80
DAFTAR PUSTAKA
As'ad, M. 1987. Hubungan faktor umur, pendidikan, masa kerja dan kepuasan kerja terhadap
produktifitas kerja pada petugas dinas luar asuransi. Laporan Penelitian. Yogyakarta:
Fakultas Psikologi UGM.
Bride Mac, 1997, ”Internet Menjelajahi Dunia Cyberscpace Yang Sangat Luas”, Kesaint Blanc
– Anggota IKAPI, Bekasi
Hadipranata, A. F, dkk 1987. Pengaruh penyuburan tugas (Job Enrichment) terhadap

produktivitas kerja karyawan. Laporan Penelitian. Yogyakarta: Fakultas Psikologis UGM.
Haryanto, Sentot. ____. Mengoptimalkan Produktivitas Karyawan (Tinjauan Psikologi

Industri). Fakultas Psikologi UGM, Yogyakarta.
Kadir, Abdul, Triwahyuni, Tera, 2003, “Pengenalan Teknologi Informasi”, Penerbit Andi,
Yogyakarta
Santoso, Insap. 1997. Interaksi Manusia dan Komputer Teori dan Praktek. Andi Offset,
Yogyakarta
Sasongko, Hidayat Heru. ____. Teknik Perawatan dan Penggunaan Komputer. Electronic &
Computer Technical Solution, Yogyakarta.
Wahyono, Teguh. 2009. “Etika Komputer dan Tanggung Jawab Profesional di Bidang
Teknologi Informasi”, Andi Offset, Yogyakarta
Wasisto, Sigit Wasi. 2005. Bekerja dengan Komputer Secara Ergonomis dan Sehat.
Wardhana, Wisnu Arya, dkk. 1997. Aspek Keselamatan Kerja pada Pemakaian Komputer.
ELEKTRO.
81

Modul Pembelajaran: Interaksi Manusia & Komputer

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pembelajaran: Interaksi Manusia & Komputer

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PEMBELAJARAN

INTERAKSI MANUSIA & KOMPUTER

Program Studi Sistem Informasi

Pengembangan terus di lakukan sehingga di mungkinkan akan ada perubahan dalam

Yogyakarta, 23 Maret 2020

Halaman Judul ...................................................................................................................... i

Daftar Pustaka ....................................................................................................................... 81

Gambar 1.1 Interaksi Manusia & Komputer

1.1 PENGERTIAN INTERAKSI MANUSIA DAN KOMPUTER

Definisi Antarmuka Manusia dan Komputer

Contoh gambar seorang manusia memperhatikan/ berinteraksi dengan komputer,

Gambar 1.2 Manusia berinterkasi dengan komputer

Sebuah program aplikasi terdiri dari 2 bagian yaitu:

Gambar 1.3 Contoh antarmuka

Gambar 1.4 Contoh Kode Program

Media antarmuka manusia dan komputer terbagi menjadi 2 yaitu :

Contoh tampilan, menu pilihan berbasis teks.

Gambar 1.5 Tampilan Menu berbasis teks

Gambar 1.6 Tampilan form berbasis teks

Contoh listing program dengan Borland C++ :

OUTPUT dari perintah di atas adalah :

Gambar 1.7 contoh tampilan berbasis teks

Contoh antarmuka manusia dengan komputer yang berbentuk grafis menggunakan

Gambar 1.8 tampilan berbasis grafis

Gambar 1.9 tampilan berbasis grafis

1.2 BIDANG STUDI YANG TERKAIT IMK

a. Psikologi : Memahami bagaimana pengguna dapat menggunakan sifat dan kebiasaan

Gambar 1.11 ilustrasi hubungan IMK dengan ilmu lain

Gambar1.12 Tampilan awal Visual Basic 6.0

Gambar 1.13 Tampilan Delphi

Keuntungan menggunakan piranti bantu adalah :

1.4 PENGELOMPOKAN PIRANTI BANTU

Berdasarkan fungsinya piranti bantu terbagi menjadi 2 yaitu :

1.5 STRATEGI PENGEMBANGAN ANTARMUKA

1. Apa pengertianmu tentang IMK ?

Gambar 2.1 Manusia bekerja dengan komputer

2.1 TIGA ASPEK SISTEM KOMPUTER

a. Aspek Perangkat Keras (Hardware).

2.2 FAKTOR MANUSIA

Gambar 2.2 Manusia

Tabel 2.1 Kombinasi warna terbaik

Gambar 2.3 Campuran warna

Tabel 2.2 Kombinasi warna terjelek

Petunjuk Dari Aspek Perseptual

Petunjuk Dari Aspek Kognitif

4. Pemodelan Sistem Pengolahan

1. Apa pengertianmu tentang Brainware ?

Gambar 3.1 Komputer

Gambar 3.2 Keyboard

Jenis-jenis tata letak papan ketik (keyboard) yaitu :

Gambar 3.3 Keyboard QWERTY

Gambar 3.4 Keyboard Dvorak

c. Tata Letak Alphabetik

Gambar 3.5 Keyboard Alhabetik

d. Tata Letak Klockenberg

Gambar 3.6 Keyboard Klockenberg

Gambar 3.7 Keyboard Palantype

- Tata letak Stenotype

Gambar 3.8 Keyboard Stenotype

Gambar 3.9 Papan Tombol Numerik

Perbandingan (ratio) kontrol/tampilan :

Gambar 3.10 Mouse Mekanis