Catégories
Astuces et Design

Tendance de conception: cibles à utiliser modernes (et comment le faire)

Une cible solide peut faire ou défaire votre site Web ou votre application mobile. La taille, la forme, l'emplacement et la conception générale du bouton ou du lien déterminent si un utilisateur réussit ou non une action. Cela peut sembler insignifiant, mais cela peut être l'un des éléments les plus importants d'un design.

Les cibles tactiles modernes sont faciles à reconnaître, fonctionnent de manière attendue et encouragent l'engagement.

Aujourd'hui, nous examinons comment les concevoir, comment créer des éléments d'incitation à l'action efficaces et des considérations sur les choix de couleurs et de polices.

Dégradés et couleur

conception mobile

Les cibles tactiles en dégradé bleu, violet et vert font partie des choix de conception les plus populaires à l'heure actuelle.

La couleur est l'une des plus grandes tendances de conception que vous pouvez remarquer en ce qui concerne les boutons et autres cibles tactiles. Les dégradés et les couleurs vives sont la norme.

Ces choix qui attirent l'attention aident les utilisateurs à reconnaître une cible tactile et à attirer l'attention sur l'action à l'écran.

À une époque, presque tout le monde concevait des boutons et des éléments de touche en rouge ou en orange, mais cela a vraiment cédé la place à d'autres couleurs, en particulier des dégradés.

Les cibles tactiles en dégradé bleu, violet et vert font partie des choix de conception les plus populaires à l'heure actuelle. Ils fonctionnent très bien avec des arrière-plans (ou modes) clairs ou foncés, ce qui en fait une option viable pour les conceptions où les utilisateurs peuvent avoir le contrôle sur le jeu de couleurs par défaut.

Questions de taille

conception mobile

La taille des cibles tactiles est plus qu’esthétique, elle est tout aussi importante en termes d’accessibilité.

La plupart des directives concernant la taille des éléments pouvant être touchés recommandent au moins 44 px. C'est à peu près la taille du coussin de doigt adulte moyen.

Cela ne veut pas dire que tous les éléments visuels ont au moins cette taille, mais vous devez vous assurer que toute la zone à toucher autour d'un élément dépasse cette taille. (Pensez à combien il est ennuyeux de fermer un minuscule «x» sur une annonce intégrée à une application, ce qui entraîne souvent un clic sur l'annonce elle-même par erreur.) Des zones à tapper adéquates résolvent ce problème.

Les directives d'accessibilité pour le succès de niveau AAA notent que la taille des «cibles de pointeur» doit être d'au moins 44 par 44 pixels CSS avec quelques exceptions, liées au contexte de lien.

Affordances visuelles de conception

conception mobile

Une cible tactile ressemble-t-elle à quelque chose qu'un utilisateur est censé toucher?

Bien que ce soit un concept super simple, il est souvent oublié. Les financements visuels qui utilisent des modèles et des éléments de conception bien connus et reconnus permettent aux utilisateurs de savoir plus facilement quoi faire avec un élément interactif lorsqu'ils le voient.

Les possibilités visuelles courantes pour les cibles à taper incluent:

  • Soulignements ou couleurs différentes pour les liens de texte en ligne
  • Ombres portées ou ombres intérieures pour les objets
  • Coins ou cercles arrondis
  • Éléments avec un texte exploitable, comme "Connexion" ou "Soumettre"
  • Emplacement séparé dans une colonne sans autres objets de chaque côté

Créer des états de survol et de focus

conception mobile

Les états de survol sont une option largement reconnue pour les éléments interactifs sur les appareils de bureau. Lorsque la souris se déplace sur un élément sur lequel il est possible de cliquer, il peut changer de couleur, se déplacer ou réagir d'une manière différente qu'auparavant.

Ces actions ne fonctionnent pas vraiment pour les cibles tactiles mobiles, car il n'y a pas de souris ou de curseur pour se déplacer sur l'écran. Mais cela ne veut pas dire qu’ils ne sont pas tout aussi importants.

Les états de survol sont importants pour les versions de bureau d'une conception.

Les états de survol sont importants pour les versions de bureau d'une conception. En termes de mobile, cette micro-interaction évolue vers un état actif qui montre si / quand un bouton ou un élément de robinet est actif ou «enfoncé» de manière tactile.

Elle concerne en outre les états de mise au point en tant qu'outil d'accessibilité lorsque les utilisateurs naviguent vers une cible tactile via un clavier ou un lecteur d'écran. Un état de focus montrera quelle cible est actuellement sélectionnée, comme la mise en surbrillance de la case active dans un formulaire ou une bascule marche / arrêt sur certains éléments de la conception (comme l'ouverture du clavier).

Le rembourrage est suffisant

À moins que vous ne conceviez un motif sombre, vous voudrez probablement vous assurer que les utilisateurs appuient sur la cible prévue, pas sur un objet à proximité. Un rembourrage suffisant autour de chaque élément tapable peut résoudre ce problème potentiel.

En plus de rendre l'élément de robinet au moins 44px, incluez au moins un autre 8px d'espace tout autour de la zone de robinet. Une pratique encore meilleure serait d'utiliser un rembourrage égal à la moitié de la taille de l'élément de robinet qui l'entoure. Cela permet d'éviter les tapotements accidentels.

