Tips kecil desain UI yang memberi dampak besar

• Desain UI bisa ditingkatkan lebih cepat dan lebih terprediksi dengan menerapkan aturan logis yang konsisten saat mengambil keputusan tentang tata letak/jarak/tipografi/warna, dibanding mengandalkan selera artistik
• Dasarnya adalah mengelompokkan elemen terkait dengan ruang kosong, memakai bentuk yang sama untuk fungsi yang sama, serta membangun hierarki visual yang jelas lewat ukuran/warna/kontras/posisi
• Kurangi warna dekoratif dan border yang tidak perlu, dan gunakan warna secara selektif untuk menyampaikan apakah sesuatu bisa diinteraksikan seperti tautan dan tombol
• Sesuai standar WCAG 2.1 AA, elemen UI harus memiliki rasio kontras minimal 3:1, dan teks kecil minimal 4.5:1, serta perlu memberi petunjuk selain warna seperti garis bawah atau bentuk
• Gunakan satu typeface sans-serif dengan fokus pada bobot regular/bold, lalu terapkan x-height besar/sentence case/rata kiri/line-height 1.5 atau lebih agar keterbacaan dan konsistensi meningkat

---

Cara meningkatkan UI dengan aturan logis

• Desain UI mudah menjadi kompleks karena harus mempertimbangkan bukan hanya layout/jarak/tipografi/warna, tetapi juga kegunaan/aksesibilitas/psikologi
• Daripada memindahkan elemen berdasarkan intuisi sambil mencari tampilan yang enak dilihat, menerapkan sistem aturan yang bisa digunakan ulang memungkinkan pengambilan keputusan yang lebih cepat dan berdasar
• Layar detail akomodasi sewa jangka pendek digunakan sebagai contoh untuk memperbaiki tampilan awal yang rumit dan sulit dipakai secara bertahap
• Tujuannya bukan menambahkan dekorasi brand, melainkan lebih dulu memastikan intuisi, aksesibilitas, dan kualitas visual dasar

1. Kelompokkan elemen terkait dengan ruang kosong

• Jika informasi dibagi menjadi kelompok-kelompok kecil yang saling terkait, struktur layar akan lebih cepat dipahami dan diingat
• Ada empat cara untuk mengelompokkan elemen
  • Menempatkannya dalam container yang sama
  • Memperkecil jarak antar elemen yang saling terkait
  • Menampilkannya dengan bentuk yang mirip
  • Menyelaraskannya mengikuti garis yang berkesinambungan
• Container adalah petunjuk pengelompokan yang paling kuat, tetapi bisa menambah dekorasi yang tidak perlu di layar
• Ruang kosong dan alignment adalah cara yang lebih halus sekaligus menjaga layar tetap sederhana
• Dalam contoh, jarak antar konten diperbesar untuk membedakan kelompok informasi yang berbeda dengan jelas

2. Jaga bentuk dan perilaku tetap konsisten

• Elemen yang mirip harus terlihat dan bekerja serupa, bukan hanya di dalam produk, tetapi juga dibandingkan dengan produk lain yang sudah familier
• Perilaku yang dapat diprediksi mengurangi kebutuhan pengguna untuk mempelajari cara pakai dari awal setiap saat dan menurunkan kemungkinan kesalahan
• Pada contoh, ikon berisi penuh dan ikon outline bercampur, sehingga ikon berisi penuh bisa disalahartikan sebagai status terpilih
  • Semua ikon diseragamkan dengan sudut membulat dan outline 2pt agar bobot visualnya seimbang
  • Label teks ditambahkan untuk pengguna yang sulit memahami makna ikon saja dan untuk pengguna screen reader
• Elemen dengan bentuk yang sama akan diasumsikan bekerja dengan cara yang sama, jadi jika fungsinya berbeda, perlakuan visualnya juga harus berbeda
• Dalam contoh, container ikon yang tidak interaktif terlihat seperti tombol Book now, sehingga warna biru dan gaya tombol dihapus

3. Buat hierarki visual yang jelas

• Tidak semua informasi memiliki tingkat kepentingan yang sama, sehingga elemen yang penting harus dibuat lebih menonjol
• Dengan mengatur ukuran/warna/rasio kontras/jarak/posisi/kedalaman, pengguna bisa memindai layar dengan cepat dan menemukan area yang relevan
• Squint Test adalah cara memeriksa apakah elemen penting dan fungsi layar tetap terlihat saat mata disipitkan atau layar dibuat kabur
• Pada tampilan awal, banyak elemen bersaing dengan kekuatan visual yang mirip, sementara tombol aksi utama di kiri bawah hampir tidak terlihat
• Tombol utama diubah menjadi elemen paling menonjol di layar dengan memberi warna latar berkontras tinggi dan huruf tebal
• Deskripsi isi terlalu ditegaskan dibanding tingkat kepentingannya, sehingga warna dan tipografinya kemudian disesuaikan untuk menurunkan hierarkinya

