Butoanele nu ar trebui să aibă cursor de mână

Aceasta este partea 1 a unei serii din 3 părți. Iată partea 2 și partea 3.

Există convingerea că cursorul de mână (indicatorul) înseamnă clic, dar acest lucru este greșit și potențial problematic.

Mâna nu înseamnă clic

Nu este întâmplător că browserele nu oferă butoanelor (și altor elemente) un cursor de indicator - pentru că nu sunt menite. Vezi următoarea captură de ecran:

Pagina de căutare Google pe Chrome pe Mac OS

Aproape fiecare element este interactiv și clic, meniul, filele, spațiul în alb, butoanele browserului, bara de marcaje și caseta de căutare Google - niciunul dintre ele nu are un cursor indicativ.

Există mai multe elemente interactive și clic, care nu sunt prezentate mai sus: selectați meniuri, glisoare, casete de selectare, radio, etichete, imagini, spațiu gol (de exemplu, clic dreapta - sursă vizualizare) și text - din nou, niciunul dintre ele nu are un cursor pointer.

Același lucru este valabil și pentru sistemul de operare. Puteți atinge, trage, selecta, apăsa, faceți clic stânga și faceți clic dreapta pe o multitudine de elemente diferite, inclusiv butoane. Dar, butoanele nu sunt semnificate de cursorul indicatorului care se afișează la pas.

Acordul de licență este un link și primește cursorul indicativ. Butoanele nu.

Abordarea percepută este oferită de felul în care arată ceva indiferent de cursor. Nu uitați, cursorul este disponibil numai când treceți cu un dispozitiv de indicare, cum ar fi un mouse.

Acesta este motivul pentru care, de exemplu, casetele de selectare nu sunt niciodată rotunde (iar radiourile nu sunt niciodată pătrate). Acesta este și motivul pentru care linkurile sunt subliniate de obicei. Acesta este motivul pentru care legăturile au, de fapt, un cursor de mână.

Ce spun autoritățile

Ghidurile de proiectare Microsoft vorbesc despre o abordare slabă:

Linkurile de text și grafică folosesc un indicator […] […] din cauza accesului lor slab. În timp ce legăturile pot avea alte indicii vizuale pentru a indica faptul că sunt legături (cum ar fi sublinieri și plasare specială), afișarea indicelui de mână pe hover este indicația definitivă a unei legături.
Pentru a evita confuzia, este imperativ să nu folosiți indicatorul de mână în alte scopuri. De exemplu, butoanele de comandă au deja o abordare puternică, deci nu au nevoie de indicatorul de mână. Indicatorul de mână trebuie să însemne „această țintă este o legătură” și nimic altceva.

Ghidul de interfață umană al Apple precizează că cursorul de mână trebuie utilizat atunci când „conținutul este o legătură URL”. Liniile directoare ale interfeței utilizatorului W3C spun același lucru și cu „Cursorul este un indicator care indică o legătură”.

Cursorul de mână este pentru legături

Mâna (și textul adesea subliniat) semnifică o legătură. Linkurile nu sunt butoane. Linkurile au venit împreună cu web-ul. Pentru a ajuta utilizatorii să înțeleagă că sunt diferiți, li se oferă cursorul de mână. Servește ca un indiciu suplimentar. Iata de ce:

  1. Făcând clic pe un link se deschide o pagină web sau o resursă.
  2. (Pe desktop) pot face clic dreapta pe un link și pot face multe lucruri (pe care nu le pot face cu un buton). Deschideți în noua filă / fereastră, salvați un link, copiați adresa, adăugați la lista de lectură, marcați-o și multe altele.
  3. (Pe dispozitive mobile) pot atinge și ține apăsat pe un link și obține un meniu contextual similar ca în punctul precedent.
  4. De asemenea, un link îmi spune că merg doar în altă parte. Nu modific niciun fel de date sau nu fac modificări (oricum este posibil să se facă un buton).

rezumat

Când un buton are cursorul de mână, sugerează subtil că utilizatorul interacționează cu o legătură atunci când nu este. Dacă doriți să oferiți feedback vizual atunci când utilizatorul se apropie, puteți face acest lucru cu alte modificări de stil, cum ar fi culoarea de fundal. Un buton bine proiectat nu are nevoie de un cursor de mână pentru a-l ajuta pe utilizator să realizeze că face ceva.

Cursorul de mână este rezervat legăturilor. Acest lucru se datorează faptului că sunt unice în comportamentul lor. Navigatoarele și sistemele de operare au lucrat pentru dvs. - deoarece, contrar credinței populare, browserele știu cel mai bine.

Linkurile au fost întotdeauna gestionate în acest fel de când a venit site-ul web - aceasta este convenția de web pe care nu trebuie să inovați. Vă puteți odihni ușor știind că browserele v-au acoperit. Acest lucru vă lasă dumneavoastră și echipa dvs. să rezolvați probleme reale.

Urmărirea postărilor

  • Dar uneori linkurile arată ca nasturii
  • Butoanele nu ar trebui să aibă un cursor de mână partea a 2-a

Apropo, scriu o carte numită Pattern Design Patterns. Dacă doriți să știți când a fost lansat, abonați-vă aici și vă voi ține la curent.