imk-minggu4 - ragam dialog interaksi.ppt

37
Minggu 4/PIS/TKI 1 Ragam Dialog Interaksi Ir. P. Insap Santosa, M.Sc., Ph.D. [email protected] http://mti.ugm.ac.id/~insap/MyWeb

Upload: rizqy-drizyonand

Post on 29-Jan-2016

285 views

Category:

Documents


62 download

TRANSCRIPT

Page 1: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 1

Ragam Dialog Interaksi

Ir. P. Insap Santosa, M.Sc., Ph.D.

[email protected]

http://mti.ugm.ac.id/~insap/MyWeb

Page 2: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 2

Ragam Interaksi Ragam interaksi merujuk kepada semua

cara yang digunakan untuk pengguna untuk dapat berinteraksi dengan sistem komputer.

Ragam interaksi didasarkan pada pola perilaku seseorang Bersifat kontekstual dan innate

Ragam interaksi merujuk ke ‘bagaimana’ perilaku pengguna ketika berinteraksi dengan sistem

Page 3: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 3

Tipe Ragam Interaksi Interaksi berbasis bahasa perintah

(command language) Sistem menu Antarmuka berbasis ikon Manipulasi langsung Antarmuka berbasis pengisian borang

(form-filling style)

Page 4: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 4

Command Language Merupakan ragam dialog paling

konvensional, meskipun untuk sementara orang mereka masing senang menggunakan ragam dialog ini

Contoh, perintah-perintah pada: DOS UNIX

Page 5: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 5

Keuntungan dan Kerugian

Keuntungan Kerugian Cepat Efisien Akurat Ringkas Luwes Inisiatif oleh pengguna Appealing

Memerlukan pelatihan yang lama

Membutuhkan penggunaan yang teratur dan terus menerus

Beban ingatan yang tinggi Jelek dalam menangani

kesalahan

Page 6: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 6

Contoh

@ECHO OFF PROMPT $p$g PATH C:\WINDOWS;C:\DOS PATH C:\NWCLIENT\;%PATH% SET TEMP=C:\DOS C:\WINDOWS\DXPMODE 60 C:\WINDOWS\MSCDEX.EXE /S /D:MSCD001 /M:8 /V C:\DOS\SMARTDRV.EXE /X

Page 7: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 7

Dialog Berbasis Bahasa Alami Dialog perintah tunggal atau kombinasinya

tidak bersifat “manusiawi” karena pengguna harus mengingat format kalimat dengan betul

Sebagai alternatif, dialog berbasis bahasa alami bersifat lebih “manusiawi” karena menggunakan kosakata yang sering digunakan dalam percakapan sehari-hari. Perlu penterjemah Susah mengatasi kerancuan perintah

Page 8: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 8

Antarmuka Berbasis Menu Menu adalah 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.

Eksekusi dari menu yang dipilih akan menghasilkan perubahan status dari suatu antarmuka.

Page 9: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 9

Jenis Menu(1)

Menu tunggal: Menu biner Menu tunggal banyak pilihan

Menu datar Menu tarik Menu berbasis ikon dan toolbar Menu dengan pilihan yang panjang Menu dan hotlink tertanam Menu breadcrumb

Page 10: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 10

Jenis Menu(2)

Kombinasi Banyak Menu: Menu linear Menu serempak Menu berstruktur pohon Peta situs Jaring menu tak berputar dan berputar

Page 11: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 11

Menu Biner Menu biner digunakan untuk memilih

salah satu dari dua pilihan yang tersedia

Contoh:

Page 12: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 12

Menu Tunggal Banyak Pilihan Menu tunggal banyak pilihan

merupakan variasi dari menu biner --> lebih dari dua pilihan

Contoh:

Page 13: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 13

Menu Datar (1)

Menu datar merupakan menu berbasis teks konvensional dengan semua menu yang tersedia ditampilkan pada layar.

Contoh:

PENGELOLAAN DATA AKADEMIS MAHASISWA “STMIK SANTOSA”

DAFTAR MENU <A> <B> <C> <D> <E> <F> <G> <H> <I>

Inisialisasi Berkas Mahasiswa Inisialisasi Berkas Mata Kuliah Inisialisasi Berkas Nilai Ujian Membuka Semua Berkas Mengisi Data Mahasiswa Mengisi Data Mata Kuliah Mengisi Data Nilai Ujian Mengisi Data KRS Menghitung IP Semester

<J> <K> <L> <M> <N> <O> <P> <Q>

