Concevoir des interactions ciblées

Découvrez les principes clés de la conception d'interactions ciblées, les défis de conception que l'interaction peut résoudre et comment les intégrer à votre processus.

Lorsque nous pensons à la conception et à l'animation d'interaction dans l'expérience utilisateur, il est facile de le confondre avec des éléments fantaisistes : les cloches et les sifflets, ou les objets volants aléatoires qui « donnent à un site Web le facteur wow ». Cela peut apporter un plaisir à court terme, mais cela peut vite devenir irritant pour les utilisateurs réguliers.

Pour lutter contre ce type de futilité, nous examinerons les principes de base de la conception d'interactions significatives, comment cela peut résoudre les défis de conception courants et comment vous pouvez l'introduire dans vos systèmes et processus de conception. L'interaction ne doit plus être une touche finale qui est abandonnée du champ d'application comme un « agréable à avoir », mais une partie intégrante de l'expérience globale de l'utilisateur.

Quatre principes clés d'une conception d'interaction significative

1. Évitez de créer des obstacles

Pensez à un "menu hamburger" qui prend deux ou trois secondes pour s'animer en plein écran. Chaque fois qu'un utilisateur veut naviguer sur le site, il doit attendre. La création de temps de tâche plus longs pour l'utilisateur est un moyen garanti de les renvoyer jusqu'au site Web ou à l'application d'un concurrent.

Il existe cependant des cas où retarder la progression d'une interaction peut être bénéfique. Lorsque l'interaction est complexe, la ralentir peut donner à l'utilisateur un meilleur contexte et un meilleur retour d'informations. Voici quelques exemples de cas où vous pouvez retarder les interactions et les animations :

• Intégration de nouveaux utilisateurs à une nouvelle interface. Assurez-vous de réduire les obstacles avec l'option de saut.
• Faites glisser et déposez des interfaces qui montrent la cause et l'effet. Trop rapide et les utilisateurs peuvent se demander où ce fichier est allé.
• Ajout d'un produit au panier. Cela ne devrait pas créer un obstacle prolongé au paiement, mais cela devrait donner à l'utilisateur suffisamment de commentaires pour qu'il sache que sa tâche a réussi.

En règle générale, les interactions simples doivent être rapides et les interactions complexes doivent être retardées juste assez pour que l'utilisateur comprenne le contexte.

2. Faites correspondre le mouvement au message

Si Apple décidait que toutes leurs interactions sur iOS allaient être rapides, nettes, face à vous et faire des tas de choses tournoyantes, auriez-vous l'impression d'utiliser un produit Apple ? Si vous utilisiez l'application Alton Towers et que vous voyiez une animation lente et une abondance de transitions à la Ken Burns, cela ressemblerait-il à un lieu magique de plaisir et d'excitation, ou à une publicité télévisée M&S ?

La façon dont une interaction s'anime doit toujours représenter le ton que vous visez et qui convient à vos utilisateurs - cela rend l'expérience plus immersive et cohérente. S'il s'agit d'un site de divertissement pour les enfants, il peut être un peu farfelu et criard. S'il s'agit d'une boutique haut de gamme, restez lente, sophistiquée et de bon goût.

3. Donnez-lui un but

La conception d'interaction a tellement de potentiel pour élever l'expérience utilisateur, c'est pourquoi il est si tentant d'abuser et d'utiliser sans but. Vous vous souvenez des sites Web Flash ?

Faites défiler un peu plus loin et jetez un œil aux huit défis que la conception d'interaction peut résoudre. Si vos interactions ne suivent pas ces schémas, il y a de fortes chances que cela n'ait pas d'autre but que de ravir les utilisateurs.

4. Rendez-le invisible

Cela semble assez déchirant étant donné le temps investi dans la conception des interactions, mais si cela passe inaperçu, c'est probablement parce qu'ils ont fait un travail formidable. Nous avons tendance à accorder plus d'attention à l'utilisation d'une technologie ou d'une interface lorsque cela ne va pas ou que quelque chose semble maladroit. Lorsque les choses se passent bien, l'utilisateur peut se concentrer sur le contenu.

La quantité de considération de conception d'interaction sur les applications et les sites Web largement utilisés tels que les produits Facebook, Pinterest, Twitter et Google est incompréhensible. Et pourtant, vous ne le remarqueriez jamais vraiment jusqu'à ce que quelqu'un vous le signale. Ils rendent le design invisible afin que vous puissiez profiter de l'expérience et créer un lien émotionnel plus fort avec le produit, le service ou le contenu.

Six défis de conception que la conception d'interaction peut résoudre

1. Orientation & contexte

C'est un défi particulier pour la conception mobile lorsque l'espace sur l'écran est limité. Montrez tout à l'air libre et l'utilisateur est surchargé cognitivement. Montrer des choses vitales et cacher des choses moins critiques est ce que nous recherchons ; cependant, il cache une partie de l'expérience. Ainsi, en utilisant des interactions significatives, nous pouvons enseigner visuellement à l'utilisateur où vivent les choses, il est donc facile à retenir et intuitif.

Voici quelques exemples de création de contexte à l'aide d'interactions :

• Changeur de couleur d'arrière-plan des polices Google. Les couleurs donnent l'impression qu'elles vivent à l'intérieur de l'icône du pot de peinture.
• Le processus d'ajout au panier et de paiement sur Cotton Bureau. Plutôt que de vous emmener vers une nouvelle page de panier, c'est comme un carrousel qui vit à droite de la page visible.

2. Démontrer la cause et l'effet

