16 Jan

Ilmu di Balik Ukuran dan Posisi Tombol dalam Desain UI Fitts’ Law

By M. FARREL SEFRINDRA GHANI - views

Pernah enggak, ketika kita inginkan menutup atau mengclose iklan di aplikasi, namun justru kita menekan tombol lainnya karena icon close (X) terdapat di belakang tombol lainnya yang terlalu kecil untuk dilihat mata kita. Atau ketika kita melakukan checkout belanja online, mata dan jari kita langsung tertuju ke satu tombol besar tanpa perlu berpikir lama. Hal-hal seperti ini sebenarnya bukan kebetulan. Di baliknya, ada prinsip desain yang disebut Fitts’ Law.

Pendahuluan

Bekerja di bidang teknologi informasi untuk membuat websit, aplikasi, dan digital lainnya, desain antarmuka untuk saat ini bukan lagi soal kecantikan visual semata yang peru di pikirkan. Developer perlu mempertimbangkan kemampuan fisik bagi orang ketika melakukan interaksi dengan perangkat lunak. Itulah mengapa peran faktor manusia diintegrasikan sebagai bagian dari mahasiswa kuliah Interaksi Manusia dan Komputer. Satu di antara peraturan yang kerap digunakan untuk desain antarmuka adalah Fitts’ Law, yang menyebutkan adanya hubungan ukuran, jarak, waktu, dan kemudahan.

Apa Itu Fitts’ Law ?

Fitts' Law merupakan aturan yang menjelaskan bahwa waktu yang diperlukan oleh individu untuk menggapai objek ditentukan oleh jarak dan besar objek itu sendiri. Fitts' Law membantu menjelaskan bahwa waktu yang diperlukan oleh individu untuk menggapai objek berhubungan dengan jarak dan besar objek itu sendiri; semakin besar objek dan semakin dekat lokasinya kepada individu itu sendiri maka makin mudah objek itu diklik oleh individu.

Dalam konteks desain UI, hukum ini sangat relevan karena hampir semua interaksi pengguna melibatkan aktivitas menunjuk dan menekan baik menggunakan mouse maupun touchpad atau layar sentuh. Oleh karena itu, desainer perlu memahami bahwa ukuran dan posisi elemen bukan hanya masalah estetika tapi juga kenyamanan dan efisiensi.1

Mengapa Fitts’ Law Penting untuk Desain Interface ?

Implementasi Hukum Fitts’ ini dengan baik dapat memiliki pengaruh besar kepada pengalaman pengguna dalam mengoperasikan sistem. Jika tombol yang dimiliki memiliki tingkat aksesibiltiy tinggi, hal ini akan mempercepat sistem dan mengurangi kesalahan. Jika tombol sistem memiliki ukuran kecil atau akses itu susah untuk di jangkau sama pengguna.

Yang lebih relevan lagi, Fitts’ Law berfungsi untuk membantu desain dalam menentukan titik prioritas visual yang lebih berdasar. Sesuatu yang paling sering digunakan atau yang paling bernilai harus dibuat lebih besar dan diposisikan di tempat yang mudah dijangkau, terlebih lagi terutama pada perangkat mobile yang digunakan dengan satu tangan.

Contoh Praktis Penerapan Fitts’ Law

1. Tombol Checkout pada Aplikasi E-Commerce

Dengan aplikasi e-commerce seperti Shopee atau Tokopedia, pembuatan tombol Checkout diberi ukuran besar di letakan di pojok kiri bawah sehingga berada pada posisi bawah layar dengan letak mudah dekat dengan posisi ibu jari pengguna, Hal ini menunjukkan penerapan Fitts’ Law yang efektif.2

     

2. Tombol Close (X) yang Terlalu Kecil

Contoh aplikasi atau content iklan yang menentapkan tombol close dengan ukuran yang kecil serta tidak mudah dijangkau. Sehingga hal itu membuat pengguna kontak dengan area yang tidak sama. Contoh aplikasi atau content iklan ini adalah sebuah contoh dari aplikasi atau content iklan yang menentapkan desain yang tidak mengabaikan Fitts’ Law.


   

3. Tombol Navigation pada Aplikasi Mobile 

Banyak aplikasi modern yang memiliki kebijakan dengan bantuan dari tampilan bawah bar navigasi ini karena relatif lebih mudah diakses dari menu di bagian atas layar komputer laptop maupun mobil tersebut. Bagian pelayanan primer ini dibuat relatif besar agar lebih mudah diaksesk gesek oleh pemakainya.

Tips Aplikatif Menerapkan Fitts’ Law

Agar Fitts’ Law dapat diterapkan secara optimal dalam desain antarmuka, berikut beberapa tips yang bisa digunakan:

  1. Buat tombol utama dengan ukuran yang lebih besar
  2. Letakkan aksi penting di area yang mudah dijangkau pengguna
  3. Hindari menempatkan tombol berisiko (hapus atau logout) terlalu dekat dengan tombol utama
  4. Sesuaikan ukuran tombol untuk perangkat mobile dan desktop

Tips ini tidak hanya berguna bagi desainer, tetapi juga bagi mahasiswa atau pengembang pemula yang sedang belajar merancang interface.

Fitts’ Law dalam Pembelajaran IMK

Selama pembelajaran kelas Interaksi Manusia dan Komputer, mahasiswa belajar tentang pentingnya koneksi yang berorientasi pada pengguna sebagai syarat aplikasi berorientasi pada pengguna yang baik, dibangun berdasarkan keyakinan bahwa antara sistem komputer dan sistem sosial umumnya berlainan secara fundamental, termasuk berlainan dalam tujuan, sifat, dan proses komuniksi dengan begitu Universitas Muhammadiyah Riau di jurusan Informatika menyediakan matkul wajib IMK disinilah Mahasiswa di ajarkan fundamental awal. 

Kesimpulan

Fitts’ Law membuktikan bahwa ukuran dan posisi tombol memiliki pengaruh besar terhadap kenyamanan dan kecepatan interaksi pengguna. Prinsip ini sering kita temui dalam aplikasi sehari-hari, meskipun sering tidak disadari. Dengan memahami dan menerapkan Fitts’ Law, desainer dan pengembang dapat menciptakan produk digital yang lebih ramah, efisien, dan manusiawi.

Sebagai pengguna, kita menjadi lebih sadar terhadap desain yang baik. Sebagai calon pengembang atau desainer, pemahaman ini menjadi bekal penting untuk menciptakan pengalaman digital yang lebih baik.

Referensi

1.        Arabi M, Angkotasan R, Murdiyanto AW, Himawan A, Syahruddin F. Desain User Interface Dan User Experience Prototype Mobile Learning Menggunakan Metode Design Thinking Metode Design Thinking. 2023;16(2):90-101.

2.        Muttaqin AN, Lubis M, Informasi MS, et al. PENERAPAN LAW OF UX DALAM ANALISIS DESAIN ANTARMUKA. 2025;7(2):775-787.