INTERAKSI MANUSIA DAN KOMPUTER
Astrid Lestari Tungadi, S.Kom., M.TI.
SISTEM MENU TARIK 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 : CtrlX, Ctrl+V, dan lain-lain).
CONTOH POP-UP
CONTOH PULL-DOWN
SISTEM MENU TARIK Menu-menu yang kita sediakan sebaiknya didisable ketika user belum login ke sistem.
FILLING FORM DIALOGUE 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.
FILLING FORM DIALOGUE
PRINSIP DESAIN FILLING FORM DIALOGUE
1. Pengaturan dan Layout Filling Form
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 DIALOGUE
1. Pengaturan dan Layout Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
1. Pengaturan dan Layout Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
2. Desain Judul dan Field Filling
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.
PRINSIP DESAIN FILLING FORM DIALOGUE
2. Desain Judul dan Field Filling
PRINSIP DESAIN FILLING FORM DIALOGUE
3. Format Input Filling Form
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
PRINSIP DESAIN FILLING FORM DIALOGUE
3. Format Input Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
4. Desain Input Data
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.
PRINSIP DESAIN FILLING FORM DIALOGUE
4. Desain Input Data
PRINSIP DESAIN FILLING FORM DIALOGUE
5. Prompts dan Instruksi Filling Form
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.
PRINSIP DESAIN FILLING FORM DIALOGUE
5. Prompts dan Instruksi Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
5. Prompts dan Instruksi Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
5. Prompts dan Instruksi Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
5. Prompts dan Instruksi Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
6. Navigasi Filling Form a. b. c. d.
Saat form dimasuki pertama kali, tempatkan kursor di posisi default. Izinkan pergerakan maju atau mundur. Tempatkan kursor di daerah yang memang dapat diedit oleh user. Jangan menggunakan auto tab, kecuali field memiliki panjang yang pasti, dan usernya berpengalaman serta sering menggunakan sistem tersebut.
PRINSIP DESAIN FILLING FORM DIALOGUE
6. Navigasi Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
6. Navigasi Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
7. Penanganan Error 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.
PRINSIP DESAIN FILLING FORM DIALOGUE
7. Penanganan Error Filling Form
PRINSIP DESAIN FILLING FORM DIALOGUE
7. Penanganan Error Filling Form
PROJECT III Buatlah aplikasi dengan model user interface (Sistem Menu Tarik dan Filling Form) sesuai dengan Prinsip Desain IMK dengan menu sesuai kebutuhan masing-masing studi kasus dan menu standar yang harus ada ialah sebagai berikut : 1. Input Data 2. Lihat Data 3. Cari Data 4. Edit Data 5. Hapus Data 6. Cetak Data
