Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Nota
Panduan desain ini dibuat untuk Windows 7 dan belum diperbarui untuk versi Windows yang lebih baru. Sebagian besar panduan masih berlaku pada prinsipnya, tetapi presentasi dan contoh tidak mencerminkan panduan desain kami saat ini .
Toolbar adalah cara untuk mengelompokkan perintah untuk akses yang efisien.
Beberapa bilah alat yang umum.
Gunakan bilah alat selain atau sebagai pengganti bilah menu. Bilah alat bisa lebih efisien daripada bilah menu karena langsung (selalu ditampilkan alih-alih ditampilkan pada klik mouse), langsung (alih-alih memerlukan input tambahan) dan berisi perintah yang paling sering digunakan (alih-alih daftar komprehensif). Berbeda dengan bilah menu, bilah alat tidak harus komprehensif atau mudah dipahami dengan sendirinya, melainkan cukup cepat, praktis, dan efisien.
Beberapa bilah alat dapat disesuaikan, memungkinkan pengguna untuk menambahkan atau menghapus toolbar, mengubah ukuran dan lokasi mereka, dan bahkan mengubah konten mereka. Beberapa jenis bilah alat dapat dilepas, sehingga menghasilkan jendela palet. Untuk informasi selengkapnya tentang varietas toolbar, lihat pola penggunaan dalam artikel ini.
Nota
Panduan yang terkait dengan menu , tombol perintah , dan ikon disajikan dalam artikel terpisah.
Apakah ini antarmuka pengguna yang tepat?
Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:
- Apakah jendela adalah jendela utama? Bilah alat cocok digunakan untuk jendela utama, tetapi biasanya terasa terlalu ramai untuk jendela sekunder. Untuk jendela sekunder, gunakan tombol perintah , tombol menu , dan tautan sebagai gantinya.
- Apakah ada sejumlah kecil perintah yang sering digunakan? Toolbar tidak dapat menangani perintah sebanyak bilah menu, sehingga berfungsi paling baik sebagai cara untuk mengakses sejumlah kecil perintah yang sering digunakan secara efisien.
- Apakah sebagian besar perintah dijalankan secara langsung? Artinya, apakah sebagian besar perintah tersebut tidak memerlukan input tambahan? Agar efisien, bilah alat harus terasa langsung dan responsif. Jika tidak, bilah menu lebih cocok untuk perintah yang memerlukan input tambahan.
- Dapatkah sebagian besar perintah disajikan secara langsung? Artinya, pengguna berinteraksi dengan mereka menggunakan satu klik? Meskipun beberapa perintah dapat disajikan menggunakan tombol menu, menyajikan sebagian besar perintah dengan cara ini merusak efisiensi toolbar, membuat bilah menu menjadi pilihan yang lebih baik.
- Apakah perintah diwakili dengan baik oleh ikon? Tombol toolbar biasanya diwakili oleh ikon alih-alih label teks (meskipun beberapa tombol toolbar menggunakan keduanya), sedangkan perintah menu diwakili oleh teksnya. Jika ikon perintah tidak berkualitas tinggi dan tidak jelas sendiri, bilah menu mungkin merupakan pilihan yang lebih baik.
Jika program Anda memiliki toolbar tanpa bilah menu, dan sebagian besar perintah dapat diakses secara tidak langsung melalui tombol menu dan tombol pisahkan, toolbar ini pada dasarnya adalah bilah menu. Terapkan pola menu toolbar dalam panduan Menu sebagai gantinya.
Konsep desain
Bilah menu yang baik adalah katalog komprehensif dari semua perintah tingkat atas yang tersedia, sedangkan toolbar yang baik memberikan akses cepat dan nyaman ke perintah yang sering digunakan. Toolbar tidak mencoba melatih pengguna hanya membuatnya produktif. Setelah pengguna mempelajari cara mengakses perintah pada toolbar, mereka jarang terus mengakses perintah dari bilah menu. Untuk alasan ini, bilah menu program dan toolbarnya tidak perlu sesuai secara langsung.
Bilah alat vs. bilah menu
Secara tradisional, toolbar berbeda dari bilah menu dengan cara berikut:
Frekuensi. Toolbar hanya menyajikan perintah yang paling sering digunakan, sedangkan bilah menu membuat katalog semua perintah tingkat atas yang tersedia dalam program.
Kedekatan. Mengklik perintah toolbar akan segera berlaku, sedangkan perintah menu mungkin memerlukan input tambahan. Misalnya, perintah Cetak di bilah menu terlebih dahulu menampilkan dialog Cetak, sedangkan tombol toolbar Cetak segera mencetak satu salinan dokumen ke printer default.
Dalam contoh ini, mengklik tombol bilah alat Cetak segera mencetak satu salinan dokumen ke printer default.
Kerahasiaan. Perintah toolbar dipanggil dengan satu klik, sedangkan perintah bilah menu memerlukan navigasi melalui menu.
Jumlah dan kepadatan. Ruang layar yang diperlukan untuk toolbar sebanding dengan jumlah perintah yang dimilikinya, dan ruang tersebut selalu digunakan, meskipun perintah-perintah itu tidak digunakan. Akibatnya, toolbar harus menggunakan ruangnya secara efisien. Sebaliknya, perintah bilah menu biasanya disembunyikan dari tampilan dan struktur hierarkisnya memungkinkan sejumlah perintah.
Ukuran dan presentasi. Untuk mengemas banyak perintah dalam spasi kecil, toolbar biasanya menggunakan perintah berbasis ikon (dengan label berbasis tipsalat), sedangkan bilah menu menggunakan perintah berbasis teks (dengan ikon opsional). Meskipun tombol toolbar dapat memiliki label teks standar, tombol ini menggunakan lebih banyak ruang secara signifikan.
Tombol toolbar berlabel membutuhkan setidaknya tiga kali ruang sebanyak yang tidak berlabel.
Jelas. Toolbar yang dirancang dengan baik membutuhkan ikon yang sebagian besar mudah dipahami karena pengguna tidak dapat menemukan perintah dengan efisien hanya dengan mengandalkan tooltip. Namun, bilah alat tetap berfungsi dengan baik meskipun beberapa perintah yang jarang digunakan tidak langsung mudah dipahami.
Dalam contoh ini, ikon yang paling sering digunakan mudah dipahami tanpa penjelasan.
Dapat dikenali dan dapat dibedakan. Untuk perintah yang sering digunakan, pengguna mengingat atribut tombol toolbar seperti lokasi, bentuk, dan warna. Dengan toolbar yang dirancang dengan baik, pengguna dapat menemukan perintah dengan cepat bahkan jika mereka tidak mengingat simbol ikon yang tepat. Sebaliknya, pengguna ingat lokasi perintah bilah menu yang sering digunakan, tetapi mengandalkan label perintah untuk membuat pilihan.
Untuk perintah toolbar, lokasi, bentuk, dan warna yang khas membantu membuat ikon dapat dikenali dan dapat dibedakan.
Untuk perintah bilah menu, pengguna pada akhirnya bergantung pada label mereka.
Efisiensi
Mengingat karakteristiknya, toolbar harus dirancang terutama untuk efisiensi. Toolbar yang tidak efisien tidak masuk akal.
Jika Anda hanya melakukan satu hal ...
Pastikan toolbar Anda dirancang terutama untuk efisiensi. Fokuskan toolbar pada perintah yang sering digunakan, segera tersedia, langsung, dan mudah dikenali.
Menyembunyikan bilah menu
Umumnya, toolbar berfungsi sangat baik bersama bilah menu: toolbar yang baik memberikan efisiensi, dan bilah menu yang baik memberikan cakupan yang menyeluruh. Memiliki bilah menu dan toolbar memungkinkan masing-masing untuk fokus pada kekuatannya tanpa kompromi.
Anehnya, model ini rusak dengan program sederhana. Untuk program dengan hanya beberapa perintah, memiliki bilah menu dan toolbar tidak masuk akal karena bilah menu akhirnya menjadi versi toolbar yang berlebihan dan tidak efisien.
Untuk menghilangkan redundansi ini, banyak program sederhana di Windows Vista fokus pada penyediaan perintah hanya melalui toolbar, dan menyembunyikan bilah menu secara default. Program tersebut mencakup Windows Explorer, Windows Internet Explorer, Windows Media Player, dan Windows Photo Gallery.
Ini bukan perubahan kecil. Menghapus bilah menu pada dasarnya mengubah sifat toolbar karena toolbar tersebut harus komprehensif dan berubah dengan cara berikut:
Frekuensi. Menghapus bilah menu berarti bahwa semua perintah yang tidak tersedia langsung dari jendela atau menu konteksnya harus dapat diakses dari toolbar, terlepas dari frekuensi penggunaannya.
Kedekatan. Menghapus bilah menu menjadikan bilah alat sebagai satu-satunya titik akses yang terlihat untuk perintah, yang mengharuskan toolbar memiliki versi yang berfungsi penuh. Misalnya, jika tidak ada bilah menu, perintah Cetak pada toolbar harus menampilkan kotak dialog Cetak alih-alih segera mencetak. (Meskipun penggunaan tombol terpisah merupakan kompromi yang sangat baik dalam kasus ini. Lihat Menu standar dan tombol terpisah untuk tombol Cetak terpisah standar.)
Dalam contoh ini, tombol toolbar Cetak di Galeri Foto Windows memiliki perintah Cetak yang menampilkan kotak dialog Cetak.
Kerahasiaan. Untuk menghemat ruang dan mencegah kekacauan, perintah yang lebih jarang digunakan dapat dipindahkan ke tombol menu, membuatnya kurang langsung.
Bilah alat yang digunakan untuk melengkapi bilah menu dirancang berbeda dari toolbar yang dirancang untuk digunakan dengan bilah menu yang dihapus atau tersembunyi. Dan karena Anda tidak dapat berasumsi bahwa pengguna akan menampilkan bilah menu tersembunyi untuk melakukan satu perintah, menyembunyikan bilah menu harus diperlakukan sama seperti menghapusnya sepenuhnya saat membuat keputusan desain. (Jika Anda menyembunyikan bilah menu secara default, jangan asumsikan bahwa pengguna akan berpikir untuk menampilkan bilah menu untuk menemukan perintah atau bahkan mencari tahu cara menampilkannya.)
Merancang toolbar agar berfungsi tanpa bilah menu sering melibatkan beberapa kompromi. Tetapi untuk efisiensi, jangan terlalu banyak berkompromi. Jika menyembunyikan bilah menu menghasilkan toolbar yang tidak efisien, jangan sembunyikan bilah menu!
Aksesibilitas keyboard
Dari keyboard, mengakses toolbar cukup berbeda dari mengakses bilah menu. Bilah menu menerima fokus input saat pengguna menekan tombol Alt dan mereka kehilangan fokus input dengan tombol Esc. Setelah bilah menu memiliki fokus input, bilah tersebut dinavigasi secara independen dari sisa jendela, menangani semua tombol panah, tombol Beranda, Akhir, dan Tab. Sebaliknya, toolbar menerima fokus input saat pengguna menekan tombol Tab melalui seluruh konten jendela. Karena bilah alat berada di urutan terakhir dalam urutan tab, mungkin memerlukan usaha yang cukup besar untuk mengaktifkannya pada halaman yang padat (kecuali pengguna tahu bahwa mereka dapat menggunakan Shift+Tab untuk berpindah ke belakang).
Aksesibilitas menyajikan dilema di sini: sementara toolbar lebih mudah bagi pengguna mouse, mereka kurang dapat diakses oleh pengguna keyboard. Ini bukan masalah jika ada bilah menu dan bilah alat, tetapi jika bilah menu dihapus atau disembunyikan.
Untuk alasan aksesibilitas, sebaiknya pertahankan bilah menu daripada menghapusnya sepenuhnya demi toolbar. Jika Anda harus memilih antara menghapus bilah menu dan hanya menyembunyikannya, lebih suka menyembunyikannya.
Pola penggunaan
Bilah alat memiliki beberapa pola penggunaan:
Bilah alat memiliki gaya ini:
| Gaya | Contoh |
|---|---|
|
ikon tanpa label satu atau beberapa baris tombol ikon kecil yang tidak berlabel. |
gunakan gaya ini jika ada terlalu banyak tombol untuk memberi label atau program sering digunakan. dengan gaya ini, program dengan fungsionalitas kompleks dapat memiliki beberapa baris, dan oleh karena itu, ini adalah satu-satunya gaya yang perlu disesuaikan. dengan gaya ini, beberapa tombol perintah dapat diberi label jika sering digunakan.
Toolbar ikon tanpa label dari WordPad. |
|
Ikon besar tanpa label satu baris tombol ikon besar yang tidak berlabel. |
gunakan gaya ini untuk utilitas sederhana yang memiliki ikon yang mudah dikenali dan biasanya dijalankan di jendela kecil.
Bilah alat berikon besar tanpa label dari Windows Live Messenger dan Windows Snipping Tool. |
|
Ikon berlabel satu baris ikon berlabel kecil. |
gunakan gaya ini jika ada beberapa perintah atau program tidak sering digunakan. gaya ini selalu memiliki satu baris.
Bilah alat ikon berlabel dari Windows Explorer. |
|
bilah alat sebagian baris parsial ikon kecil yang digunakan untuk menghemat ruang saat toolbar penuh tidak diperlukan. |
gunakan gaya ini untuk jendela dengan tombol navigasi, kotak pencarian, atau tab untuk menghilangkan berat yang tidak perlu di bagian atas jendela.
Bilah alat parsial dapat dikombinasikan dengan tombol navigasi, kotak pencarian, atau tab. |
|
Toolbar parsial besar baris parsial ikon besar yang digunakan untuk menghemat ruang saat toolbar penuh tidak diperlukan. |
gunakan gaya ini untuk utilitas sederhana yang memiliki tombol navigasi atau kotak pencarian untuk menghilangkan berat yang tidak perlu di bagian atas jendela.
Bilah alat parsial besar dari Windows Defender. |
Terakhir, kontrol toolbar memiliki beberapa pola penggunaan:
| Penggunaan | Contoh |
|---|---|
| tombol ikon perintah mengklik tombol perintah memulai tindakan segera. |
Contoh tombol perintah ikon dari Windows Fax dan Scan. |
| tombol ikon Mode mengklik tombol mode memasuki mode yang dipilih. |
Contoh tombol mode dari Windows Paint. |
|
Tombol ikon properti status tombol properti mencerminkan status objek yang saat ini dipilih, jika ada. mengklik tombol menerapkan perubahan pada objek yang dipilih. |
Contoh tombol properti dari Microsoft Word. |
|
Tombol ikon berlabel sebuah tombol perintah atau tombol properti yang diberi label dengan ikon dan label teks. |
tombol ini digunakan untuk tombol toolbar yang sering digunakan yang ikonnya tidak cukup jelas. mereka juga digunakan di toolbar yang memiliki begitu sedikit tombol sehingga setiap tombol dapat memiliki label teks.
Bilah alat dengan label pada tombol-tombol yang paling sering digunakan. |
|
tombol Menu tombol perintah yang digunakan untuk menyajikan sekumpulan kecil perintah terkait. |
satu segitiga menunjuk ke bawah menunjukkan bahwa mengklik tombol menunjukkan menu.
Tombol menu dengan sekumpulan kecil perintah terkait. |
|
tombol terpisah tombol perintah yang digunakan untuk mengonsolidasikan variasi perintah, terutama ketika salah satu perintah digunakan sebagian besar waktu. |
tombol pisahkan dalam status normalnya. seperti tombol menu, satu segitiga menunjuk ke bawah menunjukkan bahwa mengklik bagian paling kanan tombol menunjukkan menu.
tombol pemisah yang dijatuhkan. Dalam contoh ini, tombol terpisah digunakan untuk menggabungkan semua perintah terkait pencetakan. perintah cetak langsung digunakan sebagian besar waktu, sehingga pengguna biasanya tidak perlu melihat perintah lainnya. tidak seperti tombol menu, mengklik bagian kiri tombol melakukan tindakan pada label secara langsung. tombol terpisah efektif dalam situasi di mana perintah berikutnya kemungkinan sama dengan perintah terakhir. dalam kasus ini, label diubah menjadi perintah terakhir, seperti pada pemilih warna:
Dalam contoh ini, label diubah menjadi perintah terakhir. |
|
Daftar tarik-turun daftar tarik-turun (dapat diedit atau hanya baca) yang digunakan untuk melihat atau mengubah properti. |
Dalam contoh ini, daftar drop-down digunakan untuk melihat dan mengatur atribut font. Daftar drop-down di toolbar mencerminkan status objek yang saat ini dipilih, jika ada. Mengubah daftar mengubah status objek yang dipilih. |
Pedoman
Presentasi
Pilih gaya toolbar yang sesuai berdasarkan jumlah perintah dan penggunaannya. Lihat tabel gaya toolbar sebelumnya untuk panduan tentang cara memilih. Hindari menggunakan konfigurasi toolbar yang membutuhkan terlalu banyak ruang dari area kerja program.
Tempatkan toolbar tepat di atas area konten, di bawah bilah menu dan bilah alamat, jika ada.
Jika ruang terbatas, hemat ruang dengan:
- Menghilangkan label ikon terkenal dan perintah yang kurang sering digunakan.
- Menggunakan hanya sebagian bilah alat, bukan seluruh lebar jendela.
- Menggabungkan perintah terkait dengan tombol menu atau tombol terpisah.
- Menggunakan chevron overflow untuk menampilkan perintah yang lebih jarang digunakan.
- Menampilkan perintah hanya ketika diterapkan ke konteks saat ini.
Bilah alat Windows Internet Explorer menghemat ruang dengan menghilangkan label pada ikon yang sudah dikenal, menggunakan bilah alat sebagian, dan menggunakan chevron luapan untuk perintah yang lebih jarang digunakan.
Untuk pola toolbar ikon tanpa label, gunakan konfigurasi default dengan tidak lebih dari dua baris toolbar. Jika lebih dari dua baris mungkin berguna, buat toolbar dapat disesuaikan. Dimulai dengan lebih dari dua baris dapat membuat pengguna kewalahan dan mengambil terlalu banyak ruang dari area kerja program.
Salah:
Konfigurasi default dengan lebih dari dua baris toolbar menghasilkan terlalu banyak kekacauan visual.
Nonaktifkan tombol toolbar individual yang tidak berlaku untuk konteks saat ini, alih-alih menghapusnya. Melakukannya membuat konten toolbar stabil dan lebih mudah ditemukan.
Nonaktifkan tombol toolbar individual jika mengklik tombol tersebut akan langsung mengakibatkan kesalahan. Melakukannya diperlukan untuk mempertahankan nuansa langsung.
Untuk pola toolbar ikon yang tidak berlabel, hapus seluruh toolbar jika tidak berlaku untuk konteks saat ini. Tampilkan hanya dalam mode yang berlaku.
Dalam contoh ini, toolbar Debug hanya ditampilkan ketika program sedang dijalankan.
Tampilkan tombol bilah alat yang diratakan kiri. Ikon Bantuan, jika ada, diratakan dengan benar.
Semua tombol pada bilah alat rata kiri, kecuali Bantuan.
Pengecualian: Bilah alat bergaya Windows 7 meratakan perintah yang khusus untuk program ke kiri, tetapi meratakan perintah standar yang umum dikenal seperti Opsi, Tampilan, dan Bantuan ke kanan.
Jangan ubah label tombol toolbar secara dinamis. Melakukannya membingungkan dan tidak terduga. Namun, Anda dapat mengubah ikon untuk mencerminkan status saat ini.
Dalam contoh ini, ikon diubah untuk menunjukkan perintah default.
Kontrol dan perintah
Lebih suka perintah yang paling sering digunakan.
- Untuk toolbar utama, berikan perintah komprehensif. Toolbar utama tidak harus sekompehensif bilah menu, tetapi harus menyediakan semua perintah yang tidak mudah ditemukan di tempat lain. Toolbar utama tidak perlu memiliki perintah untuk:
- Perintah yang langsung ada di UI itu sendiri.
- Perintah biasanya diakses melalui menu konteks.
- Perintah standar dan terkenal seperti Potong, Salin, dan Tempel.
- Untuk toolbar tambahan, berikan perintah yang paling sering digunakan. Perintah bilah menu adalah superset dari perintah toolbar, jadi Anda tidak perlu menyediakan semuanya. Fokus pada akses perintah yang cepat dan nyaman dan lewati sisanya.
- Untuk toolbar utama, berikan perintah komprehensif. Toolbar utama tidak harus sekompehensif bilah menu, tetapi harus menyediakan semua perintah yang tidak mudah ditemukan di tempat lain. Toolbar utama tidak perlu memiliki perintah untuk:
Lebih suka kontrol langsung. Gunakan tombol toolbar dalam urutan preferensi berikut:
- Tombol ikon. Langsung dan membutuhkan ruang minimal.
- Tombol ikon berlabel. Langsung, tetapi membutuhkan lebih banyak ruang.
- Tombol Pisahkan. Cocok untuk perintah yang paling sering digunakan, tetapi juga dapat menangani variasi perintah.
- Tombol menu. Tidak langsung, tetapi menyajikan banyak perintah.
Lebih suka perintah langsung. Untuk perintah yang dapat segera atau memiliki input tambahan untuk fleksibilitas:
- Untuk toolbar utama, gunakan versi perintah yang fleksibel, (seperti Cetak...).
- Untuk toolbar tambahan, gunakan versi langsung di toolbar (seperti Cetak) dan gunakan versi fleksibel di bilah menu (seperti Cetak...).
Menyediakan label untuk perintah yang sering digunakan, terutama jika ikonnya bukan ikon terkenal.
Dapat Diterima:
Lebih Baik:
Toolbar Faks dan Pemindaian Windows memiliki beberapa perintah, sehingga versi yang lebih baik memberi label yang paling penting.
Jangan tempatkan perintah di menu toolbar yang juga tersedia langsung di toolbar.
Salah:
Dalam contoh ini, Cetak berada langsung di toolbar, sehingga tidak perlu berada di menu.
Organisasi dan urutan
Atur perintah dalam toolbar ke dalam grup terkait.
Tempatkan grup yang paling sering digunakan terlebih dahulu. Dalam grup, letakkan perintah dalam urutan logis mereka. Secara keseluruhan, perintah harus memiliki alur logis untuk membuatnya mudah ditemukan, sambil tetap memiliki perintah yang paling sering digunakan muncul terlebih dahulu. Melakukannya paling efisien, terutama jika ada luapan.
Gunakan pembagi grup hanya jika perintah antargrup saling terkait secara longgar. Melakukannya membuat pengelompokan menjadi jelas dan perintah lebih mudah ditemukan.
Contoh bilah alat yang dikelompokkan dari Windows Mail.
Hindari menempatkan perintah destruktif di samping perintah yang sering digunakan. Gunakan urutan atau pengelompokan untuk memisahkan. Selain itu, pertimbangkan untuk tidak menempatkan perintah destruktif di toolbar, tetapi hanya di bilah menu atau menu konteks sebagai gantinya.
Dapat Diterima:
Lebih Baik:
Dalam contoh yang lebih baik, perintah Hapus dipisahkan secara fisik dari Cetak.
Gunakan chevron overflow untuk menunjukkan bahwa tidak semua perintah dapat ditampilkan. Namun, gunakan menu luapan hanya jika tidak tersedia cukup ruang untuk menampilkan semua perintah.
Salah:
Ikon chevron luapan menunjukkan bahwa tidak semua perintah ditampilkan, tetapi lebih banyak perintah dapat ditampilkan dengan tata letak yang lebih baik.
Pastikan bahwa perintah yang paling sering digunakan dapat diakses langsung dari toolbar (yaitu, tidak berada di menu luapan) pada ukuran jendela kecil. Jika perlu, susun ulang perintah, pindahkan perintah yang lebih jarang digunakan ke tombol menu atau tombol pisahkan, atau bahkan hapus sepenuhnya dari toolbar. Jika ini masih menjadi masalah, pertimbangkan kembali pilihan gaya toolbar Anda.
Menyembunyikan bilah menu
Umumnya, toolbar bekerja sangat baik bersama dengan bilah menu karena memiliki keduanya memungkinkan masing-masing untuk fokus pada kekuatan mereka tanpa kompromi.
- Sembunyikan bilah menu secara default jika desain toolbar Anda membuat bilah menu berlebihan.
- Sembunyikan bilah menu alih-alih menghapusnya sepenuhnya, karena bilah menu lebih dapat diakses oleh pengguna keyboard.
- Untuk memulihkan bilah menu, berikan opsi tanda centang bilah Menu di kategori menu Tampilan (untuk toolbar utama) atau Alat (untuk toolbar sekunder). Untuk informasi selengkapnya, lihat menu standar dan tombol terpisah.
- Tampilkan bilah menu saat pengguna menekan tombol Alt, dan mengatur fokus input pada kategori menu pertama.
Interaksi
Saat kursor diarahkan, tampilkan tombol indikator untuk menunjukkan bahwa ikon bisa diklik. Setelah waktu tunggu tooltip berakhir, tampilkan tooltip atau infotip.
Contoh ini menunjukkan berbagai status tampilan.
Klik tunggal di sebelah kiri:
Untuk tombol perintah, berinteraksi dengan kontrol seperti biasa.
Untuk tombol mode, tampilkan kontrol untuk mencerminkan mode yang saat ini dipilih. Jika mode memengaruhi perilaku interaksi mouse, ubah juga penunjuk.
Dalam contoh ini, penunjuk diubah untuk menampilkan mode interaksi mouse.
Untuk tombol properti dan daftar drop-down, tampilkan kontrol untuk mencerminkan status objek yang saat ini dipilih, jika ada. Pada interaksi, perbarui status kontrol dan terapkan perubahan ke objek yang dipilih. Jika tidak ada yang dipilih, jangan lakukan apa-apa.
Saat klik ganda tombol kiri, lakukan tindakan yang sama seperti klik tunggal tombol kiri.
Pengecualian: Dalam kasus yang jarang terjadi, perintah toolbar dapat digunakan dengan lebih efisien dalam mode modal. Dalam kasus seperti itu, gunakan klik dua kali untuk mengalihkan mode.
Dalam contoh ini, mengklik dua kali perintah Salin Format akan masuk ke mode di mana semua klik berikutnya akan menerapkan format tersebut. Pengguna dapat keluar dari mode dengan sekali klik kiri.
Pada klik kanan:
- Untuk toolbar yang dapat disesuaikan, tampilkan menu konteks untuk menyesuaikan toolbar. Tampilkan menu pada klik kanan pada mouse ke bawah, bukan mouse ke atas.
- Untuk toolbar lain, jangan lakukan apa-apa.
Ikon
Sediakan ikon untuk semua kontrol toolbar kecuali daftar drop-down.
Daftar drop-down tidak memerlukan ikon, tetapi semua kontrol toolbar lainnya melakukannya.
Pengecualian: toolbar gaya Windows 7 hanya menggunakan ikon untuk perintah yang ikonnya terkenal; jika tidak, mereka menggunakan label teks tanpa ikon. Melakukannya meningkatkan kejelasan label, tetapi membutuhkan lebih banyak ruang.
Pastikan ikon bilah alat terlihat jelas terhadap warna latar belakang bilah alat. Selalu evaluasi ikon toolbar dalam konteks dan dalam mode kontras tinggi.
Pilih desain ikon yang mengkomunikasikan tujuannya dengan jelas, terutama untuk perintah yang paling sering digunakan. Toolbar yang dirancang dengan baik memerlukan ikon yang jelas karena pengguna tidak dapat menemukan perintah secara efisien menggunakan tipsalat mereka. Namun, bilah alat tetap berfungsi dengan baik meskipun ikon untuk beberapa perintah yang lebih jarang digunakan tidak mudah dipahami.
Pilih ikon yang dapat dikenali dan dapat dibedakan, terutama untuk perintah yang paling sering digunakan. Pastikan ikon memiliki bentuk dan warna yang khas. Melakukannya membantu pengguna menemukan perintah dengan cepat meskipun mereka tidak mengingat simbol ikon.
Pastikan ikon toolbar sesuai dengan panduan ikon gaya Aero.
Untuk informasi dan contoh selengkapnya, lihat Ikon .
Menu standar dan tombol terpisah
Jika Anda menggunakan tombol menu dan tombol pisahkan di toolbar, coba gunakan struktur menu standar berikut dan perintah yang relevan jika memungkinkan. Tidak seperti bilah menu, perintah toolbar tidak mengambil kunci akses.
Bilah alat utama
Perintah ini mencerminkan perintah yang ditemukan di bilah menu standar, sehingga perintah tersebut harus digunakan hanya untuk toolbar utama. Daftar ini memperlihatkan label tombol (dan jenis) dengan urutan dan pemisahnya, kunci pintasan, dan elipsis. Perhatikan bahwa perintah untuk menampilkan dan menyembunyikan bilah menu ada di menu Tampilan.
File
Baru (Ctrl + N)
Buka (Ctrl + O)
Tutup
<separator>
Simpan (Ctrl + S)
Simpan sebagai...
<separator>
Kirim ke
<separator>
Cetak (Ctrl + P)
Pratinjau cetak
Penyetelan halaman
<separator>
Keluar (Alt + F4) (tombol pintas biasanya tidak dicantumkan)
Edit(tombol menu)
Batalkan (Ctrl + Z)
Ulangi (Ctrl + Y)
<separator>
Potong (Ctrl + X)
Salin (Ctrl + C)
Tempel (Ctrl + V)
<separator>
Pilih semua (Ctrl + A)
<separator>
Hapus (Del) (pintasan keyboard biasanya tidak dicantumkan)
Ubah nama...
<separator>
Temukan (Ctrl + F)
Temukan berikutnya (F3) (perintah biasanya tidak diberikan)
Ganti (Ctrl + H)
Buka (Ctrl + G)
Cetak (tombol bagi)
Cetak (Ctrl + P)
Pratinjau cetak
Penyetelan halaman
Tampilkan(tombol menu)
Bilah menu (periksa apakah terlihat)
Panel detail (periksa apakah terlihat)
Panel pratinjau (periksa apakah terlihat)
Bilah status (periksa apakah terlihat)
Zoom
Perbesar (Ctrl + +)
Perkecil tampilan (Ctrl + -)
Ukuran teks (setelan yang dipilih ditandai dengan bulatan)
Terbesar
Lebih besar
Sedang
Lebih kecil
Terkecil
Layar penuh (F11)
Refresh (F5)
Alat (tombol menu) ...
Opsi
Bantuan (tombol terpisah, gunakan ikon Bantuan) <program name> helpF1
Tentang <program name>
toolbar tambahan
Perintah ini melengkapi bilah menu standar. Daftar ini memperlihatkan label tombol (dan jenis) dengan urutan dan pemisahnya, kunci pintasan, dan elipsis. Perhatikan bahwa perintah untuk menampilkan dan menyembunyikan bilah menu ada di menu Alat.
Nama kategori toolbar tambahan berbeda dari nama kategori menu standar karena harus lebih mencakup. Misalnya, kategori Atur digunakan alih-alih Edit karena berisi perintah yang tidak terkait dengan pengeditan. Untuk mempertahankan konsistensi antara bilah menu dan toolbar, gunakan nama kategori menu standar jika melakukannya tidak akan menyesatkan.
Salah:
Dalam contoh ini, toolbar harus menggunakan Edit alih-alih Atur untuk konsistensi karena memiliki perintah menu Edit standar.
Jendela palet
Jendela palet menggunakan bilah judul yang lebih pendek untuk meminimalkan ruang layarnya. Letakkan tombol Tutup pada bilah judul.
Atur teks bilah judul ke perintah yang menampilkan jendela palet.
Gunakan kapitalisasi gaya kalimat tanpa tanda baca akhir.
Berikan menu konteks untuk perintah manajemen jendela. Tampilkan menu konteks ini saat pengguna mengklik kanan bilah judul.
Dalam contoh ini, pengguna dapat mengklik kanan bilah judul untuk menampilkan menu konteks.
Jika memungkinkan dan berguna, buat jendela palet dapat diubah ukurannya. Tunjukkan bahwa jendela dapat diubah ukurannya dengan menggunakan kursor ubah ukuran saat berada di atas bingkai jendela.
Saat jendela palet diputar ulang, tampilkan menggunakan status yang sama seperti terakhir diakses. Saat menutup, simpan ukuran dan lokasi jendela. Saat memutar ulang, pulihkan ukuran dan lokasi jendela yang disimpan. Selain itu, pertimbangkan untuk membuat atribut ini persisten di seluruh instans program per pengguna.
Kustomisasi
Sediakan kustomisasi untuk toolbar yang terdiri dari dua baris atau lebih. Hanya gaya ikon yang tidak berlabel yang memerlukan penyesuaian. Toolbar sederhana dengan beberapa perintah tidak memerlukan kustomisasi.
Berikan konfigurasi default yang baik. Pengguna seharusnya tidak perlu menyesuaikan toolbar mereka untuk skenario umum. Jangan bergantung pada pengguna yang menyesuaikan jalan keluar dari konfigurasi awal yang buruk. Asumsikan bahwa sebagian besar pengguna tidak akan menyesuaikan toolbar mereka.
Menyediakan menu konteks dengan perintah berikut:
- Daftar kotak centang untuk menampilkan bilah alat yang tersedia
- Kunci/Buka kunci toolbar
- Sesuaikan...
Mengunci toolbar yang dapat disesuaikan secara default, untuk mencegah perubahan yang tidak disengaja.
Untuk perintah Kustomisasi, tampilkan kotak dialog opsi yang menyediakan kemampuan untuk memilih toolbar mana yang ditampilkan dan perintah pada setiap toolbar.
Dalam contoh ini, Visual Studio menyediakan kotak dialog opsi untuk menyesuaikan toolbar-nya.
Berikan perintah Reset untuk kembali ke konfigurasi toolbar asli dalam kotak dialog Kustomisasi opsi.
Memungkinkan penyesuaian toolbar dengan cara seret dan lepas sebagai berikut:
- Atur urutan dan posisi bilah alat.
- Atur ukuran toolbar, dan tampilkan toolbar yang terlalu kecil untuk menampilkan isinya dengan ikon chevron luapan.
- Jika didukung, lepaskan bilah alat dari tambatannya agar menjadi jendela palet, dan sebaliknya.
Saat kotak dialog Kustomisasi opsi ditampilkan:
- Atur isi bilah alat.
- Atur urutan isi toolbar.
Melakukannya memungkinkan pengguna untuk membuat perubahan secara lebih langsung dan efisien.
Simpan semua kustomisasi toolbar, per pengguna.
Menggunakan elipsis
Meskipun perintah toolbar digunakan untuk tindakan segera, terkadang lebih banyak informasi diperlukan untuk melakukan tindakan. Gunakan elipsis untuk menunjukkan bahwa perintah memerlukan informasi lebih lanjut sebelum dapat berlaku. Letakkan tanda elipsis di akhir tooltip dan label, jika ada.
Dalam contoh ini, Cetak... perintah menampilkan kotak dialog Cetak untuk mengumpulkan informasi lebih lanjut.
Namun, jika perintah tidak dapat segera berlaku, tidak diperlukan elipsis. Jadi, misalnya, pengaturan berbagi tidak memiliki elipsis meskipun membutuhkan informasi tambahan, karena perintah tidak mungkin segera berlaku.
Perintah Pengaturan Berbagi tidak memiliki elipsis karena tidak dapat langsung berlaku.
Karena bilah alat selalu ditampilkan dan ruang sangat terbatas, elipsis harus jarang digunakan.
Ukuran dan penspasian yang direkomendasikan
Ukuran dan penspasian yang direkomendasikan untuk toolbar standar.
Label
Umum
-
Gunakan kapitalisasi gaya kalimat.
- Pengecualian: Untuk aplikasi warisan, Anda dapat menggunakan kapitalisasi gaya judul jika perlu untuk menghindari pencampuran gaya kapitalisasi.
Tombol ikon tidak berlabel
Gunakan tooltip untuk memberi label pada perintah. Untuk teks tooltip, gunakan label yang seharusnya digunakan jika tombol memiliki label, tetapi sertakan tombol pintasan jika ada.
Contoh tooltip tombol ikon.
Tombol ikon berlabel
Gunakan label ringkas. Gunakan satu kata jika memungkinkan, maksimal empat kata.
Tempatkan label di sebelah kanan ikon.
Gunakan infotip untuk menjelaskan perintah. Karena tombol sudah memiliki label, penggunaan tooltip alih-alih infotip akan menjadi redundan.
Contoh infotip untuk tombol ikon berlabel.
Daftar tarik-turun
Jika daftar selalu memiliki nilai, gunakan nilai saat ini sebagai label.
Dalam contoh ini, nama font yang saat ini dipilih bertindak sebagai label.
Jika daftar drop-down yang dapat diedit tidak memiliki nilai, gunakan perintah .
Dalam contoh ini, teks petunjuk digunakan sebagai label untuk daftar drop-down.
Tombol menu dan tombol terpisah
- Lebih suka nama tombol menu berbasis kata kerja. Namun, hilangkan kata kerja jika kata kerjanya adalah Buat, Tampilkan, Lihat, atau Kelola. Misalnya, tombol menu Alat dan Halaman tidak menggunakan kata kerja.
- Gunakan satu kata khusus yang menjelaskan konten menu dengan jelas dan akurat. Meskipun nama-nama tidak harus begitu umum sehingga mereka menggambarkan semuanya dalam menu, nama tersebut harus cukup dapat diprediksi sehingga pengguna tidak terkejut dengan apa yang mereka temukan di menu.
- Meskipun tidak diperlukan, berikan deskripsi infotip jika bermanfaat.
Item pada menu
- Gunakan nama item menu yang dimulai dengan kata kerja, kata benda, atau frasa kata benda.
- Lebih suka nama menu berbasis kata kerja. Namun, hilangkan kata kerja jika kata kerjanya adalah Buat, Tampilkan, Lihat, atau Kelola. Misalnya, perintah berikut tidak menggunakan kata kerja:
- Tentang
- Tingkat Lanjut
- Layar penuh
- Baru
- Opsi
- Properti
- Gunakan kata kerja tertentu. Hindari kata kerja generik dan tidak membantu, seperti Ubah dan Kelola.
- Gunakan kata benda tunggal untuk perintah yang berlaku untuk satu objek, jika tidak menggunakan kata benda jamak.
- Untuk pasangan perintah pelengkap, pilih nama pelengkap yang jelas. Contoh: Tambahkan, Hapus; Tampilkan, Sembunyikan; Sisipkan, Hapus.
- Pilih nama item menu berdasarkan tujuan dan tugas pengguna, bukan pada teknologi.
- Gunakan nama item menu berikut untuk tujuan yang dinyatakan:
- Opsi : Untuk menampilkan opsi program.
- Kustomisasi: Untuk menampilkan opsi program yang secara khusus terkait dengan konfigurasi UI mekanis.
- Personalisasi: Untuk menampilkan ringkasan pengaturan personalisasi yang umum digunakan.
- Preferensi : Jangan gunakan. Gunakan Opsi sebagai gantinya.
- Properti: Untuk menampilkan jendela properti objek.
- Pengaturan : Jangan gunakan sebagai label menu. Gunakan Opsi sebagai gantinya.
- Item menu yang menampilkan submenu tidak pernah memiliki elipsis pada labelnya. Panah submenu menunjukkan bahwa pilihan lain diperlukan.
Dokumentasi
Saat merujuk ke toolbar:
- Jika hanya ada satu toolbar, sebut itu sebagai toolbar.
- Jika ada beberapa toolbar, sebutkan masing-masing dengan namanya, diikuti kata "toolbar". Lihat toolbar utama yang aktif secara default dan berisi tombol untuk tugas dasar, seperti membuka dan mencetak file, sebagai toolbar standar.
- Toolbar adalah satu kata yang tidak diawali huruf kapital. (Sebaliknya, bilah menu adalah dua kata.)
- Rujuk ke tombol toolbar berdasarkan label tooltipnya. Gunakan teks label yang tepat, termasuk kapitalisasinya, tetapi jangan sertakan elipsis apa pun.
- Sebut tombol menu bilah alat dengan menyertakan labelnya dan kata "menu". Gunakan teks label yang tepat, termasuk kapitalisasinya.
- Sebut kontrol toolbar secara umum sebagai tombol toolbar.
- Untuk menjelaskan interaksi pengguna, gunakan klik untuk tombol toolbar dan daftar drop-down baca-saja, dan masukkan untuk daftar drop-down yang dapat diedit. Jangan gunakan "choose", "select", atau "pick".
- Jangan gunakan istilah berjenjang, tarik turun, drop-down, atau pop-up untuk menyebut tombol menu, kecuali dalam dokumentasi pemrograman.
- Sebut item yang tidak tersedia sebagai "tidak tersedia", bukan "diredupkan", "dinonaktifkan", atau "diabu-abukan". Gunakan istilah "dinonaktifkan" dalam dokumentasi pemrograman.
- Jika memungkinkan, format label menggunakan teks tebal. Jika tidak, letakkan label dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.
Contoh:
- Pada menu Halaman di toolbar, klik Kirim halaman melalui email.
- Dalam kotak Font pada toolbar, masukkan "Segoe UI."
- Pada toolbar Pemformatan, arahkan ke Perlihatkan, lalu klik komentar .