UX Writing & Microcopy — UI/UX

UX Writing — Kata-kata Kecil, Dampak Besar Bad vs good microcopy: generic labels on the left, specific and user-friendly labels on the right.SubmitError: 500❌…

Microcopy adalah teks-teks kecil di UI: label tombol, pesan error, teks bantuan di bawah kolom, empty state, catatan pendek. UX writing adalah pekerjaan memilih kata-kata itu, supaya orang bisa bertindak tanpa harus bertanya. Bayangin papan tulis kecil di dekat pintu homestay Bu Sri. Kalau tulisannya "Info sarapan: hubungi resepsionis", tiap tamu tetap mengetuk pintu Bu Sri. Kalau tulisannya "Sarapan 07.00 sampai 09.00 di teras", gak ada yang perlu bertanya. Microcopy bekerja persis begitu: tiap kalimat kecil di halaman menjawab satu pertanyaan sebelum tamu mengetiknya di WhatsApp.

🧪 Tebakan cepat: Catatan di halaman pesan Bu Sri berbunyi "Gratis batal sampai 3 hari sebelum check-in." Pak Hadi check-in 12 Des pukul 14.00, lalu membatalkan 9 Des pukul 20.00. Gratis atau gak? Jawabannya ada di bagian "Catatan batal: tulis tanggalnya".

Sumbernya: 40 chat tamu

Microcopy yang baik gak ditulis dari kepala. Di pelajaran design process, Bu Sri menghitung 40 chat tamu di WhatsApp. Itu bahan UX writing yang paling jujur: pertanyaan yang benar-benar diketik tamu, dengan kata-kata tamu sendiri.

Pertanyaan tamu Jumlah Dijawab oleh microcopy
"Tanggal segini kosong?" 14 empty state: "Kamar Teras penuh 24 Des. Masih kosong mulai 27 Des."
"Totalnya berapa?" 11 baris di atas tombol: "Total 2 malam: Rp 700.000"
"Bisa batal gak?" 8 catatan: "Gratis batal sampai 9 Des pukul 14.00."
"Bayarnya gimana?" 7 label tombol: "Pesan kamar, bayar di tempat"

Perhatikan katanya. Tamu menulis "kosong", bukan "ketersediaan". "Batal", bukan "pembatalan reservasi". "Bayar di tempat", bukan "metode pembayaran". Heuristik nomor 2 dari Jakob Nielsen (10 Usability Heuristics for User Interface Design) meminta hal yang sama: pakai kata, frasa, dan konsep yang dikenal pengguna, bukan istilah internal. Panduan menulis GOV.UK ("Use clear language") memberi cara mengeceknya: lihat kata apa yang dipakai orang saat mencari atau bertanya.

Label tombol: bilang apa yang terjadi

Label tombol menjawab satu pertanyaan: kalau ditekan, apa yang terjadi? Mulai dengan kata kerja, lalu bendanya.

Kurang jelas Lebih jelas Kenapa
Submit Pesan kamar, bayar di tempat bilang aksinya, dan menjawab 7 chat "Bayarnya gimana?"
Proses reservasi Pesan kamar "proses" dan "reservasi" adalah kata sistem
Batal / Ya, pesan (di dialog konfirmasi) Kembali / Ya, pesan kamar di halaman ini "batal" sudah berarti membatalkan pesanan

Baris terakhir sering terlewat. Di bawah dialog tertulis "Gratis batal sampai...", jadi tombol "Batal" di dialog bisa dibaca "batalkan pesananku". Tombol itu cuma menutup dialog, jadi labelnya "Kembali". Aturannya: satu kata untuk satu arti di seluruh halaman. Kalau aksinya "Pesan", jangan sebut "Booking" di satu tempat dan "Reservasi" di tempat lain.

Pesan error: apa yang salah + cara memperbaiki

Rumus pesan error yang baik: apa yang salah + cara memperbaikinya. Ini error untuk nomor WhatsApp yang kurang digit, 0812 345:

Versi Kata per kalimat Masalahnya
"Input tidak valid." 3 gak bilang apa yang salah, gak bilang yang benar
"Error 422: format nomor telepon tidak sesuai." 7 kode error dan kata sistem
"Nomor ini 7 digit. Nomor HP diawali 08 dan panjangnya 10 sampai 13 digit." 4 + 10 apa yang salah (7 digit), lalu cara memperbaikinya

"Input tidak valid" pendek, tapi tidak actionable: tamu gak bisa bertindak berdasarkan pesan itu, karena dia gak tahu kenapa nomornya ditolak dan nomor seperti apa yang diterima. Panduan Nielsen Norman Group ("Error-Message Guidelines", Tim Neusesser dan Evan Sunwall, 2023) menambahkan dua hal: hindari kata yang menyalahkan pengguna seperti invalid, illegal, incorrect, dan sembunyikan kode error kecuali untuk teknisi. WCAG juga memintanya: 3.3.1 (Error Identification) menyebut apa yang salah dalam teks, 3.3.3 (Error Suggestion) memberi saran perbaikan kalau saran itu diketahui.

