Hukum UX Atau Law Of UX Beserta Contoh

Hukum-hukum UX sangat penting bagi seorang desainer UI/UX, terutama saat mereka sedang membuat atau memperbaiki pengalaman pengguna (user experience).

Dapatkan notifikasi ke email kamu setiap kali ada tulisan baru. GRATIS.

Subscription Form

Hukum-hukum ini membantu desainer agar bisa menciptakan desain yang lebih mudah dipahami dan digunakan oleh orang-orang.

Di website lawofux.com, ada 4 kategori hukum UX yang perlu kamu tahu:

  1. Hukum Aksesibilitas
    Desain harus bisa diakses oleh semua orang, termasuk mereka yang memiliki keterbatasan fisik atau penglihatan. Pastikan elemen-elemen penting mudah dijangkau dan aplikasikan fitur yang mendukung kebutuhan beragam pengguna.
  2. Hukum Keterbacaan
    Pengguna harus bisa dengan mudah membaca dan memahami konten di website atau aplikasi. Gunakan ukuran font yang pas, warna yang kontras, dan spasi yang cukup agar mata tidak cepat lelah.
  3. Hukum Konsistensi
    Desain harus konsisten di seluruh aplikasi atau website. Misalnya, tombol dengan fungsi yang sama harus terlihat sama di setiap halaman. Ini membantu pengguna merasa lebih familiar dan mengurangi kebingungannya.
  4. Hukum Sederhana
    Semakin sederhana desain, semakin mudah bagi pengguna untuk mengerti dan menggunakannya. Hindari terlalu banyak pilihan atau elemen yang tidak perlu, agar pengguna bisa fokus pada tugas utama mereka.

Heuristic

Heuristik adalah cara cepat untuk menyelesaikan masalah. Dengan menggunakan teknik ini, kita tidak perlu membuktikan apakah solusi yang kita pilih benar atau tidak, tapi biasanya solusi yang ditemukan cukup akurat.

Heuristik sering dipakai untuk masalah-masalah yang lebih sederhana, namun bisa juga membantu untuk menyelesaikan masalah yang lebih besar atau rumit.

Misalnya, kalau kamu pakai aplikasi peta untuk mencari rute tercepat, aplikasi tersebut menggunakan heuristik. Walaupun rute yang diberikan mungkin bukan yang terbaik dalam setiap kondisi, cara ini cepat dan memudahkan kita untuk sampai ke tujuan.

Terdapat 6 hukum yang masuk kategori heuristic

1. Aestethic Usability Effect

Aesthetic Usability Effect menjelaskan bahwa pengguna seringkali menganggap desain yang menarik itu juga lebih berguna. Jadi, semakin cantik desainnya, semakin terasa manfaatnya.

Desain yang enak dilihat bisa membuat pengguna tidak terlalu fokus pada masalah-masalah kecil dalam aplikasi.

Contohnya, saat kamu menggunakan aplikasi yang tampilannya keren, kamu mungkin tidak terlalu peduli jika ada beberapa bug kecil atau fungsi yang agak bingung.

Desain yang menarik ini bisa membuat pengguna lebih toleran terhadap hal-hal sepele yang sebenarnya perlu diperbaiki.

Namun, saat melakukan Usability Testing, tampilan yang cantik ini bisa jadi masalah. Karena pengguna lebih fokus pada desain yang menarik, mereka mungkin tidak menyadari masalah atau kekurangan yang ada di dalam aplikasi.

Jadi, meskipun visualnya bagus, aplikasi tetap perlu diuji lebih dalam untuk memastikan fungsinya juga berjalan dengan baik.

contoh tampilan yang estetis

Pada gambar di atas, tampak jelas bahwa aplikasi tersebut memiliki desain yang estetis. Semakin menarik tampilan aplikasinya, semakin besar kemungkinan desain itu menutupi masalah-masalah kecil yang ada.

Ketika dilakukan Usability Testing, masalah kecil yang sebenarnya penting bisa terlewat karena pengguna lebih fokus pada tampilan yang menarik, bukan pada fungsionalitas atau kesalahan kecil di aplikasi.

Desain yang cantik memang bisa membuat pengalaman pengguna terasa lebih menyenangkan, tapi jangan sampai masalah teknisnya jadi terabaikan.

2. Fitt’s Law

Fitts’s Law adalah hukum UX yang menjelaskan bahwa waktu yang dibutuhkan untuk mencapai sebuah target (misalnya, tombol atau link) bergantung pada dua hal: jarak ke target dan ukuran target itu sendiri.

Jadi, semakin dekat jarak ke tombol atau link, semakin cepat kita bisa mengkliknya. Selain itu, jika ukuran tombol atau link lebih besar, kita juga akan lebih cepat mencapainya karena lebih mudah diklik.

Contohnya, jika tombol “Kirim” di aplikasi sangat kecil dan berada di sudut layar, kamu akan membutuhkan lebih banyak waktu dan usaha untuk mengkliknya.

Sebaliknya, tombol yang lebih besar dan lebih dekat dengan posisi jari atau kursor akan lebih mudah dan cepat diakses.

Prinsip dari Fitts’s law

Target sentuh, seperti tombol atau ikon di aplikasi, harus cukup besar agar pengguna bisa dengan mudah membedakan dan memilihnya dengan tepat. Jika terlalu kecil, pengguna bisa kesulitan untuk mengetuknya dengan akurat.

Selain itu, jarak antar tombol juga penting. Tombol-tombol yang terlalu dekat bisa membuat pengguna salah klik, sedangkan yang terlalu jauh bisa membuat mereka kesulitan menjangkaunya.

Penting juga untuk menempatkan tombol di tempat yang mudah dijangkau. Misalnya, di posisi yang nyaman bagi tangan atau jari pengguna, terutama di layar ponsel.

Dengan begitu, pengalaman pengguna jadi lebih lancar dan tidak membingungkan.

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

