I N T E R A K S I

3/24/2014

1

I N T E R A K S I

Pertemuan 4 | Interaksi Manusia dan Komputer | UDINUS

Apa Itu Interaksi?

Komunikasi

user system

3/24/2014

2

Interaksi

Dialog manusia dan sistem dipengaruhi oleh bentukinterface.Interaksi mengambil tempat antara sosial dan organisasiframework yang mempengaruhi user dan sistem.Cakupan yang luas untuk tingkat keharusan komunikasiuser dan sistem dalam melakukan task (tugas) :

Batch processing :tidak diperlukan input langsung dari user.

Direct manipulation and virtual reality :Semua dikontrol oleh user.

Level Interaksi

Pengetahuan user pada task domain

Pengetahuan user dalam berbahasa

Tangan mata telinga user

Komputer merepresentasikan task domain

Perintah bahasa komputer

Input keyboard, tampilan dan input lainnya

Output tampilan printer dan output lainnya

Task Level

Dialog Level

Input/Output Level

Goal dari User Output pada Dunia Nyata Goal Level

Struktur Manusia Struktur Komputer

3/24/2014

3

Terminologi * Interaksi

Domain :Area keahlian dan pengetahuan pada kegiatan dunianyata

Goal :Menginginkan hasil dari suatu task (tugas)

Task :Merupakan operasi untuk memanipulasi muatan daridomain

Intention :Aksi khusus untuk menemukan tujuan yang diinginkan

*batasan

Terminologi Interaksi (Lnjt)

Task analysis :Identifikasi ruang masalah yang berkaitan dengandomain, tujuan, tugas, dan maksud

System :aplikasi komputer

Task language :Bahasa user, menjelaskan atribut domain yang relevanterhadap kondisi pengguna

Core language :Bahasa sistem yang menjelaskan atribut domain yangrelevan terhadap kondisi sistem

3/24/2014

4

Siklus Interaksi (Execution/Evaluation Loop)

Donald Norman’s model (7 komponen) :Menetapkan tujuanMembentuk intentionMenetapkan rangkaian aksiMelaksanakan aksiMelihat kondisi sistemMenginterprestasikan kondisi sistemMengevaluasi kondisi sistem sehubungan dengan goal dan intention

Model Norman berkonsentrasi pada pandangan pengguna antarmuka

system

evaluationexecution

goal


Menetapkan tujuanMembentuk intentionMenetapkan rangkaian aksiMelaksanakan aksiMelihat kondisi sistemMenginterprestasikan kondisi systemMengevaluasi kondisi sistem sehubungan dengan goal dan intention

system

evaluationexecution

goal

3/24/2014

5

Menetapkan tujuanMembentuk intentionMenetapkan rangkaian aksiMelaksanakan aksiMelihat kondisi sistemMenginterprestasikan kondisi systemMengevaluasi kondisi sistem sehubungan dengan goal dan intention

system

evaluationexecution

goal


menetapkan tujuanmembentuk intentionmenetapkan rangkaian aksimelaksanakan aksimelihat kondisi sistemmenginterprestasikan kondisi systemmengevaluasi kondisi sistem sehubungan dengan goal dan intention

system

evaluationexecution

goal


3/24/2014

6

Gulf Of Execution & Gulf Of EvaluationDesain interface yang baik, gulf harus seminimalmungkin.

Gulf of ExecutionJika aksi-aksi yang dibentuk oleh user tidak bisa dibentukoleh sistemAksi dari user sulit dirumuskan oleh input sistem

Aksi yang dirumuskan oleh user≠ aksi yang diijinkan oleh sistem

Gulf of evaluationJika presentasi dari aksi tidak bisa dimengerti oleh userUser sulit menerjemahkan output dari sistem

harapan user pada perubahan status sistem≠ presentasi aktual dari status sistem

Gulf Of Execution & Gulf Of Evaluation

3/24/2014

7

Kerangka Kerja Interaksi

Model kerja interaksi G.D Abowd dan R. Beale (Human-Computer Interaction, 2003)

4 komponen kerangka kerja interaksi :userinputsystemoutput

masing-masing memiliki bahasa yang unik

interaksi ⇒ terjemahan di antara bahasa yang ada

masalah dalam interaksi = masalah dalam penerjemahan

Score

Utask

Ooutput

Iinput

Kerangka Kerja

3/24/2014

8

Kerangka Kerja

niat pengguna (user)→ diterjemahkan ke dalam tindakan di antarmuka

→ diterjemahkan ke dalam status perubahan sistem → tercermin dalam tampilan output

→ ditafsirkan oleh pengguna

kerangka umum untuk memahami interaksi tidak terbatas pada sistem komputer elektronik mengidentifikasi semua komponen utama yang terlibat dalam interaksi memungkinkan sistem penilaian komparatif suatu abstraksi

