Anda di halaman 1dari 33

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

2

Tipe Ragam Interaksi
Interaksi berbasis bahasa perintah (command

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

3

Eksekusi dari menu yang dipilih akan menghasilkan perubahan status dari suatu antarmuka. 4 . setiap menu mewakili sebuah perintah Pengguna memilih sebuah perintah dari sejumlah perintah yang disusun ke dalam sejumlah menu dan melihat pengaruhnya.Antarmuka Berbasis Menu Menu adalah sekumpulan pilihan yang ditampilkan pada layar.

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

Jenis Menu (2) Kombinasi Banyak Menu: Menu linear Menu serempak Menu berstruktur pohon Peta situs Jaring menu tak berputar dan berputar 6 .

Menu Biner Menu biner digunakan untuk memilih salah satu dari dua pilihan yang tersedia Contoh: 7 .

Menu Tunggal Banyak Pilihan  Menu tunggal banyak pilihan merupakan variasi dari menu biner --> lebih dari dua pilihan Contoh: 8 .

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 (1) Menu datar merupakan menu berbasis teks konvensional dengan semua menu yang tersedia ditampilkan pada layar.

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 DENGAN  SELEKTOR ANGKA  TAK KOMPATIBEL    1. Data Baru  4. Data Baru  5. Baca Data  2. Isi Rekaman    Pilih salah satu:_ MENU DATAR DENGAN  SELEKTOR HURUF  TAK KOMPATIBEL    A. Edit Rekaman  5. Hapus Rekaman  7. Hapus Rekaman  I. Hapus Rekaman  9. Gabung Berkas  H. Edit Rekaman  7.Menu Datar (3) MENU DATAR DENGAN  SELEKTOR HURUF  KOMPATIBEL    B. Baca Data  3. Cetak Laporan  D. Baca Data  C. Isi Rekaman    Pilih salah satu:_ b. Gabung Berkas  8. Baca Data  B. Data Baru  D. Cetak Laporan  4. Edit Rekaman  E. Isi Rekaman    Pilih salah satu:_ a. Edit Rekaman  G. Hapus Rekaman  G. Gabung Berkas  F. Gabung Berkas  6. Cetak Laporan  C. Data Baru  E. MENU DATAR DENGAN  SELEKTOR ANGKA  KOMPATIBEL    2. Isi Rekaman    Pilih salah satu:_ 11 . Cetak Laporan  3.

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. Contoh: 14 . pilihan dinyatakan sebagai suatu ikon atau toolbar tertentu.

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. 16 . misalnya Google Earth. Menu hotlink banyak dijumpai di situs Website yang tujuannya untuk membawa pengguna ke informasi tertentu.

Menu Tertanam & Hotlink Contoh: (2) 17 .

seringkali digunakan menu breadcrumb Contoh: QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture.Menu Breadcrumb Untuk membantu pengguna menavigasi dirinya ke ruang informasi yang tersedia. 18 .

com QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture. 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.Kombinasi Banyak Menu Pada sejumlah aplikasi. 19 . khususnya yang berbasis (1) Web.airasia.

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. Pohon Jaring 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. 21 .

ebay.Kombinasi Banyak Menu Peta situs: digunakan untuk membantu (4) pengguna mengetahui secara keseluruhan ruang informasi yang tersedia www.com 22 .

 23 .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.

dapat dibalik/dibatalkan.Manipulasi langsung (2) Preece. 1994: kenampakan obyek dan tindakan yang dilakukan pengguna cepat. tindakan meningkat penggantian perintah yang diketik dengan tindakan menunjuk ke obyek yang diinginkan 24 .

2003) 25 .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.

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.  kebenaran sintaksis untuk semua tindakan. sehingga semua tindakan pengguna merupakan langkah yang sah  semua tindakan dapat dibatalkan 28 .  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. (2004):  kenampakan obyek yang menjadi perhatian.

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 .

menggunakan format bebas atau tertentu. petunjuk pengisian dapat juga ditampilkan sebagai bagian dari tampilan 30 . Isi medan .adanya pembatasan agar pengguna tidak dapat mengakses semua tampilan yang ada di layar. Batasan medan tampilan .Interaksi Berbasis Pengisian Borang Aspek-aspek IBPB (1): (2) Proteksi tampilan .medan data dapat ditentukan untuk mempunyai panjang yang tetap atau berubah.pengguna biasanya mempunyai sejumlah gambar-an tentang isi medan yang diperbolehkan.

apakah pada bagian yang tidak dapat diakses pengguna ataukah pada bagian masukan data.Interaksi Berbasis Pengisian Borang Aspek-aspek IBPB (2): (3) Medan opsional . warna tampilan yang berbeda dan lain-lain Default . medan opsional dapat dinyatakan secara tekstual atau menggunakan aturan tertentu seperti penggunaan warna berintensitas rendah.apakah dalam medan isian dimungkinkan adanya nilai default. Jika ya.beberapa medan isian dapat bersifat opsional. 31 . tentukan tempatnya.

ditambahkan. atau dapat pula digerakkan secara bebas menggunakan piranti seperti mouse.Interaksi Berbasis Pengisian Borang Aspek-aspek IBPB (3): (4)  Bantuan . 32 .kursor dapat digerakkan di sekeliling layar yang menggunakan tombol Tab untuk urutan yang tetap.masukan data dalam medan dapat diakhiri dengan jalan menekan tombol Enter atau Return atau mengisi karakter terakhir dengan karakter tertentu. Jika terdapat fasilitas bantuan. pengguna perlu dineritahu cara mengakses bantuan tersebut.  Medan penghentian . atau malah sebaliknya.adanya bantuan (help) yang menunjukkan cara pengisian borang dapat pula.  Navigasi . atau de-ngan cara berpindah ke medan lain. tetapi harus terpisah dari bentuk dasar borang.

Penyelesaian . dengan jelan membersihkan dan mengisi kembali medan tersebut dan lain-lain.Interaksi Berbasis Pengisian Borang Aspek-aspek IBPB (4): (5) Pembetulan kesalahan . 33 . dengan menumpang-tindihi isian lama.perlu diperhatikan cara yang digunakan untuk memberitahu pengguna bahwa seluruh proses pengisian telah selesai.pengguna dapat membetulkan kesalahan menggunakan tombol BackSpace.