Mencetak Presensi Kuliah Mencetak Presensi Ujian Mencetak KRS Mencetak Nilai Ujian Mencetak KHS Mencetak Data Mahasiswa Mencetak Data Mata Kuliah Selesai

Pilih salah satu: _

Page 14: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 14

Menu Datar (2)

Pilihan pada menu datar dioperasikan dengan memilih selektor

Selektor: Huruf

Kompatibel: sama dengan huruf pertama pilihan Tak Kompatibel: tidak harus sama

Angka Kompatibel: sama dengan nomor urut huruf pertama pilihan Tak kompatibel: tidak harus sama

Page 15: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 15

Menu Datar (3)

MENU DATAR DENGAN SELEKTOR HURUF

KOMPATIBEL

B. Baca Data C. Cetak Laporan D. Data Baru E. Edit Rekaman G. Gabung Berkas H. Hapus Rekaman I. Isi Rekaman Pilih salah satu:_

MENU DATAR DENGAN SELEKTOR HURUF TAK KOMPATIBEL

A. Baca Data B. Cetak Laporan C. Data Baru D. Edit Rekaman E. Gabung Berkas F. Hapus Rekaman G. Isi Rekaman Pilih salah satu: _

a. b. MENU DATAR DENGAN SELEKTOR ANGKA

KOMPATIBEL

2. Baca Data 3. Cetak Laporan 4. Data Baru 5. Edit Rekaman 7. Gabung Berkas 8. Hapus Rekaman 9. Isi Rekaman Pilih salah satu:_

MENU DATAR DENGAN SELEKTOR ANGKA TAK KOMPATIBEL

1. Baca Data 2. Cetak Laporan 3. Data Baru 4. Edit Rekaman 5. Gabung Berkas 6. Hapus Rekaman 7. Isi Rekaman Pilih salah satu:_

Page 16: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 16

Menu Tarik (1)

Menu datar tidak lagi disukai karena terlalu memakan kapling pada layar monitor

Untuk menampilkan daftar pilihan yang banyak sekarang banyak digunakan menu tarik (pulldown menu), dan hampir semua program aplikasi menggunakannya.

Page 17: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 17

Menu Tarik (2)

Page 18: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 18

Menu Berbasis Ikon dan Toolbar Pada menu berbasis ikon dan toolbar,

pilihan dinyatakan sebagai suatu ikon atau toolbar tertentu.

Contoh:

Page 19: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 19

Variasi Lain

Menu gulung Kotak kombo

Menu mata ikan

Penggeser

Menu dua dimensi

Page 20: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 20

Menu Tertanam & Hotlink (1)

Menu tertanam adalah menu yang dapat ditambahkan sendiri oleh pengguna suatu aplikasi, misalnya Google Earth.

Menu hotlink banyak dijumpai di situs Website yang tujuannya untuk membawa pengguna ke informasi tertentu.

Page 21: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 21

Menu Tertanam & Hotlink (2)

Contoh:

Page 22: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 22

Menu Breadcrumb Untuk membantu pengguna menavigasi

dirinya ke ruang informasi yang tersedia, seringkali digunakan menu breadcrumb

Contoh:

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

Page 23: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 23

Kombinasi Banyak Menu(1)

Pada sejumlah aplikasi, khususnya yang berbasis Web, biasanya dijumpai sejumlah ragam menu yang berbeda

Menu yang ada ditampilkan satu persatu atau secara serempak (bersamaan):

Contoh kombinasi banyak menu yang ditampilkan satu per satu misalnya pada pemesanan tiket pesawat terbang atau kamar hotel: www.airasia.com

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

Page 24: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 24

Kombinasi Banyak Menu(2)

Contoh menu serempak:

Page 25: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 25

Kombinasi Banyak Menu(3)

Menu berstruktur pohon dan jaring:

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.Pohon

Jaring tak berputar

Jaringberputar

Page 26: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 26

Kombinasi Banyak Menu(4)

Peta situs: digunakan untuk membantu pengguna mengetahui secara keseluruhan ruang informasi yang tersedia

www.ebay.com

Page 27: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 27

Manipulasi langsung (1)

Shneiderman (1983): Manipulasi langsung adalah ragam dialog

yang mempunyai karakteristik: penyajian visual dari obyek yang akan

dimanipulasi tindakan fisik sebagai pengganti teks masukan reaksi langsung yang dapat dilihat.

Page 28: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 28

Manipulasi langsung (2)

Preece, 1994: kenampakan obyek dan tindakan yang

dilakukan pengguna cepat, dapat dibalik/dibatalkan, tindakan

meningkat penggantian perintah yang diketik dengan

tindakan menunjuk ke obyek yang diinginkan

