20 Law of UX Explained (Discussed in Indonesia)

Kean Shihab
13 min readMar 19, 2020

--

20 Law of UX Explained

Hukum-hukum UX yang akan disebutkan ini tentu sangat penting. Apalagi ketika dalam perjalanannya, seorang desainr UI/UX harus membuat atau memperbaiki user experience. Lalu apa saja 20 hukum UX tersebut? Simak berikut.

1. Aestethic Usability Effect

Di urutan pertama ada hukum UX yaitu Aestethic Usability Effect. Hukum yang pertama ini mengatakan bahwa pengguna itu ternyata sering menganggap bahwa desain yang bermanfaat itu desain yang estetis.

Jadi gampangnya, semakin estetis, semakin bermanfaat aplikasi tersebut. Desain yang lebih menyenangkan secara estetika itu dapat membuat pengguna lebih teloran terhadap masalah-masalah sepele di aplikasi tersebut.

Dan juga, ketika melakukan Usability Testing, desain yang estetis ini bisa menutupi dan mencegah masalah-masalah yang bisa ditemukan.

Contoh tampilan aplikasi yang estetis

Pada gambar di atas, jelas tampilan aplikasi yang estetis. Semakin estetis, maka berpotensi untuk menutupi masalah-masalah kecil di aplikasi tersebut ketika dilakukan Usability Testing.

2. Doherty Threshold

Pada hukum UX yang kedua ini ada yang namanya Doherty Threshold. Jadi hukum UX ini mengatakan kalau ternyata produktivitas bisa melonjak ketika komputer dan penggunanya berinteraksi dengan kecepatan kurang dari 400ms (milisecond).

Tentu karena bisa berinteraksi dengan cepat, baik pengguna maupun si komputer tersebut tidak saling menunggu.

Berikan umpan balik sistem dalam jarak 400 ms untuk menjaga perhatian pengguna dan meningkatkan produktivitasnya. Kamu bisa lihat grafik berikut.

Grafik Waktu antara respon sistem dengan pengguna

Grafik berikut adalah waktu antara respon sistem dengan pengguna. Ingat, semakin sedikit waktunya maka semakin bagus. Dan tahukah kamu? Prinsip UX ini ternyata sudah diterapkan lho sejak 1970-an.

3. Fitt’s Law

Lalu yang ketiga, ada hukum UX yang bernama Fitts’s Law. Hukum ini menyatakan bahwa waktu untuk mendapatkan target adalah soal jarak ke target dan ukuran target.

Prinsip dari Fitts’s law

Target sentuh harus cukup besar buat pengguna agar bisa membedakan apa itu dan memilihnya secara tepat dan akurat. Jaraknya juga harus pas, antara satu dengan yang lainnya. Dan dari segi jangkauannya pun harus diletakkan di tempat yang mudah dijangkau.

Contoh yang benar dan yang salah dari Fitts’s law.

Bisa dilihat pada gambar di atas, ketika kita membuat tombol pada aplikasi. Perhatikan ukurannya. Bagian kanan (yang benar), punya tombol yang besar sehingga mudah dijangkau. Sedangkan bagian kiri (yang salah), punya tombol yang kecil dan jauh di kiri sehingga sulit dijangkau.

4. Hick’s Law

Selanjutnya pada urutan keempat ada yang namanya Hick’s Law. Hick’s Law ini menyatakan bahwa waktu yang diperlukan untuk membuat keputusan meningkat seiring dengan banyaknya jumlah dan kompleksitas pilihan.

Maka dari itu kita harus menyederhanakan pilihan bagi pengguna. Caranya bagaimana? Cukup memecahkan tugas yang kompleks menjadi langkah-langkah yang kecil (small steps).

Hindari pengguna memilih opsi terlalu banyak. Seperti apa contohnya?

Contoh Hick’s Law

Bisa kamu lihat, opsi pilihan yang paling kiri itu membutuhkan waktu paling sedikit untuk memilihnya. Kenapa? Sederhana, karena pilihannya paling sedikit.

5. Jakob’s Law

Pada urutan kelima ada hukum UX yang namanya Jakob’s Law. Hukum yang satu ini menyatakan bahwa teryata pengguna menghabiskan sebagian besar waktunya di aplikasi lain.

