Prinsip Fitts' Law: Ilmu di Balik Ukuran & Posisi Tombol
Fitts' Law: Ilmu di Balik Ukuran dan Posisi Tombol
Muhammad Raihan Wildan Pratama
Mahasiswa Teknik Informatika, Universitas Muhammadiyah Riau
email: 240401237@student.umri.ac.id
HOOK
Bayangkan kamu sedang terburu-buru menekan tombol di layar ponsel. Tapi karena ukuran tombolnya terlalu kecil atau jarak antar tombol terlalu rapat, jarimu salah menekan (misclick) tombol lain. Kesulitan ini dapat dijelaskan oleh Fitts’ Law, yang mengukur seberapa mudah seseorang menjangkau elemen pada layar. Pada Fitts’ Law, semakin besar dan dekat sebuah elemen antarmuka, semakin mudah dan cepat kita mencapainya.
Pendahuluan
Antarmuka pengguna memiliki peran yang penting dalam kenyamanan dan interaksi antara manusia dan komputer. Elemen-elemen seperti tombol dan ikon sebaiknya dirancang agar mudah diakses dan responsif terhadap tindakan pengguna. Untuk mencapai tujuan tersebut, digunakan Fitts’ Law karena bisa memperkirakan perilaku pengguna saat mengarahkan kursor atau jari ke tombol atau ikon.
Sebagai fokus utama, artikel ini membahas bagaimana Fitts’ Law menjelaskan hubungan antara ukuran elemen (W), jarak ke elemen (D), dan waktu yang dibutuhkan pengguna untuk berinteraksi (T). Dengan memahami prinsip ini, desainer dapat merancang antarmuka yang lebih nyaman dan efisien bagi pengguna.
Dalam perkuliahan Interaksi Manusia dan Komputer (IMK) di Universitas Muhammadiyah Riau, kami mempelajari bagaimana cara merancang antarmuka dengan komponen yang senyaman mungkin untuk meningkatkan pengalaman pengguna. Dalam hal ini, Fitts' Law adalah salah satu cara untuk mencapai hal tersebut.
Apa itu Hukum Fitts?
Hukum Fitts pertama kali diperkenalkan oleh psikolog Paul Fitts pada tahun 1954. Secara sederhana, hukum ini menjelaskan bahwa semakin besar dan semakin dekat suatu objek, maka semakin mudah dan cepat objek tersebut dijangkau. Dalam konteks interaksi manusia dan komputer, waktu yang dibutuhkan untuk menekan suatu tombol akan bertambah jika jaraknya semakin jauh atau ukurannya semakin kecil.
Pengaruh Posisi Ikon Terhadap Kemudahan Mencapainya | Sumber: Dokumentasi pribadi
Seperti contoh pada gambar diatas. Berdasarkan posisi natural tangan kita saat memegang ponsel, ikon aplikasi Youtube yang berada di bagian bawah layar akan lebih mudah dan cepat dicapai daripada ikon yang berada di bagian atas layar.
Rumus dan Prinsip Dasar
Secara matematis, Fitts’ Law digambarkan dengan rumus: 
- T = waktu yang dibutuhkan untuk mencapai target
- D = jarak dari titik awal ke target
- W = lebar atau ukuran target
- a dan b = konstanta yang bergantung pada pengguna dan perangkat
Ini menunjukkan bahwa ketika jarak ke target menjadi dua kali lebih jauh, waktu yang dibutuhkan memang bertambah, tetapi tidak sampai dua kali lipat. Hal ini karena gerakan di awal bisa dilakukan dengan cepat, sementara perlambatan hanya terjadi saat mendekati target agar tetap akurat.
Menurut Hoffmann dan Pattison (2021), konstanta a dan b dalam rumus Hukum Fitts bervariasi tergantung perangkat dan pengguna. Konstanta a mencerminkan waktu reaksi dan jeda perangkat, sedangkan konstanta b menunjukkan seberapa sensitif waktu gerakan terhadap perubahan tingkat kesulitan tugas.
NN/g (Nielsen Norman Group) merangkumnya dengan pernyataan:
- Semakin jauh jarak ke target, semakin lama waktu yang dibutuhkan. (Target yang lebih dekat bisa dijangkau lebih cepat.)
- Semakin besar ukuran target, semakin cepat waktu yang diperlukan untuk menjangkaunya. (Target besar lebih cepat diklik daripada target kecil.)
Ilustrasi Prinsip Fitts’ Law | Sumber: https://www.nngroup.com/articles/fitts-law/
Iustrasi Fitts’ Law pada gambar tersebut menunjukkan bahwa walaupun Target A dan B berukuran sama, Target A lebih cepat dicapai karena jaraknya dari kursor (D1) lebih dekat daripada Target B (D2). Sementara itu, Target C berada pada jarak yang sama dengan Target A, tetapi ukurannya lebih kecil, sehingga membutuhkan waktu lebih lama untuk dicapai. Hal ini menunjukkan bahwa jarak dan ukuran target memengaruhi kecepatan interaksi pengguna.
Apa Kaitannya dengan Desain Antarmuka?
Dalam desain UI/UX, Fitts’ Law digunakan sebagai panduan agar pengguna bisa berinteraksi dengan lebih cepat dan mudah. Tombol yang penting seperti Submit atau Login sebaiknya dibuat cukup besar agar mudah diklik, ikon juga disarankan diberi teks agar area kliknya lebih luas. Selain ukuran, posisi juga berpengaruh, elemen yang sering dipakai sebaiknya diletakkan berdekatan, seperti Google Search yang kolom pencariannya di tengah layar.
Contoh Pemanfaatan Tepi Layar | Sumber: Dokumentasi pribadi
Salah satu strategi desain yang efektif adalah memanfaatkan tepi layar. MacKenzie (2018) menjelaskan bahwa sisi atau sudut layar secara fundamental berbeda dengan posisi lainnya karena target tersebut memiliki lebar yang tak terbatas dalam satu arah. Oleh karena itu, menempatkan elemen penting di tepi layar dapat secara signifikan mengurangi waktu akses pengguna. Contohnya adalah Taskbar pada Windows seperti gambar diatas.
Contoh ilustrasi:
1. Ukuran tombol yang terlalu kecil
Ilustrasi Ukuran Tombol yang Salah | Sumber: Dokumen pribadi
Tombol “Tutup iklan” sangat kecil sehingga pengguna sering salah tekan atau kesulitan menyentuhnya.
Ilustrasi Ukuran Tombol yang Benar | Sumber: Dokumen pribadi
Tombol “Tutup iklan” dibuat besar dan jelas sehingga mudah ditekan, terutama di layar ponsel. Pada layar sentuh, target kecil menyebabkan sentuhan tidak akurat dan frustrasi pengguna. Perancang harus memastikan target sentuh cukup besar (Nielsen, 2020).
2. Posisi tombol yang terlalu berdekatan
Ilustrasi Posisi Tombol yang Salah | Sumber: Dokumen pribadi
Tombol “Simpan” dan “Hapus” diletakkan terlalu berdekatan sehingga berisiko salah klik. Ketika target klik ditempatkan terlalu berdekatan, pengguna dapat secara tidak sengaja mengklik target yang salah, terutama saat bekerja cepat. Hal ini menciptakan kesalahan dan frustrasi (Nielsen, 2010).
Ilustrasi Posisi Tombol yang Benar | Sumber: Dokumen pribadi
Tombol “Simpan” dan “Hapus” diberi jarak yang cukup agar tidak mudah tertukar saat diklik.
3. Posisi dan tampilan tombol yang tidak pada umumnya
Ilustrasi Posisi dan Tampilan Tombol yang Salah | Sumber: Dokumen pribadi
Tombol “Konfirmasi” berwarna merah dan berada di sebelah kiri, sementara tombol “Batal” di sebelah kanan dan berwarna hijau, tata letak seperti ini tidak umum digunakan sehingga tinggi terjadinya kesalahan pengguna.
Ilustrasi Posisi dan Tampilan Tombol yang Benar | Sumber: Dokumen pribadi
Tombol “Konfirmasi” berwarna hijau dan berada di sebelah kanan, sementara tombol “Batal” di sebelah kiri dan berwarna merah, sesuai kebiasaan pengguna.
Tips Aplikatif:
- Perbesar elemen yang paling sering digunakan
Tombol utama seperti Login, Submit, atau Konfirmasi sebaiknya dibuat lebih besar dibandingkan elemen lainnya agar mudah dijangkau dan mengurangi kesalahan klik. - Letakkan elemen penting di area yang mudah dijangkau
Pada aplikasi mobile, tempatkan tombol utama di bagian bawah layar yang mudah dijangkau ibu jari. Pada desktop, manfaatkan tepi atau sudut layar karena lebih cepat diakses oleh kursor. - Berikan jarak yang cukup antar tombol
Hindari meletakkan tombol dengan fungsi berbeda terlalu berdekatan, terutama tombol berisiko seperti Hapus. Jarak yang cukup membantu pengguna menghindari salah klik. - Perluas area klik, bukan hanya tampilan visual
Tambahkan teks pada ikon agar area interaksi lebih luas, sehingga lebih mudah ditekan tanpa harus terlalu presisi. - Gunakan pola dan posisi yang sudah familiar bagi pengguna
Ikuti kebiasaan umum pengguna, seperti tombol Konfirmasi di sebelah kanan dan tombol Batal di sebelah kiri. Pola yang familiar membuat interaksi lebih cepat dan minim kesalahan.
Kesimpulan
Fitts’ Law menegaskan hubungan sederhana tetapi penting, semakin dekat dan besar sebuah elemen, semakin cepat pengguna dapat berinteraksi dengannya. Dengan menerapkan prinsip ini, desainer antarmuka dapat membuat UI lebih nyaman dan efisien, misalnya memperbesar tombol-tombol penting, mengelompokkan kontrol serupa, dan memanfaatkan area tepi layar. Hasilnya adalah pengalaman pengguna yang lebih cepat dan akurat, karena setiap klik dapat dilakukan dengan lebih mudah. Memahami Hukum Fitts membantu kita menciptakan desain yang selaras dengan kemampuan motorik dan kognitif pengguna, sehingga interaksi digital menjadi lebih efisien.
BRANDING UMRI
Artikel ini ditulis sebagai bagian dari pembelajaran mata kuliah Interaksi Manusia dan Komputer pada Program Studi Teknik Informatika, Universitas Muhammadiyah Riau (UMRI). Untuk informasi lebih lanjut, silakan kunjungi www.umri.ac.id.
Disclosure Penggunaan AI
Dalam penyusunan artikel ini, penulis menggunakan bantuan AI ChatGPT sebagai alat pendukung untuk proses brainstorming ide dan perbaikan struktur kalimat.
Referensi
MacKenzie, I. S. (2018). Fitts' law. In Encyclopedia of human-computer interaction (2nd ed.). Interaction Design Foundation.
Hoffmann, E. R., & Pattison, L. (2021). Fitts' law: The logarithmic and power models of movement time. Human Movement Science, 76, 102771. https://doi.org/10.1016/j.humov.2020.102771
Nielsen, J. (2020). Fitts's law: The logarithmic relationship between movement time and distance. Nielsen Norman Group. https://www.nngroup.com/articles/fitts-law/
Nielsen, J. (2010, January 26). Top 10 application-design mistakes. Nielsen Norman Group. https://www.nngroup.com/articles/top-10-application-design-mistakes