Bagikan melalui


Bilah Alat Windows 7

Catatan

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 kita saat ini.

Toolbar adalah cara untuk mengelompokkan perintah untuk akses yang efisien.

cuplikan layar dua toolbar dengan elemen berlabel

Beberapa bilah alat biasa.

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 (bukan daftar komprehensif). Berbeda dengan bilah menu, toolbar tidak harus komprehensif atau jelas sendiri hanya cepat, nyaman, 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 tambatannya, menghasilkan jendela palet. Untuk informasi selengkapnya tentang varietas toolbar, lihat Pola penggunaan di artikel ini.

Catatan

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? Toolbar bekerja dengan baik untuk jendela utama, tetapi biasanya luar biasa 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 segera? Artinya, apakah sebagian besar perintah tersebut tidak memerlukan input tambahan? Agar efisien, toolbar harus memiliki nuansa langsung dan langsung. 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, 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 di panduan Menu sebagai gantinya.

Konsep desain

Bilah menu yang bagus 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 segera berlaku, sedangkan perintah menu mungkin memerlukan input tambahan. Misalnya, perintah Cetak di bilah menu terlebih dahulu menampilkan dialog Cetak, sedangkan tombol bilah alat Cetak segera mencetak satu salinan dokumen ke printer default.

    cuplikan layar tombol printer bilah alat dipilih

    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 oleh toolbar sebanding dengan jumlah perintahnya dan ruang tersebut selalu digunakan, bahkan jika perintah tidak. 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.

    cuplikan layar toolbar dengan label kirim/terima

    Tombol toolbar berlabel membutuhkan setidaknya tiga kali ruang sebanyak yang tidak berlabel.

  • Jelas. Toolbar yang dirancang dengan baik membutuhkan ikon yang sebagian besar jelas karena pengguna tidak dapat menemukan perintah secara efisien hanya menggunakan tipsalat. Namun, toolbar masih berfungsi dengan baik jika beberapa perintah yang kurang sering digunakan tidak jelas.

    cuplikan layar toolbar dengan ikon yang sudah dikenal

    Dalam contoh ini, ikon yang paling sering digunakan adalah penjelasan mandiri.

  • 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 meskipun mereka tidak ingat simbol ikon yang tepat. Sebaliknya, pengguna ingat lokasi perintah bilah menu yang sering digunakan, tetapi mengandalkan label perintah untuk membuat pilihan.

    cuplikan layar kotak dialog opsi alat snipping

    Untuk perintah toolbar, lokasi, bentuk, dan warna yang khas membantu membuat ikon dapat dikenali dan dapat dibedakan.

    cuplikan layar bilah menu dengan perintah file dipilih

    Untuk perintah bilah menu, pengguna pada akhirnya bergantung pada label mereka.

Efisiensi

Mengingat karakteristiknya, toolbar harus dirancang terutama untuk efisiensi. Toolbar yang tidak efisien hanya tidak masuk akal.

Jika Anda hanya melakukan satu hal ...

Pastikan toolbar Anda dirancang terutama untuk efisiensi. Toolbar fokus pada perintah yang sering digunakan, langsung, langsung, dan dapat dikenali dengan cepat.

Menyembunyikan bilah menu

Umumnya, toolbar bekerja sangat baik bersama dengan bilah menu: toolbar yang baik memberikan efisiensi dan bilah menu yang baik memberikan komprehensif. Memiliki bilah menu dan toolbar memungkinkan masing-masing untuk fokus pada kekuatannya tanpa kompromi.

Anehnya, model ini rusak dengan program sederhana. Untuk program hanya dengan 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 termasuk Windows Explorer, Windows Internet Explorer, Pemutar Media Windows, 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 toolbar sebagai satu-satunya titik akses yang terlihat untuk perintah, 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 menggunakan tombol pisah adalah kompromi yang sangat baik dalam hal ini. Lihat menu Standar dan tombol pemisah untuk tombol pemisah Cetak standar.)

    cuplikan layar toolbar dan opsi perintah cetak

    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.

