Handout IMK 2014.pdf

INTERAKSI MANUSIA KOMPUTER

Ilham, S.Pd.,M.T.

Sistem Informasi

Fakultas Sains & Teknologi

UIN Alauddin Makassar

1

Silabus

Pendahuluan

Profil Manusia (User)

Pemrosesan Informasi Pada Manusia

Profil Komputer

Proses Pengembangan/Perancangan Interaksi

Panduan Mendesain Antarmuka

Presentasi Menu2

IMK (Interaksi Manusia-Komputer) =

HCI (Human-Computer Interaction)

Pendahuluan

3

Pendahuluan

Interaksi :

komunikasi antara 2 atau lebih objek (dalam hal ini manusia-

komputer) yang saling mempengaruhi satu sama lainnya.

Interaksi jadi maksimal jika kedua belah pihak mampu beri

stimulan & respon (aksi & reaksi) yang saling mendukung.

Dalam hal ini, manusia memberi tahu apa yang diinginkan,

komputer akan merespon dan memberikan hasilnya.

4

5

Pendahuluan

Agar manusia dapat berinteraksi dengan komputer,

diperlukan suatu antarmuka (interface).

Interaksi Manusia-Komputer :

Hub. manusia -komputer, yang memiliki karakteristik

tertentu untuk mencapai suatu tujuan, dengan

menjalankan sistem yang ‘bertopengkan’ suatu

ANTARMUKA (INTERFACE).

Pendahuluan

Ilmu IMK :

Ilmu yang mempelajari bagaimana mendesain,

mengevaluasi,dan mengimplementasikan sistem

komputer yang interaktif, sehingga dapat digunakan

oleh manusia (sebagai user) dengan mudah.

6

8

Pendahuluan

Yang dilakukan pada IMK (HCI) :

Design

Prototyping

Evaluation

Implementation

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.

Pendahuluan

8

Penurunan harga komputer yang sangat dramatis disebabkan adanya perkembangan teknologi terutamateknologi micro-electronic dalam bentuk keping silicon (IC).

Kemampuan teknologi untuk memperkecil ukuranrangkaian serta mengkemas sejumlah rangkaian dalamsatu keping tipis IC merupakan langkah menujuperkembangan komputer yang powerful dengankapasitas penyimpan yang besar, namun dengan hargayang semakin murah.

Pendahuluan

9

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.

Pendahuluan

10

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.

Komputer perlu dirancang agar memenuhi dan

mempunyai kemampuan sesuai dengan kebutuhan

pengguna secara spesifik (user tertentu).

Pendahuluan

11

Pengguna seharusnya tidak perlu memikirkan

bagaimana cara berinteraksi dengan komputer.

Tetapi yang penting dipikirkan pengguna (user) adalah :

bagaimana mengoptimalkan komputer untuk

memenuhi kebutuhannya.

Analoginya adalah seperti kita menggunakan mobil atau

motor, kita tidak perlu memikirkan bagaimana cara

mesin bekerja.

Pendahuluan

12

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.

Pendahuluan

13

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.

Pendahuluan

14

HCI didefinisikan sebagai disiplin ilmu yang berhubungan

dengan perancangan, prototyping, evaluasi, dan

implementasi sistem komputer interaktif untuk digunakan

oleh manusia dan studi tentang fenomena di sekitarnya.

Pendahuluan

HCI pada prinsipnya membuat agar sistem dapat

berdialog dengan penggunanya seramah mungkin

(user friendly).

15

Kriteria User Friendly, diantaranya :

Memiliki tampilan yang bagus

Mudah dioperasikan

Mudah dipelajari

Pengguna selalu merasa senang

setiap kali menggunakan software tersebut

16

Pendahuluan

17

Kesalahan Mendasar Programmer :

• Desain ini memuaskan saya, berarti juga akan

memuaskan setiap orang. X

• Desain ini memuaskan rata-rata orang, berarti juga

akan memuaskan setiap orang. X

• Manusia begitu amat beragam oleh karenanya tidak

ada kemungkinan antarmuka yang dapat memuaskan

pengguna, tetapi karena sifat manusia yang adaptif

sejak awalnya, maka itu tidak akan menjadi masalah. X

Pendahuluan

18

• Faktor ergonomi cukup mahal namun demikian

produk-produk aplikasi komputer tetap terjual hanya

dengan berdasarkan penampilan dan corak.

Jadi pertimbangan ergonomi boleh diabaikan. X

• Ergonomi merupakan gagasan yang baik.

Dalam mendesain sesuatu saya menggunakan

pertimbangan ergonomi namun dilakukan berdasarkan

intuisi dan menyandarkannya pada selera umum, jadi

kita tidak memerlukan tabel data. X

Pendahuluan

Kesalahan Mendasar Programmer (Lanjutan) :

Interaksi Manusia dengan Komputer

19

Pendahuluan

Contoh penerapan HCI saat ini : Smartphone dan Tablet

20

Pendahuluan

Contoh penerapan HCI saat ini : Antarmuka Kamera Digital

21

Pendahuluan

22

Contoh penerapan HCI saat ini : Antarmuka Tombol Elevator/Lift

Pendahuluan

Contoh penerapan HCI saat ini : Peta Navigasi

23

Pendahuluan

24

Contoh penerapan HCI saat ini : Graphical User Interfaces

Pendahuluan

25

Contoh penerapan HCI saat ini : Aplikasi Web

Pendahuluan

26

Pendahuluan

Contoh penerapan HCI saat ini : 3D Graphic

27

Pendahuluan

Contoh penerapan HCI saat ini : Display Wall

28

Pendahuluan

