web-dev-qa-db-fra.com

Est-il judicieux d'avoir des boutons de formes différentes ensemble?

Généralement, les boutons montrés ensemble sont également visuellement similaires.

Y a-t-il des situations où il pourrait être judicieux de montrer ensemble des boutons de formes différentes? Par exemple. un bouton rectangle arrondi avec un bouton circulaire?

À titre d'exemple grossier à analyser, voici un croquis. enter image description here

4
Yogesch

Je vous suggère de faire comme la plupart des sites Web. Même forme, côte à côte, différentes couleurs. Mettez en surbrillance et placez d'abord le bouton principal utilisé. Voir les bons exemples ci-dessous.

Je sais que vous posez des questions sur le format et ma réponse est un peu plus complexe, mais cela pourrait certainement vous aider.

Rendre les boutons intuitifs en changeant leur position

Plus de boutons, plus d'options, plus de décisions. Facile à prendre aucune action ou mauvaise action.

Nous devons inciter les utilisateurs à prendre la bonne action en accordant la bonne priorité à chaque lien ou bouton. Nous pouvons utiliser le poids, la taille et les couleurs de la police. Bien sûr, le plus gros bouton devrait être le plus important.

La position est absolument importante pour aider l'utilisateur à empêcher la numérisation de page inversée. La numérisation de page inversée n'est pas bonne et rompt le flux naturel, générant des parchemins inutiles et peut entraîner des doutes. Et encore une fois, l'utilisateur ayant des doutes ou trop d'options a tendance à ne rien faire ou à faire la mauvaise action.

Voir quelques exemples:

PS: C'est un exemple mobile, mais fonctionne assez similaire sur le bureau. La chose la plus importante est le concept.

enter image description hereenter image description hereenter image description hereenter image description hereenter image description hereenter image description here

J'ai trouvé ces images il y a quelques mois dans le message X Movement mais malheureusement, je ne me souvenais pas du nom.

10
Rafael Perozin

Il existe des formes limitées que nous pouvons utiliser pour les boutons - rectangle, rectangle arrondi, cercle.

Si nous utilisons trop de formes pour les boutons, cela ne ressemblerait pas plus à des icônes qu'à des boutons.

Il est nécessaire de conserver une forme cohérente pour les boutons d'action, car les utilisateurs analysent généralement l'interface et la cohérence aide à attirer l'attention des utilisateurs sur l'action. Encore une fois, si certains boutons ont une signification prédéfinie dans le modèle mental de l'utilisateur comme les formes de flèche pour la navigation, le bouton arrondi avec + pour ajouter quelque chose, le bouton carré avec + pour développer, il est logique d'utiliser ces formes.

Cependant, les boutons contenant du texte en tant qu'action doivent être de forme cohérente. Leur état, leur accessibilité et leur disponibilité peuvent être représentés par des effets de police/couleur.

2
Omkar Chogale

Considérez la métaphore que vous utilisez et ses racines. Boutons. Quels sont les boutons? C'est un élément sur lequel vous pouvez "appuyer" ou "cliquer" pour effectuer une action. D'où vient cette métaphore? Depuis des machines physiques.

Les machines physiques ont-elles des boutons de tailles ou de formes différentes les uns à côté des autres? Oui! Regardez le clavier devant vous. En supposant que vous n'utilisez pas un Planck ou un Preonic ou un autre otholinéaire à grille, vous remarquerez des clés avec 1u (une unité de clé), 2u, 1.5u, 2.25u, 6u et peut-être d'autres longueurs sur la même carte . Si vous regardez le tableau de bord dans votre voiture ou l'IHM dans un cadre industriel, ceux-ci ont généralement également des boutons de différentes tailles et formes (sans parler de la couleur, de la hauteur, de la texture, des étiquettes, etc.).

Donc, oui, je pense que parfois, peut-être souvent, il peut être judicieux d'avoir des boutons de formes différentes (y compris des boutons qui sont des variations sur une forme ou de la même famille de formes), surtout si vous avez de nombreux boutons présents ou souhaitez différencier les boutons dans une plus large mesure.

2
sintax

Si les boutons sont sémantiquement/fonctionnels, ils doivent être à proximité, quelle que soit leur apparence.

Un exemple serait une fenêtre/écran qui a un bouton "annuler" et un bouton "soumettre". Une pratique courante consiste à les placer sur les côtés opposés de la fenêtre/de l'écran, mais ce n'est pas idéal car les gens ont une vision centrale très limitée.

Même si chaque bouton a une fonction distincte, ils ont un effet commun beaucoup plus palpable: ils ferment tous les deux la fenêtre/l'écran actuel. Ils devraient être côte à côte au centre, bien que l'un puisse être rendu plus saillant.

Considérez les boutons de cet exemple comme des frères et sœurs. Ils devraient aller ensemble en raison de leur similitude sous-jacente, même s'ils n'ont peut-être pas une apparence identique.

2
Tim Huynh