Mari hidupkan kembali desain idiomatis

• Idiom desain yang langsung dipahami pengguna mengurangi beban belajar dan memungkinkan interaksi yang konsisten
• Pada era perangkat lunak desktop di masa lalu, antarmuka seperti struktur menu dan pintasan diseragamkan berkat sistem operasi dan pedoman desain
• Sebaliknya, pada era perangkat lunak berbasis browser, konsistensi antarmuka runtuh akibat meluasnya framework dan implementasi kustom
• Apple dan Substack menunjukkan contoh sukses idiom modern melalui kustomisasi yang terbatas dan sistem desain yang seragam
• Perancang produk perlu mengikuti idiom yang sudah ada, memprioritaskan kejelasan dan konsistensi, lalu bergerak menuju pengalaman pengguna yang terstandarisasi di seluruh web

---

Idiom desain

• Checkbox ditunjukkan sebagai idiom desain yang representatif karena dapat langsung dipahami pengguna tanpa perlu belajar terlebih dahulu
  • Untuk pertanyaan apakah pengguna ingin tetap login, berbagai cara input sebenarnya dimungkinkan, tetapi pada praktiknya hampir selalu digunakan checkbox
  • Ini berfungsi sebagai pola interaksi terstandarisasi yang familier bagi pengguna maupun pengembang

Antarmuka yang seragam

• Antarmuka adalah sarana pengguna berinteraksi dengan sistem, dan semakin sedikit pengguna perlu berpikir, semakin baik antarmukanya
  • Misalnya, fungsi salin dengan pintasan Command+C seharusnya bekerja sama di mana pun
• Namun, dalam lingkungan perangkat lunak web saat ini, konsistensi antarmuka telah hilang
  • Bahkan fungsi dasar seperti pemilih tanggal dan input nomor kartu diimplementasikan berbeda-beda di tiap situs
  • Pintasan dan cara interaksi berbeda di setiap aplikasi, sehingga pengguna harus terus mempelajari ulang “di mana dan apa yang harus diklik”

Era perangkat lunak desktop

• Perangkat lunak desktop pada era Windows 95~7 mempertahankan konsistensi antarmuka yang tinggi
  • Struktur menu “File, Edit, View” hadir sama di semua program
  • Garis bawah pada item menu menandakan pintasan keyboard, dan dapat dioperasikan dengan ALT+F, N, dan seterusnya
  • Status bar di bagian bawah menampilkan status saat ini dengan jelas, seperti halaman, jumlah kata, atau mode
  • Berpusat pada menu berbasis teks, dan ikon hanya digunakan ketika memiliki makna yang jelas
• Idiom seperti ini tidak hanya ada di Microsoft Word, tetapi juga seragam di seluruh ekosistem Windows
  • Bahkan pada layar logout Windows XP, semua tombol ditampilkan secara visual dengan jelas sebagai tombol, dan pintasannya juga ditunjukkan
• Konsistensi ini dimungkinkan berkat batasan dari sistem operasi dan library GUI, dan Microsoft membagikan pedoman desain setebal ratusan halaman untuk mendorong pengembang mengikutinya

Era perangkat lunak browser

• Era aplikasi web saat ini digambarkan sebagai era antarmuka yang heterogen
  • Bahkan web app unggulan seperti Figma dan Linear pun tidak memiliki ikon atau pintasan yang sama
  • Masing-masing aplikasi dirancang dengan baik secara mandiri, tetapi memiliki pola interaksi yang berbeda satu sama lain
  • Bahkan dalam perusahaan yang sama, pengalaman Gmail, GSuite, dan Google Docs pun berbeda-beda
  • Akibatnya, pengguna menghabiskan waktu untuk mencari lokasi kontrol alih-alih berada dalam alur produktif (flow)

• Dampak transisi ke mobile

  • Munculnya layar sentuh membuat pola desain yang sebelumnya berpusat pada mouse dan keyboard harus diciptakan ulang
  • Saat harus mendukung mobile dan desktop sekaligus, UI setengah jadi berbentuk kompromi pun menyebar
  • Contoh: menu hamburger untuk mobile dipakai apa adanya di desktop
  • Budaya penggunaan ulang komponen modular menyalin pola yang keliru dan menurunkan kualitas
  • Akumulasi selama lebih dari 10 tahun memicu erosi kualitas UI/UX lintas generasi

• Kurangnya idiom di luar HTML

  • Pada web awal, ada idiom yang jelas seperti tautan biru bergaris bawah, tetapi sekarang setiap situs memiliki gaya sendiri-sendiri
  • Standar HTML/CSS memang ketat, tetapi pada praktiknya sebagian besar memakai sistem build berbasis React·TypeScript
  • Akibatnya, implementasi kustom menjamur menggantikan elemen HTML standar, bahkan menimbulkan masalah aksesibilitas
  • Contoh: penggunaan <span> dengan onclick alih-alih <a> merusak fungsi screen reader
  • Ada juga aplikasi seperti Figma yang sepenuhnya keluar dari HTML melalui basis WebAssembly
  • Fungsi dasar browser seperti tombol kembali dan pintasan diabaikan, sementara paradigma baru interaksi manusia-komputer dibangun ulang
  • Karena pengembangan frontend berkembang dengan fokus pada kecepatan dan kemungkinan, idiom yang konsisten sulit mengakar
  • Dengan begitu banyak framework dan format interaksi, lingkungan ini secara struktural menyulitkan lahirnya satu standar tunggal

Contoh sukses desain idiomatis

• Apple disebut sebagai contoh representatif yang tetap mempertahankan idiom desain yang kuat di era modern
  • Font, tombol, warna, dan sistem desain secara keseluruhan diseragamkan, sehingga memberi pengalaman interaksi yang konsisten di seluruh iOS
  • Konsistensi ini membentuk rasa percaya bahwa “it just works”
• Substack juga menghadirkan pengalaman pengguna yang stabil melalui kustomisasi terbatas dan default estetika yang sudah ditentukan sebelumnya
  • Prinsip desain Apple dan Substack menyebar menjadi standar industri melalui keberhasilan mereka, dan pada akhirnya menjadi idiom baru

Prinsip yang perlu diikuti perancang produk

• Pengembang produk disarankan untuk sebisa mungkin mengikuti idiom desain yang sudah ada sebagai jalan untuk meningkatkan usability dan kompatibilitas
  • Patuhi idiom dasar HTML/CSS: tautan diimplementasikan dengan garis bawah, warna, pointer cursor, dan tag <a>
  • Jangan mengimplementasikan ulang elemen HTML dasar dengan JavaScript, misalnya gunakan <button> alih-alih React Button
  • Patuhi idiom browser: tombol kembali harus berfungsi, menyalin URL harus membuka antarmuka yang sama, dan CTRL+klik harus membuka tab baru
  • Jika harus menyimpang dari idiom umum, setidaknya pertahankan aturan yang konsisten secara internal dalam organisasi
  • Utamakan teks, minimalkan ikon, dan gunakan ikon hanya jika maknanya dapat dipahami secara universal
  • Untuk elemen visual, kejelasan harus didahulukan daripada keindahan estetis
  • Jika sulit mengambil keputusan, rujuklah pada contoh situs web yang baik dan buku desain antarmuka dari masa lalu
• Pada akhirnya, visi yang ditawarkan adalah masa depan web di mana pemilih tanggal dan formulir input kartu bekerja dengan cara yang sama di mana pun, dengan tujuan menuju lingkungan web yang menyatu pada idiom terbaik melalui puluhan tahun pengulangan dan perbaikan