Itu artinya pengguna lebih suka aplikasi yang kita buat bekerja dengan cara yang sama seperti semua aplikasi lain yang sudah mereka (pengguna) ketahui.

Dengan memanfaatkan model mental yang ada, kita dapat menciptakan pengalaman pengguna yang bagus dan unggul. Di mana pengguna bisa lebih fokus pada tugas/task mereka daripada belajar model aplikasi baru. Contohnya seperti apa?

Contoh peletakan elemen pada website e-commerce

Contohnya, kalau kamu perhatikan lebih jeli, kebanyakan posisi peletakan elemen pada website e-commerce kurang lebih sama. Gambar produk di sebelah kiri. Sedangkan elemen lain seperti nama, harga, deskripsi, dan lainnya berada di sebelah kanan. Nah, sampai di sini kamu mengerti kan?

6. Law of Common Region

Berikutnya hukum UX yang keenam ada Law of Common Region. Hukum ini mengatakan bahwa elemen dapat dikelompokkan jika mereka dibagi oleh area dengan batas yang jelas.

Untuk mengikuti hukum ini, caranya mudah. Kita bisa menambahkan border atau garis di sekitar grup elemen. Atau sebagai alternatif kamu bisa membuat warna background antara grup elemen ke-1 dengan grup elemen ke-2 itu berbeda.

Contohnya gimana? Kamu bisa lihat pada gambar di bawah ini.

Penting untuk memberi batasan. Kiri salah, kanan benar.

Bisa dilihat bahwa gambar di atas merupakan salah satu penerapan dari Law of Common Region. Dimana yang benar adalah yang berada di sebelah kanan, diberi border/batas. Sehingga bisa dikelompokkan lebih mudah.

Grafik yang dikelompokkan. Kanan salan, kiri benar.

Hukum ini juga berlaku lho kalau kamu membuat aplikasi yang memakai grafik-grafik. Perlu kamu kelompokkan antara grafik yang satu dengan yang lainnya. Salah satunya dengan cara memberinya border/batas. Tapi bisa juga batasannya berupa warna.

7. Law of Prägnanz

Pada hukum UX yang ketujuh ini ada yang namanya Law of Prägnanz. Hukum ini mengungkapkan bahwa mata manusia suka menemukan kesederhanaan dan ‘keteraturan dalam bentuk yang rumit’ karena mencegah kita dari kewalahan dengan informasi.

Penelitian juga menegaskan bahwa manusia itu ternyata lebih mampu memproses secara visual dan mengingat elemen-elemen sederhana daripada elemen-elemen yang kompleks.

Kecenderungan untuk mengklik elemen yang teratur

Gambar di atas adalah salah satu contoh penerapan dari elemen sederhana yang mampu diproses dengan cepat secara visual. Maka dari itu, hindari membuat elemen yang kompleks dan membingungkan.

8. Law of Proximity

Kemudian di urutan yang kedelapan ada yang namanya Law of Proximity. Hukum UX ini menyatakan bahwa objek/elemen yang berdekatan satu sama lain, cenderung dikelompokkan bersama.

Objek atau elemen yang saling berdekatan ini membantu pengguna dalam memahami dan mengatur informasi lebih cepat dan lebih efisien. Contohnya seperti apa?

Contoh penerapan Law of Proximity pada website Amazon

Kamu pasti tidak asing lagi dengan yang namanya Amazon. Pada poin lingkaran A, kita bisa lihat bahwa produk-produk terbaru (yang berada di bawah tulisan ‘Ultimas novedades’) jelas dibedakan dari produk-produk lainnya (yang berada di bawah tulisan ‘Los mas vendidos’).

Lalu pada lingkaran B kira bisa lihat pengelompokkannya juga jelas. Mulai dari berdasarkan teknologi (LCD, LED, dll). Di bawahnya juga ada pengelompokkan berdasarkan merek (LG, Samsung,dll). Sehingga kita lebih mudah menggunakan fitur tersebut.

9. Law of Similarity

Di urutan kesembilan ada yang namanya Law of Similarity. Hukum ini mengatakan bahwa mata manusia cenderung mempersepsikan elemen-elemen serupa dalam suatu desain sebagai gambar, bentuk, atau kelompok yang lengkap, bahkan jika elemen-elemen itu dipisahkan.