Bisa dilihat pada gambar di atas, perbedaan antara tombol yang baik dan yang kurang baik di aplikasi.

Pada bagian kanan (yang benar), tombolnya besar dan ditempatkan di posisi yang mudah dijangkau, sehingga pengguna bisa mengkliknya dengan mudah dan cepat.

Sedangkan pada bagian kiri (yang salah), tombolnya kecil dan letaknya terlalu jauh di kiri, membuatnya sulit dijangkau dan bisa menyebabkan kesalahan klik.

Ini menunjukkan betapa pentingnya ukuran tombol dan penempatan yang tepat agar pengguna bisa berinteraksi dengan aplikasi dengan lebih nyaman dan efisien.

3. Hick’s Law

Hick’s Law mengatakan bahwa semakin banyak pilihan yang kita berikan, semakin lama waktu yang dibutuhkan pengguna untuk membuat keputusan.

Hal ini terjadi karena banyaknya pilihan membuat kita merasa bingung dan sulit menentukan mana yang terbaik.

Untuk itu, kita perlu menyederhanakan pilihan bagi pengguna. Caranya? Cukup pecah tugas yang kompleks menjadi langkah-langkah kecil.

Misalnya, kalau di aplikasi kamu ada banyak opsi yang harus dipilih, alih-alih memberikan semuanya sekaligus, kamu bisa tampilkan pilihan secara bertahap.

Misalnya, setelah pengguna memilih satu langkah, baru munculkan pilihan berikutnya. Dengan cara ini, pengguna bisa fokus pada satu hal dalam setiap langkah, sehingga membuat keputusan mereka lebih cepat dan mudah.

Hindari pengguna memilih opsi terlalu banyak. Seperti apa contohnya?

Contoh Hick’s Law
Contoh Hick’s Law

Bisa dilihat, opsi pilihan yang paling kiri membutuhkan waktu paling sedikit untuk dipilih. Kenapa? Karena jumlah pilihannya sedikit, jadi pengguna tidak perlu bingung memilih.

Semakin sedikit pilihan, semakin cepat keputusan bisa diambil. Ini menunjukkan pentingnya menyederhanakan pilihan agar pengguna bisa lebih cepat dan mudah membuat keputusan tanpa merasa kewalahan.

4. Jakob’s Law

Jakob’s Law mengatakan bahwa pengguna sering menghabiskan sebagian besar waktunya di aplikasi lain. Artinya, mereka sudah terbiasa dengan cara kerja aplikasi-aplikasi tersebut.

Karena itu, pengguna lebih suka jika aplikasi yang kita buat bekerja dengan cara yang mirip dengan aplikasi yang sudah mereka kenal.

Dengan mengikuti model mental yang sudah ada, kita bisa menciptakan pengalaman pengguna yang lebih baik.

Pengguna tidak perlu lagi menghabiskan waktu belajar cara menggunakan aplikasi baru, sehingga mereka bisa langsung fokus pada tugas atau pekerjaan yang ingin mereka selesaikan.

Contohnya, jika kita membuat aplikasi yang tombol-tombol dan navigasinya mirip dengan aplikasi lain yang sering digunakan orang, pengguna akan merasa lebih cepat terbiasa dan bisa langsung menggunakannya tanpa bingung.

elemen pada website ecommerce
Contoh peletakan elemen pada website e-commerce

Contohnya, kalau kamu perhatikan dengan lebih jeli, kebanyakan website e-commerce menempatkan elemen-elemen dengan cara yang mirip.

Misalnya, gambar produk biasanya diletakkan di sebelah kiri, sementara nama produk, harga, deskripsi, dan informasi lainnya ada di sebelah kanan.

Ini adalah contoh dari penerapan Jakob’s Law. Karena pengguna sudah terbiasa dengan susunan elemen seperti ini, mereka bisa lebih cepat memahami dan fokus pada apa yang mereka butuhkan, tanpa harus mempelajari tata letak yang baru.

Nah, sampai di sini, kamu mengerti kan? Dengan mengikuti pola yang sudah dikenal, pengalaman pengguna jadi lebih lancar dan efisien.

5. Miller’s Law

Miller's law

Hukum Miller ini memang cukup unik. Hukum ini mengatakan bahwa rata-rata orang hanya bisa menyimpan sekitar 7 (plus atau minus 2) item dalam memori kerja mereka.

Artinya, kita cenderung kesulitan untuk mengingat terlalu banyak informasi sekaligus.

Nah, untuk memudahkan pengguna, kita bisa menggunakan teknik yang disebut chunking. Chunking adalah cara untuk menyajikan informasi dalam grup-grup kecil yang lebih mudah dikelola.

Misalnya, alih-alih menampilkan banyak sekali item sekaligus, kita bisa mengelompokkan informasi menjadi 5 hingga 9 item per grup.

Contohnya, saat menampilkan pilihan menu, kamu bisa membaginya ke dalam kategori yang jelas, seperti “Produk Terbaru,” “Promo,” dan “Kategori Populer.”

Dengan cara ini, pengguna akan lebih mudah memproses informasi tanpa merasa kebingungan atau kewalahan.

Menu navigasi Netflix yang hanya berjumlah 6

Mungkin kamu tidak asing dengan Netflix, kan?

Nah, ternyata aplikasi Netflix juga menerapkan Hukum Miller dengan sangat baik. Di aplikasi Netflix, kamu akan melihat bahwa mereka hanya menampilkan sekitar 6 menu utama di layar.

Angka ini memang lebih dari 5, tapi kurang dari 7, yang sesuai dengan prinsip Miller’s Law.

Dengan membatasi jumlah menu, Netflix membuat penggunanya tidak merasa kewalahan. Informasi yang ditampilkan cukup sedikit untuk bisa dicerna dengan cepat, tapi tetap memberikan pilihan yang beragam.

Ini membuat pengalaman pengguna jadi lebih nyaman dan lebih mudah untuk bernavigasi di antara berbagai pilihan film atau acara.

