1

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

Tipe Ragam Interaksi

Interaksi berbasis bahasa perintah (command

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

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

Jenis Menu

(1)

Menu tunggal:
Menu biner
Menu tunggal banyak pilihan
Menu
Menu
Menu
Menu
Menu
Menu

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

Jenis Menu

(2)

Kombinasi Banyak Menu:

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

Menu Biner
Menu biner digunakan untuk memilih salah

satu dari dua pilihan yang tersedia

Contoh:

Menu Tunggal
Banyak
Pilihan

Menu tunggal banyak pilihan merupakan

variasi dari menu biner --> lebih dari dua
pilihan
Contoh:

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>

Mencetak Presensi Kuliah

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

<Q> Selesai

Pilih salah satu: _

9

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

10

Menu Datar

(3)

MENUDATARDENGAN
SELEKTORHURUF
KOMPATIBEL

B.BacaData
C.CetakLaporan
D.DataBaru
E.EditRekaman
G.GabungBerkas
H.HapusRekaman
I.IsiRekaman

Pilihsalahsatu:_

MENUDATARDENGAN
SELEKTORHURUF
TAKKOMPATIBEL

A.BacaData
B.CetakLaporan
C.DataBaru
D.EditRekaman
E.GabungBerkas
F.HapusRekaman
G.IsiRekaman

Pilihsalahsatu:_

a.
MENUDATARDENGAN
SELEKTORANGKA
KOMPATIBEL

2.BacaData
3.CetakLaporan
4.DataBaru
5.EditRekaman
7.GabungBerkas
8.HapusRekaman
9.IsiRekaman

Pilihsalahsatu:_

b.
MENUDATARDENGAN
SELEKTORANGKA
TAKKOMPATIBEL

1.BacaData
2.CetakLaporan
3.DataBaru
4.EditRekaman
5.GabungBerkas
6.HapusRekaman
7.IsiRekaman

Pilihsalahsatu:_

11

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.

12

Menu Tarik

(2)

13

Menu Berbasis Ikon

dan
Toolbar

Pada menu berbasis ikon dan toolbar, pilihan

dinyatakan sebagai suatu ikon atau toolbar
tertentu.
Contoh:

14

Variasi Lain
Menu gulung

Kotak kombo

Menu mata ikan

Penggeser

Menu dua dimensi

15

Menu Tertanam &

Hotlink
Menu tertanam adalah menu yang dapat
(1)

ditambahkan sendiri oleh pengguna suatu

aplikasi, misalnya Google Earth.
Menu hotlink banyak dijumpai di situs Website
yang tujuannya untuk membawa pengguna ke
informasi tertentu.

16

Menu Tertanam &

Hotlink
Contoh:
(2)

17

Menu Breadcrumb
Untuk membantu pengguna menavigasi

dirinya ke ruang informasi yang tersedia,

seringkali digunakan menu breadcrumb
Contoh:

QuickTime and a
TIFF (LZW) decompressor
are needed to see this picture.

18

Kombinasi Banyak
Menu
Pada sejumlah aplikasi, khususnya yang berbasis
(1)

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 a
TIFF (LZW) decompressor
are needed to see this picture.

19

Kombinasi Banyak
Menu
Contoh menu serempak:
(2)

20

Kombinasi Banyak
Menu
Menu berstruktur pohon dan jaring:
(3)

Jaring tak
berputar
QuickTime and a
TIFF (LZW) decompressor
are needed to see this picture.

QuickTime and a
TIFF (LZW) decompressor
are needed to see this picture.

Pohon

Jaring
berputar

QuickTime and a
TIFF (LZW) decompressor
are needed to see this picture.

21

Kombinasi Banyak
Menu
Peta situs: digunakan untuk membantu
(4)

pengguna mengetahui secara keseluruhan

ruang informasi yang tersedia

www.ebay.com

22

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.

23

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

24

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)

25

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

26

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

27

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

28

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

29

Interaksi Berbasis
Pengisian Borang
Aspek-aspek IBPB (1):

(2)

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
30

Interaksi Berbasis
Pengisian
Borang
Aspek-aspek IBPB (2):

(3)

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

Interaksi Berbasis
Pengisian
Borang
Aspek-aspek IBPB (3):

(4)

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

Interaksi Berbasis
Pengisian Borang
Aspek-aspek IBPB (4):

(5)

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.

33