Arrondi ou carré? Telle est la question.Dois-je changer les boutons pointus habituels en boutons arrondis? Lesquels sont les meilleurs pour la convivialité? Comment prenons-nous de telles décisions?
Ce sont précisément ces problèmes que vous rencontrerez lorsque vous serez immergé dans l'UX associé aux boutons ronds dans les applications. Nous savons déjà que la taille, le contraste et l'ombre portée eux-mêmes peuvent rendre le bouton visible, mais trouver le bon équilibre pour les éléments de l'action principale et secondaire n'est pas toujours facile. La rondeur dans ce cas peut venir à la rescousse.
Variables utilisées pour améliorer la visibilité L'arrondi augmente-t-il la reconnaissance?
Les éléments arrondis sont plus faciles à lire. Il est plus facile de compter le nombre de cartes consécutives si leurs coins ne sont pas nets.
Les éléments arrondis sont plus faciles à reconnaître que les éléments tranchantsEn effet, une rondeur mieux reconnaissable aide nos yeux à distinguer rapidement les cartes elles-mêmes. Au contraire, les cartes aux angles vifs semblent unifiées et uniformes, ce qui rend leur reconnaissance difficile.
Dans la disposition de la grille, l'arrondi fonctionne encore mieux.
Par exemple, dans un tableau de bord ImpôtRapide, l'œil s'accroche mieux aux éléments avec des coins arrondis dans la section supérieure que dans la section centrale, où les cartes ont des coins nets.
Tableau de bord TurbotaxDois-je utiliser des boutons entièrement arrondis?
Les boutons entièrement arrondis ont fière allure dans les interfaces où il y a une quantité suffisante d'espace libre. Spotify est un exemple d'agencement très réussi de ces boutons, où l'appel à l'action est bien ressenti.
Boutons arrondis sur SpotifyDe manière générale, dans cet exemple particulier, puisque travailler avec Spotify se résume toujours à la lecture (pistes, podcasts, listes de lecture), l'action principale est définie de manière unique. Et les boutons de lecture entièrement arrondis se distinguent très bien des albums et des listes de lecture de l'interface utilisateur, ce qui à son tour encourage l'utilisateur à cliquer sur «Jouer».
«Jouer» sur SpotifyLorsque les boutons entièrement arrondis NE FONCTIONNENT PAS?
Dans certains cas, la rondeur peut nuire à la convivialité, par exemple:
1. Lorsque les boutons arrondis ressemblent à des balises
Si distinguer un bouton d'un tag (filtre) n'est pas facile, cela amènera les gens à la perplexité: "Est-ce que je clique sur un bouton ou sur un filtre?"
Qu'est-ce que c'est: des boutons ou des filtres? Pas du tout évident.2. Les boutons arrondis ne peuvent pas afficher les options imbriquées
Les boutons entièrement arrondis utilisent généralement l'icône «flèche» pour indiquer la présence d'options imbriquées. Mais la zone de clic (ou brouette) pour afficher les options est limitée par la taille de l'icône (généralement 16 x 16 ou 24 x 24 px).
Sera-t-il pratique d'afficher les options dans chaque cas?
Si nous n'utilisons que des boutons légèrement arrondis, nous pouvons masquer la flèche pour que le bouton se comporte comme un bouton contextuel. Cette approche fonctionne mieux.
Apple déconseille d'utiliser des boutons arrondis pour les actions (voir boutons poussoirs ). Les boutons entièrement arrondis sont réservés à l '" Aide " ou à la fourniture d'options mutuellement exclusives (voir les boutons radio ).
Illustrations
des directives d'interface humaine d'Apple
3. Les boutons entièrement arrondis ne conviennent pas aux piles
Lorsque nous plaçons des boutons arrondis en rangées dans des tableaux et des cartes, ils semblent déplacés. Par exemple, pour un tableau de 10 lignes, nous obtenons une colonne de 10 boutons, chacun ressemblant à un bouton pour l'action principale.
Comme alternative, vous pouvez essayer les boutons «pas de frontières», comme cela est fait dans les nouvelles notifications macOS, ou afficher les boutons uniquement lorsque vous survolez. En minimisant la visibilité des boutons, nous permettons à l'utilisateur de se concentrer sur la zone de travail principale.
Boutons "sans bordures" sur la pileEsthétique des coins arrondis
La rondeur a l'air moderne. L'application de l'arrondi complet a commencé dans les interfaces mobiles et a migré vers le Web. Le manque de netteté provoque des sentiments de simplicité, d'optimisme et d'accessibilité. C'est probablement pourquoi de nombreux systèmes de conception ont adopté des éléments arrondis et sont largement utilisés pour les icônes, les boutons ou même les images.
Dans Chrome, après une récente mise à jour (six mois se sont écoulés depuis la publication de l'article d'origine - environ la traduction), la barre d'adresse a été arrondie pour mieux exprimer la disponibilité d'une utilisation simultanée pour la recherche. Les utilisateurs peuvent voir une partie des résultats de la recherche au moment de l'impression, avant même d'accéder à la page.
Nouvelle barre de recherche dans Chrome (source - blog Google )Conformément au nouveau concept, les boutons de la barre d'outils ont commencé à être mis en surbrillance arrondis au survol. Il est facile de trouver des éléments arrondis dans d'autres applications Google comme Google Agenda, Gmail et Drive.
Résumer
Il n'y a pas de réponse définitive qui soit meilleure - rondeur ou netteté. Mais des éléments arrondis peuvent encourager l'utilisateur à interagir avec l'application sans être distrait par une interface utilisateur secondaire.
Liste des ressources pour une étude approfondie de la question:
Utiliser des formes rondes dans les conceptions de matériaux
Caractéristiques des coins arrondis
Pourquoi les coins arrondis sont plus faciles pour les yeux