web-dev-qa-db-fra.com

Pourquoi les boutons circulaires dans les logiciels / sites Web sont-ils si rarement utilisés?

Pourquoi les boutons circulaires dans les logiciels/sites Web sont-ils si rarement utilisés? Est-ce purement conventionnel ou y a-t-il des raisons d'utilisabilité derrière cela?

40
52d6c6af

Les boutons circulaires peuvent bien fonctionner lorsqu'une icône suffit à l'intérieur. Un bon exemple de ceci est Path . Leurs boutons à icône unique sont circulaires et fonctionnent bien. Cependant, pour insérer un mot dans le bouton, comme 'Register', le bouton devrait être aussi grand que large, prenant beaucoup d'espace précieux et créant un énorme bouton. Si vous utilisez des boutons complètement circulaires dans toute une interface, tous les boutons doivent être aussi grands que les mots les plus longs dans un seul bouton. IE, un bouton pour le mot "Ajouter" devrait avoir la même taille que le bouton pour "Enregistrer", pour une continuité de dimensionnement dans toute l'interface. Ce serait une énorme perte d'espace.

De nombreuses applications comme Path et des sites comme Svbtle contournent cela en utilisant des boutons circulaires pour les icônes, puis en gardant le même bouton de hauteur et en l'allongeant horizontalement pour créer un rectangle avec des coins arrondis pour les boutons avec du texte.

Je suppose que l'inconvénient en termes de convivialité est qu'un cercle ou un rectangle avec des coins arrondis circulaires a une zone de clic plus petite qu'un rectangle avec des coins plus petits ou pas arrondis. Il y a donc une chance légèrement accrue que les utilisateurs manquent complètement le bouton. Cependant, je pense que c'est plus un choix de style.

47
mattdempseycom

La réponse est largement historique. Au début du HTML, il n'y avait pas cercles natifs ou même des carrés aux coins arrondis, et la seule façon de les avoir était d'utiliser des images. Et à une époque où la vitesse comptait beaucoup (pensez à plus de 2000 fois plus lentement qu'une connexion aujourd'hui), la plupart des sites Web évitaient les images autant que possible.

Donc, si vous vouliez créer un bouton, vous utilisiez un rectangle. Je suppose ça a collé quand les gens se sont habitués aux boutons étant des rectangles. Il existe de nombreuses situations où un bouton rectangulaire est un meilleur choix qu'un carré, mais pas autant pour justifier la rareté d'un bouton circulaire.

Cependant, lorsque vous regardez les interfaces physiques, vous verrez que les boutons circulaires sont très populaires. Ils sont en général plus faciles à fabriquer, moins chers et sans doute plus esthétiques. Je pense que si vous regardez les interfaces au cours des prochaines années, vous verrez une augmentation marquée de l'utilisation des boutons ronds ou non rectangulaires.

22
JohnGB

Considérez comment vous allez placer plusieurs icônes rondes:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Dans la première solution, vous utilisez essentiellement une grille rectangulaire et vous gaspillez effectivement l'espace autour des icônes. Cependant, avec des icônes circulaires, vous pourriez opter pour une grille hexagonale comme dans la solution du bas. Cela permettrait de placer les icônes plus près les unes des autres que dans une grille rectangulaire, mais je doute que cela réussisse bien en termes de numérisation.

3
André

Je pense qu'il s'agit également de placer des cercles dans une grille. Les pages Web et les interfaces sont principalement basées sur des systèmes de grille et ressemblent à des blocs. Ainsi, les boutons circulaires seront étranges avec des blocs de texte qui les entourent.

0
Eugene Bannykh

Il convient également de noter qu'à partir d'un PDV de conception, il est plus facile de fixer le texte dans un bouton rectangulaire que dans un bouton circulaire, surtout si la localisation est impliquée.

0
Mat Walker