Error terbaik adalah yang gak pernah muncul. Teks bantuan "Contoh: 0812 3456 7890" di bawah kolom sudah menjawab "formatnya gimana?" sebelum tamu salah ketik.

Empty state: apa yang kosong + kenapa + apa yang bisa dilakukan

Empty state adalah tampilan saat datanya memang gak ada. Rumusnya: apa yang kosong + kenapa + apa yang bisa dilakukan. Untuk 24 Des, saat Kamar Teras penuh:

Versi Yang didapat tamu
"Tidak ada data." gak tahu apa yang kosong, gak tahu harus ke mana
"Ketersediaan kamar: 0." tahu penuh, tapi tetap harus bertanya "kapan kosong?"
"Kamar Teras penuh 24 Des. Masih kosong mulai 27 Des." + tombol "Lihat 27 Des" apa yang kosong, sampai kapan, dan langkah berikutnya

Ini sejalan dengan tiga pedoman NN/g (Kate Kaplan, "Designing Empty States in Complex Applications: 3 Guidelines", 2021): beri tahu keadaan sistem, beri petunjuk, dan sediakan jalan langsung ke tugas berikutnya. Tombol "Lihat 27 Des" adalah jalan itu.

Catatan batal: tulis tanggalnya

"3 hari sebelum check-in" bisa berarti sampai 9 Des pukul 14.00, sepanjang 9 Des, atau sampai 8 Des. Kalimatnya gak bisa menjawab, jadi Pak Hadi harus menebak atau mengirim chat ke-41. Jadi jawaban tebakannya: gak bisa dipastikan dari kalimatnya. Itu jawaban tebakannya.

Menulis microcopy yang pasti memaksa aturannya diputuskan dulu. Bu Sri memutuskan: batasnya tepat 3 hari sebelum jam check-in. Halaman yang menghitung, bukan tamu:

<p class="note" id="note">Gratis batal sampai 3 hari sebelum check-in.</p>

<script>
  const CHECK_IN = new Date(2026, 11, 12, 14, 0);   // 12 Des 2026 pukul 14.00 (bulan dihitung dari 0)
  const batas = new Date(CHECK_IN);
  batas.setDate(batas.getDate() - 3);                 // mundur 3 hari: 9 Des pukul 14.00
  const tanggal = batas.toLocaleDateString("id-ID", { day: "numeric", month: "short" }); // "9 Des"
  document.querySelector("#note").textContent = `Gratis batal sampai ${tanggal} pukul 14.00.`;
</script>

Register dan panjang kalimat

Register adalah tingkat keakraban bahasa. Di bahasa Indonesia, pilihan utamanya "kamu" (akrab) atau "Anda" (sopan, ditulis dengan A besar menurut EYD). Tamu Bu Sri ada yang seumur Pak Hadi (58), jadi Bu Sri memilih "Anda" di tempat yang memang butuh kata ganti. Yang lebih penting dari pilihannya: satu register di seluruh halaman. Pesan offline lama, "Kamu sedang offline. Pesananmu belum terkirim; ...", bertabrakan dengan register itu.

Cara paling gampang: tulis tanpa kata ganti. "Koneksi internet terputus. Pesanan belum terkirim; sambungkan internet, lalu tekan Pesan lagi." Sama panjangnya (3 + 9 kata), dan gak perlu memilih kamu atau Anda.

Panjang kalimat bisa diukur. GOV.UK menyarankan memecah kalimat yang lebih dari 25 kata. Microcopy biasanya jauh di bawah itu, tapi gaya "surat resmi" gampang kebablasan:

"Mohon maaf, saat ini sistem kami tidak dapat memproses permintaan reservasi Anda dikarenakan nomor telepon yang Anda masukkan tidak memenuhi format yang telah ditentukan oleh sistem kami."

Satu kalimat, 27 kata, dan tetap gak bilang nomor seperti apa yang benar. Versi 4 + 10 kata di atas memberi lebih banyak, dengan setengah panjangnya. Uji terakhirnya murah: baca keras-keras. Kalau kamu gak akan mengucapkannya ke tamu di depan pintu, tulis ulang.

⚠️ Jebakan yang sering ketemu

TL;DR: Microcopy (label tombol, error, teks bantuan, empty state, catatan) menjawab pertanyaan sebelum ditanyakan; ambil pertanyaan dan katanya dari pengguna, seperti 40 chat tamu Bu Sri (14 tanggal kosong, 11 total, 8 batal, 7 bayar). Label tombol mulai dengan kata kerja dan bilang apa yang terjadi ("Pesan kamar, bayar di tempat", bukan "Submit"), satu kata untuk satu arti ("Kembali", bukan "Batal", di dialog). Error = apa yang salah + cara memperbaiki; "Input tidak valid" gak actionable dan menyalahkan (NN/g 2023, WCAG 3.3.1 dan 3.3.3). Empty state = apa yang kosong + kenapa + apa yang bisa dilakukan, dengan tombol langkah berikutnya. Tulis tanggal pasti ("Gratis batal sampai 9 Des pukul 14.00"), bukan hitungan yang dikerjakan tamu. Satu register di seluruh halaman, atau tanpa kata ganti; pecah kalimat di atas 25 kata, dan baca keras-keras.

Yang akan kamu pelajari