Tab

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.

Tab menyediakan cara untuk menyajikan informasi terkait pada halaman berlabel terpisah.

Sekumpulan tab yang khas.

Tab biasanya dikaitkan dengan jendela properti (dan sebaliknya), tetapi tab dapat digunakan di semua jenis jendela.

Kontrol tab mewakili folder manila bertab yang digunakan untuk mengatur informasi dalam pengajuan lemari yang umumnya ditemukan di Amerika Serikat. (Folder Manila tidak digunakan di seluruh dunia.)

Catatan

Panduan yang terkait dengan tata letak, menu tab, kotak dialog, dan jendela properti disajikan dalam artikel terpisah.

Apakah ini kontrol yang tepat?

Untuk memutuskan, pertimbangkan pertanyaan-pertanyaan ini:

• Dapatkah kontrol muat dengan nyaman pada satu halaman berukuran wajar? Jika demikian, gunakan satu halaman.
• Apakah hanya ada satu tab? Jika demikian, gunakan satu halaman.
• Apakah tab terkait satu sama lain dengan cara yang jelas? Jika tidak, pertimbangkan untuk membagi informasi menjadi jendela terpisah dari informasi terkait.
• Jika digunakan untuk pengaturan, apakah pengaturan pada halaman yang berbeda benar-benar independen? Akankah mengubah pengaturan pada satu halaman mempengaruhi pengaturan pada halaman lain? Jika tidak independen, gunakan halaman tugas atau wizard sebagai gantinya.
• Apakah tab sebagian besar serekan satu sama lain, atau apakah ada hubungan hierarkis? Jika hierarkis, pertimbangkan untuk menggunakan kotak dialog pengungkapan progresif atau anak untuk memperlihatkan informasi terkait.
• Apakah tab digunakan untuk menampilkan langkah-langkah dalam tugas? Anda dapat menggunakan "tab" untuk menampilkan langkah-langkah dalam tugas hanya jika disajikan agar terlihat seperti langkah-langkah, dan ada cara alternatif yang jelas untuk masuk ke langkah teks, seperti tombol Berikutnya. Jika tidak, jika langkah-langkah diperlukan, gunakan halaman dalam alur halaman atau wizard. Jika langkah-langkahnya opsional, tampilkan langkah-langkah opsional menggunakan kotak dialog modal sebagai gantinya.
• Apakah tab memiliki tampilan berbeda dari data yang sama? Jika demikian, pertimbangkan untuk menggunakan tombol terpisah atau daftar drop-down untuk mengubah tampilan. Meskipun tab dapat digunakan secara efektif untuk mengubah tampilan, alternatifnya lebih ringan.

Pola penggunaan

Tab memiliki beberapa pola penggunaan:

Penggunaan	Contoh
Permukaan jendela dinamis seperti bilah gulir, tab dapat digunakan untuk meningkatkan area permukaan jendela untuk menampilkan informasi terkait.	Dengan pola ini, menggunakan tab secara konseptual mirip dengan menempatkan semua informasi pada tab secara linear pada satu permukaan yang dapat digulir, dengan label tab sebagai judul. Dalam contoh ini, tab secara efektif meningkatkan area permukaan jendela.
Beberapa tampilan seperti tombol terpisah atau daftar drop-down, tab dapat digunakan untuk menampilkan tampilan yang berbeda dari informasi yang sama atau terkait.	Dalam contoh ini, tab mengubah tampilan dalam dokumen.
Beberapa dokumen seperti beberapa jendela, tab dapat digunakan untuk menampilkan dokumen yang berbeda dalam satu jendela.	Dalam contoh ini, tab memperlihatkan dokumen yang berbeda dalam satu jendela aplikasi.
Opsi eksklusif seperti tombol radio, tab dapat digunakan untuk menyajikan beberapa pilihan eksklusif. dalam pola ini, hanya tab yang dipilih yang berlaku dan semua tab lainnya diabaikan.	Dalam contoh ini, tab digunakan (salah) sebagai pengganti tombol radio. Pola ini tidak disarankan karena menggunakan perilaku yang tidak biasa. Tab berperilaku sebagai pengaturan alih-alih murni cara untuk menavigasi di dalam jendela.

