Human Centered Design : éléments d’un site web
1. Le Bouton
Le bouton, est un élément interactif permettant à l’utilisateur d’effectuer une action ou un choix, par un clic. Il comporte en général un texte, un encadré et/ou un fond de couleur le distinguant d’autres éléments figurant sur la page. Le bouton peut être de nature différente, selon le contenu auquel il a été associé.
Il sert à confirmer une action, comme dans un formulaire, une carte ou encore un dialogue. Il peut également avoir un rôle similaire à celui d’un lien, c’est-à-dire de diriger l’utilisateur vers une autre section du site, notamment dans le cas où il se trouve en bas de page (par principe d’ancrage).
Remarque: si l’objectif est de naviguer d’une page à l’autre, il est préférable d’utiliser des liens plutôt qu’un bouton pour y accéder.
Le bouton comporte deux états principaux, c’est-à-dire normal et pressé. Dans certaines conditions, Il se peut qu’il il soit désactivé et par conséquent inutilisable.
Le libellé du bouton doit clairement décrire l’action qui lui est attribué, pour indiquer l’utilisateur vers où il accède en cliquant, et doit tenir en une seule ligne.
Les boutons comportent plusieurs niveaux d’importance visuelle selon l’action :
- Grande importance : par son apparence, ce bouton définit hiérarchiquement le degré d’importance des différentes actions que l’on retrouve sur le site. On le distingue par des couleurs plus saturées pour le fond, le libellé étant centré, en majuscule et sa couleur en contraste avec le fond. Le conteneur de couleur peut aussi être accompagné d’une ombre, donnant du relief. Il reprend les actions les plus importantes du site web. On retrouve dans cette catégorie les actions de danger (suppression possible de données entrées par l’utilisateur),ou encore les boutons flottants et peut être accompagné d’une icône sur le côté du libellé pour clarifier la nature de l’action.
- Moyenne importance : le bouton est délimité par un contour, sans fond et/ou un fond moins saturé. Il se distingue principalement grâce à son libellé centré, souvent en majuscule, de couleur fort saturée et en gras. L’action est importante, mais n’est pas primaire.
- Faible importance : le bouton ne comporte ni fond, ni encadré et se compose principalement d’un simple libellé de couleur. On le retrouve fréquemment en bas de paragraphe ou dans des boites de dialogue.
En ce qui concerne l’interaction, les boutons disposent de plusieurs états : activé, désactivé, hover et pressé. Ils diffèrent selon leurs degrés d’importance. La couleur de fond et/ou du libellé, la saturation, l’opacité, l’ombre ou encore l’encadré peuvent changer selon l’interaction. Ces changements peuvent être animés.
Par défaut, le bouton n’est pas un élément focalisable, ce qui implique qu’il faut ajouter un attribut le rendant cliquable par la barre espace ou enter (si on utilise un clavier pour naviguer). Dans les cas où le bouton ne comporte qu’une icône, il faut lui attribuer un label descriptif du bouton, de telle sorte à ce que l’on puisse connaître l’action.
Sources :
2. Le champ de texte
Le champ de texte permet à l’utilisateur d’entrer du texte et de le modifier. On le retrouve généralement dans des formulaires (de contact, d’inscription, etc.) ainsi que dans des dialogues. Il doit pouvoir indiquer aux utilisateurs qu’il peut interagir et entrer du texte, tout en étant clair, en passant d’un champ de texte à l’autre.
Plusieurs types de champs de texte sont possibles :
- Le champ de texte standard : composé d’une ligne délimitant la zone de texte et d’un libellé grisé lorsqu’il est actif. Bien qu’encore présente sur de nombreux sites web, cette disposition manque de clarté notamment lorsqu’il s’agit de faire la différence entre le texte entré par l’utilisateur et le libellé du champ de texte.
- Le champ de texte rempli : bien qu’il ait les mêmes caractéristiques qu’un champ de texte standard, le champ de texte rempli comporte un fond grisé ou de faible saturation, le permettant d’être mieux délimité et plus visible pour l’utilisateur.
- Le champ de texte délimité par un cadre: à la différence du champ de texte rempli, il est délimité par un bord de même couleur que le texte.
Souvent utilisé dans les formulaires, le champ de texte sert à compléter des informations différentes. Cela peut être un nom, un numéro de téléphone, un mot de passe ou encore un message. Pour aider l’utilisateur au moment d’inscrire ces informations, plusieurs configurations s’ajoutent au libellé :
- Une icône décrivant le type d’information à entrer (date de calendrier, un mot de passe, un pseudonyme, etc.).
- Le nombre de caractères maximum, placé en bas à droite du champ de texte.
- Un message de validation ou d’erreur du champ de texte, avec un code couleur correspondant. Il peut être accompagné d’une icône pour plus de clarté.
- Dans le cas d’un mot de passe, les caractères sont masqués et peuvent être visibles grâce à un clic l’icône correspondante.
- S’il s’agit d’un champ de sélection, l’utilisateur clique sur une icône fléchée, ouvrant un menu déroulant et fait son choix.
- Enfin, un champ de texte peut être complété par la voix en activant le microphone (par un clic sur l’icône correspondante).
Il est préférable de ne pas utiliser de texte de substitution dans des champs de texte, au risque qu’il ne puisse pas être lu par certains logiciels de lecture et peut être difficile à lire pour les personnes ayant des difficultés visuelles.
On compte trois états pour les champs de texte: actif, pressé et désactivé. Lorsque l’on presse un champ, le libellé disparait ou se déplace de sorte à laisser de l’espace pour compléter le cadre. Ce libellé peut être mis en couleur, tout comme la ligne et/ou l’encadré. Quand le champ est désactivé, l’utilisateur ne peut pas interagir et les éléments sont grisés.
3. L‘indicateur de progression
L’indicateur de progression est utilisé lorsqu’une tâche nécessite un temps de chargement. Il rend l’attente de l’utilisateur plus tolérable. Elle peut également illustrer l’état d’avancement d’une lecture d’article par exemple.
La progression peut être circulaire ou linéaire, indéterminée ou déterminée. Lorsqu’elle est déterminée, un affichage en pourcentage peut indiquer le temps restant.
En règle générale, l’indicateur de progression se situe en dessous d’un menu de navigation, et comporte une couleur bien distincte.
L’indicateur de progression comporte un seul état, c’est-à-dire actif.
4. Le lien
Le lien, ou hyperlien, est un des éléments présent depuis le début du web. Il sert à naviguer d’une page à une autre grâce à une zone de texte ciblée, au moyen d’un clic.
Il comporte plusieurs états : actif, hover, pressé et visité.
Par défaut, le lien se définit par une couleur bleue. Lorsqu’il est en état “hover”, une barre en bas de texte vient indiquer qu’une interaction est possible. La couleur bleue change au moment du clic et de l’ouverture de la nouvelle page (état “pressé”). Une fois la page visitée, le lien change de couleur et devient mauve, indice qui montre que l’on a déjà ouvert ce lien auparavant. Cette dernière étape ne figure pas toujours sur les sites web dont l’interaction a été personnalisée.
En plus de la modification du texte, le curseur change, passant d’un pointeur à un doigt pointé. Ce changement indique que l’utilisateur peut interagir avec l’élément qu’il pointe.
Concernant l’accessibilité, le lien peut être activé par clavier, comme la touche “Enter”.
5. La liste
La liste est un composant constitué de plusieurs éléments, dits “enfants”, placés verticalement pouvant être textuels et/ou imagés. Ils peuvent être sélectionnables et chacun des éléments doit garder une même structure visuelle.
Ces éléments sont généralement composés d’une icône ou une image indiquant le type d’élément, un texte descriptif ainsi que d’un encadré pour délimiter l’item. Il se peut que l’élément comporte une métadonnée ou une case à cocher. L’item peut comporter plusieurs niveaux de texte, dont un niveau définissant le titre.
On retrouve les listes dans plusieurs situations comme : les commandes d’articles en ligne, les mails, les filtres de recherche, les menus de navigation, etc.
