Microinteractions: conception avec détails
"Les meilleurs produits font bien deux choses: les caractéristiques et les détails. Les fonctionnalités attirent les utilisateurs vers votre produit. les détails sont ce qui les maintient là-bas », explique Dan Saffer. L'importance des détails ne peut être surestimée. Les détails font que les utilisateurs aiment ou détestent une application ou un site Web. Les microinteractions sont ces détails. Ils peuvent être facilement négligés dans le schéma de conception global, mais ils tiennent réellement l'expérience ensemble.
Dans cet article, j'expliquerai ce qu'est une microinteraction, pourquoi ils sont importants et fournissent de bons exemples.
Qu'est-ce qu'une microinteraction
Les microinteractions sont des moments subtils centrés sur l'accomplissement d'une tâche unique. Presque toutes les applications autour de nous sont remplies de microinteractions.
L’exemple le plus connu de microinteraction existe bien avant l’invention des ordinateurs. L'interrupteur marche / arrêt est souvent le premier contact de microinteraction avec un produit.
Parmi les autres exemples de microinteractions spécifiques, citons:
- La notification de vibration ainsi que l’icône du mode silencieux s’affichent lorsque vous passez un iPhone en mode muet.
- Le modèle de l'interface utilisateur pull-to-refresh. En connectant le désir de l'utilisateur de trouver plus de contenu à l'action de rafraîchissement, l'expérience devient plus transparente.
Crédit d'image: Ramotion
- Le bouton "J'aime" sur les réseaux sociaux qui met en évidence les modifications à l'aide d'animations interactives. Ce retour d'information informe les utilisateurs qu'ils sont dans la liste de ceux qui ont aimé la publication.
Crédit d'image: Dribbble
Pourquoi ils travaillent
En résumé, les microinteractions améliorent l’UX en rendant l’interface utilisateur moins machine et plus humaine. Souvent, nous pensons au look & feel et à son rapport avec le design. Lorsque nous pensons aux microinteractions, elles constituent un équilibre entre ce que les utilisateurs pensent du produit, du service ou de la marque. Les microinteractions optimisent la conception centrée sur l’homme en:
- Fournir une rétroaction immédiate - Un retour visuel d'appel au désir naturel de reconnaissance de l'utilisateur. L'utilisateur sait instantanément que son action a été acceptée et souhaite se réjouir d'une récompense visuelle.
- Agir comme facilitateur d'interaction - Les microinteractions ont le pouvoir d'encourager les utilisateurs à interagir réellement. Ils peuvent guider les utilisateurs dans la façon de travailler avec l'application.
- Apporter du plaisir - Les microinteractions sont la chance idéale pour un petit plus de plaisir dans la conception sans nuire à l'expérience principale.
Bénéfices supplémentaires
Étant donné que les microinteractions sont de nature brève, elles doivent être conçues pour une utilisation répétée. Des microinteractions bien conçues peuvent créer:
Boucle habit
Les microinteractions sont les composants clés des boucles d'habitude. Les habitudes se forment lorsque les personnes exécutent les mêmes actions à plusieurs reprises. La boucle d'habitude typique se compose de trois éléments:
- Cue - Déclencheur qui déclenche une action
- Routine - En réponse au signal, vous effectuez une action
- Récompense - Un avantage que vous obtenez en complétant la routine, raison pour laquelle vous avez terminé l'action
Plus la récompense est forte, plus l'habitude devient forte.
La notification de Facebook sur la nouvelle demande d'ami est un bon exemple de boucle d'habitude: un badge rouge et une icône blanchie ( cue ) indiquent qu'il y a une nouvelle demande, qui fait cliquer l'utilisateur sur la routine pour voir la récompense . Après un certain temps, les utilisateurs cliquent automatiquement sur l'icône lorsqu'ils voient le badge rouge.
Moments signature
Si elles sont bien faites, les microinteractions peuvent être des moments de signature qui augmentent la fidélité des clients. Les moments de signature sont des microinteractions élevées pour faire partie de la marque. Pensez au bouton Like de Facebook. Cela devient une partie naturelle de l'interface Facebook. Si Facebook supprime soudainement cette fonctionnalité, les utilisateurs le remarqueront et penseront que l'application est cassée.
Identifier les opportunités
Une partie de la beauté des microinteractions réside dans le fait qu’elles peuvent être insérées dans divers endroits, autour de toute action potentielle. Les microinteractions sont bonnes pour:
Mise en évidence des changements
Les microinteractions peuvent diriger l'attention de l'utilisateur . Dans de nombreux cas, les animations sont utilisées pour attirer l'attention des utilisateurs sur des détails importants (à savoir les notifications).
Crédits d'image: Dribbble
Minimiser les efforts de l'utilisateur
La saisie semi-automatique est un excellent exemple de microinteraction. La saisie a un coût d'interaction élevé; il est sujet aux erreurs et prend du temps même avec un clavier complet (et encore plus sur un écran tactile). La saisie semi-automatique aide l'utilisateur à fournir la bonne réponse plus rapidement et sans erreurs typographiques. Au fur et à mesure que vous tapez chaque lettre, le système fera ses meilleures suppositions quant aux mots que vous essayez de trouver.
Crédits d'image: fancy.surge.sh
Fournir des commentaires pour montrer ce qui a été accompli
Les microinteractions peuvent renforcer les actions d'un utilisateur. En suivant le principe " montrer, ne pas dire" , vous pouvez utiliser des commentaires animés pour montrer ce qui a été accompli. Dans Exemple de stripe , lorsque l'utilisateur clique sur "Payer", un compteur apparaît brièvement avant que l'application affiche l'état de réussite. L’animation de Checkmark donne à l’utilisateur le sentiment qu’ils ont facilement effectué le paiement et que les utilisateurs apprécient ces détails importants.
Fournir des informations d'état
Le premier principe heuristique d’utilisabilité de Jakob Nielsen est le suivant: le système doit toujours tenir les utilisateurs informés de ce qui se passe. L'indicateur de saisie dans le chat est un excellent exemple de microinteraction qui fournit des informations d'état. Il apparaît sur l'écran de votre ami pendant que vous composez un message dans le chat.
Crédits d'image: Dribbble
Valider les données utilisateur
L'un des aspects les plus importants et souvent négligés de la conception de formulaires est la gestion des erreurs . C'est la nature humaine de faire des erreurs cependant, et votre forme n'est probablement pas exempte d'erreur humaine. Les utilisateurs détestent lorsqu'ils passent par le processus de remplir un formulaire uniquement pour découvrir lors de la soumission, qu'ils ont fait une erreur. C'est là que la microinteraction de validation joue son rôle dans une forme conviviale. La validation en ligne en temps réel informe immédiatement les utilisateurs sur l'exactitude des données fournies. Cette approche permet aux utilisateurs de corriger les erreurs qu’ils commettent plus rapidement sans avoir à attendre qu’ils appuient sur le bouton Soumettre pour voir les erreurs. Quand c'est bien fait, cela peut transformer une interaction ambiguë en une interaction claire.
Conclusion
Le design est dans les détails. Même des détails mineurs méritent une attention particulière, car tous ces petits moments constituent le sentiment, ils se réunissent pour former un beau produit holistique.
"La différence entre les produits que nous aimons et ceux que nous tolérons simplement sont souvent les microinteractions que nous avons avec eux." - Dan Saffer
Si vous vous souciez de l'expérience de l'utilisateur, vous devez vous soucier des microinteractions. Parce que votre produit ne vaut que la moindre microinteraction que les gens ont avec lui.