ANTARMUKA

MANUSIA-KOMPUTER

MULAI MATERI
PERTEMUAN 1.A
ANTARMUKA MANUSIA-KOMPUTER
 ANTARMUKA MANUSIA - KOMPUTER

Antarmuka manusia dan komputer

adalah disiplin ilmu yang mempelajari
hubungan
antara manusia dan komputer yang
meliputi perancangan, evaluasi, dan
implementasi antarmuka
pengguna komputer agar mudah
digunakan oleh manusia.
ANTARMUKA MANUSIA - KOMPUTER
Ilmu ini berusaha menemukan cara yang paling efisien untuk
merancang pesan elektronik. Sedangkan interaksi manusia dan
komputer sendiri adalah serangkaian proses, dialog dan kegiatan
yang dilakukan oleh manusia untuk berinteraksi dengan komputer
yang keduanya saling memberikan masukan dan umpan balik
melalui sebuah antarmuka untuk memperoleh hasil akhir yang
diharapkan. Sistem harus sesuai dengan kebutuhan manusia dan
dirancang berorientasi kepada manusia sebagai pemakai

4
PERTEMUAN 1.B
INTERAKSI MANUSIA-KOMPUTER
 INTERAKSI MANUSIA - KOMPUTER

Sewaktu anda menggunakan komputer, barangkali

anda tidak menyadari bahwa anda sedang berdialog
dengan komputer, ketika anda memberikan suatu
perintah, komputer akan mengerjakan perintah
tersebut dan menampilkan tanggapannya di layar
tampilan. Pada saat ini terjadilah dialog antara anda
(Manusia) dan computer (Mesin). Disini lah muncul
sebuah disiplin ilmu di dalam ilmu computer yang
disebut dengan Interaksi Manusia dan Komputer
6
INTERAKSI MANUSIA - KOMPUTER

Interaksi Manusia dan komputer adalah

komunikasi dua arah antara pengguna (user)
dengan sistem komputer yang saling mendukung
untuk mencapai suatu tujuan tertentu.

7
 INTERAKSI MANUSIA - KOMPUTER
• Istilah ramah dengan pengguna ( User Friendly) dan WYSIWYG( What
You see is what you get) sering di gunakan ketika seseorang menawarkan
sebuah perangkat lunak atau program aplikasi.

• Istilah ramah dengan pengguna di gunakan untuk merujuk kepada

Karakteristik yang di milik oleh perangkat lunak atau aplikasi computer yang
mudah di operasikan sehingga membuat si pengguna merasa betah
mengoperasikan program tersebut.

8
 INTERAKSI MANUSIA - KOMPUTER
Prinsip dasar sebuah sistem Media interaksi diperlukan agar
computer adalah masukan, proses,
pengguna dan
keluaran (input, proces, output ).
Kepada Komputer, pengguna komputer dapat berinteraksi.
memberikan data masukan, yang Dengan adanya intraksi ini
biasanya berupa angka maupun maka pengguna akan merasakan
deretan karakter. Data masukan ini keramahan sistem
kemudian diolah (di proses) oleh
Komputer yang di gunakannya
Komputer menjadi keluaran yang di
inginkan atau di harapkan pengguna

9
 INTERAKSI MANUSIA - KOMPUTER

Salah satu contoh antarmuka manusia dan

komputer berbentuk teks yang menggunakan bahasa
pemrograman PASCAL adalah readln dan writeln.
Statement readln akan menunggu pemasukan data yang
diminta oleh komputer sedangkan
statemen writeln digunakan sebagai sarana untuk
menampilkan hasil yang telah diproses oleh komputer

10
PERTEMUAN 1.C
PERANTI BANTU PENGEMBANGAN SISTEM
PERANTI BANTU PENGEMBANGAN SISTEM

Salah satu kriteria yang harus dimiliki oleh• sebuah

Awalan perangkat
a berarti = tidak.
lunak untuk mendapatkan predikat “ ramah dengan pengguna” adalah
bahwa perangkat lunak tersebut mempunyai • Amoral berarti
antar muka tindakan
yang bagus,
mudah di operasikan, mudah di pelajari, danyang tidak selalu
pengguna berhubungan
merasa
senang untuk menggunkannya. dengan konteks moral
atau tidak berhubungan
Tetapi perlu di sadari bahawa merancang antarmuka yang bagusatau
dengan kebaikan
merupakan pekerjaan yang sangat sukar. Semakain Ramah antar-muka
kejahatan (tindakan yang
tersebut, semakin sukar untuk diimplementasikan.
netral atau non-moral).
• Misalnya: berjalan.

12
 PERANTI BANTU PENGEMBANGAN SISTEM

Pengguna peranti bantu umtuk mengembangkan

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

13
PERANTI BANTU PENGEMBANGAN SISTEM

1. Antarmuka yang dihasilkan menjadi lebih baik.

a. Hasil rancangan sementara segera dapat dibuatkan

purwarupanya atau di implementasikan secara penuh, bahkan sebelum
aplikasinya di tulis.

b. Perubahan yang di inginkan pengguna dapat segera

dilakukan karena antarmukanya mudah di modifikasikan.

c. Sebuah aplikasi dapat mempunyai lebih dari sebuah

antarmuka.

14
PERANTI BANTU PENGEMBANGAN SISTEM

d. Sejumlah aplikasi yang berbeda dapat mempunyai

antarmuka yang koinsisten, karena mereka bingung dengan
menggunakan peranti bantu yang sama.

e. Memberikan “wajah” yang unik dan sentuhan khusus

kepada program aplikasi yang akan di bangun.

f. Memungkinakan sejumlah ahli bekerjasama untuk

memberikan kontribusi masing – masing, misalnya ahli
garfish, psikolog, ahli kognnitif, amupun spesialis human
factor.

15
PERANTI BANTU PENGEMBANGAN SISTEM
2. Program antarmuka menjadi mudah ditulis dan lebih
ekonomis untuk di pelihara.

a. Program antarmuka menjadi lebih terstruktur dan lebih mendular

karena sudah di pisahkan dari aplikasinya. Hal ini memungkinkan
pengguna untuk mengubah antarmuka tanpa mempengaruhi
aplikasiny, dan memungkinkan pemrogram untuk mengubah
program apliksi tanpa mengubah antrmukannya.

b. Program antar muka lebih bersifat dapat digunakan kembali

(reusable) karena peranti bantu menggabungkan untuk mengubah
program apliksi tanpa mengubah antarmukanya.

16
PERANTI BANTU PENGEMBANGAN SISTEM

c. Kehandalan antarmuka menjadi lebih tinggi, karena

program itu dibangkitkan secara otomatis dari tingkat
spesifikasi yang lebih tinggi.

d. Ketergantungan peranti diisolasi di dalam peranti bantu

sehingga antarmukanys lebih mudah di-port ke berbagai
apliksi pada lingkungan yang berbeda.

17
 STRATEGI PENGEMBANGAN
Dari beberapa hal yang di jelaskan di
atas tersirat bahwa sebuah program aplikasi
terdiri atas dua bagian penting. Bagian
pertama adalah bagian antarmuka yang
berfungsi sebagai sarana dialog antara
manusia dengan computer yang
menjalankan program aplikasi tersebut.
Bagian kedua adalah apalikasi yang
merupakan bagian yang berfungsi untuk
menghasilkan informasi berdasarkan olahan
data menggunakan suatu algoritma tertentu.

18
 STRATEGI PENGEMBANGAN
Secara Garis Besar, pengembangan bagian antarmuka
perlu memperhatikan beberapa hal berikut :

1. Pengetahuan tentang mekanisme fungsi manusia

sebagai pengguna komputer.
Hal ini menyangkut antara lain psikologi kognitif, tingkat
perseptual, dan
kemampuan motorik dari pengguna.

19
 STRATEGI PENGEMBANGAN
2. Berbagai informasi yang berhubungan dengan karakteristik dialog, seperti ragam
dialog, stuktur, isi tekstual dan grafis, tanggapan waktu, dan kecepatan tampilan.

3. Pengguna purwarupa yang didasarkan pada spesifikasi dialog formal, yang

disusun secara bersama – sama antara (calon) pengguna dan perancang sistem,
serta peranti bantu yang memungkinkan dapat digunakan untuk mempercepat
proses pembuatan purwarupa.

