Bilah Alat Windows 7

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.

cuplikan layar dua toolbar dengan elemen berlabel

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.

    cuplikan layar tombol printer toolbar 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 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.

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

    cuplikan layar toolbar dengan ikon yang sudah dikenal

    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.

    cuplikan layar kotak dialog opsi alat pemotongan

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

    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.

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:

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 berfungsi paling baik untuk program sederhana.
cuplikan layar toolbar windows explorer
Bilah alat utama di Windows Explorer.
toolbar tambahan
toolbar yang dirancang untuk bekerja dengan bilah menu.
toolbar tambahan dapat berfokus pada efisiensi tanpa kompromi.
cuplikan layar bilah menu di atas toolbar
Bilah alat tambahan dari Windows Movie Maker.
menu toolbar
bilah menu yang diimplementasikan sebagai toolbar.
menu toolbar adalah toolbar yang terutama terdiri dari perintah di tombol menu dan tombol terpisah, 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 nonmodal yang menampilkan serangkaian 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 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.
cuplikan layar toolbar dengan ikon kecil tanpa label
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.
cuplikan layar toolbar dengan ikon besar yang tidak berlabel
cuplikan layar toolbar dengan ikon besar
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.
cuplikan layar toolbar dengan ikon berlabel
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.
cuplikan layar bilah menu, bilah alat, dan bilah favorit
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.
cuplikan layar toolbar parsial besar
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.
cuplikan layar toolbar berlabel ikon
Contoh tombol perintah ikon dari Windows Fax dan Scan.
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 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.
Cuplikan layar yang memperlihatkan toolbar dengan ikon berlabel untuk tombol yang paling sering digunakan.
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.
cuplikan layar toolbar dan daftar perintah drop-down
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.
cuplikan layar tombol cetak terpisah
tombol pisahkan dalam status normalnya.
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.
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:
cuplikan layar ikon wadah menuangkan cat
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.
cuplikan layar daftar tarik-turun 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.

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.

    cuplikan layar ikon umum toolbar yang tidak diberi label

    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:

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

    cuplikan layar toolbar debug

    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.

    cuplikan layar toolbar, ikon bantuan rata kanan

    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.

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

    cuplikan layar toolbar tanpa ikon berlabel

    Lebih Baik:

    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 tempatkan perintah di menu toolbar yang juga tersedia langsung di toolbar.

    Salah:

    cuplikan layar perintah cetak pada toolbar dan menu

    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.

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

    cuplikan layar toolbar dengan ikon terorganisir dengan baik

    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:

    cuplikan layar tombol cetak dan hapus yang berdekatan

    Lebih Baik:

    cuplikan layar tombol cetak dan hapus yang dipisahkan

    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:

    cuplikan layar bilah favorit dan perintah tersembunyi

    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.

    cuplikan layar infotip yang menjelaskan tombol

    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.

      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.

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

      cuplikan layar infotip memperlihatkan fungsi tombol

      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.

    cuplikan layar daftar tarik-turun ukuran font

    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:

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

    cuplikan layar kotak dialog kustomisasi dan opsi

    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.

cuplikan layar teks tooltip 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 bilah alat selalu ditampilkan dan ruang sangat terbatas, elipsis harus jarang digunakan.

Nota

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 tooltip untuk memberi label pada perintah. Untuk teks tooltip, gunakan label yang seharusnya digunakan jika tombol memiliki label, tetapi sertakan tombol pintasan jika ada.

    cuplikan layar toolbar, ikon printer, dan tipsalat

    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.

    cuplikan layar tombol berlabel dengan infotip

    Contoh infotip untuk 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 label daftar pencarian buku alamat

    Dalam contoh ini, teks petunjuk digunakan sebagai label untuk daftar drop-down.

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