Contoh penerapan HCI saat ini : Speech & Multimodal Interaction

29

Pendahuluan

Contoh penerapan HCI saat ini :

Augmented Reality & Virtual Reality

Contoh lebih lanjut lihat pada :

http://www.youtube.com/watch?v=aFgEPAzg

BpA

http://www.youtube.com/watch?v=ukYBA

a89kT0

http://www.youtube.com/watch?v=ukYBAa89

kT0

30

Pendahuluan

http://www.youtube.com/watch?v=ukYBAa89kT0

Tujuan Utama IMK :

mempermudah manusia mengoperasikan komputer

dan mendapat umpan balik yg diperlukan selama ia

bekerja pd suatu sistem komputer.

Prinsip kerja komputer

INPUT OUTPUTPROCESSING

FEEDBACK

31

Pendahuluan

Ilmu/Bidang lain yang mempengaruhi/berhub. dgn IMK (HCI) :

32

Pendahuluan

Multimedia

1. Software Engineering (Rekayasa Perangkat Lunak)

- Bisa menciptakan suatu program yang efektif, efisien, userfriendly sehingga bisa menghasilkan suatu mesin atausistem yang sesuai keinginan user.

2. Artificial Intelligence (Kecerdasan Buatan)

- Untuk jangka panjang : akan tercipta sistem yang handal, canggih yang bisa menyerupai pola pikir manusia.

Contoh :

membuat robot dengan struktur tubuh dan pola pikir yang

menyerupai manusia.33

Pendahuluan

Pendahuluan

34

3. Computational Linguistic (Bahasa Komputasi)

- Pemodelan bahasa alami dari sudut pandang komputasi.

- Peran bahasa dapat dimengerti oleh user, sehingga lebihmudah dalam menggunakan sistem dan tidak terjadi kesalahan.

4. Psychology (Psikologi) : social, cognitive, organisational

- Setiap user mempunyai sifat dan kelakuan yang berbeda dalammenggunakan sistem.

- Tentukan dulu user targetnya siapa, suasana lingkungan target

tsb, perilaku mereka, dsb program menjadi user friendly.

- Psikologi jg mencakup pengetahuan dan keahlian user dalammempersepsi dan memecahkan masalah.

Pendahuluan

35

5. Multimedia

- Sarana dialog yang efektif antara manusia dengan komputer bagaimana suatu tampilan interaksi menjadi lebih menarik danmudah dimengerti oleh user.

6. Anthropology

- Cabang ilmu sosial yang mempelajari budaya etnis tertentu.

- Dalam konteks IMK, antropologi berperan dalam sistem interaksimanusia dengan komputer karena interaksi sangat dipengaruhioleh teknologi yang digunakan.

- Faktor antropologi memberi gambaran ttg cara kerja kelompoksehingga masing-masing anggotanya dpt berkontribusi sesuaibidangnya.

36

Pendahuluan

7. Ergonomics

- Berhubungan dengan aspek fisik untuk mendapatkan

lingkungan kerja yang nyaman.

8. Sociology

- Berhubungan dengan pengaruh sistem komputer dalam

struktur sosial konteks dari suatu interaksi.

9. Mathematics

- Dalam pembuatan suatu produk/software juga harus efisien

dalam perhitungan matematika.

Pendahuluan

Aspek-aspek dalam IMK (HCI)

37

38

Penjelasan Gambar

Aspek-aspek dalam IMK antara lain :

1. Use and context of computers (U)

2. Human characteristic (H)

3. Computer system and interface architecture (C)

4. Development proses (D)

Pendahuluan

39

Use and Context of Computers (U)

a. Social organization and work

IMK dalam kegunaannya bagi manusia sbg makhluk sosial

dalam konteks kerja.

b. Application Areas

Berkaitan dengan karakteristik dalam area aplikasi.

c. Human-Machine Fit and Adaptation

Kesesuaian antara manusia dengan mesin yang dibangun.

Pendahuluan

40

Human characteristic (H)

a. Human Information Processing

Karakteristik manusia sebagai pemroses informasi.

b. Language, Communication and Interaction

Bahasa sebagai media bagi manusia untuk berinteraksi

dengan manusia lain.

c. Ergonomics

Berkaitan dengan karakteristik antropometri dan fisiologis

dan kaitannya dengan kenyamanan kerja.

Pendahuluan

41

Computer system and interface architectur (C)

a. Input and Output DevicesKonstruksi teknis pada peralatan yg digunakan sebagai mediainteraksi manusia dan komputer.

b. Dialogue TechniquesSoftware dasar dan teknik-teknik dalam berinteraksi denganmanusia terdiri dari input dan output dialog, cara berinteraksi,dan masalah-masalah dalam dialog.

c. Dialogue GenreGaya/metode yg digunakan antara lain: penggunaan metafora(perumpamaan;kiasan), metode yang relevan dg media lain,aspek estetika.

Pendahuluan

42

d. Computer Graphics

Konsep – konsep dasar dari tampilan komputer meliputi:

aspek geometris dalam 2D ataupun 3D, transformasi linear,

tampilan warna.

e. Dialogue Architecture

Arsitektur software dan standard – standard untuk interface

(antarmuka) dengan user.

Pendahuluan

43

Development Process (D)

a. Design Approaches

Proses desain dan topik – topik yang relevan dari disiplin

ilmu yang lain.

b. Implementation Techniques and Tools

Cara- cara dan peralatan implementasi.

c. Evaluation Techniques

Metode - metode spesifik untuk evaluasi.

Pendahuluan

44

• Prinsip Utama Mendesain Antarmuka ( Interface) :

Pendahuluan

1. User Compatibility

2. Product Compatibility

3. Task Compatibility