6. Parkinson’s Law

Parkinsons Law

Parkinson’s Law memberikan pandangan yang penting tentang cara pengguna berinteraksi dengan produk yang kita desain.

Hukum ini mengingatkan kita bahwa waktu yang dibutuhkan pengguna untuk melakukan suatu tugas akan cenderung mengisi waktu yang tersedia, jadi semakin sedikit waktu yang diberikan, semakin efisien mereka harus bekerja.

Dalam konteks desain, ini berarti kita harus mempertimbangkan berapa banyak waktu yang dibutuhkan pengguna untuk memahami dan menyelesaikan tugas di aplikasi atau website yang kita buat.

Semakin cepat mereka memahami cara kerja aplikasi, semakin baik desain yang telah kita kerjakan.

Penting untuk membuat elemen-elemen yang mudah dimengerti dan tidak membingungkan pengguna.

Pengguna itu sibuk, jadi mereka tidak ingin menghabiskan waktu lama untuk mencari tahu cara menggunakan aplikasi. Mereka lebih suka menyelesaikan tugas mereka dengan cepat dan tepat.

Jadi, ketika merancang aplikasi, kita harus memikirkan bagaimana mempercepat proses dan memberikan jalan pintas agar pengguna bisa menyelesaikan tugas mereka tanpa membuang waktu.

Dengan cara ini, pengguna bisa memanfaatkan waktu mereka yang terbatas dengan optimal, tanpa merasa frustasi atau bingung.

Contoh penerapan Parkinson’s Law pada aplikasi Stripe

Aplikasi berbasis website seperti Stripe benar-benar menerapkan Parkinson’s Law dengan sangat baik. Mereka menyederhanakan proses pembayaran hingga sangat simpel.

Misalnya, seperti yang bisa kamu lihat pada gambar di atas, untuk melakukan donasi, kamu hanya perlu mengisi beberapa kolom saja. Setelah itu, kamu langsung bisa berdonasi, bahkan hanya dengan 1 dolar.

Jika kamu adalah pengguna yang sibuk dan tidak punya banyak waktu, desain seperti ini sangat membantu.

Stripe membuat prosesnya cepat dan efisien, tanpa membuang-buang waktu untuk pengisian yang rumit atau langkah-langkah yang tidak perlu.

Ini adalah contoh sempurna bagaimana desain yang baik bisa membuat pengguna menyelesaikan tugas dengan cepat dan mudah, sesuai dengan prinsip Parkinson’s Law.

Principle

Acuan dasar saat mendesain produk yang mudah digunakan oleh pengguna umumnya berfokus pada beberapa prinsip dasar UX (User Experience).

1. Doherty Threshold

Hukum Doherty Threshold mengatakan bahwa produktivitas bisa meningkat pesat ketika interaksi antara komputer dan penggunanya terjadi dalam waktu kurang dari 400ms (milisecond).

Kenapa? Karena dengan interaksi yang cepat, baik pengguna maupun sistem tidak perlu menunggu satu sama lain. Ini membuat pengalaman lebih lancar dan meminimalkan waktu yang terbuang.

Untuk itu, berikan umpan balik sistem dalam waktu kurang dari 400ms.

Baca Juga:  Desain Website Minimalis: Solusi untuk Pengalaman Pengguna Optimal

Misalnya, ketika pengguna mengklik tombol atau mengisi kolom, pastikan sistem memberikan respon yang cepat, seperti perubahan warna tombol atau indikator pemrosesan, agar pengguna tahu bahwa aksi mereka sedang diproses.

Dengan menjaga respons dalam batas waktu tersebut, pengguna akan merasa lebih terhubung dan fokus. Hal ini juga meningkatkan produktivitas karena mereka tidak merasa menunggu terlalu lama, yang bisa mengganggu alur kerja mereka.

Kamu bisa lihat pada grafik berikut, yang menunjukkan bagaimana waktu respons yang cepat bisa menjaga perhatian pengguna dan meningkatkan produktivitas.

Grafik ini menggambarkan bagaimana keterlambatan yang terlalu lama (lebih dari 400ms) bisa membuat pengguna merasa frustrasi atau kehilangan fokus.

Grafik diatas 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.

Meskipun teknologi sudah berkembang pesat, prinsip ini tetap relevan hingga sekarang. Jadi, penting bagi desainer dan pengembang untuk memperhatikan kecepatan respons dalam setiap produk yang mereka buat.

Jadi, untuk menciptakan pengalaman pengguna yang lebih baik dan meningkatkan produktivitas, pastikan interaksi dengan sistem tetap cepat dan responsif!

2. Occam’s Razor

Occams Razor

Hukum UX Occam’s Razor mengatakan bahwa di antara beberapa pilihan atau hipotesis yang dapat memprediksi hasil dengan baik, kita harus memilih yang memiliki asumsi paling sedikit.

Dengan kata lain, solusi yang lebih sederhana seringkali lebih efektif.

Dalam konteks desain, ini berarti kita harus menganalisis setiap elemen dalam aplikasi atau website dan menghapus elemen-elemen yang tidak perlu, tanpa mengorbankan fungsionalitas keseluruhan.

Semakin sedikit elemen yang ditampilkan, semakin mudah bagi pengguna untuk fokus pada tugas mereka dan menggunakan produk dengan lancar.

Misalnya, jika ada tombol atau fitur yang jarang digunakan atau tidak begitu penting, lebih baik untuk menghilangkannya daripada membuat tampilan yang berantakan.

Dengan cara ini, desain akan lebih bersih, lebih fokus, dan lebih mudah digunakan oleh pengguna.

Jadi, prinsip Occam’s Razor dalam desain UX mengajarkan kita untuk menyederhanakan segala sesuatu sebanyak mungkin, sambil tetap mempertahankan fungsi yang penting dan membuat pengalaman pengguna jadi lebih baik.

Contoh penerapan pada hukum Occam’s Razor

Bisa dilihat pada website di sebelah kanan yang sudah mengeliminasi elemen-elemen yang tidak penting.

Dengan menghapus bagian-bagian yang tidak perlu, website tersebut menampilkan lebih sedikit elemen, sehingga tampilan menjadi lebih bersih dan fokus.

Hal ini memudahkan pengguna untuk menemukan apa yang mereka butuhkan tanpa merasa terganggu oleh banyaknya informasi atau tombol yang tidak relevan.

Prinsip ini sesuai dengan Hukum UX Occam’s Razor, di mana kita memilih solusi yang lebih sederhana dan lebih efisien, mengurangi kebingungannya dan meningkatkan pengalaman pengguna secara keseluruhan.

3. Pareto Principle

Prinsip ini dikenal dengan nama Pareto Principle atau 80/20 Rule, yang mengatakan bahwa 80% dampak yang kita hasilkan berasal dari hanya 20% usaha kita. Menariknya, prinsip ini juga berlaku dalam UX design.

Jika kita sedang mendesain UX untuk sebuah aplikasi, fokuslah pada 20% fitur yang memberikan 80% dampak pada pengguna.

Artinya, identifikasi fitur-fitur yang paling sering digunakan dan yang memberikan nilai terbesar bagi pengalaman pengguna.

Namun, ini bukan berarti kita harus menghapus 80% fitur lainnya. Fitur yang jarang digunakan tetap memiliki nilai, meskipun prioritasnya lebih rendah.

Pengguna yang membutuhkan fitur tersebut tetap akan menggunakannya, jadi kita harus memastikan mereka tetap dapat mengaksesnya dengan mudah, meski fitur tersebut tidak sepopuler yang lainnya.

Intinya, dengan fokus pada fitur yang paling berdampak, kita bisa menciptakan aplikasi yang lebih efisien, dengan pengalaman yang lebih menyenangkan dan relevan bagi sebagian besar pengguna.

4. Postel’s Law

Postels Law

Postel’s Law mengatakan bahwa kita harus liberal dalam apa yang kita terima dan konservatif dalam apa yang kita kirim.

Dalam konteks desain UX, ini berarti kita harus cukup fleksibel dan toleran terhadap input pengguna, tetapi juga mengontrol dengan ketat apa yang kita berikan kembali ke pengguna.

Misalnya, ketika mendesain sebuah formulir untuk pengguna, kita harus memperhitungkan bahwa mereka mungkin akan mengisi kolom dengan cara yang sedikit berbeda dari yang kita harapkan.

Perbandingan formulir yang menggunakan Postel’s Law
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

Jadi, kita harus cukup terbuka dan fleksibel dalam menerima berbagai jawaban, meskipun jawaban tersebut tidak persis sesuai format yang kita buat. Ini memungkinkan pengguna merasa lebih mudah berinteraksi tanpa rasa takut akan kesalahan.

Namun, setelah menerima input dari pengguna, kita harus menentukan batasan dan memastikan bahwa data yang kita kirim atau proses sesuai dengan standar yang kita inginkan.

Kita juga harus memberikan umpan balik yang jelas kepada pengguna tentang apakah input mereka benar atau perlu diperbaiki.

Dengan kata lain, terimalah input pengguna dengan empati dan fleksibilitas, namun pastikan untuk memproses dan menyajikan hasilnya dengan ketat, agar pengguna tetap merasa nyaman dan yakin bahwa mereka melakukan hal yang benar.

5. Tesler’s Law

Tesler’s Law, atau yang dikenal juga sebagai Hukum Konservasi Kompleksitas, mengatakan bahwa setiap sistem memiliki jumlah kompleksitas tertentu yang tidak bisa dikurangi.

Ini berarti, meskipun kita berusaha membuat sistem atau aplikasi semudah mungkin untuk digunakan, ada beberapa aspek yang tetap kompleks karena memang tidak bisa disederhanakan lebih jauh.

Contohnya adalah ketika kita ingin memesan tiket pesawat. Proses untuk mencari destinasi dan memilih penerbangan adalah bagian yang tidak bisa dihindari dan tetap memerlukan beberapa langkah.

Meskipun kita bisa membuat antarmuka pengguna yang lebih sederhana dan intuitif, proses pencarian destinasi tetap harus ada karena itu bagian dari tugas yang harus dilakukan pengguna.

Meskipun proses pencarian bisa terasa kompleks atau memakan waktu, kita bisa berusaha untuk menyederhanakan cara kita menghadapi kompleksitas tersebut.

Misalnya, dengan menyediakan filter pencarian yang jelas, memberikan saran otomatis, atau mengoptimalkan hasil pencarian, kita bisa mengurangi beban kognitif pengguna tanpa menghilangkan kebutuhan akan pencarian itu sendiri.

Proses mencari destinasi

Pada intinya, Tesler’s Law mengingatkan kita bahwa tidak semua kompleksitas bisa dihilangkan, tetapi kita harus berusaha untuk meminimalkan kompleksitas itu sebanyak mungkin dan menyajikan pengalaman yang tetap mudah dipahami dan digunakan oleh pengguna.

Untuk mengurangi kompleksitas dalam proses mencari destinasi, kita bisa menambahkan fitur ‘auto suggestion’ atau saran otomatis. Fitur ini akan menampilkan daftar saran pencarian yang potensial saat pengguna mulai mengetik.

Apa gunanya?
Fitur auto suggestion ini sangat berguna untuk mengurangi input data yang perlu dimasukkan oleh pengguna.

Dengan memberikan pilihan yang relevan secara otomatis, pengguna tidak perlu mengetik seluruh nama destinasi, yang bisa memakan waktu dan tenaga.

Cukup memilih dari saran yang muncul, dan mereka langsung mendapatkan hasil pencarian yang tepat.

Dengan cara ini, proses pencarian jadi lebih cepat dan lebih efisien, karena pengguna bisa langsung menemukan destinasi yang mereka inginkan tanpa harus mengetik banyak.

Ini juga mengurangi kemungkinan kesalahan pengetikan dan membuat pengalaman pengguna menjadi lebih lancar dan menyenangkan.

Jadi, meskipun proses mencari destinasi tetap memerlukan beberapa langkah, fitur auto suggestion membantu untuk membuatnya lebih cepat dan lebih mudah, tanpa mengurangi esensi dari proses itu sendiri.

Gestalt

1. Law of Common Region

Law of Common Region mengatakan bahwa elemen-elemen dalam desain bisa dikelompokkan jika mereka berada dalam area yang dibatasi dengan jelas.

Jadi, kita bisa memanfaatkan batasan visual seperti border atau warna latar belakang untuk membuat grup elemen terlihat lebih jelas dan terpisah.

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

Penting untuk memberi batasan. Kiri salah, kanan benar.

Bisa dilihat pada gambar di atas, penerapan dari Law of Common Region. Pada gambar sebelah kanan, elemen-elemen tersebut diberi border atau batas, sehingga grup-grup elemen menjadi lebih jelas terlihat.

Dengan adanya border, pengguna dapat dengan mudah mengenali dan membedakan antara grup satu dengan grup lainnya, membuat keseluruhan tampilan lebih terorganisir.

Ini menunjukkan bagaimana pembatas visual dapat membantu mengelompokkan elemen-elemen yang berkaitan dan memudahkan pengguna dalam memahami struktur konten.

Jadi, dengan menambahkan border atau batas, kita menciptakan area yang lebih terpisah dan lebih mudah dipahami oleh pengguna.

Grafik yang dikelompokkan. Kanan salan, kiri benar.

Hukum ini juga berlaku ketika kamu membuat aplikasi yang menggunakan grafik-grafik.

Dalam tampilan yang melibatkan banyak grafik atau diagram, sangat penting untuk mengelompokkan grafik yang satu dengan yang lainnya agar pengguna bisa lebih mudah memahami informasi yang disajikan.

Salah satu cara untuk melakukannya adalah dengan memberikan border atau batas di sekitar masing-masing grafik.

Dengan cara ini, setiap grafik akan terlihat terpisah dengan jelas, dan pengguna bisa langsung mengenali bagian mana yang berkaitan dengan grafik tertentu.

Alternatif lainnya, kamu bisa menggunakan warna latar belakang yang berbeda untuk tiap grafik atau kelompok grafik.

Misalnya, beri warna latar belakang yang berbeda antara satu grup grafik dengan grup grafik lainnya. Ini juga akan membantu membedakan informasi yang satu dengan yang lainnya, membuat tampilan jadi lebih rapi dan mudah dicerna.

Jadi, dengan menggunakan border atau warna, kamu bisa dengan mudah mengelompokkan grafik-grafik dalam aplikasi, dan membuat pengguna lebih cepat memahami informasi yang ingin disampaikan.

2. Law of Proximity

Law of Proximity menyatakan bahwa objek atau elemen yang berdekatan satu sama lain cenderung akan dianggap sebagai bagian dari satu grup.

Artinya, semakin dekat jarak antara elemen-elemen tersebut, semakin besar kemungkinan pengguna akan mengelompokkan elemen-elemen itu bersama.

Prinsip ini sangat penting dalam mendesain tata letak atau struktur informasi di aplikasi atau website.

Ketika elemen-elemen yang saling berkaitan ditempatkan berdekatan, pengguna akan lebih mudah untuk memahami hubungan antar elemen tersebut dan mengatur informasi dengan lebih efisien.

Contohnya, jika ada kolom nama dan email pada formulir, lebih baik untuk menempatkannya berdekatan, karena kedua elemen ini memiliki hubungan yang erat.

Sebaliknya, jika elemen-elemen yang tidak berkaitan diletakkan terlalu dekat, bisa membingungkan pengguna dan membuat tampilan menjadi tidak jelas.

Contoh penerapan Law of Proximity pada website Amazon
Contoh penerapan Law of Proximity pada website Amazon

Kamu pasti sudah tidak asing lagi dengan Amazon, kan? Nah, pada gambar di atas, kita bisa melihat penerapan Law of Proximity yang jelas.

Pada lingkaran A, perhatikan bagian yang menampilkan produk-produk terbaru, yang berada di bawah tulisan “Ultimas novedades”, dan produk-produk yang paling laris, yang ada di bawah tulisan “Los mas vendidos”.

Kedua kelompok produk ini dipisahkan dengan jelas, sehingga kita bisa dengan mudah membedakan produk terbaru dari produk yang paling populer.

Ini adalah contoh bagaimana jarak antar elemen membantu pengguna mengidentifikasi dan memahami kelompok informasi dengan cepat.

Lalu, di lingkaran B, kita juga melihat pengelompokan yang rapi berdasarkan kategori teknologi (misalnya, LCD, LED, dll.), dan di bawahnya ada pengelompokan berdasarkan merek (seperti LG, Samsung, dll.).

Dengan cara ini, Amazon memudahkan pengguna untuk menavigasi dan menemukan produk berdasarkan preferensi mereka, baik itu berdasarkan teknologi maupun merek.

Semua pengelompokan ini menunjukkan bagaimana proximity—atau kedekatan antar elemen—membantu membuat antarmuka lebih intuitif dan mudah digunakan, memudahkan kita untuk menemukan apa yang kita cari dengan cepat.

Intinya, Law of Proximity membantu dalam menciptakan desain yang lebih intuitif dan mudah dinavigasi, karena pengguna secara alami akan mengelompokkan elemen yang saling berhubungan.

3. Law of Prägnanz

Law of Pragnanz

Law of Prägnanz mengungkapkan bahwa mata manusia cenderung mencari kesederhanaan dan keteraturan, bahkan dalam bentuk yang rumit sekalipun.

Ini berarti, kita lebih mudah untuk memahami dan mengingat informasi yang disajikan secara sederhana dan terstruktur, daripada yang penuh dengan kerumitan dan kebingungannya.

Baca Juga:  Panduan Singkat Tipografi Untuk Desainer

Penelitian juga menunjukkan bahwa manusia lebih mampu memproses secara visual elemen-elemen yang sederhana daripada elemen-elemen yang terlalu kompleks.

Misalnya, saat kita melihat desain yang bersih dan rapi, kita lebih mudah untuk menangkap makna dan informasi yang ingin disampaikan, tanpa merasa kewalahan.

Dalam desain UX, prinsip ini mengingatkan kita untuk menghindari elemen-elemen yang terlalu rumit dan lebih fokus pada kesederhanaan dan keteraturan.

Dengan begitu, kita membantu pengguna untuk memproses informasi dengan lebih mudah dan membuat pengalaman mereka lebih nyaman dan efisien.

Kecenderungan untuk mengklik elemen yang teratur
Kecenderungan untuk mengklik elemen yang teratur

Gambar di atas menunjukkan contoh penerapan desain yang menggunakan elemen-elemen sederhana yang mudah diproses secara visual.

Dengan desain yang jelas dan tidak rumit, pengguna dapat langsung memahami informasi yang ingin disampaikan tanpa kebingungan.

Hal ini menegaskan pentingnya prinsip Law of Prägnanz dalam desain UX. Elemen yang sederhana dan terstruktur dengan baik akan lebih cepat dipahami dan diingat oleh pengguna.

Sebaliknya, elemen yang kompleks dan membingungkan justru akan menghalangi pengguna dalam memahami informasi dan menambah beban kognitif mereka.

Jadi, sebagai desainer, sangat penting untuk menghindari elemen-elemen yang terlalu rumit.

Fokuslah pada kesederhanaan yang bisa membantu pengguna menavigasi aplikasi atau website dengan lebih mudah dan menikmati pengalaman yang lebih lancar.

4. Law of Similarity

Law of Similarity menyatakan bahwa mata manusia cenderung mempersepsikan elemen-elemen yang serupa dalam desain sebagai bagian dari satu kelompok atau bentuk yang utuh, meskipun elemen-elemen tersebut dipisahkan secara fisik.

Ini berarti, jika beberapa elemen terlihat mirip (misalnya, memiliki bentuk, warna, atau gaya yang serupa), kita secara otomatis akan menganggapnya sebagai bagian dari kelompok yang sama.

Sebagai contoh, dalam sistem navigasi pada sebuah website atau aplikasi, kita bisa memanfaatkan prinsip ini untuk membuatnya lebih mudah dipahami.

Elemen-elemen navigasi (seperti tombol atau menu) bisa dibedakan secara visual.

Misalnya dengan menggunakan warna, bentuk, atau ikon yang konsisten, sehingga pengguna langsung tahu bahwa elemen-elemen tersebut berfungsi sebagai navigasi, meskipun posisinya berbeda di halaman.

Selain itu, sistem navigasi harus ditata dengan konsisten.

Misalnya, jika kita menggunakan warna biru untuk tombol navigasi utama, maka tombol navigasi lainnya juga harus menggunakan warna yang serupa.

Konsistensi ini membantu pengguna mengenali elemen-elemen tersebut dengan cepat dan mempercepat proses navigasi.

Dengan memanfaatkan Law of Similarity dan konsistensi dalam desain, kita bisa menciptakan pengalaman pengguna yang lebih intuitif dan mudah digunakan, sehingga mereka dapat menavigasi aplikasi atau website dengan lancar tanpa kebingungan.

Contohnya seperti apa?

Contoh yang salah dan yang benar pada Law of Similarity
Contoh yang salah dan yang benar pada Law of Similarity

Kamu bisa lihat perbedaannya pada bagian kiri (yang benar), di mana semua elemen navigasi memiliki warna dan ukuran yang sama.

Warna abu-abu muda dan ukuran ikon yang konsisten membuat sistem navigasi terlihat seragam, memudahkan pengguna untuk mengenali bahwa semua elemen tersebut memiliki fungsi yang serupa.

Sedangkan di bagian kanan (yang salah), ada ikon yang berbeda — yang gambar bumi, misalnya, lebih besar dan warnanya juga lebih gelap dibandingkan ikon lainnya.

Hal ini membuat ikon tersebut terlihat lebih menonjol dan membingungkan, karena tidak konsisten dengan elemen navigasi lainnya.

Sesuai dengan Law of Similarity, desain yang baik harus memastikan elemen-elemen yang serupa terlihat mirip, baik dari segi warna, ukuran, maupun bentuk.

Ini membantu pengguna untuk mengidentifikasi dan memahami fungsi elemen-elemen tersebut dengan lebih mudah. Jadi, dengan mengikuti prinsip ‘Similar’, kita bisa menciptakan desain yang lebih terstruktur dan intuitif.

Paham kan sekarang?

5. Law of Uniform Connectedness

Law of Uniform Connectedness

Law of Uniform Connectedness mengatakan bahwa elemen-elemen yang terhubung secara visual akan dianggap lebih terkait atau berhubungan satu sama lain dibandingkan dengan elemen yang tidak ada koneksinya.

Artinya, jika dua atau lebih elemen memiliki hubungan visual, pengguna akan lebih mudah mengidentifikasi bahwa elemen-elemen tersebut saling berhubungan dan membentuk satu grup.

Untuk itu, jika kamu memiliki kelompok elemen yang serupa atau berhubungan, sebaiknya menghubungkannya secara visual. Ini bisa dilakukan dengan berbagai cara, seperti:

  • Menggunakan warna yang sama untuk elemen-elemen dalam kelompok tersebut.
  • Menambahkan garis atau border yang mengelilingi elemen-elemen tersebut.
  • Memberikan bingkai (frame) atau background yang konsisten untuk menandakan bahwa elemen-elemen itu adalah bagian dari satu grup.
  • Menggunakan bentuk atau ikon yang serupa.