Toolbar 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 berasumsi 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 berkompromi. Jika menyembunyikan bilah menu menghasilkan toolbar yang tidak efisien, jangan sembunyikan bilah menu!

Aksesibilitas keyboard

Dari keyboard, mengakses toolbar sangat berbeda dengan 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 toolbar terakhir dalam urutan tab, mereka mungkin mengambil beberapa upaya signifikan untuk mengaktifkan di halaman yang sibuk (kecuali pengguna tahu untuk menggunakan Shift+Tab untuk bergerak mundur).

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:

Penggunaan Contoh
Bilah alat utama
toolbar yang dirancang untuk bekerja tanpa bilah menu, baik tersembunyi atau dihapus.
toolbar utama harus menyeimbangkan kebutuhan akan efisiensi dengan komprehensif, sehingga mereka bekerja paling baik untuk program sederhana.
cuplikan layar toolbar windows explorer
Bilah alat utama dari Windows Explorer.
Toolbar tambahan
toolbar yang dirancang untuk bekerja dengan bilah menu.
toolbar tambahan dapat fokus pada efisiensi tanpa kompromi.
cuplikan layar bilah menu di atas toolbar
Bilah alat tambahan dari Windows Movie Maker.
Menu bilah alat
bilah menu yang diimplementasikan sebagai toolbar.
menu toolbar adalah toolbar yang terutama terdiri dari perintah di tombol menu dan tombol pisahkan , hanya dengan beberapa perintah langsung, jika ada.
cuplikan layar bilah menu dengan ikon dan perintah
Menu bilah alat di Galeri Foto Windows.
Toolbar yang dapat disesuaikan
bilah alat yang dapat dikustomisasi oleh pengguna.
Toolbar yang dapat disesuaikan memungkinkan pengguna untuk menambahkan atau menghapus toolbar, mengubah ukuran dan lokasi mereka, dan bahkan mengubah konten mereka.
cuplikan layar toolbar dengan puluhan ikon
Toolbar yang dapat disesuaikan dari Microsoft Visual Studio.
Jendela palet
kotak dialog tanpa mode yang menyajikan array perintah.
jendela palet adalah bilah alat yang tidak ditambatkan.
cuplikan layar kotak dialog warna
cuplikan layar kotak dialog font
Jendela palet dari Windows Paint.

Bilah alat memiliki gaya ini:

Gaya Contoh
Ikon tidak berlabel
satu atau beberapa baris tombol ikon kecil tanpa label.
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.
cuplikan layar toolbar dengan ikon kecil dan tidak berlabel
Toolbar ikon tidak berlabel dari WordPad.
Ikon besar yang tidak berlabel
satu baris tombol ikon besar tanpa label.
gunakan gaya ini untuk utilitas sederhana yang memiliki ikon yang mudah dikenali dan biasanya dijalankan di jendela kecil.
cuplikan layar toolbar dengan ikon besar dan tidak berlabel
cuplikan layar toolbar dengan ikon besar
Bilah alat ikon besar yang tidak berlabel 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.
cuplikan layar toolbar dengan ikon berlabel
Bilah alat ikon berlabel dari Windows Explorer.
Bilah alat parsial
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.
cuplikan layar bilah menu, bilah alat, dan bilah favorit
Bilah alat parsial dapat dikombinasikan dengan tombol navigasi, kotak pencarian, atau tab.
Bilah alat 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.
cuplikan layar toolbar parsial besar
Toolbar parsial besar dari Pertahanan Windows.

Terakhir, kontrol toolbar memiliki beberapa pola penggunaan:

Penggunaan Contoh
Tombol ikon perintah
mengklik tombol perintah memulai tindakan segera.
cuplikan layar toolbar ikon berlabel
Contoh tombol perintah ikon dari Faks dan Pemindaian Windows.
Tombol ikon mode
mengklik tombol mode memasuki mode yang dipilih.
cuplikan layar toolbar vertikal
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.
cuplikan layar ikon pemformatan dan teks terpilih
Contoh tombol properti dari Microsoft Word.
Tombol ikon berlabel
tombol perintah atau tombol properti berlabel ikon dan label teks.
tombol ini digunakan untuk tombol toolbar yang sering digunakan yang ikonnya tidak cukup jelas. mereka juga digunakan dalam toolbar yang memiliki begitu sedikit tombol sehingga setiap tombol dapat memiliki label teks.
Cuplikan layar yang memperlihatkan toolbar dengan ikon berlabel untuk tombol yang paling sering digunakan.
Bilah alat dengan tombol yang paling sering digunakan berlabel.
Tombol menu
tombol perintah yang digunakan untuk menyajikan sekumpulan kecil perintah terkait.
satu segitiga menunjuk ke bawah menunjukkan bahwa mengklik tombol menunjukkan menu.
cuplikan layar toolbar dan daftar perintah drop-down
Tombol menu dengan sekumpulan kecil perintah terkait.
Tombol pisahkan
tombol perintah yang digunakan untuk mengonsolidasikan variasi perintah, terutama ketika salah satu perintah digunakan sebagian besar waktu.
cuplikan layar tombol cetak terpisah
tombol pisahkan dalam keadaan normal.
seperti tombol menu, satu segitiga menunjuk ke bawah menunjukkan bahwa mengklik bagian paling kanan tombol menunjukkan menu.
cuplikan layar perintah tombol cetak terpisah
tombol pemisah yang dijatuhkan ke bawah.
dalam contoh ini, tombol pisah digunakan untuk mengonsolidasikan semua perintah terkait cetak. 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 pisah efektif dalam situasi di mana perintah berikutnya kemungkinan sama dengan perintah terakhir. dalam hal ini, label diubah ke perintah terakhir, seperti halnya pemilih warna:
cuplikan layar ikon wadah menuangkan cat
Dalam contoh ini, label diubah ke perintah terakhir.
Daftar tarik turun
daftar drop-down (dapat diedit atau baca-saja) yang digunakan untuk melihat atau mengubah properti.
cuplikan layar daftar drop-down font
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.

Panduan

Presentasi

  • Pilih gaya bilah alat yang sesuai berdasarkan jumlah perintah dan penggunaannya. Lihat tabel gaya toolbar sebelumnya untuk panduan tentang cara memilih. Hindari menggunakan konfigurasi bilah alat 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 berada pada premium, hemat ruang dengan:

    • Menghilangkan label ikon terkenal dan perintah yang kurang sering digunakan.
    • Hanya menggunakan bilah alat parsial alih-alih seluruh lebar jendela.
    • Mengonsolidasikan perintah terkait dengan tombol menu atau tombol pisahkan.
    • Menggunakan chevron luapan untuk mengungkapkan perintah yang lebih jarang digunakan.
    • Menampilkan perintah hanya ketika diterapkan ke konteks saat ini.

    cuplikan layar ikon umum toolbar yang tidak diberi label

    Bilah alat Windows Internet Explorer menghemat ruang dengan menghilangkan label ikon terkenal, menggunakan bilah alat parsial, dan menggunakan chevron luapan untuk perintah yang lebih jarang digunakan.

  • Untuk pola toolbar ikon yang tidak berlabel, 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:

    cuplikan layar bilah menu dan tiga baris toolbar

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

    cuplikan layar toolbar debug

    Dalam contoh ini, toolbar Debug hanya ditampilkan saat program sedang dijalankan.

  • Tampilkan tombol bilah alat rata kiri. Ikon Bantuan, jika ada, diratakan dengan benar.

    cuplikan layar toolbar, ikon bantuan rata kanan

    Semua tombol bilah alat dibiarkan rata kecuali bantuan.

    Pengecualian: Bilah alat gaya Windows 7 meninggalkan perintah spesifik program, tetapi rata kanan perintah standar dan terkenal seperti Opsi, Tampilan, dan Bantuan.

  • Jangan ubah label tombol toolbar secara dinamis. Melakukannya membingungkan dan tidak terduga. Namun, Anda dapat mengubah ikon untuk mencerminkan status saat ini.

    cuplikan layar ikon wadah menuangkan cat

    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 komprehensif seperti 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, sehingga Anda tidak perlu menyediakan semuanya. Fokus pada akses perintah yang cepat dan nyaman dan lewati sisanya.
  • 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. Langsung untuk perintah yang paling umum, tetapi 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...).
  • Berikan label untuk perintah yang sering digunakan, terutama jika ikonnya bukan ikon terkenal.

    Diterima:

    cuplikan layar toolbar tanpa ikon berlabel

    Lebih:

    cuplikan layar toolbar dengan beberapa ikon berlabel

    Toolbar Faks dan Pemindaian Windows memiliki beberapa perintah, sehingga versi yang lebih baik memberi label yang paling penting.

  • Jangan letakkan perintah di menu toolbar yang juga langsung ada di toolbar.

    Salah:

    cuplikan layar perintah cetak pada toolbar dan menu

    Dalam contoh ini, Cetak langsung berada di toolbar, sehingga tidak perlu berada di menu.