4. Work Flow Compatibility

5. Consistency

6. Familiarity

7. Simplicity

8. Direct Manipulation

9. Control

10. WYSIWYG

11. Flexibility

12. Responsiveness

13. Invisible Technology

14. Robustness

15. Protection

16. Ease of Learning &

Ease of Use.

Pendahuluan

45

Profil Manusia

Sistem Komputer terdiri dari 3 aspek :

1. Hardware perangkat keras

2. Software perangkat lunak

3. Brainware manusia sebagai user.

Ketika hendak membangun sebuah IMK, aspek manusia harus

dipikirkan dengan matang, bagaimana manusia menangkap

data/informasi, memproses dan mengelola informasi tersebut.

* Jadi tidak hanya memikirkan aspek teknis dari sistem komputer.

46

Manusia dapat dipandang sebagai sistem pemroses informasi:

informasi diterima dan ditanggapi melalui saluran I/O indera

informasi disimpan di memori

informasi diproses dan diaplikasikan dalam berbagai cara.

Saluran I/OIndera yang berhubungan & berkaitan dengan IMK :

1. Penglihatan (Mata)

2. Pendengaran (Telinga)

3. Sentuhan (Kulit)

47

Profil Manusia

Penglihatan (Mata)

1. Luminance

2. Kontras

3. Kecerahan

4. Sudut dan Ketajaman Penglihatan

5. Medan Penglihatan

6. Warna.

48

Profil Manusia

1. Luminance :

banyaknya cahaya yang dipantulkan oleh permukaan objek.

2. Kontras :Selisih luminance objek dengan luminance latar belakangdibagi dengan luminance latar belakang.

Nilai Kontras Positif :

luminance objek > luminance latar belakangnya objek kelihatan

Nilai Kontras Negatif :

luminance objek < luminance latar belakangnya objek tidak

kelihatan, sehingga objek yang sesungguhnya “terserap” oleh latar

belakang.49

Profil Manusia

Kontras Positif Kontras Negatif

50

Profil Manusia

3. Kecerahan :

tanggapan subjektif terhadap cahaya.

Luminance tinggi kecerahan yang tinggi.

Jika kita melihat pada batas kecerahan tinggi ke

kecerahan rendah, terlihat kenyataan yang ganjil.

Perancang harus benar-benar memperhatikan efek yang

muncul pada layar tampilan.

51

Profil Manusia

4. Sudut dan Ketajaman Penglihatan

Sudut Penglihatan (Visual Angel) :

sudut yang berhadapan oleh objek pada mata.

Ketajaman Mata (Visual Acuity) :

sudut penglihatan minimum ketika mata masih

dapat melihat sebuah objek dengan jelas.

52

Profil Manusia

53

Profil Manusia

Sudut penglihatan yang dibentuk (dalam satuan menit

atau detik busur) :

Sudut penglihatan yang nyaman bagi mata adalah 15 menit.

L

D

Ф

Ф = 120 tan L

2D

5. Medan Penglihatan

sudut yang dibentuk ketika mata bergerak ke kiri terjauh

dan ke kanan terjauh.

Dibagi jadi 4 daerah :

1. Daerah I (Penglihatan Binokuler)

2. Daerah II (Penglihatan Monokuler Kiri)

3. Daerah III (Penglihatan Monokuler Kanan)

4. Daerah IV (Daerah Buta)

54

Profil Manusia

55/109

56

Profil Manusia

1. Daerah I (Penglihatan Binokuler) :tempat kedua mata mampu melihat sebuah objek dalamkeadaan yang sama.

2. Daerah II (Penglihatan Monokuler Kiri) :tempat terjauh yang dapat dilihat oleh mata kiri ketika mata kiridigerakkan ke sudut paling kiri.

3. Daerah III (Penglihatan Monokuler Kanan) : tempat terjauh yang dapat dilihat oleh mata kanan ketika matakanan digerakkan ke sudut paling kanan.

4. Daerah IV (Daerah Buta) :yang sama sekali tidak dapat dilihat oleh kedua mata.

6. Warna

Warna merupakan hasil dari cahaya cahaya merupakan perwujudan dari spektrum elektromagnetik.

Banyaknya warna yang dapat dibedakan tergantung dari tingkat sensitifitas mata seseorang sensitifitas tidak merata pd seluruh medan penglihatan seseorang.

Fungsi warna secara umum diantaranya :- Membedakan satu objek dengan objek lain.- Membantu manusia mengolah data menjadi informasi.

Warna yg sesuai akan mempertinggi efektifitas tampilan grafis.

Jika warna yang digunakan tidak mengindahkan aspek kesesuaiandengan pengguna, maka pengguna menerima informasi yg salah.

Profil Manusia

Beberapa aspek yang perlu diperhatikan dalam menggunakan warna :

a. Aspek Psikologi

- Hindari tampilan simultan menampilkan sejumlah warna tajam.

. - Kombinasi warna terjelek :

Latar Belakang Garis Tipis dan Teks Garis Tebal dan Teks

Putih

Hitam

Merah

Hijau

Biru

Cyan

Magenta

Kuning

Kuning, Cyan

Biru, Merah, Magenta

Magenta, Biru, Hijau, Cyan

Cyan, Magenta, Kuning

Hijau, Merah, Hitam

Hitam, Kuning, Putih

Hijau, Merah, Cyan

Putih, Cyan

Kuning, Cyan

Biru, Magenta

Magenta, Biru, Hijau, Cyan

Cyan, Magenta, Kuning

Hijau, Merah, Hitam

Kuning, Hijau, Putih

Cyan, Hijau, Merah

Putih, Cyan, Hijau 58

