Belajar UI/UX Design - Microcopy & Content UX

#Pendahuluan

Setelah di episode 18 kita merancang kepercayaan, pada episode ini kita membahas senjata terhalusnya: kata-kata. Microcopy adalah semua teks kecil yang menyertai antarmuka — label tombol, pesan error, empty state, instruksi. Ia tampak sepele, tapi menentukan apakah pengguna mengerti, percaya, dan bertindak.

Mengapa penting? Bahasa adalah bagian dari desain. Tombol "Simpan" vs "Simpan Draft" mengubah ekspektasi pengguna. Pesan "Terjadi kesalahan" vs "Transaksi belum tersimpan, coba lagi" mengubah emosi. Bu Sari yang tak terbiasa dengan jargon teknologi butuh microcopy yang berbicara bahasanya.

#Button Label: Aksi yang Jelas

Label tombol harus menjelaskan apa yang terjadi saat diklik — bukan apa yang sedang dilihat:

Aturan label aksi:

• Mulai dengan kata kerja ("Buat", "Cek", "Hapus").
• Spesifik tentang hasil — pengguna tahu konsekuensi sebelum klik.
• Jangan label ganda: dua tombol "Simpan" di layar yang sama membuat kebingungan.
• Untuk aksi destruktif, sertakan objeknya: "Hapus Produk" bukan "Hapus".

#Error Message: Memberi Jalan Keluar

Error yang baik punya tiga bagian: apa yang salah, mengapa (bila perlu), dan apa yang harus dilakukan:

❌ "Gagal menyimpan transaksi."
✅ "Transaksi belum tersimpan karena koneksi putus.
     Cek jaringanmu, lalu ketuk 'Coba Lagi'."

Prinsip menulis error:

• Tunjukkan empati, jangan menyalahkan: bukan "Kamu salah isi", tapi "Isian harga belum lengkap".
• Sertakan solusi atau aksi pemulihan (retry, alternatif).
• Bahasa manusia: bukan "400 Bad Request", tapi "Data transaksi tidak valid, periksa kembali".
• Tepat waktu & dekat konteks: error muncul di tempat kejadian, bukan di pojok layar yang tidak terhubung.

#Empty State: Kesempatan Pertama

Empty state adalah momen pertama pengguna melihat fitur — ini kesempatan membangun kebiasaan. Formulanya: situasi → alasan → aksi (dari episode 10):

┌────────────────────────────────┐
│        [ 📊 ikon rekap ]          │
│   Belum ada transaksi hari ini   │  situasi
│   Rekap otomatis muncul di sini  │  alasan
│   setelah transaksi pertama.     │
│   [ Mulai Transaksi ]            │  aksi
└────────────────────────────────┘

Hindari empty state kosong semantik seperti "Tidak ada data." — ia tidak menjelaskan apa-apa dan membuat pengguna berhenti.

#Onboarding Copy: Membimbing tanpa Menghakimi

Onboarding adalah orientasi pertama — tujuannya memulai dengan sukses kecil, bukan menyusun tutorial panjang. Prinsipnya:

• Hanya 3-4 langkah; jangan keranjang tutorial.
• Fokus pada satu aksi awal yang membuat pengguna menang (misal transaksi pertama).
• Bahasa dorongan, bukan perintah: "Mulai catat penjualan pertamamu" bukan "Daftar produk wajib diisi".
• Jangan meminta data sebelum memberi nilai — tunda permintaan izin & data sampai dibutuhkan.

#Tone of Voice

Tone of voice adalah kepribadian produk yang konsisten di semua teks. Untuk KasirKita, definisikan:

kepribadian: membantu, sederhana, tepercaya
gaya: kalimat pendek, bahasa sehari-hari santun, minim jargon
sapa: "kamu" (personal) atau netral
contoh_baik: "Transaksimu tersimpan. Selamat melayani!"
contoh_buruk: "Operasi berhasil dieksekusi."
aturan_emas: kalau ragu, pakai kalimat paling sederhana yang tetap santun

Konsistensi tone membangun kepercayaan — pengguna belajar bahwa "produk ini berbicara dengan jujur dan jelas". Sebaliknya, tone yang berganti-ganti (formal di sini, bercanda di sana) membuat produk terasa tidak solid.

#Praktik: Audit & Tulis Ulang Microcopy

1. Audit semua teks di prototype KasirKita: label tombol, error, empty state, onboarding, notifikasi.
2. Kategorikan masalah: label ambigu, error tanpa solusi, empty state tanpa aksi, tone tidak konsisten.
3. Tulis ulang 10 contoh terburuk mengikuti prinsip di atas.
4. Uji: tanpa melihat layar, mintalah teman menebak hasil aksi tiap tombol — jika tebakan berbeda dari kenyataan, label perlu diperbaiki.
5. Catat perubahan di halaman "Copy" design system.

#Common Pitfalls

• Tombol label kriptik ("Submit", "Proceed") yang tidak menjelaskan hasil.
• Error tanpa solusi — menceritakan masalah tanpa memberi jalan keluar.
• Empty state datar — "Tidak ada data" tanpa alasan & aksi.
• Onboarding panjang — tutorial 10 langkah membuat pengguna menyerah sebelum mulai.
• Tone tidak konsisten — produk terasa tidak solid dan tidak tepercaya.

#Penutup

Pada episode 19 ini, kalian telah menguasai microcopy dan content UX untuk KasirKita.

Inti yang harus dibawa pulang:

• Button label menjelaskan hasil aksi: kata kerja + objek + hasil spesifik.
• Error message = apa yang salah + mengapa + jalan keluar, dengan empati.
• Empty state = situasi + alasan + aksi; ini momen pertama yang menentukan kebiasaan.
• Onboarding singkat, berorientasi aksi kecil yang sukses, dan tidak menanyakan data sebelum memberi nilai.
• Tone of voice yang konsisten disimpan sebagai bagian dari design system.

Di episode 20 selanjutnya kita akan menuntaskan bahasa antarmuka di momen tidak ideal: error, empty & recovery states — 404, empty state, loading/skeleton, dan pola pemulihan undo/retry untuk KasirKita. Sampai jumpa di episode 20!