Fitts's Law bilang: waktu untuk mencapai sebuah target bergantung pada dua hal, jarak ke target dan ukuran target. Target yang dekat dan besar cepat dicapai; yang jauh dan kecil lambat dan gampang meleset. Bayangin melempar kertas ke tempat sampah. Tong sampah besar di samping meja: masuk tanpa mikir. Gelas kecil di seberang ruangan: kamu membidik lama, dan tetap sering meleset.
🧪 Tebakan cepat: Bu Sri ingin memindahkan tombol Pesan dari bawah pilihan malam ke pojok kanan atas header, seperti di situs hotel besar. Di laptop 1280px, gerakan dari tombol "2 malam" ke tombol Pesan jadi berapa kali lebih sulit? Jawabannya ada di bagian "Menghitung di halaman Bu Sri".
Rumus Fitts
Paul Fitts (1954) meminta orang mengetuk bolak-balik dua target dengan jarak dan lebar yang diubah-ubah. Waktunya naik mengikuti satu angka, index of difficulty (ID). Rumus yang dipakai di HCI sekarang adalah bentuk Shannon dari Scott MacKenzie (1992):
MT = a + b · ID, dengan ID = log₂(D / W + 1)
- MT (movement time): waktu gerakan sampai target.
- D (distance): jarak dari titik awal ke tengah target.
- W (width): ukuran target searah gerakan. Kalau tangan bergerak lurus ke bawah, W adalah tinggi tombol, bukan lebarnya (MacKenzie dan Buxton, 1992, untuk target dua dimensi).
- a dan b: angka yang diukur per alat dan per orang (mouse, touchpad, jari). Jadi kita membandingkan ID-nya; detiknya baru bisa ditebak setelah diukur.
D dua kali lipat menambah ID sekitar 1 bit; W dua kali lipat menguranginya sekitar 1 bit. Jarak dan ukuran sama-sama penting.
Menghitung di halaman Bu Sri
Tamu baru saja menekan "2 malam". Dari tengah tombol itu, kami mengukur jarak ke tengah tombol Pesan dan ukuran tombol searah gerakan, di Chrome, Safari, dan Firefox (angkanya sama di ketiganya):
| Layar | Tombol Pesan | D | W searah gerakan | ID |
|---|---|---|---|---|
| HP 375px | di kartu, 293 × 48px | 94px | 48px (gerakan lurus ke bawah) | log₂(94 / 48 + 1) = 1,56 bit |
| HP 375px | pojok header, 65 × 32px | 399,6px | 33,9px | 3,68 bit |
| Laptop 1280px | di kartu, 350 × 48px | 94px | 48px | 1,56 bit |
| Laptop 1280px | pojok header, 65 × 32px | 1.060,9px | 69,7px | 4,02 bit |
Di laptop, ID-nya naik dari 1,56 jadi 4,02 bit: sekitar 2,6 kali lebih sulit. Tombol di kartu juga gak peduli lebar layar: di HP maupun laptop dia tetap 94px di bawah pilihan malam. Itu jawaban tebakannya.
Tombol di kartu cukup ditulis begini:
.book {
display: block;
width: 100%; /* selebar kartu: 293px di HP, 350px di laptop */
min-height: 48px; /* W untuk gerakan dari atas ke bawah */
padding: 12px 16px;
}
width: 100%membuat tombol mudah dicapai dari mana pun di kartu, tapi untuk gerakan lurus dari "2 malam" yang menentukan adalah tingginya.min-height: 48pxmenjaga W tetap 48px walau teksnya pendek, sekaligus memenuhi batas target sentuh di bawah.
Target sentuh di HP
Di HP, "kursornya" adalah ujung jari, yang menutup area beberapa milimeter dan gak bisa melihat apa yang ditutupnya. Steven Hoober (2017) mengamati bahwa supaya 95% ketukan kena, target di tengah layar butuh sekitar 7 mm, dan di tepi dan pojok sekitar 12 mm. Mouse punya ujung satu piksel. Jadi aplikasi HP butuh tombol yang lebih besar daripada aplikasi desktop: Apple meminta minimal 44 × 44 pt, Material Design 48 × 48 dp, dan WCAG 2.2 (kriteria 2.5.8) minimal 24 × 24 px. Tombol 32px di header lolos WCAG, tapi di bawah Apple dan Material.
Jangkauan ibu jari di HP
Hoober (2013) mengamati 1.333 orang memakai HP: 49% memakai satu tangan, mengetuk dengan ibu jari. Dengan pegangan itu, area yang paling mudah dijangkau ada di tengah sampai tengah bawah layar, dan pojok atas yang paling sulit: orang harus menggeser pegangannya. Penelitian Hoober berikutnya (2017) menambahkan dua hal: orang paling suka dan paling akurat mengetuk di tengah layar, dan peta "thumb zone" populer (bawah mudah, atas mustahil) terlalu menyederhanakan, karena tombol back di pojok kiri atas tetap sering dipakai.
Pelajaran praktisnya untuk halaman Bu Sri: aksi utama di tengah atau tengah bawah, selebar kartu, jangan di pojok atas.
📌 Tepi dan pojok layar desktop
Bruce Tognazzini (1999) menunjukkan keunggulan tepi layar di desktop: kursor berhenti di tepi, jadi target yang menempel ke tepi seolah tak terhingga dalamnya. Menu bar macOS di tepi atas bisa dicapai dengan lemparan mouse yang cepat tanpa kebablasan. Ini berlaku hanya untuk yang benar-benar menempel ke tepi layar fisik. Header sebuah halaman web gak termasuk, karena di atasnya masih ada tab dan bilah alamat browser; dan di layar sentuh, keunggulan ini gak ada sama sekali.
⚠️ Jebakan yang sering ketemu
- Melebarkan tombol padahal gerakannya ke bawah. W diukur searah gerakan. Untuk gerakan vertikal, tinggi yang menentukan.
- Aksi utama kecil di pojok. Di halaman Bu Sri, ID-nya 2,6 kali lebih tinggi di laptop, dan di HP pojok atas juga yang paling sulit untuk ibu jari.
- Target sentuh di bawah 44pt atau 48dp. Lolos 24px WCAG belum berarti nyaman untuk jari.
- Tombol berbahaya menempel ke tombol yang sering ditekan. "Hapus pesanan" tepat di samping "Lihat pesanan" mengundang salah tekan. Beri jarak, dan lindungi dengan konfirmasi.
- Menganggap pojok halaman web dapat bonus tepi. Cuma tepi layar sungguhan yang menghentikan kursor.
TL;DR: Fitts's Law: waktu mencapai target bergantung pada jarak dan ukuran, MT = a + b · log₂(D / W + 1) (Fitts 1954, bentuk Shannon MacKenzie 1992), dengan W diukur searah gerakan. Di halaman Bu Sri, tombol Pesan di kartu: D 94px, W 48px, ID 1,56 bit di HP dan laptop; di pojok header laptop: D 1.060,9px, W 69,7px, ID 4,02 bit, 2,6 kali lebih sulit. Untuk gerakan ke bawah, tinggi tombol yang menentukan. HP butuh target lebih besar dari desktop (jari 7 sampai 12 mm, Hoober 2017; Apple 44pt, Material 48dp, WCAG 24px). Ibu jari satu tangan paling mudah menjangkau tengah sampai tengah bawah, paling sulit pojok atas. Tepi layar desktop menghentikan kursor (Tognazzini 1999), tapi header halaman web dan layar sentuh gak dapat bonus itu.
