Lățime fixă pentru butoane sau proporțională cu textul? (Experiența utilizatorului, Formulare, Design Gui, Butoane, Aspect, Design Material)

Madalina Taina a intrebat.
a intrebat.

Care este cea mai bună practică pentru o interfață utilizator, pentru a face toate butoanele similare cu o lățime fixă, , indiferent de cât de lung este textul (cu condiția să se potrivească). sau să se facă lățimea să fie proporțională cu textul și adăugați aceeași umplutură?

Actualizare:

Vă rugăm să verificați și acest exemplu privind Ghidul de design material care sugerează o lățime minimă și o lățime flexibilă.

Butoane de dialogButon înălțime: 36dpButon marjă superioară: 24dpButon padding: 8dpButton alignment: 8dpButton alignment: Marginea dreaptă pentru scripturi LTRLățimea butonului: Variază în funcție de lungimea textului butonului

Aceasta este o regulă generală?

Comentarii

  • Aplicația/site-ul dvs. trebuie să fie traductibilă? Diferitele limbi înseamnă diferite lungimi ale cuvintelor, ceea ce ar influența proporționalitatea lungimilor. –  > Por kerr.
6 răspunsuri
Alvaro

După părerea mea, dacă butoanele sunt unul peste altul, atunci încercați să îl adaptați pe cel mai scurt pentru a avea lățimea celui mai lat. În exemplul tău ar fi opțiunea verde, dar dând mai puțină căptușeală butonului „Subscribe”.

Dacă butoanele sunt orizontale nu este nevoie să le dai aceeași lățime.

Comentarii

  • Este o abordare interesantă, dar dacă există mai multe butoane și poate că într-o pagină a unui site web nu apare butonul cu cea mai mare lățime, este practic prima opțiune. Oricum, cum am spus, un punct de vedere interesant. Ați găsit vreo cercetare în acest sens? –  > Por Madalina Taina.
  • Îmi pare rău, nu am verificat nicio cercetare. Păi mă refer dacă butoanele sunt unul peste altul (dacă sunt în părți diferite ale paginii nu se aplică) și întotdeauna cu anumite limite. Dacă un buton este prea lat față de unul prea scurt atunci eu le-aș lăsa așa cum sunt sau aș încerca ca cel mai lat să fie dublu față de cel scurt, dacă se poate. –  > Por Alvaro.
Dhiraj Pandagre

Cred că lățimea fixă este o opțiune mai bună, deoarece oferă un echilibru vizual ecranului. De asemenea, uneori se folosesc dimensiuni diferite pentru a pune accentul, de exemplu, este posibil ca butoanele să fie la același nivel, dar butonul cu dimensiuni mai mari să primească mai multă atenție.

Comentarii

  • Vă mulțumim pentru răspunsul dumneavoastră. @alvaro a sugerat și butoane cu aceeași lățime, dar explicația dumneavoastră este ceva în plus. Aveți vreo cercetare în acest sens? –  > Por Madalina Taina.
Madalina Taina

După ce am făcut cercetări de mai multe ori pe această temă, nu am găsit un motiv bun pentru a crede că butoanele cu aceeași lățime ajută în vreun fel utilizatorul, influențează mai puțin decizia sau îmbunătățesc accesibilitatea. în schimb, cred că nu ar trebui să ignorăm recomandarea de la Material Design Guidance care sugerează o înălțime preferată, dar nu o lățime fixă: „Accesibilitatea

Pentru a asigura ușurința de utilizare pentru persoanele cu dizabilități, acordați butoanelor o înălțime de 36 dp și oferiți țintelor tactile o înălțime minimă de 48 dp.”

Comentarii

  • ux.stackexchange.com/questions/121866/… –  > Por Madalina Taina.
asiegf

Fixarea lățimii pentru butoane va da un aspect coerent interfeței. Totuși, are riscul de a nu putea gestiona mai multe butoane cu etichete poate mai lungi. Acest motiv o face incompatibilă cu o linie directoare fixă.

Puteți oricând să puneți în evidență un anumit buton, jucând cu dimensiunea, culoarea și umplutura.

JochenW

Madalina, un general minimă lățime generală pentru butoane, așa cum se menționează în Ghidul Material Design, este importantă, deoarece asigură că toate butoanele sunt rezonabil de ușor de apăsat sau de apăsat chiar și pentru etichete foarte scurte, cum ar fi OK. Gândiți-vă „Legea lui Fitts.”

Și în timp ce butoanele de aceeași lățime pot arăta mai mult estetic plăcută, încă nu am văzut cercetări care să arate că este de utilitate beneficii pentru utilizarea lor.

Comentarii

  • Poți să ne trimiți la secțiunea relevantă din Ghidul de design material care recomandă lățimea minimă? Am văzut doar o referință pentru o înălțime minimă. –  > Por Madalina Taina.
  • Imaginile din secțiunea Specificații, în partea de jos a paginii Butoane indică o lățime minimă a butonului de 64dp. –  > Por JochenW.
Katherine Pasichnyuk

În sistemul de design pe care l-am creat pentru compania mea, am combinat ambele tipuri. Butoanele de dimensiuni fixe se folosesc mai bine pentru ferestrele modale și pop-up-uri. Acest lucru este mai estetic și mai obișnuit pentru utilizatori și se pretinde a fi ca „model de design”. Așadar, butoane de dimensiuni fixe peste tot, atunci când avem 2 sau un grup de butoane. Lățimea, în acest caz, este calculată în funcție de cea mai lungă etichetă de text posibilă. În toate celelalte cazuri, folosesc butoane cu padding, de exemplu 16px+TextLabel+16px.