Imk 04 Interface Berbasis Menu 2

8/17/2019 Imk 04 Interface Berbasis Menu 2

1/33

1


2/33

Ragam InteraksiRagam interaksi merujuk kepada semua

cara yang digunakan untuk penggunauntuk dapat berinteraksi dengan sistemkomputer.

Ragam interaksi didasarkan pada polaperilaku seseorang

Bersifat kontekstual dan innateRagam interaksi merujuk ke ‘bagaimana’

perilaku pengguna ketika berinteraksidengan sistem

2


3/33

Tipe Ragam InteraksiInteraksi berbasis bahasa perintah (command

language)

Sistem menuAntarmuka berbasis ikon

Manipulasi langsung

Antarmuka berbasis pengisian borang (form-

lling style)

3


4/33

Antarmuka BerbasisMenuMenu adalah sekumpulan pilihan yang

ditampilkan pada layar, setiap menu

mewakili sebuah perintahPengguna memilih sebuah perintah dari

sejumlah perintah yang disusun ke dalamsejumlah menu dan melihat pengaruhnya.

Eksekusi dari menu yang dipilih akanmenghasilkan perubahan status dari suatuantarmuka.

4


5/33

Jenis Menu(1)Menu tunggal:Menu binerMenu tunggal banak pilihanMenu datarMenu tarikMenu berbasis ikon dan toolbar Menu dengan pilihan ang panjang

Menu dan hotlink tertanamMenu breadcrumb

5


6/33

Jenis Menu(2)!ombinasi Banak Menu:Menu linearMenu serempakMenu berstruktur pohon"eta situs #aring menu tak berputar dan berputar

6


7/33

Menu BinerMenu biner digunakan untuk memilih salah

satu dari dua pilihan ang tersedia

$ontoh:

7


8/33

Menu Tunggal

Banyak PilihanMenu tunggal banak pilihan merupakan

%ariasi dari menu biner &&' lebih dari duapilihan

$ontoh:

8


9/33

Menu Datar (1)Menu datar merupakan menu berbasis teks

kon%ensional dengan semua menu ang tersediaditampilkan pada laar

$ontoh:

9

PENGELOLAAN DATA AKADEMIS MAHASISWA

“STMIK SANTOSA”

DAFTAR MENU

Inisialisasi Berkas Mahasiswa

Inisialisasi Berkas Mata KuliahInisialisasi Berkas Nilai UjianMembuka Semua Berkas

Mengisi Data Mahasiswa

Mengisi Data Mata Kuliah

Mengisi Data Nilai UjianMengisi Data KRS

Menghitung IP Semester

Mencetak Presensi Kuliah

Mencetak Presensi UjianMencetak KRSMencetak Nilai Ujian

Mencetak KHS

Mencetak Data Mahasiswa

Mencetak Data Mata Kuliah

Selesai

Pilih salah satu: _


10/33

Menu Datar (2)"ilihan pada menu datar dioperasikan dengan

memilih selektor

Selektor:uruf !ompatibel: sama dengan huruf pertama pilihan

*ak !ompatibel: tidak harus sama

Angka

!ompatibel: sama dengan nomor urut huruf pertama pilihan *ak kompatibel: tidak harus sama

10


11/33

Menu Datar () MENU DATAR DENGAN

SELEKTOR HURUF

KOMPATIBEL

B. Baca Data

C. Cetak Laporan

D. Data Baru

E. Edit RekamanG. 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 RekamanE. 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:_

11


12/33

Menu Tarik (1)Menu datar tidak lagi disukai karena terlalu

memakan kapling pada laar monitor

+ntuk menampilkan daftar pilihan angbanak sekarang banak digunakan menutarik ( pulldown menu), dan hampir semuaprogram aplikasi menggunakanna

12


13/33

Menu Tarik (2)

13


14/33

Menu Berbasis Ikon

!an Toolbar "ada menu berbasis ikon dan toolbar , pilihan

dinatakan sebagai suatu ikon atau toolbar tertentu

$ontoh:

14


15/33

"ariasi #ain

15

Menu gulung Kotak kombo

Menu mata ikan

Penggeser

Menu dua dimensi


16/33

Menu Tertanam $Hotlink (1)Menu tertanam adalah menu ang dapat

ditambahkan sendiri oleh pengguna suatuaplikasi, misalna -oogle .arth

Menu hotlink banak dijumpai di situs /ebsiteang tujuanna untuk memba0a pengguna keinformasi tertentu

16


17/33

Menu Tertanam $Hotlink (2)$ontoh:

17


18/33

Menu Breadcrumb+ntuk membantu pengguna mena%igasi

dirina ke ruang informasi ang tersedia,seringkali digunakan menu breadcrumb

$ontoh:

18

1ui2k*ime3 and a *I44 (56/) de2ompressor

are needed to se e this pi2ture


19/33

%ombinasi BanyakMenu(1)"ada sejumlah aplikasi, khususna ang berbasis

/eb, biasana dijumpai sejumlah ragam menuang berbeda

Menu ang ada ditampilkan satu persatu atause2ara serempak (bersamaan):

$ontoh kombinasi banak menu ang ditampilkansatu per satu misalna pada pemesanan tiket

pesa0at terbang atau kamar hotel:000airasia2om

19


are needed to see this pi2ture


20/33

%ombinasi BanyakMenu(2)$ontoh menu serempak:

20


21/33

%ombinasi BanyakMenu()Menu berstruktur pohon dan jaring:

21






are needed to see this pi2turePohon

Jaring tak

berutar

Jaring

berutar


22/33

%ombinasi BanyakMenu(&)"eta situs: digunakan untuk membantu

pengguna mengetahui se2ara keseluruhan

ruang informasi ang tersedia

22

!!!"eba#"$om


23/33

Manipulasi langsung (1)Shneiderman (789):

Manipulasi langsung adalah ragam dialog angmempunai karakteristik: penajian %isual dari obek ang akan dimanipulasi

tindakan ;sik sebagai pengganti teks masukan

reaksi langsung ang dapat dilihat

23


24/33

Manipulasi langsung (2)"ree2e, 788


25/33

Manipulasi langsung ()>e;nisi lain ang lebih umum:Mengklik dan menggeser obek pada laar

tampilan

>e;nisi di atas hana menekankan padatindakan ;sik oleh pengguna

Istilah ini sering disebut dengan manipulasi%isual ($ooper dan Reimann, ?@@)

25


26/33

Manipulasi langsung (&)Aspek kognitif:

Directness: gagasan tentang arah

perasaan ang timbul sebagai hasil dari interaksidengan antarmuka

Aspek dari directness: #arak antara ang dipikirkan pengguna dengan

kebutuhan sistem !eterlibatan se2ara kualitatif

26


27/33

Manipulasi langsung (')Manipulasi "rogram %s Manipulasi IsiManipulasi program: 2ara pengguna menggunakan program aplikasi

untuk menelesaikan satu tugas *idak perlu keahlian khusus

Manipulasi isi: lebih merujuk ke data ang diolah oleh program

aplikasi tersebut "erlu keahlian khusus atau pelatihan dalam jangka

0aktu agak lama

27


28/33

Manipulasi langsung ()>i et al (?@@


29/33

Interaksi Berbasis

Pengisian Borang (1)"engisian borang hampir dilakukan oleh

setiap orang sepanjang hidup mereka

Antarmuka berbasis pengisian borang adalah jenis antarmuka ang menggunakan metaforborang untuk mengisi data ke komputer

29


30/33

Interaksi Berbasis

Pengisian Borang (2)Aspek&aspek IB"B (7):Proteksi tampilan & adana pembatasan agar

pengguna tidak dapat mengakses semua

tampilan ang ada di laarBatasan me!an tampilan & medan data dapat

ditentukan untuk mempunai panjang angtetap atau berubah, menggunakan format

bebas atau tertentuIsi me!an & pengguna biasana mempunai

sejumlah gambar&an tentang isi medan angdiperbolehkan petunjuk pengisian dapat jugaditampilkan sebagai bagian dari tampilan

30


31/33

Interaksi Berbasis

Pengisian Borang ()Aspek&aspek IB"B (?):Me!an opsional & beberapa medan isian

dapat bersifat opsional medan opsional dapat

dinatakan se2ara tekstual atau menggunakanaturan tertentu seperti penggunaan 0arnaberintensitas rendah, 0arna tampilan angberbeda dan lain&lainDefault & apakah dalam medan isian

dimungkinkan adana nilai default #ika a,tentukan tempatna, apakah pada bagian angtidak dapat diakses pengguna ataukah padabagian masukan data

31


32/33

Interaksi Berbasis

Pengisian Borang (&)Aspek&aspek IB"B ():Bantuan & adana bantuan (help) ang menunjukkan

2ara pengisian borang dapat pula, atau malah sebalikna,ditambahkan, tetapi harus terpisah dari bentuk dasar

borang #ika terdapat fasilitas bantuan, pengguna perludineritahu 2ara mengakses bantuan tersebut

Me!an penghentian & masukan data dalam medandapat diakhiri dengan jalan menekan tombol nter atauReturn atau mengisi karakter terakhir dengan karakter

tertentu, atau de&ngan 2ara berpindah ke medan lain*a+igasi & kursor dapat digerakkan di sekeliling laar

ang menggunakan tombol Tab untuk urutan ang tetap,atau dapat pula digerakkan se2ara bebas menggunakanpiranti seperti mouse

32


33/33

Interaksi Berbasis

Pengisian Borang (')Aspek&aspek IB"B (

Documents

Imk 04 Interface Berbasis Menu 2