Zasada 05

Cel na miarę palca

Mysz trafia w piksel, palec w plamę. Cel dotykowy mniejszy niż 44 na 44 piksele zamienia interfejs w test zręczności, a gęsto upakowane ikony gwarantują kliknięcia obok. Obszar celu może być większy niż ikona, wystarczy padding.

Test zręczności, którego nie powinno być

Klikaj szybko w ikony po obu stronach, najlepiej na telefonie. Kliknięcie obok celu liczy się jako pudło.

✕ Ikony 24 px bez odstępów

Trafione: 0, obok: 0

✓ Cele 44 px z przerwami

Trafione: 0, obok: 0

Reguły

Każdy cel dotykowy ma co najmniej 44 na 44 piksele, licząc z paddingiem, nie samą ikonę.
Sąsiednie cele dzieli co najmniej 8 pikseli przerwy, żeby pudło nie uruchamiało cudzej akcji.
Obszar klikalny obejmuje całą kartę albo wiersz, nie tylko tekst linku.
Akcje destrukcyjne stoją najdalej od częstych, nigdy tuż obok nich.

Wzorzec w kodzie

Ikona ma 20 px, cel ma 44, różnicę robi kontener

<button
  aria-label="Edytuj projekt"
  className="grid size-11 place-items-center rounded-lg"
>
  <EditIcon className="size-5" />
</button>

Klikalny jest cały wiersz, nie sam tekst

<li>
  <a href={path} className="flex min-h-11 items-center gap-4 px-4">
    <Avatar />
    <span className="flex-1 truncate">{project.name}</span>
    <Badge>{project.status}</Badge>
  </a>
</li>