Tous les boutons d'un site Web doivent-ils être de la même taille?
Je conçois une application Web dans laquelle j'ai différentes tailles de boutons pour différentes fonctionnalités.
Par exemple, la page de connexion a un bouton pleine largeur:
Petit bouton d'édition pour éditer les informations sur la ville:
Et les boutons Enregistrer/Annuler un peu plus gros que le bouton d'édition:
Dois-je avoir à suivre les mêmes tailles de boutons tout au long de l'application? Si oui et en quoi cela profite-t-il à l'utilisateur?
Il n'est pas nécessaire de conserver les mêmes tailles de boutons sur tout le site. vous devrez peut-être avoir les mêmes tailles pour des boutons fonctionnels similaires.
l'idée de la même taille du bouton est de maintenir la similitude afin que l'utilisateur puisse comprendre à première vue. mais dans le scénario, comme vous l'avez mentionné ci-dessus, il n'est pas nécessaire de conserver les mêmes tailles dans ce cas.
vous pouvez faire peu de choses pour maintenir cette harmonie comme.
- conservez le même rembourrage dans les positions gauche-droite si possible (largeur du bouton).
- maintenir un ou trois jeux de tailles de boutons différents et les utiliser en fonction de leurs besoins, c'est-à-dire en (hauteurs de bouton).
vous pouvez suivre certains guides de style tels que.
La hiérarchie des informations s'applique également aux boutons
Les tailles de bouton variables sont un excellent moyen de renforcer les hiérarchies d'actions. Si chaque action a été déclenchée par un bouton de taille identique, votre interface utilisateur risque de devenir un gâchis. Les utilisateurs auraient du mal à trouver les actions primaires et secondaires qui répondent à leurs besoins 80 à 90% du temps.
Créez des règles et suivez-les
Vous voulez avoir un système logique et planifié de styles de boutons à plusieurs niveaux. Au niveau le plus bas, vous pouvez avoir du texte dans une couleur différente. Au plus haut, vous pouvez avoir un bouton de couleur vive avec un gros texte et un grand rembourrage. Déterminez où chaque style s'adapte et utilisez-les de manière cohérente tout au long de l'expérience.
Voici un exemple d'une application sur laquelle je travaille pour afficher les boutons principaux et secondaires, ainsi que notre action de niveau inférieur pour reculer dans la navigation.
Nous avons également un bouton plus grand pour les actions de "chemin critique", les liens de texte de base et certaines actions dans les petits modaux qui utilisent toute la largeur de la colonne.
Voici un autre exemple d'un workflow mobile (généralisé pour le client) où vous pouvez voir un certain nombre de types de boutons dans une vue. Il s'agit d'une interface utilisateur dense avec de nombreux éléments qui, malheureusement, ne peuvent pas être réduits davantage. Des boutons de taille identique imposeraient à l'utilisateur une charge inutile pour déterminer quelles sont les actions les plus importantes à un moment donné.