4. Teknik evaluasi yang digunakan untuk mengevaluasi hasil proses purwarupa yang
telah dilakukan, antara lain berdasarkan analisis atas transaksi dialog secara
empiric menggunakan uji coba pada sejumlah kasus, umpan balik pengguna yang
dapat dikerjakan dengan tanya jawab maupun kuesioner, dan beberapa analisis
yang dikerjakan oleh ahli antarmuka.

20
PERTEMUAN 1.D
STRATEGI PENGEMBANGAN
ANTARMUKA
 STRATEGI PENGEMBANGAN

Dari beberapa hal yang di jelaskan diatas tersirat bahwa sebuah

program aplikasi terdiri atas dua bagian penting. Bagian
pertama adalah bagian antarmuka yang berfungsi sebagai sarana
dialog antara manusia dengan computer yang
menjalankan program aplikasi tersebut. Bagian kedua adalah
aplikasi yang merupakan bagian yang berfungsi untuk
menghasilkan informasi berdasarkan olahan data menggunakan
suatu algoritma tertentu.

22
 STRATEGI PENGEMBANGAN
Secara Garis Besar, pengembangan bagian antarmuka
perlu memperhatikan beberapa hal berikut :

1. Pengetahuan tentang mekanisme fungsi manusia

sebagai pengguna komputer.
Hal ini menyangkut antara lain psikologi kognitif, tingkat
perseptual, dan
kemampuan motorik dari pengguna.

23
 STRATEGI PENGEMBANGAN
2. Berbagai informasi yang berhubungan dengan karakteristik dialog, seperti ragam
dialog, stuktur, isi tekstual dan grafis, tanggapan waktu, dan kecepatan tampilan.

3. Pengguna purwarupa yang didasarkan pada spesifikasi dialog formal, yang

disusun secara bersama – sama antara (calon) pengguna dan perancang sistem,
serta peranti bantu yang memungkinkan dapat digunakan untuk mempercepat
proses pembuatan purwarupa.

4. Teknik evaluasi yang digunakan untuk mengevaluasi hasil proses purwarupa yang
telah dilakukan, antara lain berdasarkan analisis atas transaksi dialog secara
empiric menggunakan uji coba pada sejumlah kasus, umpan balik pengguna yang
dapat dikerjakan dengan tanya jawab maupun kuesioner, dan beberapa analisis
yang dikerjakan oleh ahli antarmuka.

24
PERTEMUAN 2.A
PENDAHULUAN
 FAKTOR MANUSIA
Sistem komputer mempunyai 3 aspek yaitu perangkat keras (hardware),
perangkat lunak (software), manusia (brainware), yang saling terkait dan
berhubungan. Ketika hendak membangun sebuah IMK, aspek manusia harus
terpikirkan dengan matang, tidak hanya memikirkan aspek teknis dari sistem
komputer saja.
 FAKTOR MANUSIA
Bagaimana manusia menangkap data/informasi, bagaimana
memproses dan mengelola informasi yang telah ditangkapnya.
Manusia dapat dipandang sebagai sistem pemroses informasi,
yaitu:
- informasi diterima dan ditanggapi melalui saluran input-output
(indera)
- informasi disimpan dalam ingatan (memori)
- informasi diproses dan diaplikasikan
dalam berbagai cara
 FAKTOR MANUSIA
Kapasitas manusia satu dengan yang lain dalam menerima
rangsang dan memberi reaksi berbeda satu dengan yang lain dan
hal ini menja
di faktor yang harus diperhatikan dalam merancang interface.

Faktor manusia dalam IMK terbagi menjadi:

• Pengendalian Motorik
• Panca Indra (Penglihatan, Pendengaran,Sentuhan )
• Pemodelan Sistem Pengolahan
PERTEMUAN 2.B
PENDAHULUAN
PEMODELAN SISTEM PENGOLAHAN
• Model konseptual atau model perancang:
• model yang diciptakan oleh perancang
• Gambaran sistem (system image)
• sistem yang diciptakan oleh perancang dan yang sesungguhnya dilihat oleh
pengguna
• menyangkut apa yang terlihat di layar tampilandokumentasi
• hal-hal lain yang berhubungan dengan sistem tersebut.
• Model mental (pengguna):
• model yang diciptakan oleh pengguna ketika pengguna berinteraksi dengan
suatu sistem
• model mental tidak akan pernah terbentuk jika seseorang tidak pernah
menggunakan sistem
PEMODELAN SISTEM (2)
PEMODELAN
PERTEMUAN 2.C
PENDAHULUAN
 PENGENDALIAN MOTORIK
Responder utama pada diri operator manusia
adalah dua buah tangan yang berisi 10 jari, dua kaki dan
satu suara.
Pengendalian motorik ini dapat dilatih untuk
mencapai taraf kemampuan tertentu. Contoh: Pengetikan
10 jari untuk mendapatkan 1000 huruf per menit
barangkali kemampuan yang umum, tetapi anda yang
mengetik dengan 2 jari, kecepatan 400 huruf permenit-
pun barangkali sulit untuk dicapai.
PERTEMUAN 2.D
PENDAHULUAN
 PANCA INDERA
Manusia merasakan dunia nyata dngan
menggunakan peranti yang lazim di kenal sebagai
panca indera , yaitu, telinga, hidung, lidah dan kulit.
Lewat Panca Indra inilah kita dapat membuat model
manusia sebagai pengolah informasi.
Tetapi perlu di inggat bahwa model ini
mempunyai banyak keterbatasan dan hanya berlaku
pada kondisi yang sangat terbatas.
 PENGLIHATAN
Mata manusia digunakan untuk menghasilkan persepsi yang
terorganisir akan gerakan, ukuran, bentuk, jarak, posisi relatif,
tekstur dan warna. Dalam dunia nyata, mata selalu digunakan untuk
melihat semua bentuk 3 dimensi.
Dalam sistem komputer yang
menggunakan layar 2 dimensi, mata kita
dipaksa untuk dapat mengerti bahwa
obyek pada layar tampilan, yang
sesungguhnya berupa obyek 2 dimensi,
harus dipahami sebagai obyek 3 dimensi
dengan teknik – teknik tertentu. obyek 3
dimensi dengan teknik – teknik tertentu.
 PENGLIHATAN
Beberapa hal yang mempengaruhi mata dalam menangkap sebuah informasi dengan
melihat:
1. Luminans (Luminance)
2. Kontras
3. Kecerahan
4. Sudut dan Ketajaman Penglihatan
5. Medan Penglihatan
6. Warna
7. PENDENGARAN
8. SENTUHAN
 PENGLIHATAN

1. Luminans (Luminance)
Adalah banyaknya cahaya yang dipantulkan oleh permukaan
objek. Semakin besar luminans dari sebuah objek, rincian objek
yang dapat dilihat oleh mata juga akan semakin bertambah.
Diameter bola mata akan mengecil sehingga akan meningkatkan
kedalaman fokusnya. Hal ini ditiru oleh lensa pada kamera ketika
apertur-nya diatur. Bertambahnya luminans sebuah obyek atau layar
tampilan akan menyebabkan mata bertambah sensitif terhadap
kerdipan (flicker).
 PENGLIHATAN
2. Kontras
Adalah hubungan antara cahaya yang dikeluarkan oleh suatu objek dan cahaya dari latar
belakang objek tersebut. Kontras merupakan selisih antara luminans objek dengan latar
belakangnya dibagi dengan luminans latar belakang. Nilai kontras positif akan diperoleh
jika cahaya yang dipancarkan oleh sebuah objek lebih besar dibanding yang dipancarkan
oleh latar belakangnya. Nilai kontras negatif dapat menyebabkan objek yang
sesungguhnya “terserap” oleh latar belakang, sehingga menjadi tidak nampak.
Dengan demikian, obyek dapat mempunyai kontras negatif atau positif tergantung dari
luminans obyek itu terhadap luminans latar belakangnya.
 PENGLIHATAN
3. Kecerahan
Adalah tanggapan subjektif pada cahaya. Luminans yang tinggi berimplikasi pada
kecerahan yang tinggi pula. Kita akan melihat suatu kenyataan yang ganjil ketika
kita melihat pada batas kecerahan tinggi ke kecerahan rendah.

4. Sudut dan Ketajaman Penglihatan

Sudut penglihatan (visual angle) adalah sudut yang berhadapan oleh objek pada mata.
Ketajaman mata (visual acuity) adalah sudut penglihatan minimum ketika mata masih
dapat melihat sebuah objek dengan jelas.
 PENGLIHATAN
