menu, form, dan kotak dialog
DESCRIPTION
Menu, Form, dan Kotak Dialog. Mohon Selama Perkuliahan , Tidak Menjadi Manusia Multitasking !!!. Outline Materi. Struktur menu Organisasi semantic menu Urutan presentasi item Tata letak menu Formulir isian elektronik Kotak dialog. STRUKTUR MENU. Single menu. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/1.jpg)
Menu, Form, dan Kotak Dialog
![Page 2: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/2.jpg)
Mohon Selama Perkuliahan , Tidak Menjadi Manusia Multitasking !!!
![Page 3: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/3.jpg)
3/32
![Page 4: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/4.jpg)
4/32
Outline Materi• Struktur menu• Organisasi semantic menu• Urutan presentasi item• Tata letak menu• Formulir isian elektronik• Kotak dialog
![Page 5: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/5.jpg)
5/32
Single menu
Tree StructureLinear Sequence
STRUKTUR MENU
Acyclic Network Cyclic Network
![Page 6: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/6.jpg)
6
Organisasi Semantik Menu
• Single menus (menu tunggal)–Binary menus
–Multiple-item menus / radio buttons
–Multiple selection menus
–Pull-down and pop-up menus
![Page 7: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/7.jpg)
7
Organisasi Semantik Menu (Lanj.)
– Scrolling & two-dimensional menus
– Alphasliders
– Embedded links
– Iconic menus, toolbars, or palettes
Actor: Connery, Sean
A C DE G H J KN O R S TV Z
03 / 07 - 13
![Page 8: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/8.jpg)
8
Organisasi Semantik Menu (Lanj.)
• Linear sequences & multiple menus
• Tree-structured menus– Ketika kumpulan item berkembang dan menjadi sulit dipelihara dalam
kendali intelektual, perancang dapat membentuk kategori item-item yang serupa, membentuk struktur tree.
– Contoh pengelompokan:• Laki-laki, perempuan• Hewan, sayuran, mineral• Fonts, size, style, spacing
03 / 08 - 13
![Page 9: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/9.jpg)
Linear Sequences & Multiple Menus
9/32
![Page 10: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/10.jpg)
10
Organisasi Semantik Menu (Lanj.)
– Depth versus Breadth:• Depth: jumlah level.• Breadth: jumlah item per level.
– Pengelompokan semantik:• Kelompokkan item-item yang serupa secara logis.• Bentuk kelompok yang melingkupi semua kemungkinan.• Pastikan item tidak overlap.• Gunakan peristilahan yang dikenal.
• Acyclic & cyclic menu networks– Kadang-kadang lebih cocok daripada struktur tree.– Memungkinkan jalur dari bagian tree yang berbeda, tidak mengharuskan pemakai
memulai dari menu utama.– Secara alami terdapat pada:
• Hubungan sosial.• Jalur transportasi.• Kutipan dalam jurnal ilmiah.
– Membutuhkan penelusuran balik.
03/ 010 - 13
![Page 11: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/11.jpg)
Acylic and Cyclic Menu
11/32
![Page 12: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/12.jpg)
12/32
Urut-urutan Presentasi Item
• Ketika item-item menu telah dipilih, urutan presentasinya perlu diperhatikan.
• Beberapa dasar pengurutan:– Waktu (kronologis).– Numeris (menaik atau menurun).– Sifat fisik (panjang, luas, volume dsb. Secara menaik atau menurun).
• Banyak kasus pengurutan tidak mempunyai aturan pengurutan yang berhubungan dengan tugas, sehingga perlu dipertimbangkan:– Pengurutan alfabetis istilah-istilah.– Pengelompokan item-item serupa (dibatasi dengan pemisah
antarkelompok).– Yang sering digunakan ditempatkan di awal.– Yang paling penting ditempatkan di awal.
![Page 13: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/13.jpg)
13/32
Formulir Isian
• Formulir isian cocok dipakai jika banyak field data dibutuhkan.• Pendekatan formulir isian menarik karena:
– Kelengkapan penuh informasi terlihat.– Seperti formulir kertas.– Sedikit petunjuk diperlukan.
• Pedoman perancangan formulir isian:– Judul yang berarti.– Instruksi yang dapat dipahami.– Pengelompokan dan pengurutan field yang logis.– Tata letak yang menarik secara fisual.– Label field yang dikenal.– Ruang kosong dan batas field yang perlu diisi harus jelas terlihat.– Pergerakan kursor yang leluasa.– Koreksi kesalahan untuk karakter dan field.– Pencegahan kesalahan.– Pesan kesalahan untuk nilai yang tak dapat diterima.
![Page 14: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/14.jpg)
14/32
Formulir Isian (Lanj.)
–Field optional jelas ditandai, atau sebaliknya field yang wajib diisi ditandai.
–Pesan penjelasan bagi field jika perlu.–Tanda selesai. Hindari penyelesaian automatis.
• Beberapa variasi isian field:–Combo box: kombinasi list box dan text box.–Coded fields: mempunyai mask untuk format isian khusus.
Mis.:• Telepon – (___)___-_____• Social Security Number -- ___-__-____• Waktu -- __:__ __• Tanggal -- __/__/____• Nilai uang -- $_____.00
![Page 15: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/15.jpg)
Contoh
15/32
![Page 16: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/16.jpg)
16/32
Kotak Dialog
• Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI modern.
• Pedoman tata letak internal kotak dialog:– Judul berarti, gaya konsisten.– Pengurutan dari atas kiri ke bawah kanan.– Pengelompokan dan penegasan.– Tata letak yang konsisten.– Peristilahan, font, penggunaan huruf besar, justifikasi yang konsisten.– Tombol standar (OK, Cancel).– Pencegahan kesalahan.
• Pedoman hubungan eksternal kotak dialog:– Penampilan dan penutupan halus.– Dapat dibedakan tapi batasnya kecil.– Ukuran cukup kecil (minimalkan overlap).– Dekat dengan item yang sesuai.– Tidak menghalangi item yang harus dilihat.– Mudah ditutup (dibuat menghilang).– Jelas penyelesaian/pembatalannya.
![Page 17: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/17.jpg)
Contoh Kotak Dialog
17/32
Internet Options dialog box pada Internet Explorer
![Page 18: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/18.jpg)
Contoh Kotak Dialog
18/32
Open dialog box pada Macromedia Flash MX
![Page 19: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/19.jpg)
Pergerakan Cepat pada Menu
• Menu dengan typeahead• Nama menu atau bookmarks• Menu macros
19/32
![Page 20: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/20.jpg)
Menu dengan Typeahead
• Penting jika menu sudah sering digunakan sementara waktu respons atau kecepatan tampil lambat.
• Pendekatan BLT (Bacon, Lettuce, Tomato Sandwich): pembentukan mnemonik dari penggabungan huruf-huruf pilihan menu.
20/32
![Page 21: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/21.jpg)
Nama Menu atau Bookmarks
• Penamaan sederhana memudahkan pemakai mengakses menu secara langsung.
• Web browser menyediakan bookmarks atau favorites sebagai jalan pintas bagi pemakai untuk menuju situs yang pernah dikunjungi.
21/32
![Page 22: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/22.jpg)
Menu Macros
• Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.
• Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.
22/32
![Page 23: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/23.jpg)
Tata Letak Menu
• Judul• Penamaan pilihan menu• Tata letak dan desain grafis
23/32
![Page 24: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/24.jpg)
Tata Letak Menu: Judul
• Menu tunggal: Judul yang deskriptif.• Menu tree: Nama pilihan harus sama dengan
judul halaman yang dipanggil.
24/32
![Page 25: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/25.jpg)
Tata Letak Menu: Penamaan Pilihan Menu
• Gunakan peristilahan yang dikenal dan konsisten.
• Pastikan item dapat dibedakan dari pilihan lain.
• Gunakan pemilihan kata yang konsisten dan singkat.
25/32
![Page 26: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/26.jpg)
Tata Letak Menu: Tata Letak dan Desain Grafis
• Perhatikan kendala seperti lebar dan tinggi layar, kecepatan tampil, character set, dan highlighting.
• Buat pedoman/panduan untuk komponen-komponen: judul, penempatan item, petunjuk, pesan kesalahan, dan laporan status.
26/32
![Page 27: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/27.jpg)
Pedoman Tata Letak Internal Kotak Dialog
• Judul berarti, gaya konsisten.• Pengurutan dari atas kiri ke bawah kanan.• Pengelompokan dan penegasan.• Tata letak yang konsisten.• Peristilahan, font, penggunaan huruf besar,
justifikasi yang konsisten.• Tombol standar (OK, Cancel).• Pencegahan kesalahan.
27/32
![Page 28: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/28.jpg)
Pedoman Hubungan Eksternal Kotak Dialog
• Penampilan dan penutupan halus.• Dapat dibedakan tapi batasnya kecil.• Ukuran cukup kecil (minimalkan overlap).• Dekat dengan item yang sesuai.• Tidak menghalangi item yang harus dilihat.• Mudah ditutup (dibuat menghilang).• Jelas penyelesaian/pembatalannya.
28/32
![Page 29: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/29.jpg)
Menu Long List
29/32
![Page 30: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/30.jpg)
Embedded menu
30/32
![Page 31: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/31.jpg)
Two demensional menu
31/32
![Page 32: Menu, Form, dan Kotak Dialog](https://reader030.vdocuments.pub/reader030/viewer/2022033023/56816191550346895dd12c75/html5/thumbnails/32.jpg)
32/32