Affordance adalah apa yang bisa dilakukan seseorang dengan sebuah benda, dan di UI artinya: elemen yang bisa diklik harus terlihat bisa diklik, dan yang gak bisa diklik jangan terlihat seperti tombol. Bayangin pintu kaca di minimarket. Pintu dengan gagang panjang bilang "tarik", pintu dengan pelat datar bilang "dorong". Kalau pintu dorong dipasangi gagang, orang menariknya dulu, gagal, baru mendorong. Pintunya gak rusak; tandanya yang bohong.
🧪 Tebakan cepat: Di halaman pesan Bu Sri, pilihan "1 malam · 2 malam · 3 malam" ditulis sebagai teks abu-abu biasa, padahal bisa diklik. Tulisan "Check-in 12 Des" dibuat kotak hijau membulat, padahal cuma informasi. Tamu baru yang pertama kali datang akan mencoba mengetuk yang mana? Jawabannya ada di bagian "Tes: apa yang dicoba diklik pengguna baru".
Affordance dan signifier
Don Norman, di bukunya The Design of Everyday Things, membedakan dua hal:
- Affordance: tindakan yang memang mungkin. Tombol bisa ditekan, kolom input bisa diketik.
- Signifier: tanda yang memberi tahu di mana dan bagaimana bertindak. Bentuk tombol, garis bawah link, kotak input.
Di layar, semua bisa diklik secara teknis, jadi yang kita desain sebenarnya signifier-nya. Dalam percakapan sehari-hari dua kata ini sering dipakai bergantian, dan "affordance yang jelas" artinya signifier-nya jelas.
Tanda yang terlihat saat diam, dan tanda yang mengonfirmasi
Ada dua jenis tanda:
- Terlihat saat diam (sebelum disentuh): bentuk tombol dengan latar, garis tepi, dan sudut membulat; warna aksen; garis bawah di link; kotak di kolom input. Ini yang dibaca orang sebelum memutuskan mengklik.
- Mengonfirmasi (saat disentuh):
cursor: pointerdan perubahan warna saat hover (cuma ada di mouse), cincin fokus saat dipilih dengan Tab (keyboard), perubahan saat ditekan.
HP gak punya cursor dan hover. Jadi tanda yang terlihat saat diam harus cukup sendirian; cursor dan hover cuma mengonfirmasi.
Ini tombol-tombol di halaman Bu Sri dengan kedua jenis tanda:
<div class="nights">
<button aria-pressed="false">1 malam</button>
<button aria-pressed="true">2 malam</button>
<button aria-pressed="false">3 malam</button>
</div>
<p class="checkin">Check-in 12 Des</p>
<button class="book">Pesan kamar, bayar di tempat</button>
<style>
.nights button, .book { font: inherit; border-radius: 0.375rem; cursor: pointer; }
.nights button { padding: 0.5rem 1rem; color: #1f2937; background: #fff; border: 1px solid #475569; }
.nights button[aria-pressed="true"] { color: white; background: #15803d; border-color: #15803d; }
.book { padding: 0.75rem 1rem; color: white; background-color: #15803d; border: none; }
.nights button:hover { border-color: #15803d; }
.book:hover { background-color: #166534; }
.nights button:focus-visible, .book:focus-visible { outline: 3px solid #1f2937; outline-offset: 2px; }
.checkin { color: #475569; } /* informasi: tanpa kotak, tanpa warna aksen */
</style>
- Tombol malam punya garis tepi, padding, dan sudut
0.375rem: bentuk tombol yang terbaca tanpa disentuh. Yang terpilih diisi hijau. - Tombol pesan diisi hijau
#15803d, satu-satunya warna aksen di halaman, dengan tekswhite. cursor: pointerdan:hovermengonfirmasi di mouse;:focus-visiblememberi cincin yang terlihat saat tombol dipilih dengan Tab..checkinsengaja polos: abu-abu, tanpa kotak, karena gak bisa diklik.
Di latihan nanti, tombolnya "Simpan Perubahan" dengan biru #2563EB sebagai background-color. Polanya sama: latar berwarna, teks white, border-radius: 0.375rem, dan cursor: pointer.
Elemen yang benar: button untuk aksi, a untuk pindah halaman
Pakai <button> untuk aksi (memilih malam, mengirim pesanan, menyimpan) dan <a href> untuk pindah halaman (ke "Cara ke Homestay Kabut", ke WhatsApp Bu Sri). <button> memberi banyak hal gratis: bisa dipilih dengan Tab, bisa ditekan dengan Enter dan Spasi, dan screen reader menyebutnya "tombol". Sebuah <div> atau <span> dengan event klik gak punya satu pun dari itu: harus ditambah role="button", tabindex="0", dan kode untuk tombol keyboard. Lebih mudah pakai <button> dari awal.
Tes: apa yang dicoba diklik pengguna baru
Tim Bu Sri meminta Pak Hadi (58), yang belum pernah membuka halamannya, memesan Kamar Teras untuk 2 malam, lalu cuma mengamati. Di versi pertama halaman:
| Elemen | Terlihat bisa diklik? | Bisa diklik? | Yang terjadi |
|---|---|---|---|
| Teks abu-abu "1 malam · 2 malam · 3 malam" | Tidak | Ya | Dilewati. Pak Hadi gak tahu bisa memilih jumlah malam |
| Kotak hijau "Check-in 12 Des" | Ya | Tidak | Diketuk dua kali, gak terjadi apa-apa |
| Tombol hijau "Pesan kamar" | Ya | Ya | Ditekan, berhasil |
Dua baris pertama adalah dua kegagalan affordance: tersembunyi (bisa diklik tapi gak kelihatan) dan palsu (kelihatan bisa diklik tapi gak bisa). Jadi jawaban tebakannya: tamu baru mencoba mengetuk kotak tanggal, dan melewati pilihan malam. Perbaikannya ada di kode di atas: pilihan malam diberi bentuk tombol, dan tanggal dikembalikan jadi teks biasa.
Kamu bisa melakukan tes ini sendiri tanpa lab: tunjukkan halamanmu ke satu orang yang belum pernah melihatnya, minta dia menunjuk semua yang menurutnya bisa diklik, lalu bandingkan dengan yang benar-benar bisa diklik.
⚠️ Jebakan yang sering ketemu
<div>atau<span>sebagai tombol. Gak bisa dipilih dengan Tab, gak bisa ditekan dengan Enter. Pakai<button>.- Mengandalkan hover. Kartu yang cuma berubah bayangan dan cursor saat di-hover gak memberi tanda apa pun di HP. Beri tanda yang terlihat saat diam: ikon panah, teks "Lihat detail", atau garis tepi yang jelas.
- Kotak berwarna untuk informasi. Label, tanggal, atau status yang dibentuk seperti tombol akan diketuk orang.
- Link yang cuma beda warna. WCAG 1.4.1 meminta warna gak jadi satu-satunya pembeda, karena orang dengan buta warna bisa gak melihat bedanya. Di tengah paragraf, garis bawah adalah cara paling sederhana memenuhinya.
outline: nonetanpa pengganti. Pengguna keyboard kehilangan jejak di mana fokusnya.
TL;DR: Affordance artinya elemen terlihat sesuai fungsinya: yang bisa diklik terlihat bisa diklik, yang gak bisa diklik gak terlihat seperti tombol. Tandanya (signifier, istilah Don Norman) ada dua jenis: yang terlihat saat diam (latar, garis tepi, sudut, warna aksen, garis bawah) dan yang mengonfirmasi (cursor: pointer, hover, :focus-visible); HP gak punya hover, jadi tanda saat diam harus cukup sendirian. Pakai <button> untuk aksi dan <a> untuk navigasi, jangan <div> atau <span>. Tes affordance dengan pengguna baru: yang bisa diklik tapi dilewati berarti affordance tersembunyi, yang diketuk tapi gak bisa berarti affordance palsu.