5. Medan Penglihatan
Adalah sudut yang dibentuk ketika mata bergerak ke kiri terjauh dan ke kanan
terjauh, yang dapat dibagi menjadi 4 daerah, yaitu:
• Daerah pertama (penglihatan binokuler) adalah tempat kedua mata mampu melihat
sebuah obyek dalam keadaan yang sama.
• Daerah kedua (penglihatan monokuler kiri) adalah tempat terjauh yang dapat dilihat oleh
mata kiri ketika mata kiri kita gerakkan ke sudut paling kiri.
• daerah ketiga (penglihatan monokuler kanan) adalah tempat terjauh yang dapat dilihat
oleh mata kanan ketika mata kiri kita gerakkan ke sudut paling kanan.
• Daerah keempat adalah daerah buta, yakni daerah yang sama sekali tidak dapat dilihat
oleh kedua mata.
 PENGLIHATAN
6. Warna
Warna merupakan hasil dari cahaya dimana cahaya merupakan perwujudan dari spektrum
elektromagnetik. Jika panjang gelombang berada pada kisaran 400 – 700 nm, luminans
konstan dan saturasinya (jumlah cahaya putih yang ditambahkan) dijaga tetap, seseorang
yang mempunyai penglihatan warna normal mampu membedakan kira- kira 128 warna yang
berbeda. Banyaknya warna yang dapat dibedakan satu dengan yang lain bergantung pada
tingkat sensitifitas mata seseorang. Sensitifitas ini tidak merata pada seluruh medan
penglihatan seseorang.
 PENGLIHATAN
Mata dapat membedakan warna secara akurat ketika posisi obyek membentuk sudut sebesar
± 150 terhadap mata (dengan posisi kepala dan mata diam). Dengan warna manusia mampu
membedakan satu objek dengan objek yang lain. Dengan warna manusia terbantukan dalam
mengolah data menjadi informasi. Penggunaan warna yang sesuai dengan pengguna akan
mempertinggi efektifitas tampilan grafis. Jika warna yang digunakan tidak mengindahkan
aspek kesesuaian dengan pengguna, maka pengguna justru bisa menerima informasi yang
salah.
 PENGLIHATAN
Tetapi tidak adanya standar yang dapat digunakan sebagai acuan resmi tentang penggunaan
warna yang bagus, karena karakteristik orang per orang berbeda dalam hal persepsi tentang
warna. Beberapa aspek yang perlu diperhatikan dalam menggunakan warna:
a. Aspek Psikologi
- Hindari penggunaan tampilan yang secara simultan menampilkan sejumlah warna tajam.
Warna 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.
- Hindari warna biru murni untuk teks, garis tipis dan bentuk yang kecil, karena mata kita tidak
diset untuk rangsangan yang terinci/kecil, tajam, bergelombang pendek.
- Hindari warna berdekatan yang hanya berbeda dalam warna biru. Sudut – sudut yang beda
hanya pada prosentase warna biru akan terlihat sama.
 PENGLIHATAN
- Pengamat yang lebih tua memerlukan aras ketajaman yang lebih tinggi untuk
membedakan warna.
- Besarnya perubahan warna yang dapat dideteksi bervariasi untuk warna yang
berbeda. Perubahan kecil dalam warna merah dan ungu sukar dideteksi dibandingkan
dengan warna lain seperti kuning dan biru hijau. Selain itu sistem penglihatan kita
tidak siap untuk merasakan perubahan warna hijau.
- Hindari warna merah dan hijau yang ditempatkan secara berseberangan pada
tampilan berskala besar. Warna yang lebih cocok adalah biru dan kuning.
- Warna yang berlawanan dapat digunakan bersama – sama. Merah dengan hijau atau
kuning dengan biru merupakan kombinasi yang baik untuk tampilan sederhana.
Kombinasi merah dengan kuning atau hijau dengan biru akan menghasilkan citra
yang lebih jelek.
 PENGLIHATAN
- Untuk pengamat yang mengalami kekurangan dalam melihat warna hindari
perubahan warna tunggal.
- Warna akan berubah kenampakannya ketika aras cahaya sekeliling berubah sehingga
tampilan akan berubah ketika cahaya sekeliling berbeda sangat tajam.
Kombinasi warna terjelek
 PENGLIHATAN
Kombinasi warna terbaik
 PENGLIHATAN
b. Aspek Perceptual (persepsi)
Persepsi adalah proses pengalaman seseorang dalam menggunakan sensor
warnanya. Diterima tidaknya layar tampilan warna oleh para pengguna, sangat
bergantung pada bagaimana warna digunakan. Warna dapat meningkatkan interaksi
hanya jika implementasinya mengikuti prinsip dasar dari penglihatan warna oleh
manusia. Tidak semua warna mudah dibaca. Secara umum latar belakang dengan
warna gelap akan memberikan kenampakan yang lebih baik (informasi lebih jelas)
dibanding warna yang lebih cerah, serta hindari diskriminasi warna pada daerah
yang kecil.
 PENGLIHATAN
c. Aspek Kognitif
- Jangan menggunakan warna yang berlebihan karena penggunaan warna bertujuan
menarik perhatian atau pengelompokan informasi. Sebaiknya menggunakan warna
secara berpasangan.
- Kelompokkan elemen – elemen yang saling berkaitan dengan latar belakang yang sama.
- Warna yang sama membawa pesan yang serupa.
- Urutkan warna sesuai dengan urutan spektralnya.
- Kecerahan dan saturasi akan menarik perhatian.
- Warna hangat dan dingin sering digunakan untuk menunjukkan arah tindakan. Biasanya
warna hangat untuk menunjukkan adanya tindakan atau tanggapan yang diperlukan.
Warna yang dingin biasanya digunakan untuk menunjukkan status atau informasi latar
belakang.
 PENDENGARAN
Dengan pendengaran informasi yang diterima melalui mata dapat lebih lengkap dan akurat.
Pendengaran ini menggunakan suara sebagai bahan dasar penyebaran informasinya.
Manusia dapat mendeteksi suara dalam kisaran frekuensi 20 Hertz sampai 20 Khertz tetapi
batas bawah dan batas atas biasanya dipengaruhi oleh umur dan kesehatan seseorang.
Suara yang berkisar pada frekuensi 1000 – 4000 Hertz menyebabkan pendengaran menjadi
lebih sensitif. Selain frekuensi, suara juga dapat bervariasi dalam hal kebisingan (loudness).
Jika batas kebisingan dinyatakan sebagai 0 dB (decible) maka suara bisikan mempunyai
tingkat kebisingan 20 dB, percakapan biasa mempunyai tingkat kebisingan 50 dB sampai 70
dB. Kerusakan telinga terjadi jika mendengar suara dengan kebisingan lebih dari 140 dB.
Suara dapat dijadikan sebagai salah satu penyampaian informasi akan tetapi hal itu dapat
menjadikan manusia cepat bosan sehingga penggunaan suara dalam antarmuka perlu
pemikiran khusus dan seksama.
 SENTUHAN
Kulit adalah indera manusia yang berfungsi untuk mengenali lingkungan dari
rabaan atau sentuhan benda terhadap tubuh manusia. Sentuhan ini dikaitkan
dengan aspek sentuhan dalam bentuk media inputan maupun keluaran. Sensitifitas
sentuhan lebih dikaitkan dengan aspek ergonomis dalam sebuah sistem.
Feedback dari sentuhan disini tidak dijadikan sebagai penyaji atau
penerimaan informasi, tetapi lebih ke piranti pendukung seperti model keypad
handphone, keyboard, mouse, tempat duduk user, dsb.
Contoh dalam penggunaan papan ketik atau tombol, kita akan merasa
nyaman bila tangan kita merasakan adanya sensasi sentuhan. Ketidaknyamanan
biasanya disebabkan karena posisi dan bentuk tombol serta pengoperasian
tombol – tombol tersebut kadang – kadang harus dilakukan penekanan yang
cukup berat atau malah terlalu ringan.
PERTEMUAN 2.E
LINGKUNGAN SEKITAR
 LINGKUNGAN SEKITAR
Untuk Lebih memahami kompleksitas IMK kita perlu memahami lingkungan sosial,
fisik, dan kognitif, serta alasan orang menggunakan Komputer. Dengan memahami
berbagai aspek yang berkaitan dengan lingkungan sekitar, kita akan dapat
menemukan paradigma komputasi yang lebih baik untuk menyelesaikan suatu
pekerjaan.
 LINGKUNGAN SOSIAL