Profil Manusia

59

Profil Manusia

Kombinasi warna terbaik :

LatarBelakang

Garis Tipis dan Teks Garis Tebal dan Teks

Putih

Hitam

Merah

Hijau

Biru

Cyan

Magenta

Kuning

Biru, Hitam, Merah

Putih, Kuning

Kuning, Putih, Hitam

Hitam, Biru, Merah

Putih, Kuning, Cyan

Biru, Hitam, Merah

Hitam, Putih, Biru

Merah, Biru, Hitam

Hitam, Biru, Merah

Kuning, Putih, Hijau

Hitam, Kuning, Putih, Cyan

Hitam, Merah, Biru

Kuning, Magenta, Hitam, Cyan, Putih

Merah, Biru, Hitam, Magenta

Biru, Hitam, Kuning

Merah, Biru, Hitam

60

Profil Manusia

Warna akan terlihat berubah ketika sudut cahaya sekitarnya

berubah.

Buta Warna :

keadaaan mata yg sensitifitasnya rendah terhadap warna.

Penyebab :

kurang/tidak adanya fotopigmen merah/hijau

ATAU

hilangnya fotopigmen biru (sangat jarang).

61

Profil Manusia

b. Aspek Perceptual (Persepsi)

- Persepsi : proses pengalaman seseorang dalam menggunakansensor.

- Tidak semua warna bisa dibaca.

- Hindari diskriminasi warna pada daerah yang kecil.

62

Profil Manusia

c. Aspek Kognitif (Nalar)

- Jangan gunakan warna yang berlebihan karena

pengunaan warna bertujuan menarik perhatian atau

pengelompokan informasi.

- Kelompokkan elemen yang berkaitan dgn latar belakang yg sama.

- Warna yang sama membawa pesan yang serupa.

- Urutkan warna yang sesuai dengan urutan spektralnya.

- Kecerahan dan saturasi akan menarik perhatian.

- Warna hangat adanya tindakan/tanggapan yg diperlukan.

Warna dingin menunjukkan status atau informasi latar belakang.

Profil Manusia

Pendengaran (Telinga)

Manusia dapat mendeteksi suara dalam frekuensi : 20-20K Hz.

Suara pada frekuensi 1000 – 4000 Hz menyebabkan

pendengaran menjadi lebih sensitif.

Selain frekuensi, suara juga dapat bervariasi dalam hal

kebisingan (noise).

Percakapan biasa : 50 – 70 dB.

Kerusakan telinga terjadi jika mendengar suara > 140 dB.

64

Profil Manusia

65

Profil Manusia

Sentuhan (Kulit)

Sensitifitas sentuhan lebih dikaitkan dengan aspek

ergonomis dalam sebuah sistem.

Feedback dari sentuhan lebih ke piranti pendukung

seperti :

model keyboard, mouse, tempat duduk user dll.

1. Cognitive Perspective

2. Memori

3. Persepsi dan Representasi

4. Model Mental

5. Interface Metaphore dan

Model Konseptual


66

1. Cognitive Perspective (Kognitif/Intelektual/Berpikir/Nalar)

Proses dimana manusia dapat “tertarik” pada sesuatuATAU

bagaimana kita dapat menambah pengetahuan.

Proses-proses tersebut termasuk proses untuk:

- Mengerti - Mewaspadai

- Mengingat - Memperoleh ketrampilan

- Memberi alasan - Mengeluarkan ide/gagasan.

- Mengadakan sesuatu

67


Pemrosesan informasi pada manusia ada beberapa tahap :

1. Encoding :pengubahan informasi (input/stimuli) dari luar/lingkungan, menjadi simbol-simbol tertentu, sbg bentuk representasi internal.

2. Comparison :membandingkan bentuk representasi internal dengan representasiingatan/pengetahuan yang sebelumnya telah tersimpan di otak.

3. Response Selection :Proses pengambilan keputusan untuk memberi repons.

4. Execution :Proses penindaklanjutan, berupa aksi untuk melaksanakan respons.68


Perluasan tahap pemrosesan informasi pada manusia :

dengan mengikutsertakan proses yang berkaitan dengan“Attention” dan “Memory”.

Dengan perluasan ini, proses Cognition (intelektual/berpikir/nalar)

dapat dipandang sebagai :

- bagaimana informasi diterima oleh alat pemroses persepsi

(Perseptual Processor).

- bagaimana informasi dapat menjadi alat.

- bagaimana informasi diproses dan disimpan dalam ingatan

(memori). 69


2. Memori Manusia

70


Tipe memori (tempat penyimpanan ingatan) manusia :

1. Sensory Store (SEN) :

menyimpan informasi selama beberapa saat

(sekitar 1/10 detik).

2. Short Term Memory (STM) :

menyimpan informasi terbatas selama max 20 detik.

3. Long Term Memory (LTM) :

menyimpan informasi tak terbatas dalam jangka waktu yang

lama.71


72


Iconic : menerima rangsang penglihatan (visual)

Echoic : menerima rangsang suara

Haptic : menerima rangsang sentuhan.

Sensor Memori :

Iconic

Echoic

Haptic

Short Term

Memory

(sementara)

Long Term Memory

(permanen)perhatian pengulangan

Informasi dari

lingkungan

luar


73

Ciri-ciri STM :

- Mudah lupa dalam waktu 20 detik.

- Semakin banyak informasi untuk diingat, makin cepat dilupakan.

- Gangguan terhadap informasi yang serupa sering menyebabkansalahnya informasi saat dipanggil.

- Kecepatan informasi dilupakan tidak secara linier, tetapiseringkali disebabkan dari hasil pemahaman terhadap sistemyang kompleks.