Un exemple classique de ceci est une interface glisser-déposer. Lorsque vous ramassez un objet multimédia et le déplacez vers la « zone de dépôt », il devrait y avoir un retour pour que l'utilisateur lui dise qu'il l'a ramassé et qu'il s'est déplacé au bon endroit pour déposer l'élément. Une fois qu'ils l'ont déposé, il devrait y avoir une validation pour dire à l'utilisateur qu'il a réussi sa tâche. Cela peut être fait par des changements de couleur, des messages de validation positifs ou même des effets sonores.

3. Fournir des commentaires

Pour cet exemple, prenons un bouton de paiement. Combien de passerelles de commerce électronique mal exécutées avez-vous rencontrées lorsque vous cliquez sur ce joli bouton brillant « Payer maintenant », pour ne plus savoir si vous avez cliqué dessus ou non parce qu'il est en cours de traitement ? Il n'a pas dit que c'était ce qu'il faisait. Ainsi, l'interaction peut changer le statut d'un bouton et avec un peu d'animation, elle peut indiquer à l'utilisateur que "le paiement est en cours de traitement", puis indiquer à l'utilisateur quand "le paiement est reçu" avant de passer à une page de confirmation de commande. Plus besoin de vous demander ce qui se passe pendant dix secondes et de vous demander si vous avez cassé Internet.

4. Mettez en surbrillance les informations clés

Lorsqu'un contenu est d'une priorité plus élevée dans la même vue d'écran, l'utilisation de la couleur et de la typographie pour le promouvoir peut briser la cohérence de votre système de conception ou sembler déplacé s'il est surutilisé. L'interaction peut aider à accentuer le contenu important sans compromettre la mise en page.

Pensez aux applications de fitness : lorsque vous chargez votre tableau de bord pour la première fois, vous voulez voir l'activité principale et les statistiques du jour. L'utilisation d'une animation simple peut faire ressortir ce contenu sans diluer la quantité de choses affichées à l'écran.

5. Créer une perception de performance

La vitesse est un sujet brûlant et pour cause, car c'est un facteur commun associé aux taux de rebond. Il y aura des cas où vous aurez maximisé l'optimisation de la vitesse sur la page et le chargement de la page prendra encore un peu de temps. Il existe des alternatives pour ne rien montrer à l'utilisateur ou afficher une icône de chargement.

Le chargement squelettique peut être utilisé pour afficher une mise en page prévisible sous forme filaire afin que l'utilisateur sache à peu près où chercher et comment il peut interagir avec l'interface avant le chargement de la page. Psychologiquement, on a l'impression que la page s'est chargée plus rapidement que si rien ne se passe, mais en réalité, elle se charge en même temps.

Vous pouvez également utiliser les temps de chargement comme une opportunité d'informer les utilisateurs sur ce qui se passe et ce qui est sur le point de se passer avec des messages conviviaux qui diffusent le temps d'attente.

6. Ajouter de la personnalité à la marque

Les marques axées sur les personnages peuvent grandement bénéficier de l'introduction d'interactions pour apporter de la personnalité à l'expérience. Vous pouvez tirer parti des caractéristiques humaines des mascottes. Lorsque vous n'avez rien de visuel dans votre marque, vous pouvez toujours ajouter de la personnalité en utilisant la vitesse et la fréquence. Pensez à Google et à leurs préchargeurs de points originaux ou à l'activation de la commande vocale qui apportent une approche conviviale et amusante de manière simple.

Construire un lien émotionnel avec l'utilisateur est un excellent moyen d'obtenir des visites régulières. La conception d'interaction peut rendre la technologie plus centrée sur l'humain, ce qui est toujours bon à viser.

Introduire l'interaction dans votre processus de conception

Croquis et compositions basse fidélité

Outils de conception d'interactions

• Keynote : Si vous recherchez une idée brute et simple pour faire passer votre idée, Keynote est la solution rapide.
• Adobe Animate : conservez tout dans Adobe et passez en toute transparence avec d'autres outils. C'est idéal pour l'animation illustrative.
• Tumult Hype : Si vous êtes familier avec l'interface de Sketch et que vous connaissez les délais, vous serez à l'aise avec Tumult.
• Framer : il s'agit d'un outil de conception d'interaction spécialement conçu qui possède des capacités vraiment avancées pour faire correspondre votre animation à JavaScript.
• Principe : Avec un joli lien Sketch, Principe devient la référence en matière d'interaction. C'est relativement simple à apprendre, et ce que vous pouvez y accomplir est formidable.
• Atomique : ajoutez des données, une logique et des variables pour rendre vos interactions aussi pratiques que la version finale. C'est pour le concepteur avancé qui a des connaissances en codage.
• Invision Studio : C'est encore le début, mais Invision Studio a de grandes capacités et des similitudes avec Principle. Le temps nous dira si cela sera suffisamment avancé pour dominer le marché du prototypage et de la collaboration.

Notes de remise détaillées

Laisser des notes de développeur est une pomme de discorde si vous êtes dans un environnement hautement collaboratif, mais si vous travaillez à distance, des notes détaillées par rapport à vos idées et prototypes avec un bon transfert peuvent garantir que vos interactions sont prises en compte dans la construction.

Compiler une bibliothèque de démos et d'inspiration

Ajoutez-le à votre système de conception

Si vous avez réussi à résoudre un problème courant (correctement testé) avec l'interaction, intégrez-le dans votre système de conception ou votre bibliothèque de modèles pour le réutiliser dans des scénarios similaires sans investir de temps pour faire autre chose à partir de zéro.

Pour obtenir de l'aide sur la conception Web et l'expérience utilisateur (UX), contactez-nous dès aujourd'hui.

Si vous avez besoin d'aide pour votre expérience utilisateur, n'hésitez pas à nous contacter.