Studi menunjukkan bahwa lingkungan sosoial mempengaruhi cara manusia
menggunakan Komputer. Sebaliknya, pengguna computer juga
mempengaruhi interaksi social. Hal ini merupakan salah satu pertimbangan
utama untuk pengembangan sisitem komputasi kolaboratif karena akan
sangat merugikan apabila rancangan sistem kolaboratif yang ada justru
menghalangi adanya interaksi antar manusia. Komputasi yang berbeda
menunjukan adanya perbedaaan lingkungsn sosial.

Contoh :
Komputasi pribadi biasanya merupakan aktivitas tunggal yang
dilakukan di kantor atau di rumah.
 LINGKUNGAN KOGNITIF
Bakat kognitif manusia mencakup berbebagai kemampuan yang luas.
Perancangan interaksi harus mempertimbangkan berbagi factor kognitif. misalnya
umur dan berbagai kondisi yang berhubungan dengan ketidak mampuan atau
cacat pada manusia. Perancangan sistem komputer harus memperhatikan
berbagai isu yang menyangkut adanya perbedaan dinamika kognitif dan
lingkungan.
 LINGKUNGAN KOGNITIF
Ada beberapa sejumlah aspek yang berhubungan dengan lingkungan kognitif yaitu :
1. Umur
Sejumlah sistem di rancang untuk di gunakan oleh anak kecil yang belajar
keterampilan dasar seperti membaca dan aritmatika kemudian beberapa sistem
yang lainnya di rancang untuk para teknisi dan para ahli di bidangnya.
Sistem Komputer yang tidak sesuai dengan umur pengguna akan menyebabkan
frustasi atau bahkan dapat di anggap sebagai penghinaan.
Misalnya :
Teknisi dan para ahli akan berpendapat bahwa animasi yang menarik justru
menjengkelkan disisi lain anak – anak akan cepat merasa bosan, atau sama sekli
tidak tertarik dengan daftar link yang Panjang.
 LINGKUNGAN KOGNITIF
2. Kondisi yang berhubungan dengan ketidakmampuan (cacat)
Sistem komputer dapat dirancang untuk digunakan oleh orang – orang cacat.
3. Derajat pengetahuan teknis
Sejumlah sistem dirancang untuk digunakan oleh orang yang mempunyai keterampilan dan
fasilitas khusus.
4. Fokus
Sistem computer dapat dirancang untuk orang yang memfokuskan diri secara penuh pada suatu
pekerjaan, misalnya bermain Game
5. Tekanan Kognitif
Sistem Komputer digunakan di lingkungan yang berbeda dengan tingkat tekanan kognitif yang
berbeda dengan tingkat tekanan kognitif yang berbeda pula. Berbagai aplikasi untuk aktivitas
hiburan seperti mendengarkan musik sampai ke lingkungan yang mengandung resiko sangat
tinggi, Misalnya Komputer yang digunakan untuk mengawasi lalu lintas udara.
 LINGKUNGAN KOGNITIF
2. Kondisi yang berhubungan dengan ketidakmampuan (cacat)
Sistem komputer dapat dirancang untuk digunakan oleh orang – orang cacat.
3. Derajat pengetahuan teknis
Sejumlah sistem dirancang untuk digunakan oleh orang yang mempunyai keterampilan dan
fasilitas khusus.
4. Fokus
Sistem computer dapat dirancang untuk orang yang memfokuskan diri secara penuh pada suatu
pekerjaan, misalnya bermain Game
5. Tekanan Kognitif
Sistem Komputer digunakan di lingkungan yang berbeda dengan tingkat tekanan kognitif yang
berbeda dengan tingkat tekanan kognitif yang berbeda pula. Berbagai aplikasi untuk aktivitas
hiburan seperti mendengarkan musik sampai ke lingkungan yang mengandung resiko sangat
tinggi, Misalnya Komputer yang digunakan untuk mengawasi lalu lintas udara.
PERTEMUAN 3.A
KERANGKA KERJA
 KERANGKA KERJA UNTUK
MEMAHAMI INTERAKSI
Definisi Kerangka Kerja :
Kerangka kerja adalah sebuah struktur yang digunakan untuk
mengonseptualisasikan suatu sistem (konsep sistem).

Fungsi Kerangka Kerja :

Menyusun proses perancangan dan membantu perancang untuk
melakukan identifikasi bagian rancangan yang bermasalah.
 FUNGSI KERANGKA KERJA

Menyusun proses perancangan dan membantu perancang untuk

melakukan identifikasi bagian rancangan yang bermasalah.

Membantu membuat konsep ruang persoalan secara

menyeluruh dan menciptakan suatu ruang kerja dari sekelompok
perkakas interaksi.

62
 Siklus Tindakan Eksekusi/Evaluasi

Donald Norman (1990) berpendapat bahwa

sebuah konsep memegang peranan penting bagi
perancang untuk dapat memahami kosep IMK
dengan lebih mudah.

Konsep ini menggali asal-usul tindakan dan

bagaimana tindakan itu dapat disusun.
63
 4 Bagian Dasar Siklus Tindakan
Eksekusi/Evaluasi

• Goal : kejadian yang diinginkan oleh pengguna.

• Eksekusi : melakukan eksekusi atas suatu tindakan dalam
dunia nyata.
• Dunia nyata : tempat dimana pengguna dapat
mengeksekusi suatu tindakan dengan memanipulasi obyek.
• Evaluasi : validasi pengguna atas suatu tindakan dalam
membandingkan dengan goal yang telah ditetapkan
sebelumnya.

64
TUJUH LANGKAH TINDAKAN
 JARAK PEMISAH EKSEKUSI
Jarak pemisah eksekusi adalah perbedaan antara keinginan pengguna dg apa
yang dapat dilakukan oleh sebuah sistem atau seberapa jauh sistem tersebut
dapat mendukung tindakan yang akan dilakukan oleh pengguna.

Contoh:
Pengguna yang sudah memformulasikan keinginan menggunakan menu File
dan memilih save. Apakah antarmuka yang tersedia untuk melakukan
tindakan?
Apakah di dalam menu File terdapat pilihan save ?
Jika tidak terdapat maka terdapat jarak pemisah eksekusi antara keinginan
pengguna dengan yang dapat dilakukan oleh sistem.
JARAK PEMISAH EVALUASI
 KERANGKA KERJA INTERAKSI

Siklus tindakan ekseskusi/evaluasi berfokus

kepada cara pandang pengguna tentang
interaksi, tidak mempertimbangkan hal lain
diluar interaksi.
 KOMPONEN UTAMA KERANGKA KERJA
INTERAKSI

• Sistem (S) – menggunakan bahasa mesin (atribut

komputasi yang menunjukan status sistem)
• Pengguna (P) – menggunakan bahasa tugas (atribut
psikologis yang menunjukan status pengguna)
• Masukan (M) – menggunakan bahasa masukan.
• Keluaran (K) – menggunakan bahasa keluaran.
 LANGKAH FASE EKSEKUSI
• Artikulasi – pengguna memformulasi sebuah
goal yang kemudian dinyatakan dalam bahasa
masukan.
• Pengerjaan – bahasa masukan diterjemahkan ke
dalam bahasa mesin (dikerjakan oleh sistem).
• Penyajian – sistem menyajikan hasil operasi,
yang menggunakan bahasa mesin,
menggunakan bahasa keluaran.
 LANGKAH FASE EVALUASI

Langkah fase evaluasi hanya berisi langkah

untuk :
Observasi – penggunan mengartikan hasil
yang muncul di layar dan mencocokannya
dengan goal semula.
PERTEMUAN 3.B
MENGATASI KOMPLEKSITAS
 MENGATASI KOMPLEKSITAS

Jika perancang ingin membangun sistem yang mudah digunakan:

• Perancang harus memahami bagaimana pengguna melihat
sesuatu.
• Melihat dunia dengan kacamata pengguna.
• Perancang memahami apa yang dirasakan pengguna ketika
menggunakan program rancangannya.
Untuk itu, perancang harus MEMAHAMI bagaimana manusia
mengatasi KOMPLEKSITAS suatu lingkungan kerja secara teknis.
PERTEMUAN 3.C
PARADIGMA INTERAKSI
PARADIGMA INTERAKSI
 PARADIGMA INTERAKSI