Karena itu, jika akan menggunakan sistem yang rumit/sukar,

hendaknya informasi tidak berupa temporer.


74


75


76


77

Ciri-ciri LTM :

- Digunakan untuk menyimpan informasi dalam waktu lama.

- Tempat penyimpanan seluruh pengetahuan, faktainformasi, pengalaman, urutan perilaku, dan segala sesuatuyang diketahui.

- Kapasitas sangat besar (tidak terbatas).

- Kecepatan akses lebih lambat (± 1/10 dtk).

- Proses penghilangan informasi pelan.


78

79


Ada 2 cara menggali ingatan kembali dalam LTM :

1. Episodic : urutan ingatan tentang kejadian

2. Semantic : memori yg tersusun berdasar fakta, konsep, danketerampilan.

Informasi semantic terbentuk dari episodic.

80

Model Jaringan Semantic :

- Turunan : simpul akan membawa sifat induknya.

- Ada hubungan yang jelas antar bit informasi.

- Membuat kesimpulan berdasarkan sifat turunan.

Contoh :

Model Kognitif dalam IMK

Pendekatan pemrosesan dan manipulasi informasi VS pendekatan aktifitas jaringan syaraf berikut dengan koneksitas diantara mereka.

Pada Model Kognitif terdapat 2 pendekatan :

Computational Approach (Computer Metaphor)

Connectionist Approach (Brain Metaphor) :


81

82


Computational Approach (Computer Metaphor)bagaimana sistem bekerja dengan informasi baru, meliputi :- bagaimana informasi diatur dan dikelompokkan- bagaimana informasi tersimpan dapat diambil kembali sesuai

dengan yang diinginkan.

- apa keputusan yang harus diambil dan bagaimana membentuk

informasi yang terkait dengan hal ini.

Connectionist Approach (Brain Metaphor) :

aktifitas simpul-simpul syaraf (nodes) dalam jaringan syaraf dan

hubungan diantaranya, BUKAN pemrosesan & manipulasi

informasi.

3. Persepsi dan Representasi

Persepsi : proses dasar dlm berinteraksi dengan komputer;- penerimaan informasi yang direpresentasikan pada “interface”- informasi tidak boleh ambigu saat diterima dan dipahami.

Persepsi Visual :

- Constructive approach : konstruksi pengetahuan+informasi sekitar.

- Ecological approach : mengambil informasi dari sekitar tanpa

melibatkan pengetahuan yang dimiliki.

Dengan kata lain :

mengerti bahwa sesuatu harus dilakukan saat kita menangkap

stimuli tanpa harus membuat stimuli tersebut jadi bermakna.


83

4. Model Mental

Representasi Mental (Knowledge) :

- Analogical : gambar

- Propositional : abstrak + bahasa

- Distributed : networks of nodes koneksi

General Knowledge schemata

Model Mentalmenghasilkan deskripsi & penjelasan tentang sistem, dan membuat prediksi keadaan mendatang :

a. Model Struktural : bagaimana alat dan sistem bekerja

b. Model Fungsional : bagaimana menggunakan suatu alat & sistem.


5. Interface Metaphore dan Model Konseptual


85

Metaphore :

- Verbal metaphore :

familiar knowledge yang dipakai pada instruksi tertulis / lisan.

- Interface metaphore :

familiar domain + system structure concrete system image

- Composite metaphore :

kombinasi (banyak/sebagian) dari familiar domain.

Model Konseptual : framework u/ perancangan interface metaphore.


86

Profil Komputer

Sistem komputer secara umum

87

Teknik antarmuka grafis memerlukan perangkat keras pendukung, yaitu Peralatan Interaktif (Alat Interaksi).

Secanggih apa pun program aplikasi yang dibuat, tidak akan bergunajika program tersebut tidak dapat dioperasikan pada komputer yang kita miliki karena perangkat keras yang kita miliki tidak lengkap.

Peralatan Interaktif Input/Output Devices

Input OutputProcess

PenyimpanPeralatan Interaktif

manusia-komputer

Peralatan Interaktif

komputer-manusia

88

Profil Komputer

Peralatan Masukan (Input Devices) :

A. Peralatan Masukan Tekstual

B. Peralatan Penunjuk (Pointing Devices)

C. Peralatan Pengambil (Picking Devices).

89

Profil Komputer

90

Profil Komputer

A. Peralatan Masukan Tekstual

1. Keyboard

Alat input umum, menggunakan layout terstandarisasi

(QWERTY).

Pertama kali digunakan pada mesin tik buatan E.Remington

pada thn 1874.

Pola Qwerty dianggap tidak optimal oleh beberapa user

Jari cepat lelah, misal : jika mengetik kata yang banyak

mengandung huruf a, maka jari kelingking yang paling

lemah menanggung beban kerja lebih berat.

Lebih cocok untuk orang yang kidal.

Desain keyboard mungkin lebih memudahkan,

tetapi pola QWERTY terlanjur populer.

Alternatif keyboard lain :

a. Alfabetik

* Banyak ditemui pada permainan anak-anak.

21 43 65 87 09

ED GF IH J

LK NM PO RQ TS

VU XW ZY

SPACE

BA C

91

Profil Komputer

b. Dvorak

* Memasukkan unsur ergonomi.

* Cocok untuk yang tidak kidal, karena tangan kanan

memiliki beban kerja yang lebih besar dibanding tangan kiri.

92

Profil Komputer

c. Klockenberg

* Memasukkan unsur ergonomi.

* Kelebihan tata letak Klockenberg adalah :

- mengurangi beban otot yang berlebihan pada jari

dan pergelangan jari dan pergelangan tangan.

