Ne vous inquiétez pas de lordre des boutons dans une application Web, faites-le à la place

(4 juin 2019)

Vous concevez donc une application Web. Quelle devrait être votre commande de boutons? Voici quelques conseils pour décider de lordre de vos boutons. Et en dehors de ces cas, peu importe, si vous suivez ce qui est ci-dessous.

Pour commencer, nous sommes tous sur la même page, classons les boutons comme principaux et secondaires. Dans la plupart des contextes, les actions principales sont des actions positives telles que Enregistrer ou Soumettre et les actions secondaires sont des actions négatives telles que Annuler ou Supprimer.

Suivez les consignes de la plateforme

Si vous créez un bureau ou une application mobile, la réponse à lordre des boutons des boutons est simple: suivez les directives de la plate-forme.

Pour un PC, cela signifie une action principale suivie dune action secondaire.

Pour un Mac, cela signifie une action secondaire suivie dune action principale.

Pour Android, cela signifie également une action secondaire suivie dune action principale.

Cétait facile. Mais quel ordre des boutons utilisez-vous pour une application Web?

Ordre des boutons pour les applications Web

Si vous concevez une application Web qui fournit un service aux utilisateurs dune seule plate-forme , cest une évidence – continuez à suivre la convention de cette plate-forme.

Sinon, les choses deviennent un peu plus compliquées. Les utilisateurs utilisent des ordinateurs de bureau, des tablettes et des téléphones portables. Vous pouvez avoir des utilisateurs de PC qui utilisent des iPhones ou des Androïdes et vous pouvez avoir des utilisateurs de Mac qui… eh bien, ils utilisent probablement plus les iPhones que les Androïdes. Oui, la part de marché pour iOS, Android et OSX vers Windows est actuellement denviron 60 à 40, mais cela ne signifie pas que vous optimisez pour 60% des utilisateurs et pas pour les 40% restants. Pourquoi ne pas optimiser pour 100% de vos utilisateurs?

Lordre des boutons na pas dimportance si vous faites cela à la place – boutons de forme et de taille contrastés

Vous pouvez optimiser pour 100% de vos utilisateurs en ne se concentrant pas du tout sur lordre des boutons. Vous pouvez continuer et choisir la commande qui vous convient. Au lieu de cela, concentrez-vous sur le contraste visuel non seulement à travers la dimension de la couleur, mais aussi sur la forme et la taille.

Lorsque vous avez laction principale comme bouton normal et laction secondaire comme juste texte (le soulignement est facultatif mais cela me semble mieux daprès mon expérience de vente de ce style aux propriétaires de produits), vous parvenez à créer efficacement un contraste suffisant pour que les utilisateurs puissent facilement remarquer la différence entre les boutons principaux et secondaires.

Ils ne le font pas. Ne vous confondez pas avec les boutons ordinaires qui ont tous les deux la même forme et la même taille et ne sont différenciés que par la couleur. Voici des exemples ci-dessous de pour les deux commandes, toutes deux également efficaces pour permettre aux utilisateurs de faire la distinction entre les actions principales et secondaires.

Comment transformer des boutons normaux en boutons de forme et de taille contrastées

Si vous avez un système de conception, mettez à jour vos boutons dapplication principaux et secondaires à partir des boutons normaux (à condition quils soient placés les uns à côté des autres et non les uns des autres) pour former et dimensionner les boutons contrastés nest pas difficile du tout. Cela devrait également être une vente facile à votre propriétaire de produit ou au conseil du système de conception dentreprise, car ils peuvent être mis à jour sans avoir à se soucier du positionnement. Il en va de même pour la mise à jour de son CSS si vous créez un site Web. Vous pouvez pratiquement remplacer les boutons de votre système des boutons normaux par des boutons de forme et de taille contrastées sans avoir à vous soucier de quoi que ce soit.

  1. Disons que lune de ces paires est votre bouton dorigine.

2. Modifiez la couleur du texte du bouton secondaire.

3. Déplacez-les lun à côté de lautre pour quils se touchent.

3. Supprimez la forme darrière-plan du bouton secondaire

4. Facultativement, bien que recommandé; souligner le texte du bouton secondaire.

Merci davoir lu.

Nhésitez pas à nous contacter ou à rester connecté sur LinkedIn et Twitter .

En savoir plus sur lUX, télécharger des ressources UX et obtenir des citations incroyables que vous pouvez utiliser dans votre travail UX quotidien à Cone Trees – User Research & Design et Citations UX .

Et si cet article vous est utile, applaudissez! 👏

Crédits dimage

Publié à lorigine à https://www.conetrees.com le 4 juin 2019.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *