Hukum UX

• Mengumpulkan hukum-hukum terkait usability desain dan psikologi kognitif beserta definisi singkatnya, lalu merangkum konsep-konsep yang memengaruhi cara pengguna memahami dan menggunakan antarmuka di satu tempat
• Dalam ranah pilihan dan pengambilan keputusan, konsep seperti Hick’s Law dan Cognitive Load menunjukkan bahwa jumlah opsi, kompleksitas, dan besarnya sumber daya mental terhubung langsung dengan penilaian pengguna serta kecepatan interaksi
• Dalam ranah persepsi visual dan penyusunan informasi, konsep seperti Law of Proximity dan Law of Similarity membuat kedekatan, kemiripan, keterhubungan, dan batas bersama dipersepsikan sebagai satu kelompok elemen
• Dalam ranah interaksi dan perilaku, dibahas tolok ukur yang memengaruhi efisiensi manipulasi dan waktu pencapaian target, seperti respons di bawah 400ms pada Doherty Threshold dan jarak serta ukuran pada Fitts’s Law
• Hingga mencakup ranah memori dan pengalaman, hukum seperti Peak-End Rule dan Zeigarnik Effect juga disajikan bersama, sehingga memberikan kerangka penilaian yang luas dan berulang digunakan dalam keseluruhan perancangan UX

---

Susunan Hukum UX

• Laws of UX merangkum hukum-hukum terkait usability desain dan psikologi kognitif, masing-masing dengan definisi singkat
• Setiap item terhubung ke halaman hukum tersendiri dan dikelompokkan sebagai konsep-konsep yang memengaruhi cara antarmuka dipahami dan digunakan
• Mencakup secara luas topik yang sering dibahas dalam perancangan UX, seperti pilihan, memori, perhatian, pencapaian tujuan, dan pengelompokan visual

Hukum Utama

• Kognisi dan Pengambilan Keputusan

  • Choice Overload: Saat terlalu banyak pilihan diberikan, rasa kewalahan meningkat, dan istilah ini sering digunakan dengan makna yang sama seperti paradox of choice
  • Cognitive Bias: Kesalahan berpikir sistematis yang memengaruhi rasionalitas penilaian turut bekerja dalam persepsi terhadap dunia dan kemampuan mengambil keputusan
  • Cognitive Load: Mengacu pada jumlah sumber daya mental yang dibutuhkan untuk memahami dan berinteraksi dengan antarmuka
  • Hick’s Law: Waktu yang dibutuhkan untuk mengambil keputusan meningkat seiring bertambahnya jumlah opsi dan kompleksitas
  • Mental Model: Model internal yang merangkum apa yang diyakini seseorang tentang sistem dan cara kerjanya
  • Miller’s Law: Rata-rata orang hanya dapat mempertahankan sekitar 7 ± 2 item dalam memori kerja
  • Occam’s Razor: Di antara hipotesis yang memiliki tingkat prediksi sama, pilih yang memiliki asumsi paling sedikit
  • Tesler’s Law: Dalam sistem apa pun, akan selalu ada sejumlah kompleksitas yang tidak dapat dihilangkan
  • Working Memory: Sistem kognitif yang menyimpan dan memanipulasi informasi secara sementara untuk melaksanakan tugas

• Persepsi Visual dan Penyusunan Informasi

  • Aesthetic-Usability Effect: Pengguna cenderung menganggap desain yang lebih menarik secara estetis sebagai desain yang lebih mudah digunakan
  • Chunking: Proses memecah potongan informasi individual lalu mengelompokkannya kembali menjadi unit yang bermakna
  • Law of Common Region: Elemen-elemen yang berbagi batas yang jelas dipersepsikan sebagai satu kelompok
  • Law of Proximity: Objek-objek yang berdekatan dipersepsikan sebagai sesuatu yang tergabung bersama
  • Law of Prägnanz: Gambar yang ambigu atau kompleks ditafsirkan sebagai bentuk yang paling sederhana
  • Law of Similarity: Elemen-elemen yang mirip, meski terpisah, lebih mudah dipersepsikan sebagai satu gambar, bentuk, atau kelompok
  • Law of Uniform Connectedness: Elemen yang terhubung secara visual tampak lebih saling terkait daripada elemen yang tidak terhubung
  • Von Restorff Effect: Di antara objek-objek yang serupa, satu yang berbeda akan paling mudah diingat