- mengurangi beban otot pada tangan dan bahu.93

Profil Komputer

d. Chord Keyboard

* Memungkinkan menulis dengan cepat menggunakan

kombinasi tombol untuk menghasilkan kata atau

suku kata.

* Cocok untuk mencatat ucapan seseorang.

* Jenis-jenis Chord Keyboard :1. Palantype untuk panitera di pengadilan

2. Stenotype untuk wartawan.

94

Profil Komputer

Palantype :

Stenotype :

RT L

MP

H

N

Y

C

SO

E+

I

+

S T P H

S K W R

*

F P L

* R B G

T D

S Z

A O E U

Shift Bar Space

95

Profil Komputer

e. Numeric Keypad

* Untuk memasukkan bilangan (data numerik) dengan

cepat.

* Contoh : - tombol numerik pada keyboard bagian kanan.- tombol angka pada kalkulator.- tombol angka pada telepon.

Profil Komputer

96

97

f. Function Keys

* Sejumlah tombol khusus pada keyboard :

F1 – F12, ESC, Alt, Ctrl, Shift, Tab, Delete, End ,dll.

* Keuntungan : mengurangi beban ingatan, mudah dipelajari,

kecepatan tinggi, mengurangi kesalahan.

* Kelemahan :

makin besar kemampuan suatu sistem komputer

makin banyak tombol fungsi yang diperlukan

makin besar ukuran keyboard.

Profil Komputer

2. Peralatan masukan teks yang lain

a. Pengenal tulisan tanganTeks tulisan tangan dapat dimasukkan ke dalam komputer, menggunakan sebuah pena komputer dan tablet digital.

b. Pengenal suara

* Hanya sukses dalam situasi terbatas :

pengguna tunggal dan kosakata terbatas.

* Masalah yang dihadapi :

kebisingan, ketidaktepatan pengucapan, aksen, dll.

98

Profil Komputer

B. Peralatan Penempatan Posisi & Penunjuk (Pointing Devices)

1. Mouse :

2. Joystick : untuk games .

99

Profil Komputer

3. Trackball

4. Layar Sentuh (Touchscreen) :

mendeteksi adanya jari di layar.

100

Profil Komputer

5. Light Pen :

- Kabel spiral dihubungkan antara pena dengan layar.

- Cara kerja : pena disentuhkan ke layar.

101

Profil Komputer

6. Tombol-tombol Kursor (Cursor Keys) :Empat tombol anak panah pada keyboard.

7. Thumb Wheels:

- Dua lempeng pengatur ortogonal utk mengatur posisi kursor.

- Murah tapi lambat.

102

Profil Komputer

8. Dataglove :

- sarung tangan khusus untuk sensor serat optik.

- mendeteksi sudut temu dan posisi tangan secara 3D.

9. Eyegaze :

- headset pendeteksi gerakan mata pengguna utk mengontrol kursor.

- cepat, akurat, tapi mahal.

103

Profil Komputer

C. Picking Devices

1. Scanner

2. Web Cam

104

Profil Komputer

Peralatan Keluaran (Output Devices)

1. Layar Komputer : CRT, LCD

2. Peralatan output alternatif :

- visual : ex. lampu, head-up display di kokpit pesawat

- auditory : beep, ting, dll.

3. Optical Character Recognition (OCR)

- pengenal karakter optik

- mengkonversi bitmap menjadi teks.

105

Profil Komputer

4. Printer (Pencetak)

106/109

Profil Komputer

• Printer atau pencetak adalah alat yang menampilkan

data dalam bentuk cetakan, baik berupa teks maupun

gambar/grafik, di atas kertas.

• Printer biasanya terbagi atas beberapa bagian, yaitu :

Picker, Tray, dan Tinta.

107/109

Penjelasan :

- Picker sebagai alat mengambil kertas dari tray.

- Tray ialah tempat menaruh kertas.

- Tinta atau toner adalah alat pencetak sesungguhnya, karena

ada sesuatu yang disebut tinta atau toner yang digunakan

untuk menulis/ mencetak pada kertas.

• Perbedaan toner dan tinta ialah perbedaan sistem, yaitu :

- toner atau laser butuh pemanasan,

- tinta atau inkjet tak butuh pemanasan, hanya pembersihan

atau head cleaning pada print-head printer tersebut.

Profil Komputer

108/109

- Ada pula kabel fleksibel untuk pengiriman sinyal dari

prosesor printer ke tinta atau toner.

- Kabel ini tipis dan fleksibel, namun kuat.

- Pada bagian belakang printer biasanya ada port paralel

atau USB untuk penghubung ke komputer.

- Printer mempunyai 6 jenis yaitu jenis Dot-Matrix, jenis

Daisy Wheel, jenis Ink-Jet / jenis Bubble Jet, jenis Chain,

jenis Drum dan jenis Laser.

Profil Komputer

Memory

- ROM, RAM

- Memori jangka panjang : hardisk, cd, dvd,dll.

Format Penyimpanan Data

- ASCII, RTF

- Bermacam format penyimpanan gambar JPG, JPEG, GIFF, dll.

Kecepatan Processor

- Desainer cenderung mengasumsikan processor kecepatannya

tak terbatas sehingga membuat antarmuka menjadi lebih rumit.

- Masalah jika : sistem terlalu cepat, pemroses tidak dapat

memenuhi semua tugas yang diperlukan, dll. 109

Profil Komputer

PANDUAN

MENDESAIN ANTARMUKA

110

111

Desain Antarmuka yang baik

AMAN

EFEKTIF

EFISIEN

MENYENANGKAN

Tugas dapat dilakukan tanpa beresiko –