Terdapat tiga paradigma dominan dalam perancangan konseptual
dan visual suatu antarmuka, berpusat pada implementasi (BPI),
metaforik, dan idiomatic.

Antarmuka BPI didasarkan pada ‘intuisi” tentang cara bekerjanya

suatu benda. Antarmuka idiomatic didasarkan pada
“pembelajaran” tentang cara bekerjanya suatu benda.
 Antarmuka Berpusat Pada
Implementasi
Antarmuka BPI sangat banyak dijumpai di kalangan industru
komputer. Antarmuka ini diekspresikan dalam bentuk atau cara
dibentuk.
Tingkat keberhasilan penggunaannya bergantung kepada
seberapa jauh pengguna memahami cara bekerjanya program.
Perancangan antarmuka BPI mengharuskan untuk secara
eksklusif berfokus pada model implementasinya.
 ANTARMUKA METAFORIK

Antarmuka metaforik bergantung kepada hubungan intuitif

yang dibuat pengguna pada saat mereka melihat simbol visual
dari suatu komponen antarmuka dengan fungsinya.

Dalam hal ini tidak ada keharusan bagi pengguna untuk

memahami mekanisme suatu program, sehingga paradigma
ini merupakan satu langkah maju dari BPI, hanya saj daya tarik
dan manfaatnya dibesar-besarkan secara tidak proporsional.
 KETERBATASAN METAFOR

Metafor perlu digunakan untuk memfasilitasi pembelajaran. Mereka

tidak boleh kontradiktif dengan pengetahuan yang dimiliki oleh
pengguna.

Jika perancang menggunakan metaphor yang tidak sesuai dengan apa

yang diharapkan oleh pengguna, tidak hanya perancang yang gagal
memanfaatkan keunggulan metaphor, tetapi juga membuat bingung
pengguna dan menciptakan frustasi yang tidak beralasan.
 ANTARMUKA IDIOMATIC
Perancangan idiomatic didasarka pada cara pengguna belajar
sesuatu dan menggunakan berbagai idiom, misalnya polisi
tidur, jago merah, atau rintangan tangan.

Antarmuka idiomatic memecahkan persoalan – persoalan

yang dimiliki oleh kedua paradigm di atas dengan tidak
berfokus kepada pengetahuan teknis atau instuisi tentang
bagaimana suatu benda berfungsi.
PARADIGMA INTERAKSI
PERTEMUAN 4-5
KEBERGUNAAN
 KESALAHAN KLASIK
Seorang perancang sering melakukan kesalahan
dalam merancang sebuah sistem. Kesalahan tersebut
disebabkan oleh kesalahan asumsi terhadap
rancangannya, pilihan yang TIDAK secara tegas
ditentukan, dan fitur-fitur yang tidak memadai.
 KESALAHAN UMUM DALAM
PERANCANGAN
• Perancangan yang didasarkan pada common-sense.
• Perwakilan perilaku (kebiasaan seseorang dianggap sama dng
orang lainnya).
• Keinginan atasan yang harus dilakukan.
• Kebiasaan atau tradisi lama.
• Anggapan implisit yang tidak sesuai / tidak didukung.
• Keputusan perancangan awal yang tidak didukung.
• Penundaan evaluasi.
• Evaluasi yang menggunakan subyek yang tidak sesuai.
• Eksperiman yang tidak bisa dilakukan analisis.
 KEPUASAAN BERINTERAKSI
Kepuasan berinteraksi adalah kriteria penting untuk menantukan
kebergunaan sebuah sistem. Berbagai cara dilakukan untuk menguji
sistem guna mendapatkan data kuantitatif.
Sejumlah pertanyaan digunakan untuk menangkap kesan subyektif
pengguna adalah latat belakang demografi, keseluruhan reaksi meraka
atas sistem yang diuji fitur tampilan (karakter, tata letak, urutan dan
perpindahan antartampilan), terminologi dan informasi tentang sistem.
 8 Capaian Kepuasan Interaksi

1. Konsistensi
2. Fasilitas kunci-cepat
3. Umpan balik yang informatif
4. Rancangan dialog yang mengarah ke penutupan
5. Pencegahan kesalahan dan penanganan kesalahan
6. Pembalikan tindakan yang mudah
7. Dukungan pada locus of control internal
8. Pengurangan beban memori jangka pendek.
 DEFINISI KEBERGUNAAN
Kebergunaan adalah derajat kemampuan sebuah perangkat lunak
untuk membantu penggunanya menyelesaikan sebuah tugas.
Keberhasilan tersebut memenuhi kriteria :
1. Berguna (useful) : sistem yang berfungsi seperti yang dinginkam
oleh penggunanya.
2. Dapat digunakan (usable) : sistem yang mudah dioperasikan.
3. Digunakan (used) : sistem yang memotivasi penggunanya untuk
menggunakannya, menarik, menyenangkan, dan lainnya.
 5 Komponen Kualitas Penentu
Kebergunaan Sistem (Nielsen, 2003)

1. Kemampuan untuk dipelajari

2. Efisiensi
3. Mudah diingat
4. Kesalahan dan Keamanan
5. Kepuasan
 UJI KEBERGUNAAN

Uji kebergunaan adalah proses untuk mengukur

karakteristik interaksi manusia – komputer dari
sebuah sistem. Uji kebergunaan juga digunakan untuk
mengidentifikasi kelemahan-kelemahan antarmuka,
sehingga perancang sistem dapat memperbaikinya
secara tepat.
 CARA UJI KEBERGUNAAN

1. Pemilihan kartu
2. Evaluasi Heuristik
3. Uji Berbasis Skenario
PERTEMUAN 6-7
ANTARMUKA BERBASIS MENU
 PENGANTAR

• Menu → sekumpulan pilihan yang ditampilkan pada layar, setiap

menu mewakili sebuah perintah.
• Pengguna memilih sebuah perintah dari sejumlah perintah yang
disusun ke dalam sejumlah menu dan melihat pengaruhnya.
• Tujuan Menu → menciptakan organisasi menu yang pantas, mudah
dipahami, mudah diingat dan tepat sesuai dengan tugas pengguna.
JENIS MENU
 ORGANISASI MENU BERBASIS TUGAS

“Struktur menu mendefinisikan tingkat kendali pengguna dalam

melaksanakan sebuah task (tugas).”

VARIASI MENU (STRUKTUR

MENU)
ORGANISASI MENU BERBASIS TUGAS
ORGANISASI MENU BERBASIS TUGAS
 MENU TUNGGAL
Menu tunggal memungkinkan pengguna untuk memilih satu dari dua
pilihan ataupun sejumlah pilihan
 MENU TUNGGAL
MENUBINER

Hanya boleh memilih satu pilihan dari dua pilihan

VARIASI MENU (STRUKTUR

MENU)
KOMBINASI BANYAK MENU
Pada sejumlah aplikasi, khususnya yang berbasis Web,
biasanya dijumpai sejumlah ragam
menu yang berbeda
 KOMBINASI BANYAK MENU
MENU LINEAR DAN MENU SEREMPAK
• Menu disusun secara linear
sehingga membantu pengguna
dalam mengambil keputusan
secara bertahap

• Contoh : Saat pengguna

membeli Pakaian, harus
memilih dulu ukuran, warna dll
CARA MENGORGANISIR PILIHAN
Untuk memudahkan pengguna dalam
menggunakan aplikasi yang dibangun. Berupa
pengelompokan dan pengurutan pilihan yang
tersedia.
 PENGELOMPOKKAN BERBASIS
TUGAS
• Satukan pilihan – pilihan yang secara logis serupa. Contoh : Kelompok Alamat
 Tingkat 1 : Nama Provinsi
 Tingkat 2 : Nama Kota
• Kelompokkan berdasar nilai tertentu. Contoh : Kelompok Umur
 0 –9
 10 – 19
 >20
• Pastikan pilihan tidak saling tumpang tindih. Contoh : Penggunaan Kalimat
 “Hiburan” dan “Peristiwa” lebih membingungkan
 “Konser” dan “Olahraga” tidak membingungkan
• Gunakan istilah yang sederhana & pastikan antara pilihan harus berbeda. Contoh :
 Penggunaan istilah “Pagi” dan “Malam” diganti dengan istilah AM/PM
 PENGURUTAN PENYAJIAN PILIHAN
