web-dev-qa-db-fra.com

Les boutons plus gros améliorent-ils la convivialité et comment ils correspondent à la conception? [Cas]

Nous essayons d'incorporer un guide de style qui aide les développeurs à comprendre et à construire CSS à travers différentes résolutions. Après avoir lu ces derniers:

  1. https://uxplanet.org/buttons-in-ui-design-the-evolution-of-style-and-best-practices-56536dc5386e (Nick Babich)
  2. https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632 (système de grille 8pt)
  3. https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
  4. https://developer.Apple.com/design/tips/
  5. Consignes Bootstrap, Foundation, iOS et Material Design

Je suis venu à une question: les boutons plus gros sur 1920x1080 (bureau) et au-dessus améliorent-ils la convivialité et sont-ils ruinés ou adaptés au design en même temps? Existe-t-il une règle/recherche standard sur ce sujet ou s'applique-t-elle uniquement à des scénarios particuliers?

[CAS] Notre cas est un site Web pour un concessionnaire automobile dont le principal groupe de clients est composé d'hommes d'affaires de 40 ans et plus qui louent les véhicules. D'autre part, nous voulons construire un site qui attire également un groupe plus jeune, donc une mauvaise vue ne devrait pas être un facteur. En fin de compte, nous arrivons à la question ci-dessus - cela améliore-t-il la conception en termes de convivialité ou non?

(le cadre rouge est une fenêtre d'affichage Full HD)

buttons dimension

buttons compared

4
psoiree

Si vos boutons sont plus gros, les utilisateurs pourront les sélectionner plus rapidement, ce qui augmente la convivialité

C'est en fait une loi! Il a été prouvé par Paul Fitts en 1954. Loi de Fitts fournit un modèle mathématique qui peut prédire avec précision le temps nécessaire pour se déplacer vers et sélectionner une cible. Bien que, initialement développé pour le mouvement dans le monde physique, les praticiens UX l'appliquent avec succès aux interfaces utilisateur graphiques à l'aide d'un curseur de souris ou d'autres pointeurs.

enter image description here

Fondamentalement, la loi de Fitts stipule:

Le temps nécessaire pour acquérir une cible est fonction de la distance et de la taille de la cible.

  • Plus la distance entre le curseur de la souris et le bouton cible est élevée, plus il faudra de temps pour sélectionner le bouton.

  • Plus la taille du bouton cible est petite, plus la sélection sera lente.

Cela signifie essentiellement une zone de clic plus grande = des temps de sélection plus rapides . Cependant, ne soyez pas tenté d'utiliser des boutons Gorilla couvrant la moitié de l'écran.

Conseil: utilisez des boutons de plus grande taille dans des résolutions d'écran plus élevées

Dans des résolutions plus élevées (> = 1080p), les boutons et les éléments d'interface utilisateur semblent petits. Ainsi, le temps de les sélectionner et l'effort est plus élevé, ce qui diminue l'utilisabilité. C'est donc une bonne idée d'augmenter la taille des boutons et autres commandes pour des résolutions d'écran plus élevées.

4
Kristiyan Lukanov

est venu à une question faire des boutons plus gros sur 1920x1080 (bureau) et surtout améliorer la convivialité

Zone de clic plus grande -> meilleure convivialité

et ruinent-ils ou s'intègrent-ils au design en même temps?

Ils ont l'air moins esthétiques, ils ont l'air lourds et lents, je n'utiliserais pas de gros boutons gras sur un site Web Ferrari, mais en ce qui concerne un site Web SUV, ils pourraient convenir.

Juste une question: avez-vous testé cela? Pourquoi pensez-vous qu'un homme de 40 ans a des problèmes d'interaction avec un bouton 20px?

En ce qui concerne le taraudage, par contre, une zone de prise de 40 pixels est recommandée.

1
Pectoralis Major