Donner vie à la micro-interaction et à l'animation d'interface utilisateur grâce à des collaborations entre concepteurs et concepteurs

Nous pouvons créer une expérience agréable pour les utilisateurs grâce à la micro-interaction et à l'animation de l'interface utilisateur!

Bonjour, je m'appelle Kyo Kim et je travaille en tant que concepteur de produits chez Capital One depuis environ deux ans. J'ai utilisé des micro-interactions et des animations tout au long de mon travail ici, y compris sur certains projets mobiles que vous auriez pu utiliser vous-même. Avant de commencer à travailler dans la technologie, mon expérience était dans le cinéma. Au cinéma, l'accent est mis sur la narration et le montage pour créer une histoire qui engage le public; et cela se fait en grande partie grâce à l'utilisation de transitions. Je trouve ces compétences utiles aujourd'hui lorsque je crée des expériences et des histoires pour les outils numériques.

Lorsque je conçois, je pense à des facteurs qui offriraient aux utilisateurs une expérience formidable et agréable avec les transitions et la narration.

Pour qu'un produit offre à ses utilisateurs une expérience délicieuse, il doit offrir plus qu'un design esthétique et des effets d'animation impressionnants.

Indépendamment du fait que le produit soit basé sur une application, basé sur le Web ou toute autre forme de produit numérique, il doit attirer les utilisateurs, être agréable à utiliser et leur donner la possibilité de dialoguer avec lui de manière directe et significative. façon.

Les micro-interactions ont le pouvoir de rendre l'expérience utilisateur agréable et satisfaisante d'une manière que de nombreux éléments de conception ne peuvent pas. Avant d'entrer dans les micro-interactions dans le contexte de la conception de produits, commençons par les fondamentaux.

Que sont-ils? Pourquoi est-ce bon pour l'expérience utilisateur? Pourquoi les concepteurs et les développeurs devraient-ils les intégrer à leur travail? Comment les équipes de conception de produits peuvent-elles travailler ensemble pour les améliorer?

Que sont les micro-interactions et pourquoi devrions-nous nous en préoccuper?

Que sont les micro-interactions ou les animations de l'interface utilisateur? Les gens les appellent souvent de jolies animations, des graphiques animés ou des images animées. Cependant, ils sont bien plus que cela.

Contrairement à d'autres formes d'animation qui existent uniquement pour créer l'illusion du mouvement, les micro-interactions engagent directement l'utilisateur, lui permettant d'accomplir une variété de tâches et d'interagir avec le produit de manière intuitive et efficace.

Si nous devions relier cela aux principes d'une bonne conception des systèmes, cela améliore et permet la rétroaction du système pour l'utilisateur. Si cela est fait correctement, les utilisateurs prendront les micro-interactions comme un message de l'utilisateur indiquant qu'il (le système) fait ce qu'il devrait faire en réponse à ses besoins.

Même si vous ne savez pas ce que sont les micro-interactions, vous vous engagez régulièrement avec elles. Chaque fois que vous utilisez une application ou un produit Web pour accomplir une tâche particulière - que ce soit pour lire les actualités, effectuer un achat, jouer à un jeu, créer un profil ou ajuster vos paramètres et préférences de notification - chaque action individuelle que vous effectuez constitue une micro-interaction. Les micro-interactions sont tissées de manière transparente dans la plate-forme d'un produit, rendant leurs fonctions transparentes et accessibles, améliorant efficacement l'expérience globale de l'utilisateur.

Bien que ces «actions» prennent un certain nombre de formes différentes, voici quelques exemples courants:

  • Lorsque nous «déplaçons» un article vers un panier virtuel.
  • Lorsque nous sélectionnons entre deux options sur un bouton bascule de type CTA.
  • Lorsque nous «tirons vers le bas» pour actualiser un fil d'actualités et voir la dernière mise à jour.
  • Lorsque nous «faisons défiler vers le haut et vers le bas» dans un long flux ou une page.

Lorsque nous concevons une micro-interaction, nous devons examiner si elle est vraiment nécessaire et vitale pour l'expérience de l'utilisateur. Sinon, cela peut distraire l'utilisateur de l'utilisation efficace de votre produit ou devenir un bruit visuel.

Principes des micro-interactions

Il y a trois principes que je considère toujours lors de la conception de micro-interactions.

  1. Continuité (et subtilité)

