Interaksi Interaksi Manusia dan Manusia dan

KomputerKomputer

Interaksi Interaksi Manusia dan Manusia dan

KomputerKomputerPertemuan 1Pertemuan 1

Interface & Komponen IMKInterface & Komponen IMK

• Sejarah IMK???• Apa IMK?• Model IMK?

Pendahuluan• Saat ini perkembangan teknologi

(komputer) sangat pesat• Hampir setiap saat kita berhubungan

dengan teknologi komputer• Pada awal perkembangan komputer

tahun 1950, masih sangat sulit dioperasikan, tidak praktis, dan waktu eksekusinya sulit diprediksi.

Faktor Penyebabnya• Ukurannya sangat besar dan harganya

sangat mahal, sehingga jika dibandingkan, sehingga saat itu tenaga buruh masih jauh lebih murah.

• Hanya dapat dioperasikan oleh tenaga teknisi spesialis yang sudah terbiasa melakukan pemrograman secara on-line dengan menggunakan kartu plong (punch card).

• Hanya sedikit yang diketahui tentang bagaimana membuatnya mudah untuk digunakan.

ENIAC

Kondisi Saat ini• Saat ini komputer sudah jauh lebih

murah, • digunakan untuk hampir setiap sisi

kehidupan, • kita mempunyai pengetahuan yang

cukup bagaimana agar komputer dapat menyesuaikan dengan kebutuhan kerja manusia.

Perubahan Teknologi

• Penurunan harga komputer yang sangat dramatis dihasilkan oleh adanya perkembangan teknologi terutama teknologi microelectronic dalam bentuk keping silicon (IC).

• Kemampuan teknologi untuk memperkecil ukuran rangkaian serta mengkemas sejumlah rangkaian dalam satu keping tipis IC merupakan langkah menuju perkembangan komputer yang powerful dengan kapasitas penyimpan yang besar, namun dengan harga yang semakin murah.

Perubahan Teknologi

• Perubahan teknologi di atas telah membuka kemungkinan penggunaan komputer yang lebih luas.

• Saat ini kehadiran komputer sudah tidak dapat dilepaskan dari dunia bisnis dan industri modern.

• Komputer juga ditemukan dalam penggunaan aplikasi rumah tangga

Kebutuhan Perancangan yang

Berbeda• Agar komputer dapat diterima secara luas

dan digunakan secara efektif, maka perlu dirancang secara baik.

• Hal ini tidak berarti bahwa semua sistem harus dirancang agar dapat mengakomodasi semua orang, namun komputer perlu dirancang agar memenuhi dan mempunyai kemampuan sesuai dengan kebutuhan pengguna secara spesifik.

• Pengguna seharusnya tidak perlu memikirkan bagaimana cara berinteraksi dengan komputer, tetapi yang penting justru bagaimana mengoptimalkan komputer untuk memenuhi kebutuhannya

• Analoginya adalah seperti kita menggunakan mobil atau motor, kita tidak perlu memikirkan bagaimana cara mesin bekerja.

Istilah IMK / HCI• Pada tahun 1970 mulai dikenal

istilah antarmuka pengguna (user interface), yang juga dikenal dengan istilah Man-Machine Interface (MMI), dan mulai menjadi topik perhatian bagi peneliti dan perancang sistem.

• Perusahaan komputer mulai memikirkan aspek fisik dari antarmuka pengguna sebagai faktor penentu keberhasilan dalam pemasaran produknya.

Istilah IMK / HCI• Istilah human-computer interaction

(HCI) mulai muncul pertengahan tahun 1980-an sebagai bidang studi yang baru.

• Istilah HCI mengisyaratkan bahwa bidang studi ini mempunyai fokus yang lebih luas, tidak hanya sekedar perancangan antarmuka secara fisik.

Istilah IMK / HCI• HCI didefinisikan sebagai disiplin ilmu yang

berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh manusia dan studi tentang fenomena di sekitarnya.

• HCI pada prinsipnya membuat agar sistem dapat berdialog dengan penggunanya seramah mungkin.

Generasi Antarmuka Pengguna

• Antarmuka sistem berkelompok• Antarmuka Berorientasi baris

arahan• Antarmuka Screen• Antarmuka Grafik• Antarmuka Masa depan

Hub. IMK,Komputer dan Bidang lain

• Psikologi• Grafik• Antropologi• Linguistik• Sosiologi• Ergonomik• Tek. Elektro dan ilkom

Komponen-komponen IMK

• Manusiasebagai pengguna sistem dan subjek manajemen sistem komputer