Le texte est lisible et exploitable

conception mobile

Le texte dans la conception des éléments tapables fournit un contexte pour l'action et l'interaction.

Certaines choses sont à la mode en ce qui concerne l'apparence des instructions de texte.

  • Les boutons et les éléments tap utilisent la casse du titre
  • Les polices sont simples, dans un style régulier ou moyen

Il y a également des considérations lors de l'écriture de la copie de l'interface utilisateur.

  • Le texte est directement exploitable et indique aux utilisateurs ce qui va se passer ensuite, même s'il est un peu plus long que "Cliquez ici"
  • Mais éliminez tous les mots inutiles
  • Évitez le jargon ou le langage mignon et soyez direct
  • Soyez cohérent et utilisez les mêmes termes tout au long de la conception (les utilisateurs se «connectent-ils» ou se «connectent-ils»?)

Les liens texte ne suivent pas toutes les mêmes règles que les autres éléments pouvant être actionnés, mais la conception doit inclure une considération égale.

La première chose à laquelle vous devez penser est la fréquence à laquelle vous utilisez des liens de texte en ligne. Celles-ci peuvent être plus difficiles à exploiter sur les petits écrans et plus il y a de liens, plus il est probable que ces zones de contact pourraient se chevaucher et inciter les utilisateurs à engager le mauvais lien.

Le meilleur conseil est de les utiliser avec parcimonie et d'utiliser plus de liens de type bouton si vous le pouvez.

Le meilleur conseil suivant est de créer un halo étendu ou une zone de pression autour du lien de texte pour faciliter le toucher efficacement. Ceci est courant avec les liens texte dans le menu ou les liens dans le pied de page. (Cela a moins de sens dans la copie du corps principal.)

Les directives d'accessibilité WCAG offrent un peu plus de conseils sur les cibles en ligne:

«Les cibles peuvent apparaître n'importe où sur une ligne et peuvent changer de position en fonction de la largeur de l'écran disponible. Étant donné que les cibles peuvent apparaître n'importe où sur la ligne, la taille ne peut pas être supérieure au texte disponible et à l'espacement entre les phrases ou les paragraphes, sinon les cibles pourraient se chevaucher. C'est pour cette raison que les cibles contenues dans une ou plusieurs phrases sont exclues des exigences de taille cible. "

Appuyez sur Les cibles peuvent (et devraient) avoir une hiérarchie

conception mobile

Votre conception peut inclure plusieurs types de cibles tactiles, chacune avec sa propre apparence.

Cette hiérarchie de conception devient de plus en plus courante avec tel ou tel choix de boutons ou niveaux de cibles sélectionnables en fonction du site Web ou des objectifs commerciaux.

Les boutons en haut de la hiérarchie doivent avoir le plus de contraste et être de la plus grande taille et diminuer proportionnellement en fonction de l'utilisation souhaitée.

À quoi ressemble la hiérarchie de conception des cibles tactiles?

Tout d'abord, déterminez le nombre de niveaux dont vous avez besoin. Pour la plupart des projets, une option principale et secondaire suffit, mais certains projets vont dans des éléments de clic de troisième et quatrième niveau.

Définissez un style pour chacun. Commencez par la conception principale. Il s'agit probablement d'un bouton de couleur / dégradé. C'est l'élément sur lequel vous voulez que les utilisateurs tapent en premier. La conception secondaire doit être similaire au bouton principal mais comprend l'une des modifications suivantes: style fantôme, couleur moins contrastée ou taille plus petite. Les boutons de troisième et quatrième niveaux peuvent utiliser ces mêmes modifications.

Les boutons situés en haut de la hiérarchie doivent avoir le plus de contraste et être de la plus grande taille et diminuer proportionnellement en fonction de l'utilisation souhaitée.

Y a-t-il des éléments tactiles que vous voulez que les utilisateurs voient en premier et avec lesquels interagir? Utilisez des éléments exploitables avec une hiérarchie visuelle claire pour établir le flux et l'intention de l'utilisateur.

Les éléments de tap doivent avoir un design dont la taille et la proéminence sont évidentes pour les utilisateurs qu'ils doivent être touchés (notez le bouton orange au centre + ci-dessus). La taille peut être l'une des considérations les plus importantes pour aider à prédire l'intention de l'utilisateur.

Un mot d'avertissement: bien que la hiérarchie des cibles tactiles soit une bonne chose, trop d'options peuvent créer de la frustration pour l'utilisateur. C’est un équilibre délicat qui doit être testé.

Conclusion

Oui, nous concevons toujours pour les pouces. Cela reste vrai, quelle que soit la taille (ou la petite) des téléphones. Les cibles tactiles peuvent être n'importe quoi, des boutons aux commandes en passant par les liens texte avec le point commun que les utilisateurs interagissent avec eux pour que le site Web ou l'application fonctionne comme prévu.

Une bonne cible à toucher ressemble à quelque chose qui doit être touché (ou cliqué) et effectuer une action attendue par l'utilisateur.

Malheureusement, la conception de ces éléments est souvent une partie oubliée du processus de conception. Ne tombez pas dans ce piège avec vos projets.

Laisser un commentaire

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