Les éléments de micro-interaction doivent être subtils afin que lorsqu'un utilisateur effectue une action, il y ait un flux continu dans son expérience. Par exemple, si nous créons une animation de défilement dans un long fil, l'utilisateur doit pouvoir se concentrer sur le contenu de la page plutôt que sur l'animation de défilement elle-même.

2. Prévisibilité

Les micro-interactions de qualité ont un élément de prévisibilité qui permet à l'utilisateur de naviguer efficacement et efficacement dans un produit. L'utilisateur peut prédire avec précision les effets de ses actions, se sentir à l'aise de les inverser et être confiant dans sa capacité à effectuer comme prévu.

3. Transformabilité

Les transitions fluides entre plusieurs écrans et les transformations bien définies des divers objets qui s'y trouvent sont des aspects clés des micro-interactions de qualité. Ils permettent à l'utilisateur de développer une compréhension intuitive des relations entre les écrans et les éléments qu'ils contiennent.

Lorsqu'elles sont conçues selon ces principes, les micro-interactions fournissent le contexte d'une conception en aidant les utilisateurs à savoir comment interagir avec elle. Une micro-interaction est un événement momentané qui accomplit une seule tâche. Sans doute les plus petits éléments interactifs de la conception d'un site Web ou d'une application, les micro-interactions sont parmi les plus vitales car elles remplissent diverses fonctions essentielles.

Les déclencheurs (tapotement, balayage, glissement, etc.) lancent chacune des actions répertoriées dans la section ci-dessus (continuité, prévisibilité et transformabilité). L'utilisateur effectue une action sur un site Web ou une application pour démarrer le processus (même s'il se poursuit après l'étape initiale). Cela suit un modèle d'appel à l'action d'un utilisateur, des règles d'engagement déterminées par l'interface (ce qui se passera et comment), les commentaires de l'utilisateur (cela a-t-il fonctionné ou non), et des modèles ou des boucles (l'action se déroule-t-elle arriver une fois ou répéter sur un calendrier).

-Comment les développeurs et les concepteurs peuvent travailler ensemble pour donner vie aux micro-interactions

Comme vous pouvez le voir, les micro-interactions ont un rôle essentiel dans la formation de l'expérience utilisateur. Pour cette raison, ils sont devenus une partie de plus en plus importante de mon travail en tant que concepteur de produits. Ayant travaillé sur divers projets sur de multiples plateformes et utilisations, j'ai remarqué que tout le monde ne reconnaît pas la valeur de ces éléments ou comment les créer efficacement. Plus important encore, les membres de l'équipe ne savent souvent pas comment s'exprimer mutuellement concernant la conception de transitions et de micro-interactions.

J'ai réalisé que tout se résumait à la communication - quelque chose s'est perdu dans la traduction lorsque j'ai expliqué mes idées de conception à mes développeurs. Vous avez peut-être déjà entendu cette citation de Confucius: «Dis-moi, et j'oublierai. Montrez-moi et je me souviendrai peut-être. Impliquez-moi et je comprendrai. »Et c'est grâce à l'implication que nous, en tant qu'équipe de concepteurs et de développeurs, créons de grandes expériences.

Commençons par une brève description du processus de conception…

Dans une situation idéale, lorsqu'un concepteur propose une micro-interaction, le flux de travail traditionnel se déroule dans l'ordre suivant:

  1. Le concepteur développe les éléments visuels et les effets d'animation nécessaires pour actualiser son idée.
  2. Le concepteur présente le modèle final et ses concepts sous-jacents aux autres membres de l'équipe.

Mais que se passe-t-il si le processus de conception ne se déroule pas en pratique comme en théorie? Et si nous présentons un storyboard ou un modèle incomplet? Ou quelqu'un d'autre dans l'équipe conçoit le modèle?

Lorsque cela se produit, des problèmes risquent de survenir lors de la présentation ou du développement. Ces problèmes entrent généralement dans l'une des trois catégories suivantes:

  1. L'idée d'animation n'est pas communiquée assez clairement.

Si vous essayez de décrire un concept d'animation avec des mots ou des images fixes, vous pouvez voir des grimaces sur les visages de votre public. Cela signifie qu'ils essaient de leur mieux pour comprendre votre idée, mais ils ne la comprennent pas vraiment. Même s'ils comprennent le concept de base, l'image qu'ils ont évoquée dans leur esprit est probablement incompatible avec ce que vous envisagez. Parce que les gens ont tendance à percevoir les images animées, les images fixes et les descriptions verbales de différentes manières, le fait de s'appuyer sur des mots ou des images pour transmettre une idée d'animation crée de la place pour une mauvaise communication et souvent des tensions inutiles entre les membres de votre équipe.

2. Le concepteur ne sait pas si l'animation fonctionne bien jusqu'à ce qu'il vérifie et teste le prototype du développeur.

Lorsque les concepteurs n'ont pas de compétences en prototypage, ils sont limités à présenter leurs idées aux développeurs via un storyboard. Même si un concepteur croit fermement en un modèle de micro-interaction, il ne peut pas dire s'il fonctionne à son plein potentiel tant que le développeur n'a pas terminé le prototype. Cela est problématique pour un certain nombre de raisons, la principale étant la forte probabilité de mauvaise communication qu'une telle approche introduit dans le processus. De plus, cela ouvre la porte au doute des membres de l'équipe et soulève des questions sur la faisabilité de l'idée. Cela peut être coûteux en termes de temps du point de vue du développement.

3. Le concepteur et le développeur ne sont pas sur la même page

Lorsque les concepteurs créent des animations d'interface utilisateur ou des micro-interactions, ils essaient d'inclure des détails de conception complexes comme des accélérations personnalisées, des scripts, des expressions et d'autres effets. Lors de la présentation de ces idées aux développeurs, ils peuvent entendre: «Ce n'est pas possible de faire cela dans notre chronologie» ou «Nous ne pouvons pas faire exactement la même chose mais nous essaierons.» À ce stade, ils pourraient tenter de hacher les différents détails et problèmes techniques avec les développeurs. Cependant, ces discussions peuvent s'avérer infructueuses si le concepteur n'a pas une connaissance pratique des outils ou des langages utilisés par les développeurs. Ces facteurs doivent être pris en considération lors de la formulation et de la discussion des idées afin que les micro-interactions soient compatibles avec les paramètres par défaut des développeurs, augmentant ainsi la probabilité que le produit final réponde aux normes du concepteur (et de tous les autres).

Quelles sont les solutions à ces problèmes?

Alors que tous les concepteurs et développeurs ont leur propre façon de communiquer sur leurs concepts d'animation, je veux partager l'une des méthodes que mon équipe utilise. Cette méthode a connu un certain succès et a entraîné moins de réunions et a considérablement amélioré la communication de notre équipe.

Maintenant, nous ne discutons plus de l'opportunité d'inclure ou non des micro-interactions, nous explorons des façons de les rendre encore meilleures!

Concept d'interaction squelette et guide d'interaction

«Le concept d'interaction squelette et le guide d'interaction ne laissent aucune place à l'interprétation, ce qui me permet de commencer le travail immédiatement et d'être confiant pour correspondre à la vision du concepteur.» - Jesse M Majcher / Ingénieur en chef IOS

Le processus standard que nous utilisons pour communiquer sur les conceptions UX ne se traduit pas bien pour les animations UI. Tout d'abord, les conceptions et les flux UX sont toujours conçus écran par écran et sont statiques. Les animations de l'interface utilisateur sont des flux en eux-mêmes, elles sont fluides et basées sur le timing. Lorsque nous créons une conception statique, nous faisons un filaire approximatif afin que nous puissions comprendre l'idée et discuter du flux. Cela nous permet de réviser et d'affiner facilement le design avant de créer la version finale. Une fois que chaque membre de l'équipe a convenu que le design est prêt à être remis aux développeurs, le designer fournit au développeur un guide de style et une ligne rouge contenant des détails, des spécifications et d'autres informations importantes sur le design.

Si nous avons utilisé un processus similaire pour les animations, notre processus pourrait être beaucoup plus rapide et meilleur.

  1. Concept d'interaction squelette (étude de mouvement)

Un concept d'interaction squelette est similaire au filaire que vous créeriez lors de la conception d'un flux, la principale différence est qu'il s'agit d'une démonstration de prototype jouable / cliquable. Si nous apportons cela à une réunion, les membres de notre équipe n'auront pas à utiliser leur imagination pour comprendre le concept. Le concepteur peut utiliser la démo jouable / cliquable ou le storyboard statique pour référencer directement les éléments visuels et d'animation de la conception. Cela donnera à chacun un sens clair et précis de son idée. À leur tour, les partenaires peuvent fournir des commentaires très spécifiques et donc très précieux pour le concepteur. Dans le même temps, les équipes de gestion et de développement de produits obtiendront des informations qui leur permettront d'améliorer leurs communications internes et les estimations de temps pour le projet.

