Arrête d'être si carré
En tant que professionnel du design, vous connaissez (et contribuez éventuellement) à l’utilisation accrue des cercles dans tous les éléments du design.
Des articles de décoration pour la maison tels que les miroirs à cadre rond et les imprimés aux outils à main de la quincaillerie, les cercles sont partout. Les cercles ont même fait leur apparition sur nos sites Web, apparaissant dans des en-têtes, des menus et parfois au centre de la page.
Quelques sites de conception ont même créé des articles de blog comprenant de superbes captures d'écran de l'utilisation créative des cercles dans la conception de sites Web. Cependant, on a peu parlé de la psychologie derrière l’utilisation des cercles dans la conception ou de la manière dont la réponse de l’utilisateur aux cercles peut être efficacement intégrée dans le phénomène croissant de l’utilisation mobile.
Nous savons que nous aimons les cercles, mais pourquoi? Et comment un concepteur Web peut-il utiliser les cercles pour optimiser l'expérience utilisateur dans un design réactif?
Les cercles et le cerveau
Cognition et perception
Les cercles attirent les gens car ils sont plus faciles à comprendre que les formes et les objets aux lignes rigides.
L'œil est attiré par les cercles et les informations qu'il contient, et ils sont plus rapides et plus faciles à traiter pour le cerveau que les carrés et les rectangles à arêtes vives.
Le mathématicien et physicien suisse Jurg Nonni, auteur de Visual Perception, suggère que la suppression des arêtes nous permet de percevoir plus rapidement un objet. Selon Nonni, "un rectangle à arêtes vives prend en effet un effort visuel un peu plus cognitif que, par exemple, une ellipse de même taille. Notre "œil de fovéa" est encore plus rapide dans l'enregistrement d'un cercle. Les bords impliquent des outils d'image neuronale supplémentaires. Le processus est donc ralenti. "
Courbes familières et réconfortantes
En plus de la capacité cognitive du cerveau à traiter les cercles plus rapidement que les carrés et les rectangles, nous traitons les informations et les objets familiers plus rapidement que ceux que nous ne reconnaissons pas.
Tout le monde reconnaît les cercles et les gens apprennent à connecter des formes avec des actions et des résultats spécifiques, tels que le signe universel "STOP" de l'octogone rouge. Selon les directives d’interface utilisateur OS X d’Apple, «les personnes apprennent à associer certains comportements à des éléments spécifiques en fonction de leur apparence. Par exemple, les gens reconnaissent les boutons-poussoirs par leur forme arrondie. "
Une utilisation efficace des cercles dans les éléments de menu iconiques sur Azonmedia La page des services
Nous rencontrons des cercles, des ovales et des objets aux bords arrondis de manière chaleureuse et non menaçante à travers les cultures et les environnements. Les nuages, les œufs, le soleil et la lune dans la nature semblent tous arrondis à l'œil nu. Des visages souriants, des gâteaux, des tartes, des figures courbes sont tous agréables aux sens.
Nos cerveaux réagissent bien aux cercles et aux courbes, tout en percevant les objets aux bords durs comme plus durs, plus définis et susceptibles de constituer une menace.
Cercles et l'expérience utilisateur
Les cercles sont efficaces dans la conception de sites Web précisément pour ces raisons.
Les utilisateurs en ligne sont notoirement impatients, et parce que les cercles sont plus facilement perçus et compris, le traitement des informations qu’ils représentent prend moins de temps.
Les utilisateurs mobiles sont encore plus impatients. Ils sont également occupés, souvent en déplacement, multi-tâches et utilisent un index ou un pouce pour naviguer dans leur appareil de poche. Ils veulent leurs informations MAINTENANT. Les cercles aident les utilisateurs mobiles à identifier les informations qu'ils recherchent plus efficacement.
Cercles et pouces
Une autre manière dont les cercles sont bénéfiques dans un environnement de conception mobile d'abord et réactif est leur adéquation en tant qu'éléments dans les interfaces à écran tactile.
Comme les smartphones à écran tactile et les utilisateurs de tablettes tapotent, glissent ou font un pouce vers les informations qu'ils recherchent, il est judicieux d'utiliser des cercles pour diriger l'utilisateur. Non seulement ils imitent la forme du bout des doigts, mais nous associons des cercles et des bords arrondis à des boutons-poussoirs et nos cerveaux traitent rapidement les actions requises.
développeur web Oliver James Gosling
Lorsque vous incorporez des cercles dans une interface mobile à écran tactile, concevez-les sur l'écran le plus petit. Le texte ou les images dans le cercle doivent toujours être faciles à lire et la taille doit rester au moins égale à la taille du bout du doigt, ou 44 pixels.
Cercles et espace d'écran
La bonne nouvelle concernant l'utilisation de cercles dans le design réactif est que CSS3 simplifie grandement les exigences de codage.
La mauvaise nouvelle est que les cercles occupent une grande partie de l’immobilier et créent une zone d’écran plus ouverte.
Comme l’espace de l’écran sur les smartphones et les tablettes peut être assez petit, comment pouvez-vous introduire des cercles sans craindre qu’ils deviennent si petits qu’ils sont impossibles à lire, appuyez ou cliquez?
Une interface mobile simple
Cela aide à garder votre interface mobile simple. Comme l'œil est de toute façon attiré par le cercle, il est inutile d'encombrer le reste de l'écran avec le contenu que l'utilisateur va manquer.
À moins qu'ils ne fassent partie de l'en-tête ou du logo, gardez un cercle d'au moins un ou deux sur chaque page. Essayez d'utiliser un bouton de recherche circulaire ou utilisez-en un pour votre appel à l'action, tel que "Appelez ici" ou "Inscrivez-vous ici".
Conception gravitée utilise des cercles et des couleurs pour attirer l’attention sur le logo, le portfolio et le texte sur la page d’accueil.
Arrière-plans et boutons de partage
Comme pour tout élément de conception, l'utilisation de cercles doit correspondre au contenu, au produit ou au service, au style et à l'image de marque du site. Cela devrait améliorer l'expérience utilisateur et simplifier l'interface.
Si l'utilisation d'un appel à l'action n'est pas appropriée pour le site ou si les éléments de navigation et de menu ne fonctionnent tout simplement pas dans un cercle, envisagez d'incorporer un cercle dans l'arrière-plan. Utilisez un grand cercle en arrière-plan pour attirer l’attention sur le contenu le plus important de la page (semi-transparent derrière le texte).
Rappelez-vous que le contenu est ce pour quoi l'utilisateur mobile est ici en premier lieu. Encouragez l'engagement des utilisateurs en choisissant des boutons de partage de médias sociaux au lieu des options rectangulaires.
Icônes circulaires au design réactif
L'un des moyens les plus populaires d'intégrer des cercles dans des sites Web consiste à utiliser des icônes dans un menu. Cela convient bien au design réactif, car il remplace le texte long et / ou déroutant par une image plus simple.
Buza utilise des cercles pour compléter le menu mobile vertical.
Une icône circulaire prend moins de place, laissant plus de place au contenu. Il a l'air bien et l'utilisateur traite rapidement ce qu'il représente.
Ovales ou rectangles arrondis
Peut-être que vous n'êtes pas prêt à enrouler vos bras autour d'un grand cercle ancien. C'est bon. Mais ne colle pas avec les bords durs.
Ajoutez des rectangles arrondis ou des ovales à votre boîte à outils responsive. Les coins lissés faciliteront la mise au point du contenu dans les courbes, au lieu d'attirer votre attention sur les bords extérieurs.
Dernier mot
Alors que les concepteurs de sites Web peuvent passer des heures à se questionner sur les avantages des cercles ou des rectangles aux contours arrondis par rapport aux arêtes vives, il s'agit avant tout de plaire à l'utilisateur avec le design mobile. L'utilisateur souhaite un contenu engageant et utile présenté dans une interface simple et facile à trouver. Tout le reste est secondaire.
Bien que la conception Web réactive cherche à répondre à l'environnement, elle devrait également répondre aux besoins de l'utilisateur. Les utilisateurs reconnaissent la forme familière du cercle, la perçoivent rapidement et peuvent facilement identifier le point cliquable sur l'écran. Utilisez un cercle simple dans votre prochain projet de conception réactif. Vos utilisateurs vous en remercieront.
Utilisez-vous des cercles pour vos appels à l'action? Est-ce que vous le jouez en toute sécurité avec des rectangles subtilement arrondis? Faites-nous savoir dans les commentaires ci-dessous.
Image / vignette en vedette, image de cercles via shutterstock