CMS untuk editor yang bukan developer-nya

Editornya lebih senior dari orang yang biasanya menguji admin panel.

Template admin bawaan mengasumsikan tabel 14 px, placeholder abu-abu di atas abu-abu, dan ikon tanpa label. Itu tidak masalah bagi developer jam 2 pagi. Tapi itu tembok bagi orang yang sesekali memperbarui situs dan tidak mau menelepon minta bantuan. Jadi brief CMS-nya menulis dengan jelas: tegas, mudah dibaca, ramah orang tua.

Setiap ukuran lebih besar dari admin panel biasa.

• judul halaman: 28 px / 36 px, bold
• judul section: 22 px / 30 px
• header tabel: 18 px / 26 px
• body dan sel tabel: 16 px / 26 px
• label dan caption: 14 px
• 13 px hanya untuk breadcrumb dan meta, dan tidak ada yang lebih kecil di mana pun

Situs publik dan CMS sengaja memakai font body yang berbeda.

Situs publik tetap memakai sans modernnya. CMS beralih ke Source Sans 3, yang x-height-nya besar dan bentuk hurufnya terbuka, sehingga tetap terbaca di ukuran kecil untuk mata yang lebih senior. Judulnya tetap memakai font heading brand, jadi CMS-nya tetap terasa milik mereka.

Sebagian besar kemenangannya berupa aturan, bukan styling.

• Setiap pasangan teks dan background memenuhi WCAG AA (4,5:1 untuk teks normal).
• Jangan menyampaikan sesuatu hanya dengan warna. Tambahkan ikon, teks, atau pola.
• Setiap field punya label yang terlihat. Placeholder adalah petunjuk, bukan label.
• Error muncul sebagai teks di bawah field, bukan hanya border merah.
• Setiap elemen interaktif punya focus ring 2 px yang terlihat.
• Tab bahasa untuk konten bilingual dibuka di Bahasa Indonesia, bahasa utama editornya, dan bisa diganti dengan tombol panah.

Di CMS lain, QA minta ruang lebih lega, dan mereka benar.

File desainnya memakai unit spacing 4 px. Setelah masukan QA, saya menaikkan unit dasarnya ke 4,8 px dan menaikkan seluruh skala huruf satu tingkat. Itu sengaja menyimpang dari file desain, dan alasannya didokumentasikan, supaya tidak ada yang "membetulkannya" kembali nanti.

Desain untuk orang yang memegang mouse.

Saya menerapkan cara berpikir yang sama di tool browser kecil untuk mencetak plat nomor rumah, dengan preset per perumahan: tombol minimal 50 px dan teks 16 px, karena tool itu dirancang untuk pengguna lansia. Tidak ada yang istimewa dari semua ini. Hanya saja ini bukan default.