Maka dari itu sistem navigasi dibedakan secara visual, dari segi elemen teks normal. Dan tentunya sistem navigasi tersebut harus ditata secara konsisten. Contohnya seperti apa?

Contoh yang salah dan yang benar pada Law of Similarity

Kamu bisa lihat pada bagian kiri (yang benar), setiap navigasinya memiliki warna dan ukuran yang sama. Warnanya abu-abu muda dan ukuran ikon pun sama.

Sedangkan pada bagian kanan (yang salah), navigasi yang tengah bergambar bumi itu punya ikon paling besar dibandingkan yang lainnya. Selain itu warnanya pun juga agak tua dibanding yang lainnya.

Jadi sesuai nama dari hukum ini, ‘Similar’, yang artinya mirip/serupa. Paham kan?

10. Law of Uniform Connectedness

Berikutnya di hukum UX yang kesembilan ada yang namanya Law of Uniform Connectedness. Sesuai namanya, hukum ini mengatakan kalau elemen yang terhubung secara visual itu dianggap lebih terkait/berhubungan daripada elemen tanpa koneksi.

Nah karena itulah fungsi kelompok yang sifatnya serupa, sebaiknya dihubungkan secara visual. Bisa dengan warna, garis, bingkai (frame), atau bentuk lainnya.

11. Miller’s Law

Lalu di urutan ke-11 ada yang namanya Miller’s Law. Hukum ini cukup unik. Kok bisa? Ia mengatakan bahwa ternyata rata-rata orang hanya dapat menyimpan 7 (plus atau minus 2) item dalam memori kerja mereka.

Maka dari itu pemotongan (chunking) adalah carayang efektif untuk menyajikan grup konten dengan cara yang dapat dikelola. Atur konten dalam grup yang terdiri dari 5–9 item sekaligus. Contohnya seperti apa?

Menu navigasi Netflix yang hanya berjumlah 6

Mungkin kamu tidak asing dengan yang namanya Netflix. Ternyata pada aplikasinya pun hanya menampilkan 6 menu saja. Dimana masih lebih dari 5 tapi kurang dari 7. Jadi, Netflix sukses menerapkan prinsip Miller’s Law ini.

12. Occam’s Razor

Pada urutan yang ke-12 ada yang namanya Occam’s Razor. Hukum UX ini mengatakan bahwa diantara hipotesis yang bersaing yang memprediksi dengan baik, yang memiliki asumsi paling sedikit harus dipilih.

Maka dari itu, kamu sebaiknya analisis setiap elemen dan hapus sebanyak mungkin, tanpa mengganggu fungsinya secara keseluruhan.

Contoh penerapan pada hukum Occam’s Razor

Bisa dilihat pada website yang sebelah kanan sudah mengeliminasi elemen-elemen yang tidak penting. Dengan begitu menampilkan lebih sedikit elemen.

13. Pareto Principle

Pada urutan ke-13 ada yang namanya Pareto Principle. Prinsip ini mengatakan bahwa 80% dampak yang kita hasilkan ternyata berasal dari hanya 20% usaha kita. Dan ternyata prinsip ini juga berlaku di UX.

Kalau konteksnya kita sedang membuat UX dalam sebuah aplikasi, maka fokuslah pada 20% dari kesuluruhan fitur aplikasi tersebut. Dimana 20% fitur tersebut adalah fitur yang punya dampak paling besar.

Dan perlu kamu ketahui, bukan berarti kamu menghapus 80% fitur lainnya yang memiliki prioritas lebih rendah. Fitur yang tidak sering digunakan bukan berarti tidak digunakan.

14. Parkinson’s Law

Pada urutan ke-14 ini ada yang namanya Parkinson’s Law. Parkinson’s Law mencoba untuk menjelaskan kepada kita tentang pandangan pengguna dalam pengoperasian produk.

Mencoba untuk mengerti atau menghitung jumlah waktu yang harus di kerjakan oleh user ketika melakukan pengoperasian produk yang telah kita desain. Hal tersebut dimulai dari informasi yang mereka dapat dan aksi yang mereka lakukan. Semakin cepat mereka memahami semakin baik desain yang telah kita kerjakan. Dalam melakukan hal tersebut kita harus membuat sebuah elemen yang gampang dimengerti oleh pengguna.

Cobalah untuk memikirkan bahwa pengguna itu sibuk alias tidak memiliki banyak waktu dalam melakukan pengoperasian. Maka kita harus memikirkan bagaimana pengguna tersebut dapat melakukan sebuah tugas mereka dengan cepat dan benar.

Sehingga ketika pengguna diberikan waktu yang semakin sedikit, ia tidak membuang-buang waktu dan memanfaatkan waktu yang singkat tersebut dengan optimal. Seperti apa contohnya?

Contoh penerapan Parkinson’s Law pada aplikasi Stripe

Aplikasi berbasis website, Stripe, benar-benar menerapkan Parkinson’s Law dengan mantap. Stripe menyederhanakan proses pembayaran begitu simpel. Bisa kamu lihat pada gambar di atas, kamu cukup mengisi beberapa kolom saja. Setelah itu, kamu langsung bisa berdonasi 1 dollar. Jika kamu adalah salah satu pengguna yang sibuk, tentu ini berguna buat kamu.

15. Peak-End Rule

Kemudian hukum UX di urutan ke-15 ada yang namanya Peak-End Rule. Hukum yang satu ini mengungkapkan kebiasaan pengguna yang cukup unik lho. Ternyata pengguna itu cenderung menilai suatu pengalaman (experience) berdasarkan bagaimana perasaan mereka pada puncaknya (Peak moment) dan pada akhirnya (End moment), dibandingkan jumlah total atau rata-rata setiap momen pengalaman.

Contoh nih, kamu pergi ke sebuah Dufan (tempat hiburan). Setelah hampir seharian kamu menaiki banyak wahana, kamu akan cenderung menilai pengalaman berada di Dufan lewat salah satu momen saja.

Kalau kamu merasa pergi ke Dufan itu merupakan pengalaman yang menyenangkan karena tadi wahana Roller Coasternya seru, maka itu masuk faktor momen puncak (Peak moment).

Sedangkan kalau mungkin kamu merasa pergi ke Dufan itu merupakan pengalaman yang menyenangkan karena ketika perjalanan pulang bisa makan es krim bareng teman-teman, maka itu masuk faktor momen akhir (End moment).

Masih bingung dan perlu contoh lain? Lihat gambar di bawah ini.

Contoh penerapan Peak-End Rule pada aplikasi Duolingo

Salah satu aplikasi yang menerapkan prinsip ini adalah aplikasi Duolingo. Duolingo adalah aplikasi untuk belajar bahasa gratis. Mereka menerapkan prinsip ini dengan cara menggunakan maskot kartunnya untuk menarik pengguna di seluruh proses pembelajaran.

Aplikasi tersebut juga memberi selamat kepada pengguna untuk menjawab 10 pertanyaan dengan benar. Tentu pengalaman pengguna seperti ini yang takkan dilupakan.

16. Postel’s Law

Pada urutan ke-16 ini ada hukum yang namanya Postel’s Law. Postel’s Law mengatakan untuk liberal dalam apa yang kita terima, dan konservatif dalam apa yang kita kirim.

Maksudnya seperti apa? Banyak hal ketika merancang pengalaman pengguna, kita harus memperhitungkan berapa banyak tindakan yang dapat dilakukan pengguna dan toleran terhadapnya. Contohnya ketika kita membuat sebuah formulir untuk pengguna, kita harus menerima variabel jawaban tertentu dalam formulir tersebut.

Perbandingan formulir yang menggunakan Postel’s Law

Terlihat jelas bukan mana formulir yang salah dan yang benar jika kita mengacu pada Postel’s Law? Ingat quotes ini :

Be liberal in what you accept, and conservative in what you send

Intinya adalah kamu harus se-terbuka mungkin untuk menerima input dari pengguna secara empatik, fleksibel, dan toleran. Dan selanjutnya menerjemahkan input tersebut untuk memenuhi requirements, menentukan batasan untuk input, dan memberikan umpan balik yang jelas kepada pengguna.

17. Serial Position Effect

Lalu hukum UX di urutan ke-17 ada yang namanya Serial Position Effect. Hukum ini menjelaskan kalau pengguna memiliki kecenderungan untuk mengingat item pertama dan terakhir secara berurutan.