Organisasi dan ketertiban

  • Atur perintah dalam toolbar ke dalam grup terkait.

  • Tempatkan grup yang paling sering digunakan terlebih dahulu. Dalam grup, letakkan perintah dalam urutan logisnya. 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 di seluruh grup digabungkan dengan lemah. Melakukannya membuat pengelompokan menjadi jelas dan perintah lebih mudah ditemukan.

    Cuplikan layar yang memperlihatkan toolbar dengan ikon yang terorganisir dengan baik menggunakan pembagi grup.

    cuplikan layar toolbar dengan ikon yang terorganisir dengan baik

    Contoh bilah alat yang dikelompokkan dari Windows Mail.

  • Hindari menempatkan perintah yang merusak di samping perintah yang sering digunakan. Gunakan urutan atau pengelompokan untuk mendapatkan pemisahan. Selain itu, pertimbangkan untuk tidak menempatkan perintah yang merusak di toolbar, tetapi hanya di bilah menu atau menu konteks sebagai gantinya.

    Diterima:

    cuplikan layar tombol cetak dan hapus yang bersebelahan

    Lebih:

    cuplikan layar tombol cetak dan hapus yang dipisahkan

    Dalam contoh yang lebih baik, perintah Hapus dipisahkan secara fisik dari Cetak.

  • Gunakan chevron luapan untuk menunjukkan bahwa tidak semua perintah dapat ditampilkan. Tetapi gunakan luapan hanya jika tidak ada ruang yang cukup untuk menampilkan semua perintah.

    Salah:

    cuplikan layar bilah favorit dan perintah tersembunyi

    Chevron luapan menunjukkan bahwa tidak semua perintah ditampilkan, tetapi lebih banyak dari mereka bisa dengan tata letak yang lebih baik.

  • Pastikan bahwa perintah yang paling sering digunakan dapat diakses langsung dari toolbar (yaitu, tidak luapan) dalam 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 tetap menjadi masalah, pertimbangkan kembali pilihan gaya bilah alat Anda.

Menyembunyikan bilah menu

Umumnya, toolbar bekerja dengan 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 pisahkan.
  • Tampilkan bilah menu saat pengguna menekan tombol Alt, dan mengatur fokus input pada kategori menu pertama.

Interaksi

  • Pada hover, tampilkan kemampuan tombol untuk menunjukkan bahwa ikon dapat diklik. Setelah batas waktu tipsalat, tampilkan tipsalat atau infotip.

    cuplikan layar infotip yang menjelaskan tombol

    Contoh ini menunjukkan berbagai status tampilan.

  • Di sebelah kiri klik tunggal:

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

      cuplikan layar penunjuk berbentuk seperti wadah cat

      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.

  • Di kiri klik dua kali, lakukan tindakan yang sama dengan klik tunggal kiri.

    • Pengecualian: Pada kesempatan yang jarang terjadi, perintah toolbar dapat digunakan secara lebih efisien secara modal. Dalam kasus seperti itu, gunakan klik dua kali untuk mengalihkan mode.

      cuplikan layar infotip memperlihatkan fungsi tombol

      Dalam contoh ini, mengklik dua kali perintah Pewarna Format memasuki mode di mana semua klik berikutnya menerapkan format. Pengguna dapat meninggalkan mode dengan mengklik tunggal.

  • 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 lainnya, jangan lakukan apa-apa.