• Komputersebagai objek yang dimanajemen sekaligus membantu pekerjaan subjek

• Lingkungan kerja Interface (antar muka)/Interaksisebagai jembatan antara subjek dan objek

Manusia

• 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.

Untuk layar touchscreen, bagaimana sistem dibuat agar mudah digunakan. (step by step harus jelas)

• I/O manusia• Memori manusia• Proses berpikir manusia

Komputer• Layar monitor sebagai “wajah” saat

manusia berinteraksi dengan komputer• Sebagai input untuk masuk ke dalam

sistem, yaitu mouse, keyboard.• CPU akan memproses input dari

manusia menjadi output berupa informasi yang ditampilkan lewat monitor.

• I/O Komputer• Memori komputer• Proses komputer

Interface/interaksi• Sesuatu yang menjadi jembatan antara

manusia dengan sistem, saat user memasukkan data ke sistem (input) dan menerima informasi dari sistem (output).

• Tampilan dari sistem

• “face between the human and the system”

• Model Interaksi• Ergonomi• Tipe interaksi• Konteks Interaksi

Interface yang bagus• 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 bagusDalam Windows, terdapat istilah What You

See Is What You Get (WYSIWYG).

Artinya, apa yang terlihat di layar monitor itulah informasi yang didapatkan.

Interface yang bagus• Interface harus bekerja selayaknya• Adanya konsistensi dalam

mengkoordinasi elemen-elemen interface, konsisten dalam penggunaan navigasi dan perlakuan desain (design treatment).

• Mudah untuk diakses dan diingat• Tidak membingungkan user dalam

mengakses (tidak menyebabkan user tersesat/lost). pada website tertentu, terdapat site map untuk menunjukkan di mana user berada.

Interface yang bagus• Mudah dan fleksibel dalam

penggunaan interface• User memiliki kontrol penuh dalam

interface• Memberikan kenyamanan kepada

user meskipun user membuat kesalahan.

User centered design process

• Proses penggunaan interface yang menempatkan user sebagai center of product.

• Bagaimana user ingin produk itu bekerja dan bagaimana user ingin berinteraksi dengan produk

Element of Interface Design

• Usability

• Visualization

• Functionality

• Accessibility

Usability• Bagaimana meng-explore,

menggunakan navigasi• Ukuran di mana user dapat mengakses

secara efektif, efisien dan nyaman.- planning (flowchart)- memikirkan ‘how navigation works’

• Navigasi adalah tombol-tombol untuk menjelajahi sistem, contoh = next, back, forward, end.

Visualization (1)• Bagaimana membuat interface

menjadi visually interesting Terbagi menjadi 3 bagian :- graphic and icon- typography/text- color

Visualization (2)• Graphic and Icon

Gunakan graphic yang sesuai dengan konsep (cari icon yang sesuai)contoh = tombol print dengan icon bergambar printerIcon dapat menimbulkan banyak kesan dalam sekejap sehingga pemilihan icon yang tepat sangat diperlukan.Icon yang sesuai/mudah dikenali dan dimengerti orang.

Visualization (3)• Typography

- Font memiliki karakter, sehingga pemakaian font harus berdasar product contoh : untuk product anak-anak, gunakan font bermodel lucu.- Gunakan font yang mudah dibacacontoh = San Serif (tidak memiliki ujung) lebih mudah dibaca daripada Serif (memiliki ujung/ekor) San Serif contohnya verdana, arialSerif contohnya monotype corsiva

Visualization (4) - Typography

- jangan terlalu banyak menggunakan font berbeda dalam satu halaman.- Visual gaps (jarak) antara letter (huruf) dan angka- Spelling check untuk mengontrol apabila ada kata-kata yang misspelled.

Visualization (5)• Color

- Standar RGB = red, green, blue- gunakan warna yang bersesuaian agar mudah dibaca- warna memberi karakter, warm and cold.- warna monochromatic = warna lebih harmonis (jangan terlalu banyak memakai warna dalam satu halaman)

Functionality• Fasilitas yang ada apakah sudah

memenuhi kebutuhan user?• Seberapa besar fitur-fitur.fasilitas

tersebut men-support user.• Contoh : search engine, link-link,

menu navigasi.• Apakah link-link pada sebuah website

benar-benar dapat digunakan?

Accessibity• Bagaimana sistem itu diakses?

Contoh : pada website, saat kita mengakses apakah membutuhkan waktu yang lama untuk membuka.

• Kemudahan pengaksesan lewat hyperlink untuk masuk ke menu yang lain.