web-dev-qa-db-fra.com

Largeur fixe pour les boutons ou proportionnelle au texte?

Quelle est la meilleure pratique pour une interface utilisateur, pour créer tous les boutons similaires avec une largeur fixe , quelle que soit la longueur du texte (avec la condition fit) ou rendre la largeur proportionnelle au texte et l'ajouter rembourrage?

enter image description here

Mise à jour:

Veuillez également vérifier cet exemple sur les directives de conception des matériaux qui suggèrent une largeur minimale et une largeur flexible.

enter image description here

Boutons de dialogue Hauteur du bouton: 36dp Marge supérieure du bouton: 24dp Rembourrage du bouton: 8dp Alignement du bouton: Bord droit pour les scripts LTR Largeur du bouton: Varie en fonction de la longueur du texte du bouton

enter image description here

Est-ce une règle générale?

17
Madalina Taina

À mon avis, si les boutons sont l'un sur l'autre, essayez d'adapter le plus court pour avoir la largeur du plus large. Dans votre exemple, ce serait l'option verte, mais en donnant moins de remplissage au bouton "S'abonner".

Si les boutons sont horizontaux, il n'est pas nécessaire de leur donner la même largeur.

enter image description here

9
Alvaro

Je pense que la largeur fixe est une meilleure option car elle donne un équilibre visuel à l'écran. Différentes tailles sont également parfois utilisées pour mettre l'accent, par exemple, il peut être possible que des boutons au même niveau, mais le bouton avec une taille plus grande attire davantage l'attention.

4
Dhiraj Pandagre

Après avoir fait plusieurs recherches sur ce problème, je n'ai pas trouvé de bonne raison de croire que des boutons de même largeur aident l'utilisateur de quelque manière que ce soit, influencent moins la décision ou améliorent l'accessibilité. Au lieu de cela, je pense que nous ne devrions pas ignorer la recommandation de Material Design Guidance qui suggère une hauteur préférée, mais pas une largeur fixe: "Accessibilité

Pour assurer la convivialité pour les personnes handicapées, donnez aux boutons une hauteur de 36dp et donnez aux cibles tactiles une hauteur minimale de 48dp. "

enter image description here

3
Madalina Taina

Madalina, une largeur générale minimale pour les boutons, comme indiqué dans les directives de conception des matériaux, est importante, car elle garantit que tous les boutons sont raisonnablement faciles à cliquer ou appuyez même sur des étiquettes très courtes telles que OK. Pensez " loi de Fitts ."

Et tandis que les boutons de même largeur peuvent sembler plus esthétiquement agréables, je n'ai pas encore vu de recherche qui montre une utilisation avantages de les utiliser.

0
JochenW

Dans le système de conception que j'ai créé pour mon entreprise, j'ai combiné les deux types. Les boutons de taille fixe sont mieux utilisés pour les fenêtres modales et les fenêtres contextuelles. C'est plus esthétique et habituel pour les utilisateurs et prétendre être un "modèle de conception". Donc de taille fixe partout quand on a 2 ou un groupe de boutons. La largeur, dans ce cas, est calculée par l'étiquette de texte la plus longue possible. Dans tous les autres cas, j'utilise des boutons avec des rembourrages, par ex. 16px + TextLabel + 16px.

0

Fixer la largeur des boutons donnera un aspect cohérent à l'interface. Pourtant, il a le risque de ne pas pouvoir gérer d'autres boutons avec des étiquettes peut-être plus longues. Cette raison le rend incompatible avec une ligne directrice fixe.

Vous pouvez toujours souligner un bouton particulier en jouant sur la taille, la couleur et le rembourrage.

0
asiegf