Dengan cara ini, pengguna akan lebih mudah memahami bahwa elemen-elemen tersebut berfungsi bersama-sama atau memiliki kaitan, sehingga membantu mempermudah navigasi dan membuat desain lebih terstruktur.

Misalnya, dalam sebuah aplikasi yang memiliki formulir pendaftaran, kamu bisa mengelompokkan kolom input untuk informasi pribadi (nama, alamat, dll.) dengan garis atau warna yang konsisten, sehingga pengguna langsung tahu bahwa semua elemen tersebut saling terkait dalam satu bagian form.

Cognitive bias

1. Peak-End Rule

Peak End Rule

Hukum Peak and Rule mengungkapkan bahwa pengguna cenderung menilai pengalaman mereka berdasarkan dua momen utama: momen puncak (Peak moment) dan momen akhir (End moment), bukan berdasarkan keseluruhan pengalaman atau rata-rata setiap momen yang mereka alami.

Contohnya, jika kamu pergi ke Dufan (tempat hiburan), meskipun kamu seharian menaiki berbagai wahana, penilaianmu tentang pengalaman tersebut lebih banyak dipengaruhi oleh satu momen puncak yang berkesan dan momen terakhir yang menyenankan.

  • Momen puncak (Peak moment): Jika wahana Roller Coaster yang kamu naiki sangat seru dan menantang, itu menjadi momen puncak dalam pengalamanmu di Dufan. Momen ini akan sangat mempengaruhi penilaianmu terhadap keseluruhan pengalaman di tempat tersebut.
  • Momen akhir (End moment): Setelah seharian di Dufan, ketika perjalanan pulang kamu makan es krim bareng teman-teman, itu menjadi momen akhir yang menyenangkan. Walaupun sepanjang hari kamu merasa lelah atau ada momen yang kurang seru, momen akhir ini bisa menjadi yang paling diingat dan meninggalkan kesan positif.

Dengan kata lain, meskipun pengalaman kita penuh dengan banyak momen, hanya beberapa momen yang berkesan—baik itu puncak atau akhir—yang akan membentuk penilaian kita tentang keseluruhan pengalaman.

Jadi, penting dalam desain UX untuk memastikan puncak pengalaman dan akhir pengalaman pengguna dibuat sebaik mungkin, karena itulah yang akan mereka ingat dan nilai.

Prinsip ini mengajarkan kita untuk memfokuskan perhatian pada elemen-elemen yang bisa menciptakan pengalaman puncak dan momen akhir yang menyenangkan.

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

Contoh penerapan Peak-End Rule pada aplikasi Duolingo

Duolingo adalah contoh aplikasi yang sangat baik dalam menerapkan prinsip Peak and Rule.

Aplikasi ini menciptakan pengalaman yang berkesan dengan fokus pada dua momen utama yang bisa mempengaruhi penilaian pengguna: momen puncak dan momen akhir.

  1. Momen Puncak (Peak Moment):
    Duolingo menggunakan maskot kartunnya yang lucu dan menyenangkan untuk menarik perhatian pengguna sepanjang proses pembelajaran.
    Maskot ini sering kali muncul di berbagai bagian aplikasi, memberi nuansa yang lebih ringan dan menyenangkan dalam setiap pelajaran.
    Ini menciptakan momen yang menyenankan yang membuat pengguna merasa lebih terlibat dan menikmati pembelajaran.
  2. Momen Akhir (End Moment):
    Selain itu, Duolingo juga memberikan pemberitahuan atau penghargaan ketika pengguna berhasil menjawab sejumlah pertanyaan dengan benar, seperti misalnya setelah 10 pertanyaan.
    Pengguna merasa dihargai dan diberi apresiasi atas pencapaian mereka. Hal ini memberikan momen akhir yang positif yang akan mereka ingat, bahkan jika mereka merasa lelah atau frustrasi di tengah-tengah sesi pembelajaran.

Kombinasi antara maskot yang menyenangkan dan penghargaan yang diberikan di akhir sesi pelajaran membuat pengalaman pengguna di Duolingo menjadi sangat berkesan.

Ini membuat mereka lebih mungkin untuk kembali menggunakan aplikasi dan menyelesaikan pelajaran, karena mereka mengingat momen puncak dan akhir yang positif.

Jadi, prinsip Peak and Rule bekerja dengan baik di Duolingo dengan menciptakan pengalaman yang menyenangkan dan memotivasi pengguna untuk terus belajar.

2. Serial Position Effect

Serial Position Effect menjelaskan bahwa kita cenderung lebih mudah mengingat item pertama dan item terakhir dalam urutan, dan ini sangat penting dalam desain aplikasi.

Posisi elemen dalam aplikasi memengaruhi bagaimana pengguna mengalami dan mengingat informasi yang ada.

Misalnya, dalam aplikasi seperti Instagram, Twitter, dan Medium, kita bisa melihat bahwa mereka menempatkan dua menu navigasi terpenting di posisi yang sangat strategis, yaitu di pojok kanan dan pojok kiri.

  • Pojok Kiri: Menu Beranda (Home) biasanya ada di kiri, yang merupakan elemen pertama yang akan diakses pengguna untuk kembali ke halaman utama.
  • Pojok Kanan: Menu Akun/Profil biasanya terletak di kanan, memberi pengguna akses cepat untuk mengelola akun mereka, melihat pengaturan, dan sebagainya.

Menu-menu lainnya, seperti pencarian atau notifikasi, biasanya diletakkan di tengah, karena mereka tidak seutama beranda atau akun pengguna.

Menu navigasi aplikasi Twitter, Medium, dan Product Hunt

Mengapa ini efektif?

Dengan menempatkan menu navigasi utama di posisi pertama dan terakhir ini, aplikasi-aplikasi tersebut memanfaatkan prinsip Serial Position Effect.