• Dasar pengurutan :
• Waktu (urutan kronologis)
• Urutan Numerik (secara Ascending – Descending)
• Sifat Fisik (co/ Panjang, Luas, Volume dll)
• Dasar kemungkinan pengurutan :
• Pilihan paling penting diletakkan sebagai pilihan pertama
• Pilihan paling sering digunakan diletakkan sebagai pilihan pertama
• Kelompok dari sejumlah pilihan terkait (dipisahkan dengan baris kosong
dll)
• Urutkan secara alfabetis
PERTEMUAN 9.A
DIALOG BERBASIS OBJEK
 DIALOG BERBASIS TEKS

1. Dialog Berbasis Teks

a. Dialog Berbasis Perintah-Perintah Tunggal
b. Dialog Berbasis Kombinasi Perintah
c. Antarmuka Berbasis Bahasa Alami
 DIALOG BERBASIS TEKS

Dialog berbasis teks adalah sebuah cara yang dilakukan

manusia dengan komputer dengan menggunakan teks
sebagai perantara perintah (inputan).
Contohnya adalah penggunaan bahasa pemrograman,
terminal DOS atau command line.
 Dialog Berbasis Perintah-Perintah
Tunggal – 1.a

• Dialog ini merupakan ragam yang paling

konvensiaonal. Perintah-perintah tunggal yang dapat
dioperasikan biasanya tergantung dari sistem komputer
yang dipakai, dan berada dalam suatu domain yang
disebut bahasa perintah (command language) .
• Contoh sederhana adalah perintah pada DOS dan
LINUX
 Dialog Berbasis Perintah-Perintah
Tunggal – 1.a
Berikut beberapa saran yang harus diperhatikan saat menggunakan perintah tunggal, untuk

mengurangi beban mengingat :

1. Pilihlan kata kunci yang mudah diingat,

2. Gunakan format perintah konsisten,

3. Gunakan untaian kata yang pendek,

4. Tambahkan fasilitas bantuan (Help),

5. Gunakan nilai-nilai default untuk mengurangi kesalahan ketik,.

6. Sediakan pesan yang jelas jika masih banyak kesalahan yang muncul.
 Dialog Berbasis Perintah-Perintah
Tunggal – 1.a
Keuntungan Kerugian
1. Cepat 1. Memerlukan pelatihan yang lama
2. Efisien 2. Membutuhkan penggunaan yang
teratur dan terus menerus
3. Akurat 3. Beban ingatan yang tinggi
4. Ringkas 4. Jelek dalam menangani kesalaha
5. Luwes
6 Inisiatif dari pengguna
7. Appealing
PERTEMUAN 9.B
DIALOG BERBASIS PENGISIAN BORANG
 DIALOG BERBASIS PENGISIAN
BORANG
1. Dialog Berbasis Pengisian Borang
a. Struktur dan Organisasi
b. Evolusi Dialog Berbasis Pengisian Borang
c. Validasi Isian
d. Keuntungan dan Kerugian
 DIALOG BERBASIS PENGISIAN
BORANG
• Teknik dialog berbasis pengisian borang (form filling dialogue)
merupakan suatu penerapan langsung dari aktifitas pengisian borang
dalam kehidupan sehari-hari dimana pengguna akan mereka gunakan.
• Kualitas antarmuka berbasis pengisian borang tergantung pada tiga aspek:
• Tampilan pada layar monitor yang mencerminkan struktur data masukan
yang diperlukan
oleh sistem.
• Kejelasan perancangan dan penyajiannya secara visual pada layar monitor.
• Derajat kebenaran dan kehandalan penerimaan data masukan oleh program
lewat berbagai fasilitas pemasukan data yang ada di dalam borang
tersebut.
DIALOG BERBASIS PENGISIAN
BORANG
Contoh tampilan berbasis pengisian borang
PERTEMUAN 10-11
PERANTI INTERAKSI
 PERANTI INTERAKSI

Peranti interaksi diperlukan untuk mendukung operasional teknik

antarmuka grafis. Peranti tersebut sering dinamakan peranti
masukan/keluaran (input/output device), dan layar tampilan.

Dalam hal peranti keluaran, biasanya hanya disebut layar tampilan

karena lewat layar tampilanlah kita dapat melakukan dialog dengan
komputer. Dalam hal ini komputer berfungsi sebagai wajah dari
sebuah komputer yang kita ajak dialog.
 PERANTI INTERAKSI
Pengertian
• Piranti interaksi adalah peralatan input yang
digunakan
untuk melakukan interaksi (komunikasi) dengan
komputer / Input unit.
• Input Unit adalah peranti tempat untuk
memasukkan data
dan program yang akan diproses di dalam komputer
 PERANTI MASUKAN TEKSTUAL

KEYBOARD
• Keyboard adalah piranti masukkan data
tekstual yang utama
• Keyboard yang ergonomis:
• Tebalnya 30-45 mm
• Kemiringannya 10-25 derajat
 PERANTI MASUKAN TEKSTUAL

Tata letak keyboard

• QWERTY layout
 PERANTI MASUKAN TEKSTUAL
• 1870-an, Christopher Latham Sholes
• memperlambat gerakan pemakai sehingga jarang macet
tombolnya
• pasangan huruf sering berjauhan sehingga
meningkatkan
jarak pergerakan jari
• standar keyboard bahasa inggris
• kecepatan rata-rata : 15 ketikan per detik (150 kata per
menit)
 PERANTI MASUKAN TEKSTUAL

Tata letak keyboard

• Dvorak layout
 PERANTI MASUKAN TEKSTUAL
• 1936, august Dvorak & Willian L. Dealey
• mengurangi jarak pergerakan jari
• mempercepat kecepatan pengetikan (200 kata per menit)
• mengurangi kesalahan
• belum diterima secara luas karena kebanyakan orang tidak
mau pindah dari QWERTY. Ini menunjukkan bahwa manfaat
perubahan tidak lebih berharga daripada usaha untuk
berubah
 PERANTI MASUKAN TEKSTUAL

Tata letak keyboard

• ABCDE layout
 PERANTI MASUKAN TEKSTUAL

• Tombol-tombol disusun menurut abjad

• Memudahkan orang yang tidak biasa mengetik
• Kalah populer dari keyboard QWERTY karena
QWERTY
membuat pengetikan menjadi ketrampilan yang
umum.
 PERANTI MASUKAN TEKSTUAL

Klockenburg Layout
• memperhatikan
faktor ergonomis,
dengan mengurangi
beban otot pada jarijemari,
Pergelangan tangan, dan bahu
 PERANTI MASUKAN TEKSTUAL
Palantype Layout
• Kombinasi beberapa tombol untuk menghasilkan kata atau suku
kata
• Dipakai di pengadilan untuk mencatat perkataan seseorang
• Dibagi atas 3 kelompok :
- Kelompok kanan, konsonan awal kata/suku kata
- Kelompok Tengah, vokal
- Kelompok Kiri, konsonan akhir kata/suku kata
- Merekam suara 180 kata per menit
- Tidak menjamin ejaan
 PERANTI MASUKAN TEKSTUAL

Steno Type Layout

• Banyak digunakan wartawan
 PERANTI MASUKAN TEKSTUAL

Tombol-tombol keyboard
• Ukuran : ½ inci ; jarak antartombol:1/4 inci
• Tekanan : 40-125 gf/luasnya
• Jika ditekan,masuk 3-5 mm
• Tombol-tombol khusus harus lebih besar
• Tanda bagi Caps Lock, Num Lock, Scroll Lock
• Warna yang informatif
• Tombol F dan J di tata letak QWERTY ditandai
 PERANTI MASUKAN TEKSTUAL

Tombol-tombol fungsi (function keys)

• Untuk fungsi-fungsi khusus
• Menggantikan perintah dengan penekanan satu tombol saja
• Positif : mengurangi ketukan dan kesalahan
• Negatif : fungsinya harus dihafal dan lokasinya jauh dari
home position
 PERANTI MASUKAN TEKSTUAL

Tombol-tombol fungsi (function keys)

• Untuk fungsi-fungsi khusus
• Menggantikan perintah dengan penekanan satu tombol saja
• Positif : mengurangi ketukan dan kesalahan
• Negatif : fungsinya harus dihafal dan lokasinya jauh dari
home position
 PERANTI MASUKAN TEKSTUAL