Contoh : pada penerbangan.

Dapat melakukan tugas yang benar dan baik.

Contoh : memotret suatu objek.

Untuk mempercepat pekerjaan dan dilakukan

secara benar – Contoh pada ATM.

User dapat menikmati apa yang mereka

lakukan, tidak menjadi frustasi dengan

interface yang ada. –

Contoh pada educational programs

User dapat menggunakan antarmuka (interface) tersebut dengan :

SIAPA

APA

LINGKUNGAN

KELAYAKAN

Siapa yang akan menggunakan sistem

tersebut ,dll?

Apa jenis tugas yang ingin mereka (user)

lakukan? Repetitive, rumit, simpel, dll?

Dimana komputer tersebut digunakan? Apakah

di daerah yang berbahaya atau yang bising?

Teknologi apa yang tersedia? Desainer jangan

menambahkan elemen ke antarmuka yang tidak

dapat digunakan dengan mudah.

4 hal yang harus menjadi pertimbangan bagi desainer dalam

merancang antarmuka :

Desain Antarmuka yang baik

113

4 Jenis User Interfaces

1. Command Line Interface (CLI) A CLI menampilkan suatu prompt, kemudian user

mengetikkan perintah pada keyboard dan mengeksekusi

perintah tersebut. Komputer memproses perintah tersebut

dan memberikan output secara teks.

2. Menu Driven Interface User membuat list item untuk memilih, dan dapat membuat

pilihan dengan memberikan highlight (menyorot).

114

4 Jenis User Interface :

3. Graphical User Interface (GUI) Penggunakan windows, icons, menus and pointers (WIMP)

yang dapat dimanipulasi dengan mouse (dan sering juga

dapat dilakukan dengan keyboard).

4. Natural Language Interface Dapat mengubah perintah sederhana menjadi suara.

Command diucapkan dengan bahasa “normal”.

115

Command Line Interfaces

Keuntungan

Sangat fleksibel dengan penggunaan “switches” (options)

Bagus untuk “expert”

users – dapat

mengakses perintah

dengan cepat.

Menggunakan

system resources yang paling sedikit.

116


Kerugian User harus belajar perintah/bahasa yang rumit.

Fitur-fiturnya tersembunyi, jika user tidak tahu

perintahnya,maka user tidak dapat menggunakan fitur tersebut.

Tidak cocok untuk user pemula.

117


Aplikasi Command Line Interface :

Administrasi Sistem

Aplikasi Engineering

Aplikasi Sains

Ideal untuk user yang mengalami gangguan penglihatan.

118

Menu Driven Interfaces

Keuntungan :

Tidak perlu mengetahui bahasa/perintah yang rumit.

Mudah digunakan

oleh user pemula

Cocok jika hanya

terdapat beberapa

pilihan

119


Kerugian :

Dapat menyebabkan user yang mahir frustasi,

misalnya karena perintah yang ingin mereka

gunakan jauh terdapat pada 5 level dibawah.

User interface terbatas oleh lebar layar dan pilihan

yang tersedia.

120


Aplikasi yang menggunakan Menu Driven :

ATM

Mobile Phone

MP3 Player

Video recorder

Peralatan rumah tangga

Digital/Cable TV

121

Graphical User Interfaces

Interface paling sesuaiuntuk user pemula yangtidak berpengalaman.

GUIs menggunakansystem resources yanglebih banyak dariinterface teks.

122


Banyak paket umum GUI yang menyediakan fitur

“Common User Interface” seperti :

Pengaturan layout layar

Penamaan Perintah

Icons

Urutan menu

Operasi mouse

Kotak Dialog

123

1. Meningkatkan kecepatan belajar 2. Mudah digunakan

3. Memberikan kepercayaan diri

bagi user pemula

4. Meningkatkan jumlah tugas

Yang dapat diselesaikan user

5. Lebih banyak

pilihan software

yang tersedia

bagi user umum

Ada 5 keuntungan dari ‘common user interface’ :


124

Natural Language Interfaces

Keuntungan

Tidak diperlukan training user hanya perlu

memberitahu komputer apa yang harus dilakukan.

Lebih cepat dibanding menggunakan keyboard.

Hands-free

Dapat digunakan oleh orang cacat.

125

Natural Language Interfaces

Kerugian :

Masih terdapat “bugs” karena merupakan tekonologi baru.

Sulit menangani yang homonim

Sulit mengenali jika ada dialek yang berbeda.

Lebih baik menggunakan Artificial languages.

126/109

PRESENTASI MENU

Organisasi Semantik Menu

Single menu

Tree StructureLinear Sequence Acyclic NetworkCyclic Network

127

Single Menu

Binary menus

Multiple selection

menus

Multiple-item menus /

radio buttons

128

Single Menu (Lanjutan)

Pull-down and pop-up menus

129


Scrolling and two-dimensional menus

130


Alphasliders

Embedded links

Iconic menus, toolbars, or palettes

Actor: Connery, Sean

A C DE G H J KN O R S TV Z

131

Linear Sequences & Multiple Menus

132

Tree-Structured Menus

Ketika kumpulan item berkembang dan menjadisulit dipelihara dalam kendali intelektual, perancangdapat membentuk kategori item-item yang serupa, membentuk struktur tree.

Contoh pengelompokan:

Laki-laki, perempuan

Hewan, sayuran, mineral

Fonts, size, style, spacing

133

Tree-Structured Menus (Lanjutan)

Depth versus Breadth:

Depth: jumlah level.

Breadth: jumlah item per level.

Pengelompokan semantik:

Kelompokkan item-item yang serupa secara logis.

Bentuk kelompok yang melingkupi semua kemungkinan.