Jika Anda hanya melakukan satu hal ...

Pastikan informasi pada tab terkait, namun pengaturan pada halaman yang berbeda independen. Tab terakhir yang dipilih seharusnya tidak memiliki arti khusus.

Panduan

Umum

• Gunakan tab horizontal jika:

  • Jendela memiliki tujuh tab atau lebih sedikit.
  • Semua tab pas pada satu baris, bahkan ketika antarmuka pengguna (UI) dilokalkan.

• Gunakan tab vertikal jika:

  • Jendela properti memiliki delapan tab atau lebih.

  • Menggunakan tab horizontal akan memerlukan lebih dari satu baris.

    

    Dalam contoh ini, tab vertikal mengakomodasi delapan tab atau lebih.

• Jangan menumpuk tab atau menggabungkan tab horizontal dengan tab vertikal. Sebagai gantinya, kurangi jumlah tab, gunakan hanya tab vertikal, atau gunakan kontrol lain seperti daftar drop-down.

• Jangan gulir tab horizontal. Pengguliran horizontal tidak mudah ditemukan. Namun, Anda dapat menggulir tab vertikal.

  Salah:

  

  Dalam contoh ini, tab horizontal digulir.

• Untuk tab pada jendela atau panel yang dapat diubah ukurannya, letakkan bilah gulir, jika diperlukan, di halaman, bukan jendela atau panel. Tab harus selalu terlihat dan tidak digulir keluar dari tampilan.

  

  Dalam contoh ini, halaman tab memiliki bilah gulir, bukan panel.

• Pastikan tab terlihat seperti tab dan bukan tipe kontrol lain.

  Salah:

  

  Dalam contoh ini, tab ini terlihat seperti tombol perintah.

Interaksi

• Saat kontrol hanya berlaku untuk halaman, letakkan di dalam batas halaman bertab.
• Saat kontrol berlaku untuk seluruh jendela, letakkan di luar halaman bertab.
• Jangan tetapkan efek ke tab yang berubah. Tab harus dapat diakses dalam urutan apa pun. Mengubah tab saat ini tidak boleh memiliki efek samping, menerapkan pengaturan, atau menghasilkan pesan kesalahan.
• Jangan tetapkan arti khusus pada tab terakhir yang dipilih. Pilihan tab adalah untuk navigasi pilihan tab terakhir pengguna bukan pengaturan.
• Jangan membuat pengaturan pada halaman bergantung pada pengaturan di halaman lain. Letakkan pengaturan dependen pada halaman yang sama sebagai gantinya.
• Jika pengguna cenderung memulai dengan tab terakhir yang ditampilkan, buat tab tetap ada dan pilih secara default. Buat pengaturan tetap berlanjut per jendela, per pengguna. Jika tidak, pilih halaman pertama secara default.

Ikon

• Jangan letakkan ikon pada tab. Ikon biasanya menambahkan kekacauan visual yang tidak perlu, mengonsumsi ruang layar, dan sering kali tidak meningkatkan pemahaman pengguna. Hanya tambahkan ikon yang membantu pemahaman, seperti simbol standar.

  Salah:

  

  Dalam contoh ini, ikon menambahkan kekacauan visual dan melakukan sedikit hal untuk meningkatkan pemahaman pengguna.

  Pengecualian: Anda dapat menggunakan ikon yang dapat dikenali dengan jelas jika mungkin ada ruang yang tidak memadai untuk menampilkan label yang bermakna:

  Benar:

  

  Dalam contoh ini, jendela sangat sempit sehingga ikon lebih baik mengomunikasikan tab daripada label.

• Jangan gunakan logo produk untuk grafik tab. Tab bukan untuk branding.

Pola permukaan jendela dinamis