Trackpoint (Pointing Stick)

Joystick mini isometrik dari bahan karet yang diletakkan di
antara tombol-tombol keyboard dan digerakkan jari tangan.
 PERANTI MASUKAN TEKSTUAL

Graphics Tablet
• Permukaan peka sentuh yang terpisah dari layar. Mendeteksi
gerakan stylus atau puck.
• Keuntungan:
• Posisi tangan nyaman.
• Tidak perlu menunjuk layar.
• Permukaan luas
 PERANTI MASUKAN TEKSTUAL
Touchpad
• Permukaan peka sentuh yang biasa digunakan
pada laptop.
• Nyaman seperti touch screen namun tidak
perlu langsung
menyentuh layar.
 PERANTI PENUNDING DAN PENGAMBIL
Discrete-word recognition
• Mengenali kata-kata yang diucapkan orang satu per Satu
• Kehandalan 90-98% untuk kosakata yang terdiri dari 50-150 kata
• Berguna jika:
• Tangan pembicara sibuk
• Mobilitas diperlukan
• Mata pembicara harus memperhatikan sesuatu
• Kondisi yang keras (bawah laut atau perang) atau terkungkung
(dalam kokpit)
yang tidak memungkinkan penggunaan keyboard
 PERANTI PENUNDING DAN PENGAMBIL
Discrete-word recognition
• Mengenali kata-kata yang diucapkan orang satu per Satu
• Kehandalan 90-98% untuk kosakata yang terdiri dari 50-150 kata
• Berguna jika:
• Tangan pembicara sibuk
• Mobilitas diperlukan
• Mata pembicara harus memperhatikan sesuatu
• Kondisi yang keras (bawah laut atau perang) atau terkungkung
(dalam kokpit)
yang tidak memungkinkan penggunaan keyboard
 PERANTI PENUNDING DAN PENGAMBIL

Continuous-speech Recognition
• Mengenali kata-kata yang diucapkan orang secara
normal
• Harapan: pendiktean dokumen, transkripsi
rekaman suara,
radio, atau telepon
• Contoh : Dragon Naturally Speaking
 PERANTI PENUNDING DAN PENGAMBIL

Speech store and forward

• Sistem yang memungkinkan penyimpanan dan
pengiriman
kembali pesan yang diucapkan
• Contoh :
• Informasi cuaca, penerbangan, finansial
• Voice mail dengan forward
 PERANTI PENUNDING DAN PENGAMBIL
Speech generation
Biasa disukai untuk keadaan-keadaan berikut:
• Pesan yang sederhana
• Pesan yang singkat
• Pesan yang tidak perlu direferensikan
• Pesan yang berhubungan dengan kejadian pada saat
tertentu
• Pesan yang membutuhkan tanggapan langsung
• Saluran visual komunikasi telah kelebihan beban
 PERANTI PENUNDING DAN PENGAMBIL

Lanjutan…
• Lingkungan terlalu terang, terlalu gelap, sering bergetar, atau tidak cocok
untuk transmisi informasi visual
• Pemakai harus bebas bergerak
• Pemakai dapat terkena gaya G yang tinggi atau anoksia (kekurangan
oksigen, biasanya pada tempat tinggi). Pada saat itu penglihatan sudah
terganggu, sementara pendengaran belum
 PERANTI PENUNDING DAN PENGAMBIL
• Audio tones, audiolization,
and music
• Umpan balik berupa suara dapat menjadi penting untuk:
• Konfirmasi aksi;
• Memberikan peringatan;
• Membantu pemakai yang penglihatannya terganggu;
• Memberikan mood, misalnya pada game;
• Menyediakan kesempatan yang unik bagi pemakai, misalnya
simulasi
alat musik
 PERANTI PENUNDING DAN PENGAMBIL

Display Devices (Piranti Tampilan)

•Jenis-jenis display:
• Monochrome display
• Harga murah, sering sudah memadai
• Color (RGB) display
• Lebih menarik dan efektif
 PERANTI PENUNDING DAN PENGAMBIL
Lanjutan…
•Plasma panel
• Baris-baris kawat horizontal dipisahkan dari kawat
vertikal dengan kapsul kaca berisi gas neon
• Ketika kawat menerima tegangan tinggi maka gas
berpendar
•Light-emitting diodes (LED)
• Dioda disusun untuk membentuk tampilan
• Dioda tertentu memancarkan cahaya ketika ada
tegangan
PERTEMUAN 12-13
PERANCANGAN TAMPILAN
 PENGANTAR
• Salah satu kriteria penting dari sebuah antarmuka adalah tampilan yang
menarik. Seorang pengguna, apalagi pengguna baru, biasanya tertarik
untuk mencoba sebuah program aplikasi dengan terlebih dahulu tertarik
pada suatu tampilan yang ada di hadapan matanya.
• Dokumentasi rancangan dapat dikerjakan atau dilakukan dalam beberapa
cara:
• a. Membuat sketsa pada kertas
• b. Menggunakan peranti prototipe GUI,
• c. Menuliskan tekstual yang menjelaskan tentang kaitan antara satu
jendela dengan jendela yang lain,
• d. Menggunakan peranti bantu yang disebut CASE (Computer Aided
Software Engineering).
 CARA PENDEKATAN
• Program aplikasi, pada dasarnya dapat dikelompokkan ke dalam dua kategori besar, yakni program aplikasi untuk
keperluan khusus dengan pengguna yang khusus pula (special purpose software) dan program aplikasi yang akan
digunakan oleh banyak pengguna (general purpose software), yang juga sering dikenal dengan sebutan public
software. Karena perbedaan pada calon pengguna, maka perancang program antarmuka harus benar-benar
memperhatikan hal ini.
• Pada kelompok pertama, yakni pada program aplikasi untuk keperluan khusus, misalnya program aplikasi untuk
inventori gudang, pengeloaan data akademis mahasiswa, pelayanan reservasi hotel, dan program-program aplikasi
serupa, kelompok calon pengguna yang akan memanfaatkan program aplikasi tersebut dapat dengan mudah
diperkirakan, baik dalam hal keahlian pengguna, maupun ragam antarmuka yang akan digunakan. Untuk kelompok
ini ada satu pendekatan yang dapat dilakukan, yakni pendekatan yang disebut dengan user-centered design
approach. Cara pendekatan ini berbeda dengan user design approach.
• Pendekatan secara user centered design adalah perancangan antarmuka yang melibatkan pengguna. Pelibatan
pengguna disini tidak diartikan bahwa pengguna harus ikut memikirkan bagaimana implementasinya nanti, tetapi
pengguna diajak untuk aktif berpendapat ketika perancang antarmuka sedang menggambar “wajah” antarmuka.
Dengan kata lain, perancang dan pengguna duduk bersama-sama untuk merancang wajah antarmuka yang
diinginkan pengguna. Pengguna menyampaikan keinginannya, sementara perancang menggambar kenginan
pengguna tersebut sambil menjelaskan keuntungan dan kerugian wajah antarmuka yang diingnkan oleh
pengguna, serta kerumitan implementasinya. Dengan cara seperti ini, pengguna seolah-olah sudah mempunyai
gambaran nyata tentang antarmuka yang nanti akan mereka gunakan.
 PRINSIP DAN PETUNJUK PERANCANGAN
• Antarmuka pengguna secara alamiah terbagi menjadi empat komponen: model pengguna, bahasa perintah,
umpan balik dan penampilan informasi. Model pengguna merupakan dasar dari tiga komponen yang lain.
• Model pengguna merupakan model konseptual yang diinginkan oleh pengguna dalam memanipulasi informasi
dan proses yang diaplikasikan pada informasi tersebut.
• Setelah pengguna mengetahui dan memahami model yang ia inginkan, dia memerlukan peranti untuk
memanipulasi model itu. Peranti pemanipulasian model ini sering disebut dengan bahasa perintah (command
language), yang sekaligus merupakan komponen kedua dari antarmuka pengguna. Idealnya, program komputer
kita mempunyai bahasa perintah yang alami, sehingga model pengguna dengan cepat dapat dioperasionalkan.
• Komponen ketiga adalah umpan balik. Umpan balik di sini diartikan sebagai kemampuan sebuah program yang
membantu pengguna untuk mengoperasian program itu sendiri. Umpan balik dapat berbentuk: pesan-pesan
penjelasan, pesan penerimaan perintah, indikasi adanya obyek terpilih, dan penampilan karakter yang diketikkan
lewat papan ketik. Beberapa bentuk umpan balik terutama ditujukan kepada pengguna yang belum
berpengalaman dalam menjalankan program aplikasi itu. Umpan balik dapat digunakan untuk memberi keyakinan
bahwa program telah menerima perintah pengguna dan dapat memahami maksud perintah tersebut.
• Komponen keempat adalah tampilan informasi. Komponen ini digunakan untuk menunjukkan status informasi
atau program ketika pengguna melakukan suatu tindakan. Pada bagian ini, perancang harus menampilkan pesan-
pesan tersebut seefektif mungkin, sehingga mudah dipahami oleh pengguna.
 PRINSIP DAN PETUNJUK PERANCANGAN