Ikon

  • Sediakan ikon untuk semua kontrol bilah alat kecuali daftar drop-down.

    cuplikan layar daftar drop-down ukuran font

    Daftar drop-down tidak memerlukan ikon, tetapi semua kontrol toolbar lainnya.

    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 mengomunikasikan 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, toolbar masih berfungsi dengan baik jika ikon untuk beberapa perintah yang kurang sering digunakan tidak jelas.

  • 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 pisahkan

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 elipsisnya. Perhatikan bahwa perintah untuk menampilkan dan menyembunyikan bilah menu ada di menu Tampilan.

File NewCtrl+N
Terbuka... Ctrl+O
Tutup
<pemisah>
SaveCtrl+S
Simpan sebagai...
<pemisah>
Kirim ke
<pemisah>
Cetak... Ctrl+P
Pratinjau cetak
Penyetelan halaman
<pemisah>
ExitAlt+F4(pintasan biasanya tidak diberikan)

Edit(tombol menu) Batalkan doCtrl+Z
Ulangitrl+Y
<pemisah>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<pemisah>
Pilih allCtrl+A
<pemisah>
DeleteDel(pintasan biasanya tidak diberikan)
Ubah nama...
<pemisah>
Menemukan... Ctrl+F
Temukan nextF3(perintah biasanya tidak diberikan)
Menggantikan... Ctrl+H
Pergi ke... Ctrl+G

Cetak(tombol pisah) 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 tampilan inCtrl++
Perkecil Ctrl+-

Ukuran teks(pengaturan yang dipilih memiliki poin)

Terbesar
Lebih besar
Medium
Lebih kecil
Terkecil

Layar penuhF11
RefreshF5

Alat(tombol menu) ...