2. Guide d'interaction

Une fois que l'équipe est d'accord sur le concept, le concepteur crée le guide d'interaction. Ceci est similaire à un guide de style en ce qu'il décrit la position, la rotation, l'échelle et le timing des éléments. Nous pouvons ajouter chaque détail sur les animations, ce qui aidera nos partenaires à le comprendre clairement. Lorsque le concepteur montre le guide d'interaction à ses partenaires, il peut être encore plus clair sur le mouvement et la mesure du concept d'animation. Ceci est très utile pour finaliser le travail grâce à la collaboration. Cela aide également les concepteurs à être plus réfléchis dans leur conception d'animation / micro-interaction.

3. Compétences de prototypage pour les concepteurs

D'après mon expérience, pour vous mettre en place pour une collaboration de conception réussie, le concepteur de produit doit être le pilote de l'animation et le développeur doit fournir le support. Cela signifie que le concepteur du produit assume la majeure partie de la responsabilité du partenariat. Non seulement sont-ils responsables d'expliquer leurs idées très clairement, ils doivent montrer qu'ils sont réalisables en fournissant une preuve de concept. Cela signifie également que les concepteurs de produits doivent être capables de créer leurs propres prototypes d'animation. Si un concepteur de produit peut créer un prototype et le présenter lors d'une réunion, la discussion qui suit sera plus claire et prendra moins de temps, conduisant à un processus de communication global plus efficace.

Alors, avec quels types d'outils de prototypage les concepteurs doivent-ils se familiariser? Il existe de nombreux outils, mais tout le monde ne sait pas ce qui fonctionne le mieux pour des tâches de micro-interaction spécifiques. Voici mes recommandations basées sur mon expérience personnelle dans la conception de ces éléments.

Si vous connaissez le codage:

  • Mobile: Xcode, studio Android
  • Mobile ou Web: Framer
  • Web: animation CSS

Si vous souhaitez concevoir une interaction entre un push de type écran et un module:

  • Invision et Marbel

Si vous souhaitez créer des interactions plus détaillées:

  • Principle, Adobe CC, origami Studio et Pixate

Si vous souhaitez créer des interactions + animations détaillées:

  • Effets secondaires

Actuellement, je suis un fan de l'utilisation d'After Effect pour mon prototypage. Même s'il n'est pas interactif (c'est-à-dire cliquable), c'est le moyen idéal pour présenter un concept d'animation. De plus, il n'y a pas de limitation d'effet et vous pouvez contrôler le mouvement des détails. Il est même possible de l'utiliser pour faire une interaction dans l'espace 3D, comme pour AR et VR.

De délicieuses interactions d'équipe pour des produits délicieux

Les micro-interactions sont devenues un élément de plus en plus important, sinon critique, du Web, de la conception mobile, etc. Même si les concepteurs et les développeurs reconnaissent la valeur des animations d'interface utilisateur et sont motivés pour les créer, ils ont souvent du mal à collaborer de manière efficace et efficiente. Il faut une équipe solide pour expédier de superbes micro-interactions à temps; ces équipes nécessitent une délimitation claire des rôles, des compétences de communication efficaces et les bons outils de prototypage pour les tâches à accomplir.

Pour mettre en place vos micro-interactions vers le succès, assurez-vous que votre équipe possède ces caractéristiques et s'engage dans ces processus. Et bonne chance avec votre propre voyage de micro-interaction!

DÉCLARATION DE DIVULGATION: Ces opinions sont celles de l'auteur. Sauf indication contraire dans ce billet, Capital One n'est affilié à aucune des sociétés mentionnées et n'est approuvé par elle. Toutes les marques de commerce et autres propriétés intellectuelles utilisées ou affichées appartiennent à leurs propriétaires respectifs. Cet article est © 2017 Capital One.

Pour en savoir plus sur les API, l'open source, les événements communautaires et la culture des développeurs chez Capital One, visitez DevExchange, notre portail de développeur unique: developer.capitalone.com.