4. Hapus dekorasi yang tidak perlu

• Garis/warna/latar/animasi yang tidak menyampaikan makna atau mengelompokkan elemen dapat mengalihkan perhatian dan meningkatkan beban kognitif
• Ruang kosong putih dan border di sekitar gambar contoh dihapus karena tidak diperlukan untuk menyampaikan informasi
• Dengan mengurangi elemen dekoratif, layar menjadi lebih sederhana dan lebih mudah difokuskan pada informasi serta tindakan utama

5. Beri peran yang jelas pada warna

• Lebih aman menggunakan warna secara terbatas untuk menyampaikan makna daripada sebagai dekorasi
• Pendekatan yang efektif adalah memulai dari hitam-putih lalu menambahkan warna hanya di tempat yang diperlukan
• Jika warna brand diterapkan pada elemen interaktif seperti tautan teks dan tombol, akan lebih mudah mengajarkan apa yang bisa diklik
• Pada elemen seperti kartu yang bentuknya sendiri sudah menunjukkan kemungkinan interaksi, warna tidak selalu perlu ditambahkan
• Judul biru dan rating bintang pada contoh adalah elemen noninteraktif, tetapi terlihat seolah bisa diklik, sehingga warnanya dihapus
• Hasilnya, perbedaan antara elemen interaktif dan informasi biasa menjadi lebih jelas

6. Terapkan rasio kontras 3:1 atau lebih pada elemen UI

• Rasio kontras menyatakan perbedaan kecerahan yang dirasakan antara dua warna dalam skala 1:1 hingga 21:1
• Dalam standar WCAG 2.1 AA, elemen UI seperti field formulir/ikon/tombol memerlukan rasio kontras minimal 3:1
• Panah di atas foto pada contoh bisa sulit terlihat tergantung gambar latarnya
  • Ikon abu-abu dan latar putih tidak transparan diterapkan agar rasio kontras terjaga terlepas dari foto
  • Saat container latar ditambahkan, area yang bisa ditekan juga menjadi lebih besar dan jelas
• Tombol utama pada tampilan awal juga kurang kontras terhadap latarnya sehingga pengguna low vision sulit membedakan bentuk tombol
• Dengan menaikkan rasio kontras tombol ke 3:1 atau lebih, aksesibilitas dan hierarki visual sama-sama membaik
• Rasio kontras bisa diukur dengan WebAIM Contrast Checker atau Contrast Figma plugin

7. Terapkan rasio kontras yang cukup pada teks

• Standar WCAG 2.1 AA menuntut rasio kontras yang berbeda tergantung ukuran dan bobot teks
  • Teks kecil berukuran 18px ke bawah memerlukan minimal 4.5:1
  • Teks tebal di atas 18px atau teks regular di atas 24px memerlukan minimal 3:1
• Penanda jumlah foto kurang kontras terhadap latar, sehingga opasitas container abu-abu ditingkatkan dan bayangan teks ditambahkan
• Teks lokasi terlalu terang dan bobot hurufnya juga terlalu tipis, sehingga diubah menjadi abu-abu yang lebih gelap
• Meski memenuhi standar rasio kontras, font yang terlalu tipis tetap bisa sulit dibaca, jadi bobotnya juga harus disesuaikan secara terpisah

8. Jangan bedakan status hanya dengan warna

• Pengguna dengan gangguan penglihatan warna bisa kesulitan membedakan kombinasi warna tertentu atau bahkan tidak mengenali warna itu sendiri
• Makna/status/kemungkinan interaksi tidak boleh disampaikan hanya lewat warna
• Tautan Reviews pada contoh tidak bisa dibedakan dari teks biasa jika warna birunya dihapus
• Dengan menambahkan garis bawah, tautan tetap bisa dikenali meski warna tidak terlihat

9. Gunakan satu typeface sans-serif

• Typeface adalah kumpulan font dengan gaya umum seperti Helvetica, sedangkan variasi ukuran dan bobot seperti bold/regular adalah font individual
• Untuk antarmuka, pilihan yang aman umumnya adalah menggunakan satu typeface sans-serif yang mudah dibaca, netral, dan sederhana
• Typeface serif dekoratif pada judul contoh sulit dibaca dan bisa tidak selaras dengan foto akomodasi atau nuansa layanannya
• Dengan menyeragamkannya ke typeface sans-serif yang sama seperti isi teks, kegunaan dan konsistensi visual meningkat

