Affordance — Buat Elemen Terlihat Interaktif

Affordance dalam desain UI berarti elemen yang bisa diklik/diketuk terlihat jelas bisa diklik/diketuk. Pengguna harus langsung tahu mana yang interaktif tanpa harus menebak.

Tanda-tanda Elemen Interaktif

1. Warna berbeda — tombol/link menggunakan warna aksen yang menonjol
2. Cursor pointer — kursor berubah saat hover di elemen clickable
3. Hover state — perubahan visual saat mouse di atas elemen
4. Depth/shadow — elemen yang "terangkat" terasa bisa ditekan
5. Shape — rounded rectangle dengan padding = button-like

Anti-pattern: Flat Design Berlebihan

Flat design yang terlalu ekstrem bisa menghilangkan affordance:

Buruk:

<span style="color: #333;">Simpan</span>
<!-- Ini tombol? Teks biasa? Tidak jelas! -->

Baik:

<button style="
  background: #2563EB;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  cursor: pointer;
">Simpan</button>

Signifier yang Umum

Accessibility dan Affordance

Affordance bukan hanya visual:

• Gunakan elemen semantik yang benar — <button> untuk aksi, <a> untuk navigasi
• Fokus state — elemen interaktif harus terlihat jelas saat difokuskan (keyboard navigation)
• role attribute — jika harus menggunakan <div> sebagai button, tambahkan role="button" dan tabindex="0"

Tokopedia dan Gojek menggunakan warna hijau yang kuat untuk tombol utama — langsung jelas mana yang harus diklik.