ErgonomiStudi tentang karakteristik fisik dari interaksi yang mengarah kepadafaktor kenyamanan kerja.

Memahami seluruh kondisi manusia, baik dari segi anatomi, fisiologi,psikologi, engineering, manajemen, dan desain/perancangan.

Ergonomi baik menentukan standar dan pedoman untuk membatasicara kita mendesain aspek tertentu dari sistem

3/24/2014

9

Contoh-contoh Ergonomipengaturan kontrol dan tampilan

contoh : kontrol dikelompokkan berdasarkan fungsi atau frekuensi penggunaan, atau secara berurutan

lingkungan sekitar Contoh : pengaturan tempat duduk beradaptasi untuk mengatasi semua ukuran pengguna

masalah kesehatanContoh : posisi fisik, kondisi lingkungan (suhu, kelembaban), pencahayaan, kebisingan

penggunaan warna Contoh : penggunaan merah untuk peringatan, hijau untuk oke, kesadaran kebutaan warna, dll

Ergonomi

3/24/2014

10

Ergonomi

Ergonomi

3/24/2014

11

Ergonomi

Ergonomi

3/24/2014

12

Ergonomi

Ergonomi

3/24/2014

13

Ergonomi

Antarmuka Industri

Office interface vs. industrial interface?

Konteks masalah !

office industrialtype of data textual numericrate of change slow fastenvironment clean dirty

3/24/2014

14

MANIPULASI TIDAK LANGSUNG

kantor– manipulasi langsungpengguna berinteraksi dengan dunia buatan

industri– manipulasi tidak langsung

pengguna berinteraksi dengan dunia nyata melalui antarmuka

issues ..feedbackdelays

system

interface plant

immediate

feedback

instruments

Ergonomi Industri

3/24/2014

15

Ergonomi Industri

Ergonomi Industri

3/24/2014

16

Ergonomi

Prinsip ErgonomiPrinsip Fisikal :

Menjadikan segala sesuatu mudah dijangkauBekerja dengan tinggi yang sesuai/cocokBekerja dengan postur yang sesuaiMengurangi pengeluaran tenaga yang berlebihanMeminimalkan kepenatan/keletihanMengurangi pengulangan yang berlebihanMemberikan jarak ruang dan aksesMeminimalkan contact stress

3/24/2014

17

Prinsip ErgonomiPrinsip Fisikal (lnjt):

Memberikan mobilisasi dan mengubah postur/posisiMenahan getaranMenciptakan lingkungan yang menyenangkan :

Pencahayaan yang tepat :Menghindarkan user dari cahaya langsung atau pantulannyaMemperoleh keseimbangan antara kecerahan (brightness) layar tampilan dan kecerahan yang ada di depan user.Menghindari cahaya langsung atau pantulan yang langsung mengenai layar tampilan.

Cahaya langsung (berasal dari matahari)Cahaya tidak langsung (pantulan dari tembok, lantai, meja, dsb)

Temperatur yang tepat

Prinsip ErgonomiPrinsip Kognitif

Adanya standarisasiMembuat stereotipeMenghubungkan aksi dengan persepsiMempermudah pemaparan suatu informasiMenyajikan informasi pada level yang tepat secara detail

3/24/2014

18

Prinsip ErgonomiPrinsip Kognitif (lnjt)

Memberikan image/gambaran yang jelasMembuat redundansi, misal warna yang berbeda, cetaktebal, miring, dll.Membuat pola/patternsMemberikan stimulan yang bervariasi sesuai kondisiMemberikan umpan balik secara cepat/seketika.

Ergonomi

3/24/2014

19

Ergonomi

Gaya Interaksi

dialogue … computer and user

gaya interaksi yang berbeda

Gaya interaksi berhubungan erat dengan user interface.

3/24/2014

20

5 Perkembangan Generasi User Interface

1. Antarmuka sistem berkelompok :Generasi pertama dari user interfaceUser berinteraksi dengan sistem melalui pengantar kerja secara berkelompokSemua perintah disampaikan terlebih dahulu sebelum dicetak hasilnya.Daya guna antarmuka rendah

2. Antarmuka berorientasikan baris perintah :Diperkenalkan pada tahun 1960-an.Tele-type (TTY) adalah mesin yang pertama menggunakan antarmuka baris perintahUser mengetikkan perintah baris demi baris.Interaksi user dengan perintah berbentuk dialog soal-jawabBerdaya guna rendahKomputer lebih mengontrol userAntarmuka tidak pemaaf dan membebani ingatan user


3/24/2014

21

Antarmuka Orientasi Baris Perintah