10. Pilih typeface dengan x-height besar

• Typeface dengan x-height besar yang menunjukkan tinggi huruf kecil, serta jarak antarhuruf yang cukup, cenderung mudah dibaca bahkan pada ukuran kecil
• League Spartan pada contoh memiliki x-height yang relatif rendah
• Dengan menggantinya ke Inter yang punya x-height lebih besar, keterbacaan teks isi berukuran kecil meningkat

11. Batasi penggunaan huruf kapital

• Orang cenderung membaca cepat dengan mengenali bentuk keseluruhan kata, bukan tiap huruf satu per satu
• Kata yang ditulis seluruhnya dengan huruf kapital menjadi mirip bentuk persegi panjang, sehingga lebih sulit dibaca karena huruf harus diperiksa satu-satu
• Informasi lokasi diubah dari all caps menjadi sentence case, sehingga hanya kata pertama dan nama diri yang diawali huruf kapital
• Huruf kapital penuh sebaiknya digunakan secara terbatas, kecuali untuk ekspresi pendek yang benar-benar perlu penekanan

12. Gunakan hanya bobot regular dan bold

• Walau satu typeface menyediakan banyak bobot, memakai semuanya akan menambah noise visual di layar dan sulit dikelola secara konsisten
• Lebih baik menjaga design system tetap sederhana dengan berfokus pada regular dan bold
  • Gunakan bold untuk judul dan teks yang ingin ditekankan
  • Gunakan regular untuk teks kecil biasa
  • Jika bold terasa terlalu berat, bisa diganti dengan semi-bold
  • Bobot yang sangat tipis atau sangat tebal sebaiknya dipakai terbatas hanya pada judul besar, bukan teks kecil
• Teks lokasi pada contoh memakai bobot light, sehingga tetap bisa sulit dibaca walau rasio kontrasnya sudah ditingkatkan
• Mengubahnya ke regular meningkatkan keterbacaan sekaligus mengurangi ragam bobot yang digunakan

13. Hindari teks hitam murni

• Hitam murni menciptakan kontras yang sangat tinggi dengan latar putih dan bisa meningkatkan kelelahan mata saat membaca lama
• Pada latar putih, lebih aman memakai abu-abu gelap alih-alih hitam murni
• Beberapa elemen hitam pada contoh diubah menjadi abu-abu gelap untuk menyesuaikan keterbacaan
• Pada deskripsi akomodasi yang terlalu menonjol dibanding tingkat kepentingannya, abu-abu yang lebih terang diterapkan untuk menurunkan hierarki visualnya

14. Ratakan teks panjang ke kiri

• Bahasa Inggris dibaca dari kiri ke kanan dan orang cenderung memindai layar dengan pola huruf F, sehingga rata kiri adalah yang paling stabil
• Judul atau kalimat pendek masih bisa dibaca cepat meski dirata tengah
• Jika teks panjang dirata tengah, posisi awal tiap baris berbeda-beda sehingga sulit menemukan baris berikutnya
• Rata kiri-kanan dan rata tengah bisa membuat teks panjang lebih sulit dibaca, terutama bagi pengguna dengan gangguan kognitif
• Deskripsi akomodasi pada contoh diubah dari rata tengah ke rata kiri agar juga konsisten dengan teks di atasnya

15. Atur line-height isi teks ke 1.5 atau lebih

• Line-height adalah jarak vertikal antara dua baris teks
• Jarak antarbaris yang tepat membantu mengurangi pembacaan ulang pada baris yang sama dan membuat teks panjang lebih nyaman dibaca
• Line-height untuk teks isi memerlukan minimal 1.5 (150%), dan umumnya rentang 1.5~2 adalah yang sesuai
• Dalam contoh, line-height dinaikkan dari 1 (100%) ke 1.5 (150%) untuk meningkatkan keterbacaan

Hasil revisi dan prinsip penerapan

• Dengan menerapkan 16 aturan secara berurutan, tampilan yang semula kompleks diubah menjadi bentuk yang lebih sederhana, mudah dibaca, dan aksesibel
• Dekorasi yang sesuai karakter brand bisa ditambahkan nanti, tetapi dasar seperti struktur informasi/pembedaan interaksi/rasio kontras/tipografi harus dibenahi lebih dulu
• Dengan memakai aturan objektif alih-alih selera subjektif, UI yang intuitif dan aksesibel bisa dirancang lebih cepat
• Aturan yang diterapkan berulang akan perlahan menjadi fondasi alami dalam alur kerja desain, dan di atasnya cara ekspresi serta dekorasi baru bisa dieksplorasi