Page 29: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 29

Manipulasi langsung (3)

Definisi lain yang lebih umum: Mengklik dan menggeser obyek pada layar

tampilan Definisi di atas hanya menekankan pada

tindakan fisik oleh pengguna Istilah ini sering disebut dengan manipulasi

visual (Cooper dan Reimann, 2003)

Page 30: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 30

Manipulasi langsung (4)

Aspek kognitif: Directness:

gagasan tentang arah perasaan yang timbul sebagai hasil dari

interaksi dengan antarmuka Aspek dari directness:

Jarak antara yang dipikirkan pengguna dengan kebutuhan sistem

Keterlibatan secara kualitatif

Page 31: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 31

Manipulasi langsung (5)

Manipulasi Program vs Manipulasi Isi Manipulasi program:

cara pengguna menggunakan program aplikasi untuk menyelesaikan satu tugas

Tidak perlu keahlian khusus Manipulasi isi:

lebih merujuk ke data yang diolah oleh program aplikasi tersebut

Perlu keahlian khusus atau pelatihan dalam jangka waktu agak lama

Page 32: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 32

Manipulasi langsung (6)

Dix et al. (2004): kenampakan obyek yang menjadi perhatian, penggantian bahasa perintah yang rumit dengan suatu

tindakan yang memanipulasi obyek yang nampak secara langsung (sehingga disebut dengan manipulasi langsung)

tindakan bertahap pada antarmuka dengan umpan balik segera untuk semua tindakan yang diambil,

kebenaran sintaksis untuk semua tindakan, sehingga semua tindakan pengguna merupakan langkah yang sah

semua tindakan dapat dibatalkan

Page 33: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 33

Interaksi Berbasis Pengisian Borang (1)

Pengisian borang hampir dilakukan oleh setiap orang sepanjang hidup mereka

Antarmuka berbasis pengisian borang adalah jenis antarmuka yang menggunakan metafor borang untuk mengisi data ke komputer

Page 34: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 34

Interaksi Berbasis Pengisian Borang (2)

Aspek-aspek IBPB (1): Proteksi tampilan - adanya pembatasan agar

pengguna tidak dapat mengakses semua tampilan yang ada di layar.

Batasan medan tampilan - medan data dapat ditentukan untuk mempunyai panjang yang tetap atau berubah, menggunakan format bebas atau tertentu.

Isi medan - pengguna biasanya mempunyai sejumlah gambar-an tentang isi medan yang diperbolehkan; petunjuk pengisian dapat juga ditampilkan sebagai bagian dari tampilan

Page 35: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 35

Interaksi Berbasis Pengisian Borang (3)

Aspek-aspek IBPB (2): Medan opsional - beberapa medan isian dapat

bersifat opsional; medan opsional dapat dinyatakan secara tekstual atau menggunakan aturan tertentu seperti penggunaan warna berintensitas rendah, warna tampilan yang berbeda dan lain-lain

Default - apakah dalam medan isian dimungkinkan adanya nilai default. Jika ya, tentukan tempatnya, apakah pada bagian yang tidak dapat diakses pengguna ataukah pada bagian masukan data.

Page 36: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 36

Interaksi Berbasis Pengisian Borang (4)

Aspek-aspek IBPB (3): Bantuan - adanya bantuan (help) yang menunjukkan cara

pengisian borang dapat pula, atau malah sebaliknya, ditambahkan, tetapi harus terpisah dari bentuk dasar borang. Jika terdapat fasilitas bantuan, pengguna perlu dineritahu cara mengakses bantuan tersebut.

Medan penghentian - masukan data dalam medan dapat diakhiri dengan jalan menekan tombol Enter atau Return atau mengisi karakter terakhir dengan karakter tertentu, atau de-ngan cara berpindah ke medan lain.

Navigasi - kursor dapat digerakkan di sekeliling layar yang menggunakan tombol Tab untuk urutan yang tetap, atau dapat pula digerakkan secara bebas menggunakan piranti seperti mouse.

Page 37: IMK-Minggu4 - Ragam Dialog Interaksi.ppt

Minggu 4/PIS/TKI 37

Interaksi Berbasis Pengisian Borang (5)

Aspek-aspek IBPB (4): Pembetulan kesalahan - pengguna dapat

membetulkan kesalahan menggunakan tombol BackSpace, dengan menumpang-tindihi isian lama, dengan jelan membersihkan dan mengisi kembali medan tersebut dan lain-lain.

Penyelesaian - perlu diperhatikan cara yang digunakan untuk memberitahu pengguna bahwa seluruh proses pengisian telah selesai.