Belajar UI Designer - Localization & Internationalization

#Pendahuluan

Setelah di episode 19 privasi dihormati, pada episode ini kita melihat lebih luas: antarmuka yang siap mendunia. Indonesia adalah pasar besar, tapi produk yang baik dirancang agar bisa menjangkau lebih jauh — dan itu berarti desain harus toleran terhadap bahasa dan budaya yang berbeda dari asal produk.

Mengapa i18n/l10n masuk keterampilan UI designer? Karena text expansion dan arah bahasa adalah masalah layout murni: terjemahan Jerman yang 40% lebih panjang membuat tombol meledak, bahasa Arab yang ditulis dari kanan membuat seluruh struktur grid terbalik. Kalau desain tidak dirancang toleran sejak awal, melebarkan produk ke pasar baru berarti mendesain ulang, bukan sekadar menerjemahkan.

#Text Expansion: Teks yang Memanjang

Aturan praktis industri: terjemahan bisa lebih panjang 30-40% dari bahasa sumber (bahasa Inggris ringkas; Jerman, Finlandia, atau Spanyol lebih panjang). Desain yang tidak toleran akan patah:

ID   : "Simpan"            → tombol pendek
EN   : "Save changes"      → masih pas
DE   : "Änderungen speichern" → meledak!  (30%+ lebih panjang)

Prinsip desain yang tahan ekspansi:

• Auto layout + Hug — tombol melebar mengikuti label (episode 6), bukan ukuran tetap.
• Ruang cadangan — beri ruang kosong 30-40% pada elemen berlabel.
• Tanpa hardcoded width — kolom tabel dan kartu tidak punya lebar mati.
• Wrap yang dikelola — teks boleh turun baris secara wajar; uji pada konten terpanjang.

#RTL: Bahasa Kanan-ke-Kiri

Bahasa seperti Arab dan Ibrani ditulis kanan-ke-kiri (RTL). Konsekuensinya bukan sekadar "teks rata kanan" — seluruh layout dicerminkan:

• Grid mengalir dari kanan — kolom pertama di kanan; margin kanan = margin kiri versi LTR.
• Ikon & panah dibalik — ikon "next" menghadap kiri; ikon back menghadap kanan.
• Progress & waktu — progress bar mengisi dari kanan; timeline berjalan kanan-ke-kiri.
• Navigation — back button di sisi kanan.

Prinsip desain yang benar: jangan mendesain ulang per bahasa, tetapi pastikan layout logis mengikuti direction — Auto layout dan grid harus bisa "bercermin". Di Figma, gunakan constraints dan periksa struktur; jangan hardcode posisi absolut.

LTR:  [ Menu ][ Saldo ][ + Tambah ]   → ikon panah →
RTL:  ← [ Menu ][ Saldo ][ + Tambah ] ← panah dibalik

Uji cepat: apakah layar masih masuk akal jika seluruh urutan horizontal dibalik? Jika jawabannya ya, desain kalian "direction-agnostic".

#Angka, Mata Uang, dan Tanggal

Elemen data yang paling sering bocor saat lokalisasi:

• Mata uang — format, simbol, dan posisi berbeda: Rp 25.000, $25.00, 25 €. Simbol tidak selalu di depan.
• Tanggal — 08/16/2026 (AS) vs 16/08/2026 (ID/EU) vs kalender lain.
• Angka — pemisah ribuan & desimal berbeda: 2.450.000,50 (ID) vs 2,450,000.50 (EN-US).
• Format angka — dalam aplikasi keuangan seperti Kantongin, format lokal adalah bagian dari desain: jangan hardcode pola "Rp X" di dalam desain; gunakan placeholder/format sistem.

Untuk UI, desainlah dengan placeholder netral (misal 2,450,000.50) dan tandai bahwa format mengikuti lokal pengguna — bukan menempelkan format Indonesia di semua pasar.

#Pertimbangan Budaya

Lokalisasi melampaui teks — ia soal makna:

• Warna — makna warna berbeda lintas budaya: putih bisa berarti kematian (di beberapa budaya Asia Timur), hijau bukan selalu positif.
• Ikon & simbol — ikon "keranjang belanja" yang wajar di satu pasar bisa asing di pasar lain; gesture tertentu bisa menyinggung.
• Konvensi interaksi — misal perilaku back, gesture swipe, dan layout form yang sudah biasa bagi pengguna lokal.
• Nama & data — form nama yang "nama depan + nama belakang" tidak berlaku untuk semua budaya; sediakan fleksibilitas.

#Lokalisasi sebagai Keputusan Desain Awal

Keputusan paling murah diambil di awal: berasumsi produk akan dilokalkan. Praktiknya:

• Auto layout dan fluid dari episode 5-6 (bukan koordinat mati).
• Placeholder format data (mata uang, tanggal) — bukan teks final.
• Ikon yang tidak bergantung kata (dengan label teks saat perlu).
• Glosarium istilah sejak awal — terjemahan konsisten lebih mudah dijaga.

Menambahkan toleransi lokalisasi setelah ratusan layar mati adalah proyek besar; membangunnya sejak episode 5 hampir gratis.

#Praktik: Kesiapan Kantongin

1. Stress test: ganti semua label dengan placeholder terpanjang di satu layar (form transaksi). Catat elemen yang pecah.
2. Cek format data: tandai semua tempat yang menampilkan mata uang/tanggal — pastikan desainnya memakai placeholder format.
3. Simulasikan RTL: bayangkan layout beranda dicerminkan — adakah elemen yang "nyangkut" (ikon panah, progress, kolom)?
4. Audit ikon & warna dari sudut budaya untuk pasar target.
5. Dokumentasikan asumsi lokalisasi di halaman Spec.

#Common Pitfalls

• Tombol ukuran tetap — terjemahan panjang meledak; pakai Auto layout Hug.
• Hardcode format mata uang — desain menempel "Rp"; format harus ikut lokal.
• Ikon & layout tidak direction-agnostic — RTL butuh desain ulang total.
• Hanya menerjemahkan label — konteks budaya dan panjang teks diabaikan.
• Menunda lokalisasi — menunda berarti membangun ulang ratusan layar nanti.

#Penutup

Pada episode 20 ini, kalian telah merancang Kantongin yang siap menjangkau pasar internasional.

Inti yang harus dibawa pulang:

• Text expansion 30-40% ditangani dengan Auto layout, ruang cadangan, dan tanpa lebar mati.
• RTL berarti layout dicerminkan — desain direction-agnostic, bukan hardcode posisi.
• Format data (mata uang, tanggal, angka) mengikuti lokal, bukan menempel pola asal.
• Budaya memengaruhi warna, ikon, dan konvensi — lokalisasi lebih dari sekadar terjemahan.

Di episode 21 selanjutnya kita akan membahas AI dalam UI design workflow — Figma AI, AI ideation, dan exploration yang dihasilkan AI untuk mempercepat proses desain Kantongin. Sampai jumpa di episode 21!