Pastikan item tidak overlap.

Gunakan peristilahan yang dikenal.

134

Acyclic & Cyclic Menu Networks

Kadang-kadang lebih cocok daripada struktur tree.

Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai memulai dari menu utama.

Secara alami terdapat pada: Hubungan sosial.

Jalur transportasi.

Kutipan dalam jurnal ilmiah.

Membutuhkan penelusuran balik.

135

Urut-urutan Presentasi Item

Ketika item-item menu telah dipilih, urutan

presentasinya perlu diperhatikan.

Beberapa dasar pengurutan:

Waktu (kronologis).

Numeris (menaik atau menurun).

Sifat fisik (panjang, luas, volume dsb. Secara

menaik atau menurun).

136

Urut-urutan Presentasi Item (Lanjutan)

Banyak kasus pengurutan tidak mempunyai aturanpengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan:

Pengurutan alfabetis istilah-istilah.

Pengelompokan item-item serupa (dibatasidengan pemisah antarkelompok).

Yang sering digunakan ditempatkan di awal.

Yang paling penting ditempatkan di awal.

137

Pergerakan Cepat pada Menu

Menu dengan typeahead

Nama menu atau bookmarks

Menu macros

138

Menu dengan Typeahead

Penting jika menu sudah sering digunakan

sementara waktu respons atau kecepatan tampil

lambat.

Pendekatan BLT (Bacon, Lettuce, Tomato

Sandwich): pembentukan mnemonik dari

penggabungan huruf-huruf pilihan menu.

139

Nama Menu atau Bookmarks

Penamaan sederhana memudahkan pemakai

mengakses menu secara langsung.

Web browser menyediakan bookmarks atau favorites

sebagai jalan pintas bagi pemakai untuk menuju situs

yang pernah dikunjungi.

140/109

Menu Macros

Perintah yang sering digunakan dapat direkam dan

disimpan sebagai makro.

Pada beberapa software, makro dapat ditempatkan di

toolbar sebagai ikon.

141

Tata Letak Menu

Judul

Penamaan pilihan menu

Tata letak dan desain grafis

142

Tata Letak Menu: Judul

Menu tunggal: Judul yang deskriptif.

Menu tree: Nama pilihan harus sama dengan

judul halaman yang dipanggil.

143/109

Tata Letak Menu: Penamaan Pilihan Menu

Gunakan peristilahan yang dikenal dan konsisten.

Pastikan item dapat dibedakan dari pilihan lain.

Gunakan pemilihan kata yang konsisten dan

singkat.

Tempatkan kata kunci di kiri.

144

Tata Letak Menu: Tata Letak & Desain Grafis

Perhatikan kendala seperti lebar dan tinggi

layar, kecepatan tampil, character set, dan

highlighting.

Buat pedoman/panduan untuk komponen-

komponen: judul, penempatan item, petunjuk,

pesan kesalahan, dan laporan status.

145

Formulir Isian

Formulir isian cocok dipakai jika banyak field data

dibutuhkan.

Pendekatan formulir isian menarik karena:

Kelengkapan penuh informasi terlihat.

Seperti formulir kertas.

Sedikit petunjuk diperlukan.

146

Pedoman Perancangan Formulir Isian

Judul yang berarti.

Instruksi yang dapat dipahami.

Pengelompokan dan pengurutan field yang logis.

Tata letak yang menarik secara visual.

Label field yang dikenal.

147

Pedoman Perancangan Formulir Isian (Lanj.)

Ruang kosong dan batas field yang perlu diisi harus

jelas terlihat.

Pergerakan kursor yang leluasa.

Koreksi kesalahan untuk karakter dan field.

Pencegahan kesalahan.

Pesan kesalahan untuk nilai yang tak dapat

diterima.

148

Pedoman Perancangan Formulir Isian (Lanj.)

Field optional jelas ditandai, atau sebaliknya

field yang wajib diisi ditandai.

Pesan penjelasan bagi field jika perlu.

Tanda selesai. Hindari penyelesaian

automatis.

149

Beberapa Variasi Isian Field

Combo box: kombinasi list box dan text box.

Coded fields: mempunyai mask untuk format isian khusus. Mis.:

Telepon – (___)___-_____

Social Security Number – ___-__-____

Waktu – __:__ __

Tanggal – __/__/____

Nilai uang – $_____.00

150

Contoh

151

Kotak Dialog

Kotak dialog adalah kombinasi teknik menu

dan formulir isian yang banyak digunakan di

GUI modern.

Perlu diperhatikan:

Tata letak internal kotak dialog

Hubungan eksternal kotak dialog

152

Pedoman Tata Letak Internal Kotak Dialog

Judul berarti, gaya konsisten.

Pengurutan dari atas kiri ke bawah kanan.

Pengelompokan dan penegasan.

Tata letak yang konsisten.

Peristilahan, font, penggunaan huruf besar, justifikasi yang konsisten.

Tombol standar (OK, Cancel, dll).

Pencegahan kesalahan.153

Pedoman Hubungan Eksternal Kotak Dialog

Penampilan dan penutupan halus.

Dapat dibedakan tapi batasnya kecil.

Ukuran cukup kecil (minimalkan overlap).

Dekat dengan item yang sesuai.

Tidak menghalangi item yang harus dilihat.

Mudah ditutup (dibuat menghilang).

Jelas penyelesaian/pembatalannya.

154

Contoh Kotak Dialog

Internet Options

dialog box pada

Internet Explorer

155

Contoh Kotak Dialog

Open dialog box pada Macromedia Flash MX

156

Handout IMK 2014.pdf

Documents

Transcript of Handout IMK 2014.pdf