3. Antarmuka full screen :Berbentuk pengisian borangMembolehkan beberapa data dimasukkanSistem menu berbentuk user interface full screen


3/24/2014

22

Antarmuka Full Screen

4. Antarmuka pengguna grafik :Berbentuk visual (GUI : Graphic User Interface) menggunakan grafik, ikon, dan animasiSecara komersil mulai tahun 1980-anInteraksi berdasar WIMP (window, icon, menu, dan pointer)Manipulasi langsung dari user dengan objek visual melalui mouse atau peranti lain.Point and click, drag and drop, dan menggerakkan objek merupakan ciri utama dalam GUI


3/24/2014

23

GUI Interface

GUI Interface

3/24/2014

24

5. Antarmuka pengguna masa depan :Mengarah pada penambahan unsur animasi obyek, audio (suara dan bunyi), serta unsur tiga dimensi.Interaksi yang digunakan lebih ke natural language dan membenarkan penggunaan input yang tidak berformat.


Contoh bentuk user interface masa depan :Embodied Interaction : menggunakan gerakan tubuh untukmemberikan input ke komputer3D Virtual Reality : memberikan bentuk seolah user benar-benarberada dalam komputer.Sensing Affect : komputer telah bisa mengenal lingkungan danpengaruhnya, merasakan, mendengar, dan melihat.Sensor Networks : sensor yang ditempatkan jauh dari komputer,mampu mendeteksi vision dan sound. Merupakan perkembanganteknologi jaringan komputer secara wireless.Cyborg : evolusi perkembangan IMK yang merupakan aspek dariartificial intelligent.


3/24/2014

25

Embodied Interaction(menggunakan gerakan tubuh untuk memberikan input ke komputer )

3D Virtual(memberikan bentuk seolah user benar-benar berada dalam

komputer)

3/24/2014

26

3D Virtual Reality

Sensing Affect

(komputer telah bisa mengenal lingkungan dan pengaruhnya, merasakan, mendengar, dan melihat )

3/24/2014

27

Sensor Network(sensor yang ditempatkan jauh dari komputer, mampu mendeteksi

vision dan sound.)

Cyborg(evolusi perkembangan IMK yang merupakan aspek dari artificial intelligent)

3/24/2014

28

Future Interface

Future Interface

3/24/2014

29

Future Interface

Future Interface

3/24/2014

30

Future Interface

Gaya Interaksi Secara Umum command line interfacemenusnatural languagequestion/answer and query dialogueform-fills and spreadsheetsWIMPpoint and clickthree–dimensional interfaces

3/24/2014

31

Speech-driven Interfacecepat memperbaiki …

…. tapi masih tidak akurat

bagaimana memiliki dialog yang kuat…….. Interaksi, tentu saja!

e.g. airline reservasi: jawaban “yes” dan “no” + sistem mencerminkan kembali pemahamannya

“kamu menginginkan tiket dari New York ke Boston? “

Speech-driven

3/24/2014

32

Speech-driven GIS

Designing experience

real crackerscheap and cheerful!bad joke, plastic toy, paper hat pull and bang

3/24/2014

33


virtual crackerscheap and cheerfulbad joke, web toy, cut-out mask click and bang


virtual crackerscheap and cheerfulbad joke, web toy, cut-out mask click and bang

3/24/2014

34

how crackers work

sender

fill in web form

To: wxvFrom: ..

receive email recipient

closedcracker page

openmessage

recipient clickscracker opens ...

very slowly

jokelinks

opencracker page

web toymask

sender

watchesprogress

Physical designbanyak kendala:

ergonomis - tombol dengan ukuran minimumfisik - saklar tegangan tinggi yang besarhukum dan keamanan - kontrol cooker tinggikonteks dan lingkungan - mudah dibersihkanestetika - harus terlihat baikekonomi - ... dan biaya tidak terlalu banyak!

3/24/2014

35

Physical design

physical layout

controls:logical relationship

~ spatial grouping

Spatial : spasi

3/24/2014

36

compliant interaction

Kondisi yang umum dalam tombol mekanik

tombol putar mengungkapkan sesuatu yang umum dan dapat dikendalikan oleh

pengguna dan mesin

3 teknik interaksi

Linquistic Stylemelalui bahasa yg dimengerti oleh komputer Key-Model Stylemelalui penekanan tombol2 yg diprogram sebelumnya untuk menjalankan fungsi-fungsi.Direct Manipulation Stylemelalui manipulasi terhadap obyek tertentu.

3/24/2014

37

Linquistic Style

Command line

Key-Model Style

Question and answerFunction key interactionMenu based interaction

3/24/2014

38

Direct Manipulation Style

Form fill-inGraphical direct manipulationGraphical User Intarface

I N T E R A K S I

Documents