a. URUTAN PERANCANGAN
Perancangan dialog, seperti halnya perancangan sistem uang lain, harus dikerjakan secara top-down. Proses perancangannya dapat dikerjakan secara stepwise refinement sebagai berikut:
– Pemilihan Ragam Dialog
Pemilihan ragam dialog dipengaruhi oleh karakteristik populasi pengguna (pengguna mula, menengah, atau pengguna ahli), tipe dialog yang diperlukan, dan kendala teknologi yang ada
untuk mengimplementasikan ragam dialog tersebut. Ragam dialog yang terpilih dapat berupa sebuah program tunggal, atau sekumpulan ragam dialog yang satu sama lain saling
mendukung.
– Perancangan Struktur Dialog
Tahap kedua adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai. Dalam tahap ini pengguna banyak
dilibatkan, sehingga pengguna langsung mendapatkan umpan balik yang berupa diskusi informal maupun prototipe dari dialog yang nantinya akan ia digunakan.
– Perancangan Format Pesan
Pada tahap ini tata letak tampilan dan keterangan tekstual secara terinci harus mendapat perhatian lebih. Selain itu, kebutuhan data masukan yang mengharuskan pengguna untuk
memasukkan data ke dalam komputer juga harus dipertimbangkan dari segi efisiensinya. Salah satu contohnya adalah dengan mengurangi pengetikan yang tidak perlu dengan cara
mengefektifkan penggunaan tombol.
– Perancangan Penanganan Kesalahan
Bentuk-bentuk penanganan kesalahan yang dapat dilakaukan antara lain adalah:
√ Validasi pemasukan atau: misalnya jika pengguna harus memasukkan bilangan positif, sementara ia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang
pemasukan data tersebut.
√ Proteksi pengguna: program memberi peringatan ketika 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 yang tepat dan sesuai dengan kesalahan yang terjadi pada waktu itu.
– Perancangan Struktur Data
Struktur data yang diperlukan untuk mengimplementasikan dialog berbasis grafis jauh lebih rumit dibandingkan dengan struktur data yang diperlukan pada dialog berbasis tekstual.
Meskipun demikian, 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
 PRINSIP DAN PETUNJUK PERANCANGAN
b. Perancangan Tampilan Berbasis Teks
Pada perancangan tampilan untuk antarmuka berbasis teks, ada enam faktor
yang harus dipertimbangkan agar diperoleh tata letak tampilan yang
berkualitas tinggi. Keenam faktor tersebut dijelaskan sebagai berikut :

Design Interface Teks

– Urutan Penyajian
Urutan penyajian harus disesuaikan dengan model pengguna yang telah
disusun. Biasanya berdasarkan kesepakatan dengan calon pengguna
tentang urutan tampilan yang akan digunakan.
– Kelonggaran (Spaciousness)
Penyusunan tata letak yang tidak mengindahkan estetika akan mempersulit
pengguna dalam pencarian suatu teks
 PRINSIP DAN PETUNJUK PERANCANGAN
– Pengelompokkan
Data yang berkaitan sebaiknya
dikelompokkan
– Relevansi
Tampilkan hanya pesan-pesan yang
relevan sesuai topik
– Konsistensi
Perancang harus konsisten dalam
menggunakan ruang tampilan yang
tersedia
– Kesederhanaan
Cari cara yang paling mudah untuk
menyajikan informasi yang dapat dipahami
dengan cepat oleh pengguna
PRINSIP DAN PETUNJUK PERANCANGAN

c. Perancangan Tampilan Berbasis Grafis

Dengan antarmuka berbasis grafis berbagai kemudahan dalam hal pengontrolan format tampilan dapat dikerjakan dengan lebih mudah
dan fleksibilitas tampilan dapat semakin dirasakan oleh perancang tampilan maupun penggunanya. Di sisi lain, kita harus
memperhatikan, beberapa kendala dalam penerapan antarmuka berbasis grafis ini, antara lain adalah waktu tanggap, kecepatan
penampilan, lebar pita penampilan, dan tipe tampilan (berorientasi ke tekstual atau grafis).
Pada tahun 1970an, di Xerox Palo Alto Research Centre (PARC) dilakukan sejumlah penelitian yang mengarah kepada perancangan
antarmuka yang disebut Xerox Star, yang menggunakan teknik manipulasi langsung. Selain itu ditempat yang sama juga dikembangkan
suatu antarmuka berbasis grafis yang kemudian dikenal dengan sebutan Lisa yang berjalan denagn Macintosh. Penelitian lain untuk
mendapatkan antarmuka berbasis grafis terus dilakukan. Beberapa kemampuan yang dimiliki oleh Xerox Star dan Lisa, yang kemudian
diikuti oleh sistem seperti Microsoft Windows, antara lain adalah:
√ Pengguna tidak harus mengingat perintah-perintah yang sering kali cukup panjang, tetapi cukup dikerjakan dengan melihat dan
kemudian menunjuk kesuatu gambar yang mewakili suatu aktifitas (yang seterusnya disebut dengan ikon),
√ Penggunaan form property atau option untuk mengatur penampakan (wajah) desktop,
√ Kemampuan WYSIWYG (what you see is what you get) yang kemudian menjadi sangat terkenal,
√ Perintah-perintah yang berlaku umum, seperti MOVE, DELETE, atau COPY, dan lain-lain.
Berdasarkan kelebihan-kelebihan yang disebutkan pada contoh diatas, ada lima faktor yang perlu diperhatikan pada saat kita
merancang antarmuka berbasis grafis yang masing-masing dijelaskan sebagai berikut.
PRINSIP DAN PETUNJUK PERANCANGAN
– Ilusi pada obyek-obyek yang dapat dimanipulasi
Perancangan antarmuka berbasis grafis yang efektif harus melibatkan tiga komponen. Pertama, gunakan kumpulan obyek yang
disesuaikan dengan aplikasi yang akan dibuat. Jika obyek-obyek itu belum ada, kita dapat mengembangkannya sendiri. Kedua,
penampilan obyek-obyek grafis harus dilakukan dengan keyakinan bahwa ia akan dengan mudah dimengerti oleh pengguna. Ketiga,
gunakan mekanisme yang konsisten untuk memanipulasi obyek yang akan muncul dilayar.
– Urutan visual dan fokus pengguna
Antarmuka dapat digunakan untuk menarik perhatian pengguna antara lain dengan menbuat suatu obyek berkedip, menggunakan
warna tertentu untuk obyek-obyek tertentu, serta menyajikan suatu animasi yang akan lebih menarik perhatian pengguna. Tetapi,
penggunaan rangsangan visual yang berlebihan justru akan membuat pengguna bingung dan merasa tidak nyaman.
– Struktur internal
Pada pengolah kata kita seringkali menulis beberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok kata
yang ditebalkan, dimiringkan, 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 konsisten dan sesuai
Penggunaan simbol-simbol obyek, atau ikon, memang tidak ada standarnya, dan biasanya disesuaikan dengan kreatifitas
perancangnya.
– Kesesuaian dengan media
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 pada saat ini, kreatifitas perancang tampilanlah yang saat ini lebih dituntut untuk memenuhi
permintaan pengguna akan aspek kenyamanan dan keramahan antarmuka.
PRINSIP DAN PETUNJUK PERANCANGAN
d. Waktu tanggap
Waktu tanggap yang lama akan mengalihkan perhatian pengguna untuk melakukan aktifitas lain.
e. Penanganan kesalahan
Penanganan kesalahan yang tepat biasanya dilakukan dengan memberikan 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.
 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
 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
PERTEMUAN 14
STUDY KASUS
PERTEMUAN 15
PRESENTASI