interaksi manusia dan komputer · atau lebih submenu. ... emp-sal-235 lebih mudah daripada...

INTERAKSI MANUSIA DAN KOMPUTER

Astrid Lestari Tungadi, S.Kom., M.TI.

SISTEM MENU TARIK DAN FILLING FORM DIALOGUE

Sebuah menu tarik pada dasarnya adalah sistem menu yang

pilihan-pilihannya dikelompokkan menurut kategori tertentu

atau menurut cara tertentu sehingga akan membentuk semacam

hirarki pilihan.

Pada hirarki paling tinggi, pilihan-pilihan disebut dengan menu

utama. Sebagian atau semua menu utama dapat mempunyai satu

atau lebih submenu.

Sistem menu tarik dibagi dua yaitu pop-up dan pull-down.

Dalam pembuatan menu tarik dapat disertai dengan icon dan

shorcut (tombol kombinasi untuk mengakses menu, seperti : Ctrl-

X, Ctrl+V, dan lain-lain).

SISTEM MENU TARIK

CONTOH POP-UP

CONTOH PULL-DOWN

Menu-menu yang kita sediakan sebaiknya didisable ketika user

belum login ke sistem.

SISTEM MENU TARIK

Antarmuka Filling Form sama seperti

tampilan pengisian formulir pada

kertas. Sebagian besar orang pasti

pernah mengisi suatu form (formulir)

untuk berbagai keperluan.

FILLING FORM DIALOGUE

Filling Form Dialogue merupakan suatu penerapan langsung

dari aktivitas pengisian formulir dalam kehidupan sehari-hari

dimana user (pengguna) dihadapkan pada suatu bentuk

formulir yang ada di layar komputer yang mereka gunakan.

Kunci terpenting dalam filling form dialogue adalah bahwa

hampir semua informasi dapat tampak secara serempak

sehingga memudahkan pengguna dalam hal pengontrolan dan

manipulasi atas informasi yang nampak di layar.

Piranti masukan yang paling mudah dijumpai dan sangat populer

ialah keyboard dan mouse.


a. Rancang dan atur form untuk mendukung tugas.

b. Sesuaikan form pada layar dengan form pada kertas sehingga

mendukung tugas user.

c. Organisasikan dalam kelompok, item-item yang berhubungan secara

semantik, urutan penggunaan, frekuensi penggunaan, atau hal penting

lainnya.

d. Jumlah item-item dalam setiap kelompok : 6 – 7 item

e. Gunakan ruang kosong pada tampilan agar seimbang dan simetri.

f. Pisahkan kelompok-kelompok secara logika dengan spasi, garis, warna

atau bentuk lainnya.

g. Hubungan dan ketergantungan antar item harus berada dalam 1 screen

(jangan antar screen, yang membuat user harus mengingat informasi

dari 1 screen untuk keperluan screen lain)

PRINSIP DESAIN FILLING

FORM DIALOGUE1. Pengaturan dan Layout Filling Form


FORM DIALOGUE1. Pengaturan dan Layout Filling Form

a. Desain caption dan field filling form.

b. Atur letak (posisi) caption dan field berdasarkan user, tugas, dan tipe

data, secara berurutan.

c. Bedakan penulisan caption dan field.

d. Berikan nama grup atau judul dari kelompok item-item.

e. Caption harus deskriptif, singkat, dan familiar.

f. Informasikan jumlah atau panjang karakter untuk field yang

diinputkan.

g. Informasikan jika field bersifat opsional.


FORM DIALOGUE2. Desain Judul dan Field Filling


FORM DIALOGUE2. Desain Judul dan Field Filling

a. Pertimbangkan sistem yang mampu melengkapi masukan user.

Contoh : input ‘Jun’, dilengkapi sistem dengan ‘June’ pada saat

user memindahkan kursor ke field berikutnya

b. Pertimbangkan tersedianya option value untuk field yang memiliki

banyak pilihan input.

c. Hindari aturan yang kompleks untuk input data.

d. Sediakan pengelompokkan yang berarti untuk menghemat panjang

field yang diinputkan.

Contoh :

386 6547 231 lebih mudah daripada 3866547231

EMP-SAL-235 lebih mudah daripada EMPSAL235


FORM DIALOGUE3. Format Input Filling Form


FORM DIALOGUE3. Format Input Filling Form

a. Berikan cara yang mudah untuk input data yang frekuensinya sering.

Contoh : ‘y’ dengan ‘Y’ (‘y’ lebih mudah)

b. Jangan memberikan batasan pengukuran, sehingga user harus

mentranformasikan atau menghitung ke ukuran yang diinginkan.

Contoh : Panjang = ………… (inchi) ;

padahal user lebih umum ke cm

c. Rancang data yang diinput menggunakan kata yang lebih bermakna.

d. Sistem seharusnya case blind terhadap masukan user.

Contoh : YES atau Yes atau yes

e. Usahakan field yang diinputkan pendek.

f. Hindari pergantian terlalu sering antara huruf kapital dan non capital.


FORM DIALOGUE4. Desain Input Data


FORM DIALOGUE4. Desain Input Data

a. Prompt seharusnya jelas dan tidak ambigu.

b. Letakkan prompt di sebelah kanan field atau pada microhelp di

bawah layar.

c. Sediakan instruksi untuk navigasi atau menggunakan help.

d. Posisikan instruksi di lokasi yang konstan dan buat terlihat berbeda.

e. Gunakan terminologi dan gramatikal yang konsisten.


FORM DIALOGUE5. Prompts dan Instruksi Filling Form


FORM DIALOGUE5. Prompts dan Instruksi Filling Form

a. Saat form dimasuki pertama kali, tempatkan kursor di posisi default.

b. Izinkan pergerakan maju atau mundur.

c. Tempatkan kursor di daerah yang memang dapat diedit oleh user.

d. Jangan menggunakan auto tab, kecuali field memiliki panjang yang

pasti, dan usernya berpengalaman serta sering menggunakan sistem

tersebut.


FORM DIALOGUE6. Navigasi Filling Form


FORM DIALOGUE6. Navigasi Filling Form

a. Izinkan user untuk dapat mengedit karakter pada field.

b. Posisikan kursor di lokasi field yang salah (setelah dilakukan deteksi

kesalahan).

Gunakan highlight pada lokasi error jika mungkin.

c. Sediakan informasi semantik dan sintak pada pesan error, tergantung

dari pengetahuan user.


FORM DIALOGUE7. Penanganan Error Filling Form


FORM DIALOGUE7. Penanganan Error Filling Form

interaksi manusia dan komputer · atau lebih submenu. ... emp-sal-235 lebih mudah daripada...

Documents