Jadi mudahnya, posisi item di sebuah aplikasi itu sangat berpengaruh. Contohnya apa? Coba kamu cek aplikasi seperti Instagram, Twitter, Medium, atau aplikasi lainnya.

Menu navigasi aplikasi Twitter, Medium, dan Product Hunt

Mereka menempatkan 2 menu navigasi terpenting di pojok kanan dan pojok kiri. Di pojok kanan ada menu ‘Akun/profil’. Sedangkan di pojok kiri ada menu ‘Beranda’. Untuk menu-menu lainnya mereka letakkan di tengah-tengahnya. Dengan meletakkan posisi menu seperti itu, aplikasi-aplikasi tersebut menggunakan prinsip Serial Position Effect.

18. Tesler’s Law

Kemudian hukum UX di urutan ke-18 ada yang namanya Tesler’s Law. Hukum ini juga dikenal sebagai ‘Hukum Konservasi Kompleksitas’. Maksudnya apa? Jadi hukum ini menyatakan bahwa setiap sistem itu ada sejumlah kompleksitas yang tidak bisa dikurangi. Contohnya seperti apa?

Contohnya ketika kita sedang ingin memesan tiket pesawat. Proses mencari destinasi adalah suatu yang tidak bisa dihindari. Dan terkadang proses mencari bisa jadi hal yang kompleks, tapi bukan berarti proses mencari destinasi dihilangkan.

Proses mencari destinasi

Untuk itulah proses mencari destinasi bisa dibuat dengan menambahkan ‘auto suggestion’, supaya jadi lebih mudah dan kita jadi terbantu. Jadi ‘auto suggestion ini menampilkan saran pencarian yang potensial. Gunanya buat apa? Tentu untuk mengurangi input data dan membantu pengguna mendapatkan hasil pencarian langsung. Sehingga proses mencari destinasi jadi lebih cepat.

19. Von Restorff Effect

Selanjutnya hukum UX di urutan ke-19 ada yang namanya Von Restorff Effect.Efek ini juga dikenal dengan nama ‘The Isolation Effect’. Jadi hukum ini memprediksi bahwa ketika beberapa objek serupa hadir, salah satu yang berbeda dari yang lain kemungkinan besar akan diingat.

Contohnya nih, seperti ketika kita mau berlangganan di aplikasi Dropbox.

Pilihan paket berlangganan aplikasi Dropbox

Dropbox menekankan berlangganan ‘Advanced’ dengan tidak hanya menyertakan label biru di bagian atas, tetapi juga menyoroti nama dan tombol rencana tersebut. Dua pilihan berlangganan yang lainnya (yaitu yang Standard dan Enterprise), menggunakan ‘tombol hantu’ (atau bisa dibilang tombol yang tidak mencolok) dan warna biru muda di kotak harga.

Hal tersebutlah yang bikin pilihan berlangganan ‘Advanced’ semakin mencolok dan menjadi titik perhatian utama pengguna.

20. Zeigarnik Effect

Terakhir, di urutan ke-20 ada yang namanya Zeigarnik Effect. Jadi hukum yang ke-20 ini bilang kalau ternyata pengguna itu lebih gampang mengingat tugas/hal yang tidak selesai atau terganggu.

Nah itulah kenapa kadang kalau kamu melakukan hal sesuatu di sebuah aplikasi itu ada ‘progress bar’-nya. Contoh paling gampang nih, kalau kamu baru pertama kali mendownload sebuah aplikasi, setelah itu biasanya perlu mendaftar dulu kan?

Ketika lagi daftar, tentu ada beberapa langkah. Ada yang 3 sampai 5 langkah. Dan dengan ‘progress bar’ tadi, kita jadi lebih tahu, “ohh kita lagi di langkah yang ke-4 nih. Dikit lagi selesai daftarnya”. Dengan begitu kita sebagai pengguna akan cenderung untuk bisa menyelesaikan hal/tugas tersebut. Dalam contoh tadi, menyelesaikan hal/tugas untuk daftar di aplikasinya.

Nah itulah 20 hukum UX yang mengacu pada sumber referensi utama yaitu situs resmi Law of UX. Tentu ada juga beberapa sumber lainnya diantaranya :

https://medium.com/swlh/ux-laws-with-practical-examples-c418b4738d20

--

--