• Interaksi dan Perilaku

  • Doherty Threshold: Jika komputer dan pengguna berinteraksi dengan kecepatan di bawah 400ms, keduanya tidak perlu saling menunggu sehingga produktivitas meningkat tajam
  • Fitts’s Law: Waktu untuk mencapai target merupakan fungsi dari jarak dan ukuran
  • Flow: Keadaan mental saat seseorang sepenuhnya tenggelam dalam aktivitas dan merasakan energi, fokus, keterlibatan mendalam, serta kesenangan secara bersamaan
  • Goal-Gradient Effect: Semakin dekat dengan tujuan, semakin besar kecenderungan untuk terus bergerak ke arah tujuan tersebut
  • Jakob’s Law: Karena pengguna lebih banyak menghabiskan waktu di situs lain, mereka lebih menyukai cara kerja yang mirip dengan situs-situs yang sudah mereka kenal
  • Paradox of the Active User: Pengguna langsung mulai memakai perangkat lunak tanpa membaca manual
  • Parkinson’s Law: Suatu pekerjaan akan berkembang hingga menghabiskan seluruh waktu yang tersedia
  • Postel’s Law: Bersikap longgar terhadap input yang diterima, dan konservatif terhadap output yang dikirim
  • Selective Attention: Di antara berbagai rangsangan di lingkungan, perhatian biasanya hanya difokuskan pada sebagian yang terkait dengan tujuan

• Memori dan Pengalaman

  • Pareto Principle: Dalam banyak peristiwa, sekitar 80% hasil berasal dari 20% penyebab
  • Peak-End Rule: Pengalaman dinilai berdasarkan emosi pada puncak dan akhir, bukan dari total atau rata-rata keseluruhan pengalaman
  • Serial Position Effect: Ada kecenderungan untuk paling mudah mengingat item pertama dan terakhir dalam rangkaian item
  • Zeigarnik Effect: Tugas yang belum selesai atau terhenti lebih mudah diingat daripada tugas yang telah selesai

[GN⁺]

Komentar Hacker News

• Saya jadi sering kembali melihat ini. Desain bergaya poster-nya juga bagus, dan selalu mengejutkan bahwa cukup banyak dari ‘hukum’ seperti ini berasal dari data dan riset Nielsen Norman Group selama bertahun-tahun
  Ada juga banyak konsep UX yang diberi nama seperti Jakob's Law atau Norman Door, dan industri UX sangat dipengaruhi oleh kelompok pengamat kecil ini
  Tapi menurut saya, teori UX/HCI modern juga makin sering terhambat oleh aturan-aturan lunak seperti ini. Terutama karena aturan yang muncul dari pola pengguna pada media non-interaktif seperti siaran tampaknya terlalu digeneralisasi

• Halaman seri sebelumnya bagus, tapi yang ini terlihat agak kurang niat
  Misalnya, Cognitive Bias hanya didefinisikan secara kamus lalu dipasang seolah-olah sebuah ‘hukum’; itu bukan hukum, dan dalam bentuk seperti itu juga bukan konsep yang praktis
  Rasanya lebih seperti kumpulan beberapa istilah yang diberi definisi lalu dibundel untuk menjual poster, ketimbang kumpulan aturan yang bisa diterapkan desainer UI atau developer

• Materi seperti ini bagus, dan tentu saja juga bukan aturan yang mutlak dan tak berubah
  Saya bukan desainer tradisional, jadi kumpulan best practice atau hukum seperti ini sangat membantu. Sebagai titik awal agar AI bisa memeriksa sekaligus aturan-aturan yang sulit terus diingat di kepala untuk tiap layar, ini terlihat pas sekali
  Secara pribadi, seperti shortcut formatting source code, saya rasa saat membuat software bisnis, set hukum seperti ini cukup berguna sebagai alur shortcut untuk sanity check
  Saya benar-benar mengunduh screenshot UX Laws dan screenshot dashboard, lalu meminta ChatGPT dan Claude me-review berdasarkan hukum-hukum itu dan membuat mockup baru dengan rekomendasinya diterapkan
  Project 1: CMMS Dashboard For Maintenance
  Dashboard old: https://imgur.com/a/R3wrMpr
  Dashboard new (Claude): https://imgur.com/a/cYq4gE8
  Project 2: aplikasi prakiraan selancar dari https://swellslots.com
  Forecast old: https://imgur.com/a/W3daZrP
  Forecast new: https://imgur.com/a/kNi2Nvg

  • Setidaknya untuk Project 1, dashboard lama terlihat lebih baik daripada dashboard baru
    Masalah dengan kumpulan hukum yang saling bertabrakan seperti ini adalah desainer yang bagus akan secara intuitif menilai sesuai konteks aturan mana yang perlu diabaikan dan mana yang dipakai
  • Untuk proyek pertama, dashboard lama terlihat seperti layar admin untuk pelaporan, sedangkan dashboard baru tampak seperti layar operator yang benar-benar menangani tiket
    Saya penasaran apakah tujuan atau perannya dimasukkan secara spesifik ke dalam prompt, atau dibiarkan terbuka begitu saja
  • Di Inggris, gambar-gambarnya tidak bisa dibuka karena pembatasan akses Imgur

