Teks Antarmuka Pengguna
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 kami saat ini.
Teks antarmuka pengguna muncul di permukaan UI. Teks ini mencakup label kontrol dan teks statis:
- Label kontrol mengidentifikasi kontrol dan ditempatkan langsung di atau di samping kontrol.
- Teks statis, yang begitu dipanggil karena bukan bagian dari kontrol interaktif, memberi pengguna instruksi atau penjelasan terperinci sehingga mereka dapat membuat keputusan berdasarkan informasi.
Catatan: Panduan yang terkait dengan gaya dan nada, font, dan label kontrol comon disajikan dalam artikel terpisah.
Teks UI memiliki beberapa pola penggunaan:
Penggunaan | Deskripsi |
---|---|
Teks bilah judul gunakan teks bilah judul untuk mengidentifikasi jendela atau sumber kotak dialog. |
Dalam contoh ini, teks bilah judul mengidentifikasi jendela. |
Instruksi utama gunakan instruksi utama yang menonjol untuk menjelaskan secara ringkas apa yang harus dilakukan di jendela atau halaman. |
Instruksi harus berupa pernyataan tertentu, arah imperatif, atau pertanyaan. Instruksi utama yang baik mengkomunikasikan tujuan pengguna daripada hanya berfokus pada memanipulasi UI. Dalam contoh ini, teks instruksi utama secara langsung melibatkan pengguna dengan pertanyaan dalam hal keuntungan atau minat pengguna sendiri. |
Instruksi tambahan jika perlu, gunakan instruksi tambahan untuk menyajikan informasi tambahan yang berguna untuk memahami atau menggunakan jendela atau halaman. |
Anda dapat memberikan informasi yang lebih rinci, memberikan konteks, dan menentukan terminologi. Instruksi tambahan menguraikan instruksi utama tanpa hanya mengucapkannya kembali. Dalam contoh ini, instruksi tambahan menyediakan dua kemungkinan kursus tindakan untuk mengambil sebagai respons terhadap informasi yang disajikan dalam instruksi utama. |
Label kontrol label langsung pada atau di samping kontrol. |
Dalam contoh ini, label kontrol mengidentifikasi pengaturan jam desktop yang dapat dipilih atau diubah pengguna. |
Penjelasan tambahan elaborasi label kontrol (biasanya untuk tautan perintah, tombol radio, dan kotak centang). |
Dalam contoh ini, penjelasan tambahan mengklarifikasi pilihan. |
Pengembang perangkat lunak sering menganggap teks sebagai direlegasikan ke dokumentasi produk dan dukungan teknis. "Pertama kita akan menulis kode, dan kemudian kita akan mempekerjakan seseorang untuk membantu kita menjelaskan apa yang telah kita kembangkan." Namun pada kenyataannya, teks penting ditulis sebelumnya dalam proses, karena UI dikandung dan dikodekan. Teks ini, setelah semua, dilihat lebih sering dan oleh lebih banyak orang daripada mungkin jenis penulisan teknis lainnya.
Teks yang dapat dipahami sangat penting untuk antarmuka pengguna yang efektif. Penulis dan editor profesional harus bekerja dengan pengembang perangkat lunak pada teks UI sebagai bagian integral dari proses desain. Minta mereka mengerjakan teks lebih awal karena masalah teks sering mengungkapkan masalah desain. Jika tim Anda kesulitan menjelaskan desain, cukup sering itu adalah desainnya, bukan penjelasannya, yang perlu diperbaiki.
Saat Anda memikirkan teks UI dan penempatannya di permukaan UI Anda, pertimbangkan fakta-fakta berikut:
- Selama membaca yang berfokus dan imersif, orang membaca dalam urutan kiri-ke-kanan, atas-ke-bawah (dalam budaya Barat).
- Saat menggunakan perangkat lunak, pengguna tidak dibenamkan di UI itu sendiri tetapi dalam pekerjaan mereka. Akibatnya, pengguna tidak membaca teks UI yang mereka pindai.
- Saat memindai jendela, pengguna mungkin tampak membaca teks ketika pada kenyataannya mereka memfilternya. Mereka sering tidak benar-benar memahami teks UI kecuali mereka memahami kebutuhan.
- Dalam jendela, elemen UI yang berbeda menerima tingkat perhatian yang berbeda. Pengguna cenderung membaca label kontrol terlebih dahulu, terutama yang tampak relevan untuk menyelesaikan tugas yang ditangani. Sebaliknya, pengguna cenderung membaca teks statis hanya ketika mereka berpikir mereka perlu.
Untuk model desain umum, jangan asumsikan bahwa pengguna membaca teks dengan hati-hati dalam urutan kiri-ke-kanan, atas-ke-bawah. Sebaliknya, asumsikan bahwa pengguna mulai dengan cepat memindai seluruh jendela, lalu membaca teks UI secara kira-kira urutan berikut:
- Kontrol interaktif di tengah
- Tombol penerapan
- Kontrol interaktif ditemukan di tempat lain
- Instruksi utama
- Penjelasan tambahan
- Judul jendela
- Teks statis lainnya dalam isi utama
- Catatan kaki
Anda juga harus berasumsi bahwa setelah pengguna memutuskan apa yang harus dilakukan, mereka akan segera berhenti membaca dan melakukannya.
Teks redundan tidak hanya mengambil ruang layar yang berharga, tetapi melemahkan efektivitas ide atau tindakan penting yang coba Anda sampaikan. Ini juga buang-buang waktu pembaca, dan semua lagi dalam konteks di mana pemindaian adalah norma. Windows berusaha untuk menjelaskan apa yang perlu dilakukan pengguna sekali dengan baik dan ringkas.
Tinjau setiap jendela dan hilangkan kata dan pernyataan duplikat, baik di dalam maupun di seluruh kontrol. Jangan hindari teks penting; jadilah eksplisit seperlunya, tetapi jangan berlebihan dan jangan jelaskan yang jelas.
Bahkan jika teks tidak berlebihan, teks hanya bisa terlalu kata-kata dalam upaya untuk menjelaskan setiap detail. Terlalu banyak teks mencegah pembacaan; mata cenderung melompat tepat di atasnya secara ironis mengakibatkan lebih sedikit komunikasi daripada lebih. Dalam teks UI, komunikasikan informasi penting secara ringkas. Jika informasi lebih lanjut diperlukan untuk beberapa pengguna atau beberapa skenario, berikan tautan ke konten Bantuan yang lebih rinci, atau mungkin ke entri glosarium untuk klarifikasi istilah.
Salah:
Dalam contoh ini, ada terlalu banyak teks untuk dipindai dengan mudah. Meskipun tidak dimaksudkan oleh perancang, ada begitu banyak teks sehingga pengguna kemungkinan besar akan mengklik Berikutnya tanpa membaca apa pun.
Untuk menghindari teks yang mencegah pembacaan, buat teks Anda untuk membuat setiap kata dihitung. Apa yang tidak menambahkan pengurangan, jadi gunakan teks sederhana dan ringkas.
Penulisan akademik biasanya menggunakan gaya struktural "piramida" yang meletakkan fondasi fakta, bekerja dengan fakta-fakta tersebut, dan membangun kesimpulan membentuk struktur seperti piramida. Sebaliknya, wartawan menggunakan gaya "piramida terbalik" yang dimulai dengan kesimpulan sebagai "takeaway" mendasar yang harus dimiliki pembaca. Kemudian mengisi secara progresif lebih detail bahwa pembaca mungkin tertarik mungkin hanya untuk memindai. Keuntungan dari gaya ini adalah bahwa gaya itu langsung ke titik, dan memungkinkan pembaca untuk berhenti membaca kapan saja yang mereka pilih dan masih memahami informasi penting.
Anda harus menerapkan struktur piramida terbalik ke teks UI. Langsung ke titik dengan informasi penting, biarkan pengguna berhenti membaca kapan saja mereka memilih, dan menggunakan tautan Bantuan untuk menyajikan sisa piramida.
Dalam contoh ini, informasi penting ada dalam kueri teks instruksi utama, informasi bermanfaat tambahan ada dalam instruksi tambahan, dan detail tersedia dengan mengklik tautan Bantuan.
Jika Anda hanya melakukan lima hal ...
- Bekerja pada teks lebih awal karena masalah teks sering mengungkapkan masalah desain.
- Rancang teks Anda untuk pemindaian.
- Hilangkan teks redundan.
- Gunakan teks yang mudah dipahami; jangan berkomunikasi berlebihan.
- Jika perlu, berikan tautan ke konten Bantuan untuk informasi yang lebih rinci.
Hapus teks redundan. Cari teks redundan dalam judul jendela, instruksi utama, instruksi tambahan, area konten, tautan perintah, dan tombol penerapan. Umumnya, biarkan teks lengkap dalam instruksi utama dan kontrol interaktif, dan hapus redundansi dari tempat lain.
Hindari blok besar teks UI. Cara melakukan ini meliputi:
- Memotong teks menjadi kalimat dan paragraf yang lebih pendek.
- Jika perlu, memberikan tautan Bantuan ke informasi yang berguna, tetapi tidak penting.
Pilih nama objek dan label yang berkomunikasi dengan jelas dan membedakan apa yang dilakukan objek. Pengguna tidak perlu mencari tahu apa arti objek sebenarnya atau bagaimana perbedaannya dengan objek lain.
Salah:
Lebih:
Dalam contoh yang salah, nama objek tidak dibingkai sama sekali; contoh yang lebih baik menunjukkan diferensiasi yang kuat berdasarkan nama produk.
Jika Anda ingin memastikan bahwa pengguna membaca teks tertentu yang terkait dengan tindakan, letakkan pada kontrol interaktif.
- Diterima:
- Dalam contoh ini, ada kemungkinan pengguna tidak akan membaca teks yang menjelaskan apa yang mereka konfirmasi.
- Lebih:
- Dalam contoh ini, Anda dapat yakin bahwa setidaknya pengguna memahami bahwa mereka akan memformat disk.
Gunakan satu spasi antar kalimat. Bukan dua.
- Gunakan teks biru hanya untuk tautan dan instruksi utama.
- Gunakan teks hijau hanya untuk URL dalam hasil pencarian.
Font dan warna berikut adalah default untuk Windows.
Pola | Simbol tema | Font, Warna |
---|---|---|
CaptionFont |
9 pt. hitam (#000000) Segoe UI |
|
MainInstruction |
12 pt. biru (#003399) Segoe UI |
|
Instruksi |
9 pt. hitam (#000000) Segoe UI |
|
BodyText |
9 pt. hitam (#000000) Segoe UI |
|
BodyText |
9 pt. hitam (#000000) Segoe UI, tebal atau miring |
|
BodyText |
9 pt. black (#000000) Segoe UI, dalam kotak |
|
Nonaktif |
9 pt. abu-abu gelap (#323232) Segoe UI |
|
HyperLinkText |
9 pt. biru (#0066CC) Segoe UI |
|
Populer |
9 pt. biru muda (#3399FF) Segoe UI |
|
11 pt. biru (#003399) Segoe UI |
||
11 pt. black (#000000) Segoe UI |
||
(tidak ada) |
9 pt. hitam (#000000) Calibri |
|
(tidak ada) |
17 pt. hitam (#000000) Calibri |
Untuk informasi dan contoh selengkapnya, lihat Font dan Warna.
Bold
Gunakan tebal dengan hemat untuk menarik perhatian pengguna teks harus membaca. Misalnya, pengguna yang memindai daftar opsi tombol radio mungkin menghargai melihat label dalam huruf tebal, untuk menonjol dari teks yang menambahkan informasi tambahan tentang setiap opsi. Ketahuilah bahwa menggunakan terlalu banyak tebal mengurangi dampaknya.
Dengan data berlabel, gunakan tebal untuk menekankan mana saja yang lebih penting untuk data secara keseluruhan.
Untuk sebagian besar data generik (di mana data memiliki sedikit makna tanpa labelnya, seperti angka atau tanggal), gunakan label tebal dan data biasa sehingga pengguna dapat lebih mudah memindai dan memahami jenis data.
Untuk sebagian besar data yang jelas sendiri, gunakan label biasa dan data tebal sehingga pengguna dapat fokus pada data itu sendiri.
Atau, Anda dapat menggunakan teks abu-abu gelap untuk menghilangkan penekanan informasi yang kurang penting alih-alih menggunakan tebal untuk menekankan informasi yang lebih penting.
Dalam contoh ini, alih-alih menekankan data menggunakan tebal, label ditolak dengan menggunakan abu-abu gelap.
Tidak semua font mendukung tebal, jadi seharusnya tidak pernah penting untuk memahami teks.
Miring
Gunakan untuk merujuk ke teks secara harfiah. Jangan gunakan tanda kutip untuk tujuan ini.
Benar:
Dokumen istilah dan file sering digunakan secara bergantian.
Gunakan untuk perintah dalam kotak teks dan daftar drop-down yang dapat diedit.
Dalam contoh ini, perintah dalam kotak Pencarian diformat sebagai teks miring.
Gunakan dengan hemat untuk menekankan kata-kata tertentu untuk membantu pemahaman.
Tidak semua font mendukung miring, jadi seharusnya tidak pernah penting untuk memahami teks.
Miring tebal
- Jangan gunakan dalam teks UI.
Menggarisbawahi
- Jangan gunakan, kecuali untuk tautan.
- Jangan gunakan untuk penekanan. Gunakan miring sebagai gantinya.
Periode
- Jangan tempatkan di akhir label kontrol, instruksi utama, atau tautan Bantuan.
- Tempatkan di akhir instruksi tambahan, penjelasan tambahan, atau teks statis lainnya yang membentuk kalimat lengkap.
Tanda tanya
- Tempatkan di akhir semua pertanyaan. Tidak seperti titik, tanda tanya digunakan untuk semua jenis teks.
Tanda seru
- Dalam aplikasi bisnis, hindari.
- Pengecualian: Poin seru terkadang digunakan dalam konteks penyelesaian unduhan ("Selesai!") dan untuk menarik perhatian pada konten Web ("Baru!").
Koma
- Dalam daftar tiga item atau lebih, selalu letakkan koma setelah item berikutnya ke terakhir dalam daftar.
Titik dua
- Gunakan titik dua di akhir label kontrol eksternal. Ini sangat penting untuk aksesibilitas karena beberapa teknologi bantuan mencari titik dua untuk mengidentifikasi label kontrol.
- Gunakan titik dua untuk memperkenalkan daftar item.
Elips
Elipsis berarti tidak lengkap. Gunakan elipsis dalam teks UI sebagai berikut:
Perintah: Menunjukkan bahwa perintah memerlukan informasi tambahan. Jangan gunakan elipsis setiap kali tindakan menampilkan jendela lain hanya saat informasi tambahan diperlukan. Untuk informasi selengkapnya, lihat Tombol Perintah.
Data: Menunjukkan bahwa teks terpotong.
Label: Menunjukkan bahwa tugas sedang berlangsung (misalnya, "Mencari...").
Tips: Teks terpotong di jendela atau halaman dengan ruang yang tidak digunakan menunjukkan tata letak yang buruk atau ukuran jendela default yang terlalu kecil. Berusahalah untuk tata letak dan ukuran jendela default yang menghilangkan atau mengurangi jumlah teks yang terpotong. Untuk informasi selengkapnya, lihat Tata Letak.
Jangan membuat elipsis interaktif. Untuk menampilkan teks terpotong, biarkan pengguna mengubah ukuran kontrol untuk melihat lebih banyak teks atau menggunakan kontrol pengungkapan progresif sebagai gantinya.
Tanda kutip dan apostrof
Untuk merujuk ke teks secara harfiah, gunakan pemformatan miring daripada tanda kutip.
Letakkan judul jendela dan label kontrol dalam tanda kutip hanya jika diperlukan untuk mencegah kebingungan dan Anda tidak dapat memformat menggunakan tebal sebagai gantinya.
Untuk tanda kutip, lebih suka tanda kutip ganda (" "); hindari tanda kutip tunggal.
Benar:
Yakin ingin menghapus "folder kucing Sparky"?
Salah:
Yakin ingin menghapus 'folder kucing Sparky'?
Gunakan kapitalisasi gaya judul untuk judul, kapitalisasi gaya kalimat untuk semua elemen UI lainnya. Melakukannya lebih tepat untuk nada Windows.
Pengecualian: Untuk aplikasi warisan, Anda dapat menggunakan kapitalisasi gaya judul untuk tombol perintah, menu, dan judul kolom jika perlu untuk menghindari pencampuran gaya kapitalisasi.
Contoh umum ini menunjukkan kapitalisasi dan tanda baca yang benar untuk lembar properti.
Contoh umum ini menunjukkan kapitalisasi dan tanda baca yang benar untuk dialog.
Untuk nama fitur dan teknologi, konservatif dalam memanfaatkan. Biasanya, hanya komponen utama yang harus dikapitalisasi (menggunakan kapitalisasi gaya judul).
Benar:
Analysis Services, kubus, dimensi
Analysis Services adalah komponen utama SQL Server, sehingga kapitalisasi gaya judul sesuai; kubus dan dimensi adalah elemen umum dari perangkat lunak analisis database, sehingga tidak perlu untuk memanfaatkannya.
Untuk nama fitur dan teknologi, konsisten dalam memanfaatkan. Jika nama muncul lebih dari sekali di layar UI, nama tersebut akan selalu muncul dengan cara yang sama. Demikian juga, di semua layar UI dalam program, nama harus disajikan secara konsisten.
Jangan kapitalisasi nama elemen antarmuka pengguna generik, seperti toolbar, menu, bilah gulir, tombol, dan ikon.
- Pengecualian: Bilah alamat, bilah Tautan.
Jangan gunakan semua huruf kapital untuk tombol keyboard. Sebagai gantinya, ikuti kapitalisasi yang digunakan oleh keyboard standar, atau huruf kecil jika tombol tidak diberi label pada keyboard.
Benar:
bilah spasi, Tab, Enter, Page Up, Ctrl+Alt+Del
Salah:
BILAH SPASI, TAB, ENTER, PG UP, CTRL+ALT+DEL
Jangan gunakan semua huruf kapital untuk penekanan. Studi telah menunjukkan bahwa ini sulit dibaca, dan pengguna cenderung menganggapnya sebagai "menjerit." Untuk peringatan, gunakan ikon peringatan dan penjelasan yang jelas tentang situasi tersebut. Tidak perlu menambahkan, misalnya, istilah PERINGATAN dalam semua huruf kapital.
Untuk informasi selengkapnya, lihat bagian "Teks" atau "Label" di panduan komponen UI tertentu.
Jangan mengkodekan format tanggal dan waktu secara permanen. Hormati pilihan opsi lokal dan kustomisasi pengguna untuk format tanggal dan waktu. Pengguna memilih ini di item panel kontrol Wilayah dan Bahasa.
Dalam contoh ini dari Microsoft Outlook, kedua format untuk tanggal panjang sudah benar. Mereka mencerminkan berbagai pilihan yang telah dibuat pengguna dalam item panel kontrol Wilayah dan Bahasa.
Gunakan format tanggal panjang untuk skenario yang mendapat manfaat dari memiliki informasi tambahan. Gunakan format tanggal pendek untuk konteks yang tidak memiliki ruang yang cukup untuk format panjang. Meskipun pengguna memilih informasi apa yang ingin mereka sertakan dalam format panjang dan pendek, desainer memilih format mana yang akan ditampilkan dalam program mereka berdasarkan skenario dan konteks.
Dalam contoh ini, format tanggal panjang membantu pengguna mengatur tugas dan tenggat waktu.
Globalisasi berarti membuat dokumen atau produk yang dapat digunakan di negara, wilayah, atau budaya apa pun. Pelokalan berarti menyesuaikan dokumen atau produk untuk digunakan di lokal selain negara/wilayah asal. Pertimbangkan globalisasi dan pelokalan saat menulis teks UI. Program Anda mungkin diterjemahkan ke dalam bahasa lain dan digunakan dalam budaya yang sangat berbeda dari bahasa Anda sendiri.
Untuk kontrol dengan konten variabel (seperti tampilan daftar dan tampilan pohon), pilih lebar yang sesuai untuk data terlama yang valid.
Sertakan ruang yang cukup di permukaan UI untuk tambahan 30 persen (hingga 200 persen untuk teks yang lebih pendek) untuk teks apa pun (tetapi bukan angka) yang akan dilokalkan. Terjemahan dari satu bahasa ke bahasa lain sering mengubah panjang baris teks.
Jangan menyusun string dari substring pada waktu proses. Sebagai gantinya, gunakan kalimat lengkap sehingga tidak ada ambiguitas untuk penerjemah.
Jangan gunakan kontrol subordinat, nilai yang dikandungnya, atau label unitnya untuk membuat kalimat atau frasa. Desain seperti itu tidak dapat dilokalkan karena struktur kalimat bervariasi menurut bahasa.
Salah:
Benar:
Dalam contoh yang salah, kotak teks ditempatkan di dalam label kotak centang.
Jangan hanya menjadikan bagian dari kalimat sebagai tautan, karena saat diterjemahkan, teks tersebut mungkin tidak tetap bersama. Oleh karena itu, teks tautan harus membentuk kalimat lengkap dengan sendirinya.
- Pengecualian: Tautan glosarium dapat disisipkan sebaris, sebagai bagian dari kalimat.
Untuk informasi selengkapnya, lihat Pusat Pengembang Go Global.
- Pilih teks bilah judul berdasarkan jenis jendela:
- Jendela program tingkat atas yang ber sentris dokumen: Gunakan format "nama program nama dokumen". Nama dokumen ditampilkan terlebih dahulu untuk memberikan nuansa yang ber sentris pada dokumen.
- Jendela program tingkat atas yang tidak ber sentris dokumen: Tampilkan nama program saja.
- Kotak dialog: Tampilkan perintah, fitur, atau program tempat kotak dialog berasal. Jangan gunakan judul untuk menjelaskan tujuan kotak dialog yang menjadi tujuan instruksi utama. Untuk panduan selengkapnya, lihat Kotak Dialog.
- Panduan: Menampilkan nama wizard. Perhatikan bahwa kata "wizard" tidak boleh disertakan dalam nama wizard. Untuk panduan selengkapnya, lihat Wizard.
- Untuk jendela program tingkat atas, jika keterangan dan ikon bilah judul ditampilkan secara menonjol di dekat bagian atas jendela, Anda dapat menyembunyikan keterangan dan ikon bilah judul untuk menghindari redundansi. Namun, Anda masih harus mengatur judul yang cocok secara internal untuk digunakan oleh Windows.
- Untuk kotak dialog, jangan sertakan kata "dialog" atau "kemajuan" dalam judul. Konsep-konsep ini tersirat dan meninggalkan kata-kata ini membuat judul lebih mudah dipindai pengguna.
Gunakan instruksi utama untuk menjelaskan secara ringkas apa yang harus dilakukan pengguna di jendela atau halaman tertentu. Instruksi utama yang baik mengkomunikasikan tujuan pengguna daripada hanya berfokus pada memanipulasi UI.
Ungkapkan instruksi utama dalam bentuk arah imperatif atau pertanyaan tertentu.
Salah:
Dalam contoh ini, instruksi utama hanya menyatakan nama program; ini tidak secara eksplisit mengundang tindakan yang harus diambil pengguna.
Pengecualian: Pesan kesalahan, pesan peringatan, dan konfirmasi dapat menggunakan struktur kalimat yang berbeda dalam instruksi utamanya.
Gunakan kata kerja tertentu jika memungkinkan. Kata kerja tertentu (contoh: menyambungkan, menyimpan, menginstal) lebih bermakna bagi pengguna daripada yang umum (contoh: mengonfigurasi, mengelola, mengatur).
Untuk halaman panel kontrol dan halaman wizard, jika Anda tidak dapat menggunakan kata kerja tertentu, Anda mungkin lebih suka menghilangkan kata kerja sepenuhnya.
Diterima:
Masukkan lokal, wilayah, dan bahasa Anda
Lebih:
Lokal, wilayah, dan bahasa
Untuk dialog, seperti pesan kesalahan dan peringatan, jangan hilangkan kata kerja.
Jangan merasa berkewajiban untuk menggunakan teks instruksi utama jika menambahkannya hanya akan berlebihan atau jelas dari konteks UI.
Dalam contoh ini, konteks UI sudah sangat jelas; tidak perlu menambahkan teks instruksi utama.
Ringkas gunakan hanya satu kalimat lengkap. Pare instruksi utama ke informasi penting. Jika Anda harus menjelaskan sesuatu lebih lanjut, pertimbangkan untuk menggunakan instruksi tambahan.
Gunakan kapitalisasi gaya kalimat.
Jangan sertakan periode akhir jika instruksi adalah pernyataan. Jika instruksi adalah pertanyaan, sertakan tanda tanya akhir.
Untuk dialog kemajuan, gunakan frasa gerund yang menjelaskan operasi yang sedang berlangsung secara singkat, diakhir dengan elipsis. Contoh: "Mencetak gambar Anda..."
Tips: Anda dapat mengevaluasi instruksi utama dengan membayangkan apa yang akan Anda katakan kepada teman saat menjelaskan apa yang harus dilakukan dengan jendela atau halaman. Jika merespons dengan instruksi utama akan menjadi tidak wajar, tidak membantu, atau canggung, lakukan ulang instruksi.
Untuk informasi selengkapnya, lihat bagian "Instruksi utama" di panduan komponen UI tertentu.
- Jika perlu, gunakan instruksi tambahan untuk menyajikan informasi tambahan yang berguna untuk memahami atau menggunakan jendela atau halaman, seperti:
- Memberikan konteks untuk menjelaskan mengapa jendela ditampilkan jika program atau sistem dimulai.
- Informasi yang memenuhi syarat yang membantu pengguna memutuskan cara bertindak berdasarkan instruksi utama.
- Menentukan terminologi penting.
- Jangan gunakan instruksi tambahan jika tidak diperlukan. Lebih suka mengomunikasikan semuanya dengan instruksi utama jika Anda dapat melakukannya dengan ringkas.
- Jangan ulangi instruksi utama dengan kata-kata yang sedikit berbeda. Sebagai gantinya, hilangkan instruksi tambahan jika tidak ada lagi yang perlu ditambahkan.
- Gunakan kalimat lengkap dan kapitalisasi gaya kalimat.
Beri label setiap kontrol atau grup kontrol. Pengecualian:
Kotak teks dan daftar drop-down dapat diberi label menggunakan perintah.
Kontrol pengungkapan progresif umumnya tidak berlabel.
Kontrol subordinat menggunakan label kontrol terkait. Kontrol putaran selalu kontrol bawahan.
Hilangkan label kontrol yang mengembalikan instruksi utama. Dalam hal ini, instruksi utama mengambil kunci akses.
Diterima:
Dalam contoh ini, label kotak teks hanyalah pemulihan dari instruksi utama.
Lebih:
Dalam contoh ini, label redundan dihapus, sehingga instruksi utama mengambil kunci akses.
Penempatan label:
- Balon, kotak centang, tombol perintah, kotak grup, tautan, tab, dan tips diberi label langsung oleh kontrol itu sendiri.
- Daftar drop-down, kotak daftar, tampilan daftar, bilah kemajuan, penggeser, kotak teks, dan tampilan pohon diberi label di atas, bersihkan kiri, atau ke kiri.
- Kontrol pengungkapan progresif biasanya tidak berlabel. Tombol Chevron diberi label di sebelah kanan.
Tetapkan kunci akses unik untuk setiap kontrol interaktif kecuali untuk tautan. Untuk informasi selengkapnya, lihat Keyboard.
Jaga agar label tetap singkat. Namun, perhatikan bahwa menambahkan satu atau dua kata ke label dapat membantu kejelasan, dan terkadang menghilangkan kebutuhan akan penjelasan tambahan.
Lebih suka label tertentu daripada label generik. Idealnya pengguna tidak perlu membaca hal lain untuk memahami label.
Salah:
Benar:
Dalam contoh yang benar, label tertentu digunakan untuk tombol penerapan.
Untuk daftar label, seperti tombol radio, gunakan pembuatan frasa paralel, dan coba pertahankan panjangnya hampir sama untuk semua label.
Untuk daftar label, fokuskan teks label pada perbedaan di antara opsi. Jika semua opsi memiliki teks pengantar yang sama, pindahkan teks tersebut ke label grup.
Salah:
Benar:
Contoh yang benar memindahkan frasa pengantar yang identik ke label, sehingga dua opsi lebih dibedakan dengan lebih bersih.
Secara umum, lebih suka pembuatan frasa positif. Misalnya, gunakan lakukan alih-alih tidak, dan beri tahu alih-alih tidak memberi tahu.
- Pengecualian: Label kotak centang, "Jangan tampilkan pesan ini lagi," banyak digunakan.
Hilangkan kata kerja instruksional yang berlaku untuk semua kontrol jenis yang diberikan. Sebaliknya, fokuskan label pada apa yang unik tentang kontrol. Misalnya, itu berjalan tanpa mengatakan bahwa pengguna perlu mengetik ke dalam kontrol kotak teks atau bahwa pengguna perlu mengklik tautan.
Salah:
Benar:
Dalam contoh yang salah, label kontrol memiliki kata kerja instruksional yang berlaku untuk semua kontrol jenisnya.
Dalam beberapa kasus, anotasi tanda kurung berikut untuk mengontrol label mungkin berguna:
- Jika opsi bersifat opsional, pertimbangkan untuk menambahkan "(opsional)" ke label.
- Jika opsi sangat disarankan, tambahkan "(disarankan)" ke label. Melakukannya berarti pengaturan bersifat opsional, tetapi tetap harus diatur.
- Jika opsi hanya ditujukan untuk pengguna tingkat lanjut, pertimbangkan untuk menambahkan "(tingkat lanjut)" ke label.
Anda dapat menentukan unit (detik, koneksi, dan sebagainya) dalam tanda kurung setelah label.
Contoh ini menunjukkan bahwa satuan pengukuran adalah megabyte (MB).
Untuk informasi selengkapnya, lihat bagian "Teks" atau "Label" di panduan komponen UI tertentu.
Gunakan penjelasan tambahan ketika kontrol memerlukan lebih banyak informasi daripada yang dapat disampaikan oleh label mereka. Tetapi jangan gunakan penjelasan tambahan jika seseorang tidak perlu lebih suka mengomunikasikan semuanya dengan label kontrol jika Anda dapat melakukannya dengan ringkas. Biasanya, penjelasan tambahan digunakan dengan tautan perintah, tombol radio, dan kotak centang.
Jika perlu, gunakan tebal di label kontrol untuk membuat teks lebih mudah dipindai ketika ada penjelasan tambahan.
Dalam contoh ini, label tombol radio berani untuk membuatnya lebih mudah dipindai.
Menambahkan penjelasan tambahan ke satu kontrol dalam grup tidak berarti bahwa Anda harus memberikan penjelasan untuk semua kontrol lain dalam grup. Berikan informasi yang relevan dalam label jika Anda dapat dan menggunakan penjelasan hanya jika diperlukan. Tidak memiliki penjelasan tambahan yang hanya mengembalikan label untuk konsistensi.
Dalam contoh ini, dua kontrol dalam grup menyertakan penjelasan tambahan, tetapi yang ketiga tidak.
Jika penjelasan tambahan mengikuti tautan perintah, tulis teks tambahan di orang kedua.
Contoh: Tautan perintah: Buat pengaturan jaringan nirkabel dan simpan ke USB flash drive
Penjelasan tambahan: Ini akan membuat pengaturan yang dapat Anda transfer ke router dengan USB flash drive. Lakukan ini hanya jika Anda memiliki perute nirkabel yang mendukung konfigurasi usb flash drive.
Gunakan kalimat lengkap dan tanda baca akhir.
Tabel berikut ini memperlihatkan label tombol penerapan yang paling umum dan penggunaannya.
Label tombol | Waktu menggunakan |
---|---|
OK |
|
Ya/Tidak |
Ya adalah respons afirmatif terhadap pertanyaan ya atau tidak, sedangkan Tidak adalah respons negatif. |
Batalkan |
|
Tutup |
Tutup jendela. Setiap perubahan atau efek samping tidak dibuang. |
Stop |
Hentikan tugas yang sedang berjalan dan tutup jendela. Setiap pekerjaan yang sedang berlangsung atau efek samping tidak dibuang. |
Terapkan |
Di lembar properti pemilik: terapkan perubahan yang tertunda (dibuat sejak jendela dibuka atau terakhir Diterapkan), tetapi biarkan jendela terbuka. Melakukannya memungkinkan pengguna untuk mengevaluasi perubahan sebelum menutup lembar properti. Dalam lembar properti yang dimiliki: jangan gunakan. |
Berikutnya |
Dalam panduan dan tugas multi-langkah: lanjutkan ke langkah berikutnya tanpa menerapkan tugas. |
Menyelesaikan |
Di wizard dan tugas multi-langkah: tutup jendela. Jika tugas belum dilakukan, lakukan tugas. Jika tugas tersebut telah dilakukan, perubahan atau efek samping apa pun tidak dibuang.
|
Dilakukan |
Tidak berlaku. |