sharinggan

sharinggan Pictures, Images and Photos

01 Agustus, 2010

Sistem Menu Group dalam windows

Sistem Menu Group dalam windows

Organisasi Semantik Menu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-8E42LFF8RwBQ3kW3h_4pY6LjEIaQDMK6AwTKnnkHVPWDNnPSmE_zIGdusrop4zJRfUkCEqXFp1Q5ho1BhWRKrLzBQThcbE_u3BMBBph4_sKAALCwDy7lET1NIFb5PTLINOIuZSZkSrdl/s1600/1.JPG

• Binary menus

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEpHvIDEcV5ZZLOZMKUHT0Dje95AViJyxAbWDjceqodeQLCeXr5F7_1KJcuxvLIUJuH3zepkxl7Q0ihr3oxw-6sVKlaizG6FZ8J8eHnOl5rgsrsQLq5d3feQojKXzIOnJVdjgFJzjqB_TX/s1600/2.JPG

• Multiple selection menus

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtjLzQlcOdLP8o-vl6zuh6O8-Tvdgb926S5NQ6K8II6jZCaZNL0dChQYJpDY7xd72EWhO0wzEx63-LkUr1E60gVPNf-ohoJvkldG13_wKFykiK4W2X4WOtMPcl-0oLiGFzMCOSNEPvoVgR/s1600/3.JPG


• Multiple-item menus / radio buttons


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVakMjK5v-dzhhX32rnB3kUmsXNWtXd17pEGFonGC2AvQ0KVoe2zdjWawhJ7Cvk83GR1it28ejM1U5RPVApOCNAav7BLBk8mPyvWMrh_KOOIR-ike1oD1eA0x1ZBDtiftZF9phN5EaUyi/s1600/4.JPG

• Pull-down and pop-up menus


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpP85paFcO9UwP6ncI5iqgm4Nihed_GMxUx2y5o_nwc84vZW-MxaWlbbKzputEzPyc_iigstDureXhyphenhyphen1R9QwDwNRILvaILvffaXZnqyi6m5NUOvRwByvBhq9K6j-gc-skDExG8ZwTraUeE/s1600/5.JPG

• Scrolling and two-dimensional menus

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfmwE6jh6_icNF0WhNwjArLg84eNdRUSfitCW3VUvxpR8TY9teYNLRiPMoC_DpvQqZR0oJ4Zu2Uqy6izWwHMBAAWk068I6-5LGgMx2qZN4HoE85325aiChruRoh_adgS7HC_pukNKbTJBB/s1600/6.JPG

• Alphasliders


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisAcSi0kZvSCF_50e1DrMq14Usgg4ppfOFQyIfcNK8MwfzMUG0YscORQpFbPGd0KU8e9mmjwbMTZRQRZv-TnJJXMkVLmnZpe3sKQDUTzsG-24403AXUvTJ5aHYp4MWQLFQR1h2cHiUs3kV/s1600/7.JPG

• Embedded links

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI7zo-KqDAQrFKxpd7NyvZIWpQl4wsx6ZEzBhfugJATUvE8pyoeXqLP5FWBnImZ2z8rnAPYBTejRivj7RYwB1dJzRCvgsKuSjDLJKQTojw2apWC3iCFS0Aldqplxdt5N0sBF6lGWfCXggv/s1600/8.JPG

• Iconic menus, toolbars, or palettes

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjla8DdNCRMo44HPpTqyRc3WcIROdcHPCN-usQp66m74Ne9pzP7dkkVVySEoBLJ4k-IbQU2uEffTdEmY_RcD1Y8OvWLvV943y8PB2QvDvTmuTWdL-ZaqmfnqqlfS7LhMY5QYIRWuOUNQ8vW/s1600/9.JPG

Linear Sequences & Multiple Menus

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyzrvne4qDSvISyQbVjmPyKO4-KJn-V4xRKLyf_yOLWzI8ZI_zNk0DZgrn1-nTRMOH9dXRXS7hZVfBO_mroXiN5LpN7KWo6MgtwtiniMAgNUdC_XhkxtX-umTwgPC9YqkvvMjKvWL608I-/s1600/10.JPG

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

• 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.
• Kadang-kadang lebih cocok daripada struktur tree.
• 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.

Pergerakan Cepat pada Menu

• Menu dengan typeahead
• Nama menu atau bookmarks
• Menu macros

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.

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.

Menu Macros

• Perintah yang sering digunakan dapat direkam dan disimpan sebagai makro.
• Pada beberapa software, makro dapat ditempatkan di toolbar sebagai ikon.

Tata Letak Menu

• Judul
• Penamaan pilihan menu
• Tata letak dan desain grafis

Tata Letak Menu: Judul

• Menu tunggal: Judul yang deskriptif.
• Menu tree: Nama pilihan harus sama dengan judul halaman yang dipanggil.

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.
• Tempatkan kata kunci di kiri.

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdjqnfWiIsmtMrjbCPVjYbEXRXWd0zqeq5p43j5bGrCfC2H7roFwnchgJbse0IJNsBJqBUia5wLxMqcSYJyHrVWMpXNC93QPxixuFsk22aRajx61Udqws19ukPvIwHcQVinNfyT0lUX6ra/s1600/11.JPG

Kotak Dialog

• Kotak dialog adalah kombinasi teknik menu dan formulir isian yang banyak digunakan di GUI modern.
• Perlu diperhatikan:

– Tata letak internal kotak dialog
– Hubungan eksternal kotak dialog

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).
• Jelnis penyelesaian/pembatalannya.

Contoh kotak dialog :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRd8JwZITAHDoTu4Rf0_GJIWtH9e9ra_fglD1kjFBV0YZla0VwfFJ8dFYbpUtQpKuR9ajYkumqNwDxXGjO69ae1mhb0p1IScG_bQZHxVuIOXbeXDhKMrfOYQZjmL6_xWxyJOLuNsIgmAap/s1600/12.JPG

sumber :

http://journal.mercubuana.ac.id/data/LecNote%20Paradigma_Prinsip%20dan%20Proses%20Desain.pdf /

Tidak ada komentar:

Visit the Site
MARVEL and SPIDER-MAN: TM & 2007 Marvel Characters, Inc. Motion Picture © 2007 Columbia Pictures Industries, Inc. All Rights Reserved. 2007 Sony Pictures Digital Inc. All rights reserved. blogger templates