Mari hidupkan kembali desain idiomatis

 (essays.johnloeber.com)
1 poin oleh GN⁺ 2026-04-13 | 1 komentar | Bagikan ke WhatsApp
  • 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”
    Iklan

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
Iklan

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 dengan `onclick` alih-alih 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”
    Iklan
  • 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 ``
    • Jangan mengimplementasikan ulang elemen HTML dasar dengan JavaScript, misalnya gunakan `` 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

Bacaan terkait

1 komentar

 
GN⁺ 2026-04-13
Komentar Hacker News

  • Di beberapa aplikasi, Enter mengirim input dan Ctrl+Enter membuat baris baru (mis. Slack), sementara di tempat lain justru kebalikannya (mis. GitHub)
    Kurangnya konsistensi seperti ini cukup membingungkan dari sudut pandang pengguna. Ada yang bilang “hidupkan kembali desain idiomatis”, tetapi masalah sebenarnya adalah kurangnya idiom yang benar-benar sama di berbagai tempat

    • Dulu Return dan Enter adalah tombol yang berbeda. Return untuk ganti baris, Enter untuk mengirim input.
      Sekarang tombolnya digabung, sehingga secara umum pada kolom input multiline, Enter berarti ganti baris dan Ctrl+Enter berarti kirim.
      Sebaliknya, aplikasi chat lebih sering menerima input pendek sehingga perilakunya dibalik. Aplikasi yang baik memungkinkan ini diubah lewat pengaturan
    • Teams punya dua mode. Default-nya Enter untuk kirim dan Shift+Enter untuk ganti baris, tetapi saat alat pemformatan dibuka, perilakunya jadi terbalik.
      Memang ada petunjuk kombinasi mana yang membuat baris baru, tetapi tetap membingungkan
    • Slack lebih rumit lagi. Jika Markdown diaktifkan, Shift+Enter membuat baris baru, tetapi di dalam blok kode (```), Enter membuat baris baru dan Shift+Enter mengirim.
      Niatnya bisa dipahami, tetapi usability-nya berantakan
    • Solusi idealnya mungkin Ctrl+Enter selalu untuk kirim, Shift+Enter selalu untuk ganti baris, dan Enter mengikuti default sesuai konteks
    • Saya juga mengira Shift+Enter berarti ganti baris, dan ini menunjukkan bahwa UX yang terfragmentasi itulah masalahnya

  • Perangkat lunak zaman sekarang tidak lagi dibuat seperti dulu oleh perancang yang benar-benar penuh pertimbangan.
    Sebaliknya, kini sering dipimpin PM atau orang Product yang baru buru-buru naik jabatan, dan bahkan dark pattern demi pendapatan ikut didorong

    • Sebagai engineer mobile, saya sering mendapat tatapan kosong saat memberi tahu para stakeholder bahwa “kita tidak bisa begitu saja membuatnya sesuai ide itu”.
      Penting untuk menekankan konsistensi UX dan information architecture (IA). Kita juga tidak boleh lupa bahwa desainer adalah pemecah masalah
    • Kritik seperti ini terlalu sepotong-sepotong. Pada praktiknya, membuat satu formulir online saja bisa seperti neraka.
      Misalnya saat membuat formulir kartu kredit, ada banyak sekali variabel seperti boleh tidaknya copy/paste, dukungan browser lama, serta keseimbangan antara aksesibilitas dan keamanan.
      Sebagai referensi, tulisan Steve Yegge tentang platform juga menjelaskan kompleksitas ini dengan baik
    • Pada 2010-an, banyak UX designer berpengalaman yang keluar, lalu masuk gelombang besar desainer nonspesialis dari latar cetak atau grafis sehingga kualitas menurun
    • Tentu ada insentif yang buruk dan tenggat yang mendesak, tetapi sulit juga melihat semuanya sekadar sebagai ketidakmampuan atau niat buruk. Sistemnya sendiri sudah berubah
    • Bahkan sekarang, saat melihat PM berusaha merancang sendiri seluruh arsitektur dan roadmap rilis, rasanya pernyataan itu memang tidak salah

  • Framework sistem dulunya menjadi fondasi yang menghasilkan UI idiomatis.
    Win32, AppKit, dan UIKit menangani detail-detail kecil sehingga developer secara alami mengikuti UX yang konsisten.
    Sebaliknya, web tidak punya itu, jadi semuanya harus diimplementasikan sendiri, dan hasilnya banyak UI setengah jadi

    • Namun penulis salah membidik ketidakkonsistenan web. “Era desktop” pada dasarnya adalah era Windows, dan karena Win32 adalah dasarnya, semua orang hanya mengikutinya.
      Web sejak awal berpusat pada dokumen, jadi tidak ada pendekatan standar, lalu belakangan hal seperti Bootstrap muncul dan menciptakan standar sementara
    • HTML dan CSS sebenarnya ada, tetapi sekarang sering dilewati dengan WebAssembly dan sebagainya.
      Padahal untuk date picker atau input kartu, seharusnya memakai kontrol HTML bawaan.
      Dengan begitu browser bisa memberi keamanan dan kenyamanan setingkat OS (mis. Safari terintegrasi dengan Apple Wallet, Android dengan Google Pay)
    • Developer yang terbiasa dengan perilaku OS yang konsisten secara alami akan mencoba meniru lingkungan itu.
      Namun web dan mobile adalah lingkungan kotak-kotak yang sama sekali berbeda, sehingga konsistensi seperti itu runtuh.
      Misalnya, dulu ada kesempatan menyatukan klik kanan desktop dengan long-press di mobile, tetapi itu tidak pernah benar-benar didorong secara konsisten
    • Masalah mendasar web adalah bahwa ia masih bertahan dalam paradigma yang berpusat pada dokumen.
      Untuk membuat UI aplikasi, kita harus menumpangkannya di atas UI dokumen, sehingga benturan tidak terhindarkan.
      Browser memang mengurangi dampaknya, tetapi itu bukan perbaikan mendasar
    • Sebagai catatan, di AppKit mengubah tinggi tombol juga memungkinkan. Hanya saja caranya tidak jelas

  • Date picker benar-benar mimpi buruk UX.
    Banyak yang melarang pengguna mengetik tanggal langsung dan memaksa mereka mengklik.
    Padahal cukup menangkap input yang salah, tidak perlu dibuat merepotkan

    • Saat harus membalik kalender puluhan tahun hanya untuk memasukkan tanggal lahir, kita jadi merasakan kesia-siaan hidup
    • Time picker di mobile juga tidak konsisten. Sekali scroll kadang bisa lompat dari 12:00 ke 11:50, kadang tidak.
      Picker berbentuk jam analog terasa lebih intuitif, jadi akan bagus jika ini menjadi standar
    • Format tanggal juga bermasalah. 03/04/2026 bisa berarti 4 Maret atau 3 April.
      Untuk pengguna internasional, format YYYY-MM-DD lebih aman
    • Situs yang memakai date picker yang sama untuk tanggal lahir seperti untuk jadwal masa depan adalah yang paling buruk.
      Kita dipaksa scroll 50 tahun ke belakang dan sekaligus diingatkan betapa tuanya diri ini
    • Harus merasakan umur lewat scroll setiap kali memasukkan tanggal lahir itu seperti siksaan

  • Belakangan ini penurunan kualitas UX sangat parah, terutama terlihat di situs web perbankan.
    Menyembunyikan scrollbar, ruang kosong berlebihan, tombol datar, ikon yang membingungkan, semuanya membuatnya jauh lebih tidak nyaman dibanding UI desktop lama

    • Menyembunyikan scrollbar benar-benar tidak masuk akal. Kelihatannya murni alasan estetika supaya “tampak bagus”
    • Rasanya Material UI memberi dampak buruk ke banyak industri.
      GCP dan alat-alat Google menjadi rumit tanpa perlu, dan kolom input tanpa kotak semacam itu merusak UX.
      Untungnya, gaya seperti ini sekarang mulai dianggap ketinggalan zaman

  • Salah satu konsep dari Mac lama adalah bahwa jika teks tombol berakhir dengan elipsis (…), itu berarti masih dibutuhkan input tambahan.
    Sebaliknya, tombol tanpa elipsis akan langsung menyelesaikan tindakan saat diklik

  • Saya setuju dengan pernyataan “lebih pilih kata daripada ikon”.
    Bagi kebanyakan orang, mengenali kata lebih cepat daripada ikon

    • Tentu ikon yang menggambarkan benda nyata masih oke, tetapi sekarang terlalu banyak ikon abstrak dan berbentuk garis.
      Tanpa penjelasan teks, kita jadi harus mengkliknya seperti bermain rolet Rusia untuk tahu artinya
    • Ada juga kasus membingungkan seperti “unvote/undown” di HN karena prefiksnya sama. Jadi harus cek ulang setiap kali mengklik
    • Jika ikon kecil atau posisinya sering berubah, kata lebih baik, tetapi di lingkungan yang tetap, ikon bisa jadi lebih cepat

  • Baru-baru ini saya menemukan teknologi baru bernama CSS, yang memungkinkan layout didefinisikan secara deklaratif dan style hierarkis diterapkan berbasis DOM.
    Ini bisa mengurangi beban klien dan server, serta memudahkan berbagi stylesheet atau membuat tema yang disesuaikan pengguna.
    Saya ingin menyebutnya paradigma UI “no-framework”
    Gambar contoh

    • Saya pernah mencobanya dan itu benar-benar mimpi buruk. Tidak jelas style mana diterapkan di mana, dan saat struktur DOM berubah, stylenya berantakan.
      Selain itu, “meminimalkan beban klien” hanyalah mitos. Pada praktiknya justru lebih lambat
    • Ide ini sebaiknya diajukan ke tim framework vanilla-js

  • Fitur-fitur umum yang telah kita hilangkan:
    Undo/Redo, bantuan (F1), petunjuk mouse hover, kustomisasi shortcut, menu utama, file/direktori, tutup dengan ESC, drag-and-drop, dan sebagainya
    Fitur-fitur yang dulu inovatif itu kini hampir hilang dari mobile dan web

  • Banyak masalah muncul karena desainer visual berpindah ke perancangan produk.
    Kebingungan soal peran dalam profesi desain masih belum terselesaikan, dan kenyataannya terlalu banyak proyek yang melibatkan “desainer” padahal sebenarnya tidak membutuhkannya