• Jangan gunakan bilah gulir pada halaman tab. Tab berfungsi mirip dengan bilah gulir untuk meningkatkan area efektif jendela. Satu mekanisme harus cukup.

• Gunakan label tab ringkas. Gunakan satu atau dua kata yang menjelaskan konten halaman dengan jelas. Label yang lebih panjang menggunakan ruang layar, terutama ketika label dilokalkan.

• Gunakan label tab tertentu yang bermakna. Hindari label tab generik yang dapat berlaku untuk tab apa pun, seperti Umum, Tingkat Lanjut, atau Pengaturan.

• Jika tab tidak berlaku untuk konteks saat ini dan pengguna tidak mengharapkannya, hapus tab tersebut. Melakukannya menyederhanakan UI dan pengguna tidak akan melewatkannya.

  Salah:

  

  Dalam contoh ini, tab Lokasi File salah dinonaktifkan saat Microsoft Word digunakan sebagai editor email. Daripada menonaktifkan tab ini, tab ini harus dihapus karena pengguna tidak akan berharap untuk melihat atau mengubah lokasi file dalam konteks ini.

• Jika tab tidak berlaku untuk konteks saat ini dan pengguna mungkin mengharapkannya untuk:

  • Tampilkan tab.
  • Nonaktifkan kontrol pada halaman.
  • Sertakan teks yang menjelaskan mengapa kontrol dinonaktifkan.

  Jangan nonaktifkan tab, karena melakukannya tidak jelas dan melarang eksplorasi. Pengguna yang mencari nilai tertentu akan dipaksa untuk melihat semua tab lainnya.

  

  Dalam contoh ini, tidak ada opsi Tampilan yang berlaku di Tata Letak Baca. Namun, pengguna mungkin mengharapkan mereka untuk menerapkan berdasarkan label tab, sehingga halaman ditampilkan tetapi opsi dinonaktifkan.

Pola beberapa tampilan dan dokumen

• Gunakan nama tampilan atau dokumen pada label tab.
• Hindari nama tab yang terlalu panjang. Jika perlu, memiliki ukuran nama maksimum atau memotong label tab yang ditampilkan menggunakan elipsis. Label yang lebih panjang menggunakan ruang layar, terutama ketika label dilokalkan.
• Jika tab tidak berlaku untuk konteks saat ini, hapus tab .

Pola opsi eksklusif

• Jangan gunakan pola ini! Gunakan tombol radio atau daftar drop-down sebagai gantinya.

  Salah:

  

  Dalam contoh ini, tab salah digunakan sebagai pengganti tombol radio.

  Benar:

  

  Dalam contoh ini, tombol radio digunakan dengan benar sebagai gantinya.

Label

• Tab label berdasarkan polanya. Gunakan kata benda daripada kata kerja, tanpa tanda baca akhir. Lihat panduan pola sebelumnya untuk informasi selengkapnya.
• Gunakan kapitalisasi gaya kalimat.
• Jangan tetapkan kunci akses. Tab dapat diakses melalui tombol pintasannya (Ctrl+Tab, Ctrl+Shift+Tab, Ctrl+PgUp, Ctrl+PgDn). Ada kekurangan pilihan kunci akses yang baik, jadi tidak menetapkan kunci akses ke tab membuatnya lebih mudah untuk menetapkannya ke kontrol lain.

Dokumentasi

Saat merujuk ke tab:

• Gunakan teks label yang tepat, termasuk kapitalisasinya, dan sertakan tab kata.
• Untuk menjelaskan interaksi pengguna, gunakan klik.
• Jika memungkinkan, format label menggunakan teks tebal. Jika tidak, letakkan label dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan.
• Karena beberapa kegunaan dapat ambigu, terutama untuk audiens di seluruh dunia, gunakan tab kata benda saja untuk merujuk hanya ke kontrol tab. Untuk penggunaan lain, klarifikasi arti dengan deskriptor: tombol Tab, perhentian tab, atau tanda tab pada penggaris.

Contoh: Pada menu Alat , klik Opsi, lalu klik tab Tampilan .