Pengguna akan lebih cenderung mengingat dan sering mengakses menu Beranda di kiri (sebagai titik awal) dan Akun/Profil di kanan (sebagai titik akhir atau penutupan).

Jadi, posisi elemen di aplikasi memiliki peran besar dalam bagaimana pengguna menavigasi aplikasi dan mengingat elemen-elemen penting.

Dengan memanfaatkan prinsip ini, aplikasi dapat mempermudah pengguna dalam menemukan fitur-fitur utama dengan cepat dan efektif.

3. Von Restorff Effect

Von Restorff Effect

Von Restorff Effect, yang juga dikenal sebagai The Isolation Effect, menjelaskan bahwa kita lebih cenderung mengingat objek atau elemen yang berbeda dibandingkan dengan objek lainnya yang serupa di sekitarnya.

Jadi, ketika ada beberapa elemen yang mirip, elemen yang paling menonjol atau berbeda akan lebih mudah diingat.

Contohnya adalah ketika kita ingin berlangganan di aplikasi Dropbox:

Pilihan paket berlangganan aplikasi Dropbox
  • Paket Berlangganan ‘Advanced’ dibuat sangat mencolok dengan menggunakan label biru yang jelas di bagian atas dan tombol yang lebih besar dan menonjol.
    Ini membuat paket tersebut terlihat berbeda dan lebih menarik perhatian dibandingkan dengan pilihan lainnya.
  • Di sisi lain, paket Standard dan Enterprise menggunakan tombol yang lebih sederhana (tombol hantu) dengan warna biru muda yang lebih lembut.
    Ini membuatnya lebih “tersembunyi” atau tidak terlalu mencolok.

Karena paket ‘Advanced’ terlihat berbeda (baik dari segi warna, ukuran, maupun desain), maka pengguna cenderung akan lebih memperhatikannya dan mungkin lebih tertarik untuk memilihnya.

Ini adalah penerapan dari Von Restorff Effect yang membuat pilihan tersebut menjadi titik perhatian utama.

Mengapa ini efektif?

Dengan cara ini, Dropbox memanfaatkan prinsip ini untuk memastikan bahwa pilihan yang paling diinginkan atau yang paling menguntungkan (dalam hal ini, paket ‘Advanced’) lebih mudah ditemukan dan lebih mungkin untuk dipilih. Dengan menonjolkan elemen yang berbeda dari yang lain, pengguna akan lebih cenderung mengingatnya dan memperhatikannya lebih banyak.

Jadi, jika kamu ingin memperjelas pilihan utama dalam desain aplikasi atau website, kamu bisa menggunakan prinsip Von Restorff Effect untuk membuat elemen tersebut terlihat berbeda dan lebih menonjol, sehingga lebih mudah menarik perhatian pengguna.

Mengapa ini efektif?

Dengan cara ini, Dropbox memanfaatkan prinsip ini untuk memastikan bahwa pilihan yang paling diinginkan atau yang paling menguntungkan (dalam hal ini, paket ‘Advanced’) lebih mudah ditemukan dan lebih mungkin untuk dipilih.

Dengan menonjolkan elemen yang berbeda dari yang lain, pengguna akan lebih cenderung mengingatnya dan memperhatikannya lebih banyak.

Jadi, jika kamu ingin memperjelas pilihan utama dalam desain aplikasi atau website, kamu bisa menggunakan prinsip Von Restorff Effect untuk membuat elemen tersebut terlihat berbeda dan lebih menonjol, sehingga lebih mudah menarik perhatian pengguna.

4. Zeigarnik Effect

Zeigarnik Effect menjelaskan bahwa kita lebih mudah mengingat tugas atau pekerjaan yang belum selesai, dibandingkan dengan yang sudah selesai.

Ini terjadi karena otak kita cenderung fokus pada tugas yang belum tuntas, sehingga kita merasa terdorong untuk menyelesaikannya.

Contohnya yang paling sering kita temui adalah penggunaan progress bar di banyak aplikasi.

Misalnya, saat kamu baru pertama kali mendownload aplikasi dan harus melalui beberapa langkah untuk mendaftar.

progress bar

Pada saat pendaftaran, biasanya ada progress bar yang menunjukkan seberapa jauh proses pendaftaran sudah berjalan.

Misalnya, kamu sudah berada di langkah ke-4 dari 5 langkah, dan progress bar ini memberi tahu kamu bahwa “sedikit lagi” untuk selesai.

Dengan cara ini, Zeigarnik Effect berperan, karena otak kita merasa lebih terdorong untuk menyelesaikan tugas yang belum tuntas, dalam hal ini menyelesaikan pendaftaran di aplikasi.

Kenapa ini efektif?

  • Meningkatkan Fokus Pengguna: Dengan adanya progress bar, pengguna tahu berapa banyak langkah lagi yang harus mereka selesaikan. Ini membantu mereka tetap fokus dan melanjutkan tugas hingga selesai.
  • Motivasi untuk Menyelesaikan: Melihat progres yang terukur memberikan rasa pencapaian dan memotivasi untuk menyelesaikan tugas, karena otak kita cenderung merasa tidak nyaman jika tugas masih belum selesai.

Jadi, Zeigarnik Effect bisa sangat berguna dalam desain UX untuk membuat pengguna merasa terdorong dan termotivasi untuk menyelesaikan proses tertentu—seperti mendaftar, mengisi formulir, atau menyelesaikan pembayaran—dengan memberikan indikasi visual yang jelas tentang seberapa jauh mereka sudah melangkah dan seberapa dekat mereka dengan tujuan akhir.

Sumber : https://medium.com/@keanshihab/20-law-of-ux-explained-discussed-in-indonesia-4e71cd20bc5e

Tinggalkan komentar

45 - 5 =

Add your first comment to this post

Website ini menggunakan theme generatepress premium and layanan hosting di webnesia.co.id.

GeneratePress Premium
Webnesia