• Hukum nomor 0 adalah jangan membuat elemen UI yang hendak saya klik mengalami reflow atau bergerak ke sana kemari

  • Ini benar-benar bikin orang gila. Selama UX atau frontend tidak menanganinya dengan serius, saya selalu penasaran apakah di level OS atau browser tidak mungkin menyesuaikan dengan kecepatan reaksi pengguna, misalnya dengan melacak status yang dapat diklik 20ms sebelumnya, agar target yang saya tekan tetap menjadi target yang dikenali otak saya
    Tentu saja solusi yang lebih baik adalah developer dan desainer punya craftsmanship dan kebanggaan terhadap detail seperti ini. Kalau melihat antarmuka-antarmuka terburuk, biasanya terasa seperti mereka hanya mengujinya di lingkungan dengan backend yang terhubung gigabit, jadi masalah seperti ini terlewat
  • Konyolnya, masalah ini bahkan masuk ke aplikasi Photos di iOS
    Kalau perusahaan yang dianggap simbol desain saja meleset dari hal mendasar itu, berarti ada sesuatu yang sangat salah di industri ini
  • Google Search sangat parah dalam hal ini. People also ask yang tidak perlu dan jawaban Gemini yang butuh waktu lama untuk muncul mendorong seluruh konten ke bawah
  • Juga jangan mengalihkan perhatian dengan grafik dekoratif yang tidak perlu dan tidak relevan

• Menurut saya ini materi yang luar biasa
  Tapi kalau melihat butir nomor 2, Choice Overload, tertulis bahwa terlalu banyak pilihan membuat orang kewalahan, namun halaman itu sendiri menjejalkan 30 ‘hukum’ sekaligus dalam bentuk teks, sementara setengah ruang visualnya diisi 30 gambar yang tidak relevan
  Memang cantik, tapi bukan struktur yang enak untuk dipelajari

• Seperti Doherty Threshold, bila interaksi antara komputer dan pengguna berlangsung dalam kurang dari 400ms sehingga keduanya tidak saling menunggu, produktivitas naik drastis
  Karena itu saat ngoding saya jauh lebih suka model kecil. Kecepatannya cukup tinggi sehingga alur kerja tetap terasa real-time
  Akibatnya pekerjaan jadi dipecah ke unit yang lebih kecil dan terus diverifikasi, sehingga saya tetap terlibat aktif dan mental model saya juga tidak meleset
  Dulu saya pernah memberikan 3 perubahan kode sederhana masing-masing ke model besar dan model kecil, dan keduanya berhasil. Tapi model besar 3 kali lebih lambat dan biayanya 10 kali lebih mahal
  Sejak saat itu, kriteria Best Model saya bukan lagi model peringkat satu di benchmark, melainkan model paling kecil, cepat, dan murah yang bisa menyelesaikan pekerjaan nyata dengan andal

• Akan bagus kalau stabilitas juga dimasukkan. Jangan terus mengubah sesuatu hanya demi perubahan itu sendiri atau demi mengikuti tren baru

• Sebaiknya jangan pakai ikon yang tak bermakna
  Lebih baik menampilkan informasi dalam alur linear daripada menyembunyikannya seperti pohon yang memaksa pengguna membuka kotak satu per satu
  Juga jangan menyajikan opini seolah-olah itu fakta

• Saat me-redesign salah satu platform e-commerce besar di Asia, kami benar-benar memakai beberapa hukum di sini dalam strategi UX nyata

• Terima kasih sudah membagikan ini. Saya sudah hampir 10 tahun bekerja sebagai full stack, dan baru sekarang mulai mendalami UI; untuk UX sendiri saya masih baru menyentuh permukaannya
  Sedikit di luar topik, saya penasaran apakah ada materi yang merangkum pola UI yang sering dipakai di mobile atau web app. Misalnya hamburger menu, toast notification, dan semacamnya
  Saya mencari situs yang tersusun sistematis, cakupannya luas, dan bahkan punya contoh visual

  • Waktu mengambil kelas UI di kampus sekitar 2009, saya memakai buku Jennifer Tidwell, dan itu hampir persis dengan yang saya cari sekarang
    Waktu itu smartphone masih di tahap awal jadi porsi mobile-nya kecil, tetapi edisi terbaru tampaknya banyak membahas mobile
    https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/
  • Cukup melihat-lihat library komponen seperti shadcn, coss, dan base ui juga bagus untuk belajar