Pilihan Tombol Bantuan(pisahkan, 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 elipsisnya. 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 menjaga konsistensi antara bilah menu dan toolbar, gunakan nama kategori menu standar jika melakukannya tidak akan menyesatkan.

Salah:

cuplikan layar dari opsi yang sama untuk perintah yang berbeda

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.

    cuplikan layar kotak alat dengan menu konteks

    Dalam contoh ini, pengguna dapat mengklik kanan bilah judul untuk menampilkan menu konteks.

  • Jika memungkinkan dan berguna, buat jendela palet dapat diubah. Tunjukkan bahwa jendela dapat diubah ukurannya, menggunakan penunjuk mengubah ukuran saat melewati 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 berdasarkan 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 penyesuaian.

  • Berikan konfigurasi default yang baik. Pengguna 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.

  • Berikan menu konteks dengan perintah berikut:

    • Daftar kotak centang untuk menampilkan bilah alat yang tersedia
    • Kunci/Buka kunci bilah alat
    • Menyesuaikan...
  • Kunci bilah alat 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.

    cuplikan layar kotak dialog kustomisasi dan opsi

    Dalam contoh ini, Visual Studio menyediakan kotak dialog opsi untuk mengkustomisasi toolbar-nya.

  • Berikan perintah Reset untuk kembali ke konfigurasi toolbar asli dalam kotak dialog Kustomisasi opsi.

  • Berikan kemampuan untuk menyesuaikan toolbar menggunakan seret dan letakkan dengan cara berikut:

    • Atur urutan dan posisi bilah alat.
    • Atur panjang bilah alat, menampilkan bilah alat yang terlalu kecil untuk menampilkan kontennya dengan chevron luapan.
    • Jika didukung, lepaskan toolbar untuk menjadi jendela palet dan sebaliknya.

    Saat kotak dialog Kustomisasi opsi ditampilkan:

    • Atur isi bilah alat.
    • Atur urutan isi bilah alat.

    Melakukannya memungkinkan pengguna untuk membuat perubahan secara lebih langsung dan efisien.

  • Simpan semua kustomisasi toolbar, berdasarkan per pengguna.

Menggunakan elipsis

Sementara 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 elipsis di akhir tipsalat dan label, jika ada.

cuplikan layar teks tipsalat cetak dengan elipsis

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.

cuplikan layar toolbar, perintah, dan tipsalat

Perintah Pengaturan Berbagi tidak memiliki elipsis karena tidak dapat langsung berlaku.

Karena toolbar terus ditampilkan, dan ruang berada pada premium, elipsis harus jarang digunakan.

Catatan

Untuk menu yang ditampilkan oleh toolbar, terapkan panduan elipsis menu.

cuplikan layar toolbar dengan informasi penspasian

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 tipsalat untuk memberi label perintah. Untuk teks tipsalat, gunakan label jika tombol diberi label, tetapi sertakan kunci pintasan jika ada.

    cuplikan layar toolbar, ikon printer, dan tipsalat

    Contoh tipsalat 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 diberi label, menggunakan tipsalat alih-alih infotip akan berlebihan.

    cuplikan layar tombol berlabel dengan infotip

    Contoh infotip tombol ikon berlabel.

  • Jika daftar selalu memiliki nilai, gunakan nilai saat ini sebagai label.

    cuplikan layar toolbar dengan opsi font

    Dalam contoh ini, nama font yang saat ini dipilih bertindak sebagai label.

  • Jika daftar drop-down yang dapat diedit tidak memiliki nilai, gunakan perintah.

    cuplikan layar buku alamat pencarian label daftar

    Dalam contoh ini, perintah digunakan untuk label daftar drop-down.

  • Pilih nama tombol menu berbasis kata kerja. Namun, hilangkan kata kerja jika itu adalah Buat, Tampilkan, Tampilkan, atau Kelola. Misalnya, tombol menu Alat dan Halaman tidak memiliki kata kerja.
  • Gunakan satu kata khusus yang menjelaskan konten menu dengan jelas dan akurat. Meskipun nama tidak harus begitu umum sehingga mereka menggambarkan semua yang ada di 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.
  • Gunakan nama item menu yang dimulai dengan kata kerja, kata benda, atau frasa kata benda.
  • Pilih nama menu berbasis kata kerja. Namun, hilangkan kata kerja jika itu adalah Buat, Tampilkan, Tampilkan, atau Kelola. Misalnya, perintah berikut tidak menggunakan kata kerja:
    • Tentang
    • Lanjutan
    • 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, gunakan 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:
    • Pilihan: Untuk menampilkan opsi program.
    • Menyesuaikan: 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, rujuk sebagai toolbar.
  • Jika ada beberapa toolbar, lihat berdasarkan nama, diikuti dengan toolbar kata. Lihat toolbar utama yang aktif secara default dan berisi tombol untuk tugas dasar, seperti membuka dan mencetak file, sebagai toolbar standar.
  • Toolbar adalah kata tunggal yang tidak dikapitalisasi. (Sebaliknya, bilah menu adalah dua kata.)
  • Lihat tombol toolbar dengan label tipsalatnya. Gunakan teks label yang tepat, termasuk kapitalisasinya, tetapi jangan sertakan elipsis apa pun.
  • Lihat tombol menu toolbar berdasarkan label dan menu katanya. Gunakan teks label yang tepat, termasuk kapitalisasinya.
  • Lihat kontrol toolbar umumnya 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 pilih, pilih, atau pilih.
  • Jangan gunakan cascading, pull-down, drop-down, atau pop-up untuk menjelaskan tombol menu, kecuali dalam dokumentasi pemrograman.
  • Lihat item yang tidak tersedia karena tidak tersedia, tidak redup, dinonaktifkan, atau berwarna abu-abu. Gunakan 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 pada toolbar, klik Kirim halaman melalui email.
  • Dalam kotak Font pada toolbar, masukkan "Segoe UI."
  • Pada toolbar Pemformatan, arahkan ke Perlihatkan, lalu klik Komentar.