Interaksi Manusia Dan
Komputer
Modul I : Konsep Dasar
Rijal Fadilah, S.Si
Konsep Dasar
· WYSIWYG : user friendly, ramah dengan
pengguna, dll.
· Ramah dengan pengguna : Kemampuan ygimiliki software yg mudah dioperasikan,mempunyai kemampuan lain sehingga user
betah mengoperasikan program tersebut.
Antarmuka Manusia-Komputer
· Prinsip kerja komputer : input, process,
output.
· Manusia berinteraksi dgn komputer dengan
cara memberikan suatu perintah ke komputer
· Tanggapan komputer berupa hasil cetakan
atau tampilan pada layar.
· Interaksi manusia-komputer hanya melalui,
input & output
Bidang Studi
· Teknik elektronika & ilmu komputer
· Hardware, teknik elektronika
· Software, ilmu komputer
· Psikologi
· Psikologi dipelajari untuk dapat memahami
bagaimana pengguna dapat menggunakan sifat &
kebiasaannya baiknya, menggunakan persepsi &
pengolahan kognitif serta keterampilan motorik yg
dimiliki agar dapat menjodohkan mesin dengan
manusia.
Bidang Studi
· Perancangan Grafis & Tipologi
· Gambar dapat digunakan sebagai sarana dialog
yg efektif antara manusia & komputer
· Ergonomik
· Berhubungan dgn aspek fisik untuk mendapatkan
lingkungan kerja yg nyaman
· Antropologi
· Ilmu pengetahuan ttg manusia.
· Memberikan suatu pandangan ttg cara kerja
berkelompok yg masing2 anggotanya diharapkan
dpt memberikan konstribusi sesua bidangnya
Bidang Studi
· Linguistik
· Merupakan sarana komunikasi, dapat berupa
grafis, bahasa alami, bahasa menu, bahasa
perintah.
· Sarana komunikasi mengarahkan pengguna
ketika berurusan dgn komputer
· Sosiologi
· Berkaitan dengan studi ttg pengaruh sistem
manusia-komputer dalam struktur sosial.














IMK4
Intera ksi
Mawusia daw Komputer
Interface & Komponen dalam IMK
Ko mp o ne n- ko mp o ne n I M K
n Manusia
sebagai pengguna sistem dan subjek manajemen sistem komputer
n Komputer
sebagai objek yang dimanajemen sekaligus membantu pekerjaan subjek
n Lingkungan kerja 4 Interface (antar muka)
Manusia
n Indera manusia (penglihatan, pendengaran, sentuhan)
Bagaimana sistem nyaman dilihat oleh pengguna
Dalam multimedia, penyajian dilakukan secara visual dan audio sehingga agar lebih menarik dan komunikatif penyajiannya harus memperhatikan penglihatan dan pendengaran.

K o mp Lott er
n Layar monitor sebagai “wajah” saat manusia berinteraksi dengan komputer
n Sebagai input untuk masuk ke dalam sistem, yaitu mouse, keyboard.
n CPU akan memproses input dari manusia menjadi output berupa informasi yang ditampilkan lewat monitor.
Interface
n Sesuatu yang menjadi jembatan antara manusia dengan sistem, saat user memasukkan data ke sistem (input) dan menerima informasi dari sistem (output).
n Tampilan dari sistem
“face between the human and the system”
Interface yang bagus
n USER FRIENDLY ???
Mudah dipahami oleh penggunanya, mudah dioperasikan sehingga pengguna merasa betah dan nyaman dalam mengoperasikan.
Jadi sistem tidak hanya membantu dalam menyelesaikan persoalan dengan hasil yang sesuai dengan keinginannya, namun menyediakan berbagai kemudahan pada saat mengoperasikan program aplikasi.
Interface yang bagus Dalam Windows, terdapat istilah
What You See Is What You Get (WYSIWYG)

Interface yang bagus
n Interface harus bekerja selayaknya
n Adanya konsistensi dalam mengkoordinasi elemenelemen interface, konsisten dalam penggunaan navigasi dan perlakuan desain (design treatment).
n Mudah untuk diakses dan diingat
n Tidak membingungkan user dalam mengakses (tidak menyebabkan user tersesat/lost).

Interface yang bagus
n Mudah dan fleksibel dalam penggunaan interface
n User memiliki kontrol penuh dalam interface

User centered design process n Proses penggunaan interface yang menempatkan user sebagai center of product.
Element of Interface Design
n Usability
n Visualization
n Functionality

Usability
n Bagaimana meng-explore, menggunakan navigasi
n Ukuran di mana user dapat mengakses secara efektif, efisien dan nyaman.
- planning (flowchart)
- memikirkan ‘how navigation works’
Visualization (1)
n Bagaimana membuat interface menjadi visually interesting
Terbagi menjadi 3 bagian :
- graphic and icon
- typography/text
VL*sualL*zatL*on (2)
n Graphic and Icon
Gunakan graphic yang sesuai dengan konsep (cari icon yang sesuai)
contoh = tombol print dengan icon bergambar printer
Icon dapat menimbulkan banyak kesan dalam sekejap sehingga pemilihan icon yang tepat sangat diperlukan.

VL*sualL*zatL*on (3)
n Typography
- Font memiliki karakter, sehingga pemakaian font
harus berdasar product contoh : untuk product
anak-anak, gunakan font bermodel lucu.
- Gunakan font yang mudah dibaca contoh = San Serif (tidak memiliki ujung) lebih mudah dibaca daripada Serif (memiliki
ujung/ekor)
San Serif contohnya verdana, arial
Visualization (4) - Typography n Langan terlalu banyak menggunakan font berbeda dalam satu halaman.
n Visual gaps (jarak) antara letter (huruf) dan angka
Visualization (5)
• Color
• Standar RGB = red, green, blue • Gunakan warna yang bersesuaian agar mudah dibaca
n Warna memberi karakter, warm and cold.
n Warna monochromatic = warna lebih harmonis
(jangan terlalu banyak memakai warna dalam satu
halaman)
Functionality
n Fasilitas yang ada apakah sudah memenuhi kebutuhan user?
n Seberapa besar fitur-fitur.fasilitas tersebut men- support user.
n Contoh : search engine, link-link, menu navigasi.
Accessibility
n Bagaimana sistem itu diakses?
Contoh : pada website, saat kita mengakses apakah membutuhkan waktu yang lama untuk membuka.
Tugas
Analisis website STIKOM berdasarkan segi usability,
visualization, functionality dan accessibility-nya!!!
n Usability 4 sdh memenuhi user friendly belum? Apakah link-
link sudah dikelompokkan berdasar sub link tertentu?
n Visualization 4 tampilan graphic dan icon sudah sesuai
belum? Ada animasi menarik tidak? Typography/text jelas
tidak? Text untuk membedakan header dengan isi? Komposisi
warna?
n Functionality 4 fasilitas sudah memenuhi kebutuhan user
belum? Menu navigasi sudah lengkap?
n Accessibility 4 akses butuh waktu lama atau tidak? Apakah
ada hyperlink untuk memudahkan pengaksesan ke menu
i nformasi ?