Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'UX pour le design web

Améliorer la navigation

Testez gratuitement nos 1336 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Améliorez la navigation contextuelle à l'aide des boutons et des liens. Donnez-leur une dimension interactive et conviviale.
04:59

Transcription

La navigation a de plus en plus tendance à devenir contextuelle. Il va donc falloir, au niveau des liens et des boutons que nous allons placer, que nous optimisions l'expérience de nos utilisateurs en améliorant ces liens et ces boutons. Les liens dans un premier temps doivent être bien identifiables. Ici, à la fin de ce paragraphe, il y a un lien qui a été présenté en gras, mais quelque part, ce n'est pas suffisant. Les normes initiales du Web imposaient que les liens soient en bleu et soulignés. Évidemment, les graphistes trouvent cela très laid, et ils vont mettre en place des systèmes de liens qui ne seront pas forcément basés sur cette mise en forme bleu souligné. Ce n'est pas réellement un problème tant que les liens resteront identifiables, et puis les liens doivent être également prédictifs. Nous avons ici à la fin du deuxième paragraphe un lien dont on ne sait absolument pas vers quoi il va nous envoyer. Nous allons donc devoir spécifier clairement quel va être l'objet du lien, en l'occurrence ici, les caractéristiques de produit. Puis, le terme caractéristiques est un peu vague, on va devoir aller plus loin et on peut tout à fait avec une phrase courte préciser dans le lien vers quel type d'informations on va aller, et puis inciter à aller vers ce type d'informations. Et n'oubliez pas qu'il est possible techniquement qu'au survol de ce lien on puisse faire apparaître une info bulle qui va apporter des informations contextuelles complémentaires qui vont permettre à l'utilisateur de savoir si oui ou non il va devoir cliquer sur ce lien pour trouver les informations qu'il recherche. Avec des liens qui vont être prédictifs, l'expérience utilisateur va être considérablement améliorée. Les boutons eux vont toujours devoir être identifiables. Ici, nous avons des boutons tels qu'ils étaient appliqués jusqu'à il y a quelques années où ils ressemblaient à des boutons de la vie courante, c'est-à-dire que l'on pouvait trouver sur des appareils de type électroménager, vidéo ou son, avec du relief, des effets de brillance, de métal, etc. Aujourd'hui, nous avons une tendance avec le « flat design », le design plat, et le matériel design prôné par Google, de mettre en place des boutons qui ne vont plus être autant enrichis graphiquement. Pour autant, ces boutons devront toujours être identifiables en tant que boutons. Et puis, les boutons ne devront pas être ambigus. Lorsqu'on va poser une question à un utilisateur, voulez-vous supprimer cet élément ? Nous n'allons pas nous contenter de lui proposer deux boutons de type oui ou non. Il va falloir qu'en toutes lettres, nous expliquions ce qui va se passer, quelle action va être déclenchée lorsqu'il appuiera sur le bouton. Ici, il va pouvoir supprimer cet élément ou il va pouvoir annuler la manipulation. Et puis, lorsque nous allons poser des questions à notre utilisateur, nous voulons qu'il nous réponde, et nous pouvons spécifier la nature de la réponse à l'intérieur des boutons. Ici, lorsque nous proposons de profiter d'une offre exceptionnelle, l'utilisateur va pouvoir réellement en cliquant sur les boutons nous répondre, soit en vous remerciant et en déclinant, soit en indiquant qu'il veut bien profiter de cette offre. Et ici, le bouton va servir d'une part à enclencher une action, mais va induire un niveau de convivialité, car il va y avoir une amorce de discussion entre le site et l'utilisateur du site. Certains boutons aussi sont des boutons qui vont être de type interrupteur. L'utilisateur va avoir le choix de cocher, d'ajouter un produit, de choisir une option et ces boutons ne sont pas toujours explicites. Il va falloir ajouter graphiquement un effet visuel, par exemple, une couleur verte pour indiquer que le produit a été choisi, ou si ce n'est pas le cas, une couleur rouge. Cet ajout de couleur peut sembler être un détail visuel, mais en fait il s'agit d'une avancée majeure, car c'est une indication visuelle optique pour l'utilisateur qui au premier coup d’œil va pouvoir vérifier si oui ou non il a accédé à cette option. Bien entendu, les boutons doivent être prédictifs, les boutons ne doivent pas être ambigus, mais les boutons peuvent également être incitatifs. Nous pouvons proposer ici dans un pavé publicitaire une offre à ne manquer sous aucun prétexte, et nous n'allons pas nous contenter de mettre un bouton en disant, « oui, j'en profite », nous allons visuellement indiquer qu'il y a une action qui va être entreprise et que cette action vaut le coup. Vous voyez qu'ici on a mis en place un bouton qui est un bouton extrêmement dynamique. Donc, pour résumer, les boutons vont servir à l'utilisateur à déclencher un certain nombre d'actions, mais il va s'agir avec les boutons de mettre en place des éléments de communication interactive.

L'UX pour le design web

Adoptez une méthode de conception web efficace. Optimisez la structure, les textes, l'accessibilité, les interactions avec l’utilisateur, ainsi que l'optimisation pour mobile.

1h42 (32 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !