Navigation et action
Lorsqu’il consulte une application web, l’utilisateur est généralement confronté à deux types d’interaction: la navigation et les actions. On distingue souvent ces deux types d’interactions.
- La navigation est un lien.
- L’action est un bouton.
Pourquoi ? Les liens proviennent des premiers jours du World Wide Web. C’est ce qui en fait un web (et aussi un world wide web). Les boutons sont une forme de skeuomorphisme qui transpose le monde physique, où l’on appuie sur des interrupteurs et des boutons pour faire quelque chose, dans le monde digital de l’internet. Et, par conséquent, ils sont utilisés différemment :
Les actions sont la manipulation des données que l’utilisateur manipule via l’interface de l’application web, tandis que la navigation est un changement d’état de l’interface dans laquelle l’utilisateur navigue. En d’autres termes, les liens (ou la navigation) ne conduisent pas à des modifications des données sous-jacentes, mais peuvent conduire à la présentation de nouvelles pages, ou à une présentation différente de la page actuelle sur laquelle l’utilisateur navigue (c’est-à-dire un changement de vue). Ainsi, si l’on considère les choses sous cet angle, on peut dire que la navigation est un changement d’état de l’interface utilisateur et qu’une action est une manipulation de données. En d’autres termes, se déplacer d’un État à l’autre revient à naviguer d’un État à l’autre. Je tiens à souligner que les actions (boutons) peuvent conduire à la navigation, mais ce n’est pas une obligation.
Conception de l’interface utilisateur
L’affichage d’un lien et d’un bouton est, bien entendu, une décision de style de design, mais les liens sont généralement du texte souligné en bleu et les boutons sont des boîtes contenant du texte. Les liens et les boutons peuvent contenir des icônes pour mettre en évidence l’action ou la navigation prévue (il est déconseillé de se fier uniquement aux icônes, car cela obligerait l’utilisateur à réfléchir inutilement à l’action ou à la navigation prévue).
Architecture de l’information
Il est évident que le fait que votre application web adhère à une certaine architecture d’information qui permet ce comportement est bénéfique pour l’expérience utilisateur de votre solution. Cela dit, comprendre les principes de la représentation des données d’une application est essentiel pour comprendre la différence entre la manipulation des données et les changements d’état dans votre interface utilisateur.
Prenons l’exemple d’un magasin de fruits. Ce magasin pourrait avoir une liste de tous les fruits. Cette «liste de ressources» serait la «liste de fruits» pour ce magasin spécifique :
Un utilisateur peut décider :
- Ajouter un nouveau fruit à la liste.
- Filtrer ou trier la liste des fruits
- Aller à la vue détaillée d’un fruit spécifique dans la liste
- Accéder à la vue détaillée de l’origine d’un fruit spécifique dans la liste.
Appliquez cette loqique à une interface utilisateur typique.
Ajout de nouveaux fruits
Lorsqu’il veut ajouter un nouveau fruit à la liste, l’utilisateur clique sur le lien «ajouter un fruit», ce qui entraîne un changement d’état de l’interface utilisateur, c’est-à-dire qu’un formulaire apparaît pour compléter le nouveau fruit.
Habituellement, de nos jours, vous verrez souvent un bouton au lieu d’un lien pour l’interaction «ajouter un nouveau fruit». Toutefois, cette interaction n’est pas en soi une action. Il s’agit simplement d’un changement d’état qui montre la vue pour créer un nouveau fruit. Il s’agit donc de la navigation. Ce faisant, elle envoie le message à l’utilisateur qu’il ne manipule pas directement les données en cliquant sur «ajouter un nouveau fruit», mais qu’il peut attendre une nouvelle vue pour effectuer une telle tâche. Par conséquent, un bouton en général n’est pas conseillé pour cette interaction.
Une fois qu’il a accédé à cette vue, l’utilisateur peut effectuer l’action. On s’attendrait donc à ce qu’un bouton indique que l’utilisateur «ajoute un nouveau fruit» à la liste.
Ensuite, nous pensons : que verra l’utilisateur lorsqu’il aura ajouté le nouveau fruit : retournera-t-il à la liste des fruits ou ira-t-il à la page de détails du fruit nouvellement ajouté ?
Cela dépend vraiment de ce qui est important pour l’utilisateur et doit être déterminé par des recherches sur l’utilisateur. Les deux options sont valables, mais toutes deux relèvent de la navigation, bien que déclenchée par l’action entreprise.
Annuler l’action
Qu’il s’agisse d’un panneau latéral, d’une fenêtre contextuelle ou même d’un formulaire pleine page (modification d’un fruit sur la page de détail des fruits), chaque fois qu’un utilisateur souhaite «annuler» une action, il abandonne celle-ci et revient ainsi à l’état précédent de l’interface utilisateur. Par conséquent, il faut un lien et non un bouton.
¨¿Mais l’annulation est comme action ?”
Comme prévu, la réponse à cette question est «non». L’annulation d’une action par l’utilisateur est l’inverse de l’exécution d’une action ; c’est le «défoulement» d’une action. Dans tous les cas décrits ci-dessus, l’annulation impliquerait le retour à l’état précédent de l’interface utilisateur.
«Mais qu’en est-il de iOS, Windows ou Macos ?»
En effet, comme nous l’avons mentionné plus haut, l’interface utilisateur réelle de votre système d’exploitation n’utilise essentiellement que des boutons. Pour presque tout. Cela casse complètement tout ce que nous venons d’écrire.
Cependant, il faut savoir qu’une application web n’est pas la même chose qu’un système d’exploitation. Il est préférable d’éviter la vallée étrange de l’interface utilisateur. Les utilisateurs sont désorientés lorsqu’ils imitent un véritable système d’exploitation. De plus, cela reviendrait à ignorer la puissance des conventions de l’interface utilisateur Web auxquelles les utilisateurs sont habitués, ce qui nuirait à la convivialité. Que le système d’exploitation soit le système d’exploitation et que le web soit le web.
C’est aussi pourquoi le responsive design n’est pas la même chose que la création d’une application mobile native. Il s’agit de deux types différents d’interface utilisateur.
L’option d’annulation est similaire à l’abandon d’une action et donc similaire à la navigation vers l’état précédent de l’interface utilisateur. La navigation est représentée dans l’interface utilisateur Web par des hyperliens et l’option d’annulation doit donc être un hyperlien. Comme pour tout, cela peut aussi être débattu. On peut certainement voir l’attrait visuel de l’utilisation d’un bouton au lieu d’un lien. Et comme pour la convention de navigation principale, les choses peuvent changer au fil du temps.
Sur posicionweb Nous fournissons des solutions de marketing digital depuis plus de 15 ans. pour nos clients. Tant dans la création dee-commerce et des sites web professionnels ainsi que des stratégies pour leur développement. Si vous avez un projet, contacta avec nous pour vous proposer une offre sur mesure.
