Comprendre les microinteractions dans la conception d'applications mobiles

La convivialité est l’un des éléments clés de conception de l'interface utilisateur mobile. Une grande facilité d'utilisation implique souvent microinteractions qui sont petites réponses et comportements d'une interface en dictant comment l'interface utilisateur doit être utilisée. Ces micro-interactions définissent les comportements, encouragent l’engagement et aident les utilisateurs à visualiser le fonctionnement d’une interface..

Interfaces numériques sont les intermédiaires entre les utilisateurs et leurs objectifs souhaités. Les concepteurs d'interface créent des expériences qui aident les utilisateurs effectuer certaines tâches. Par exemple, une application de liste de tâches possède une interface qui aide les utilisateurs à organiser leurs tâches. Tout comme une application Facebook donne aux utilisateurs une interface pour interagir avec leur compte Facebook.

Dans ce guide, je vais approfondir davantage microinteractions pour applications mobiles. Les petites interactions peuvent sembler anodines, mais elles peuvent avoir impact immense sur la qualité de l'expérience d'un utilisateur. Lorsqu'elles sont correctement exécutées, les micro-interactions semblent être une partie intégrante de l'expérience utilisateur mobile globale..

Le pouvoir des microinteractions

Dans la plupart des cas, l’objectif d’une microinteraction est de: fournir une réponse en fonction de l'action de l'utilisateur. Cela peut aider les utilisateurs visualiser comment l'interface se déplace ou se comporte, même si c'est purement numérique sur un écran plat.

Les microinteractions ont du pouvoir parce qu'elles créer une expérience illusoire. Les curseurs marche / arrêt ne bougent pas vraiment comme des commutateurs physiques, mais ils peuvent sembler bouger de cette façon dans les animations.

J'ai trouvé une citation incroyable dans cet article sur l'immense valeur des microinteractions pour les applications mobiles:

“Les meilleurs produits font bien deux choses: les caractéristiques et les détails. Les fonctionnalités attirent les gens vers votre produit. Les détails sont ce qui les garde là. Et les détails sont ce qui fait que notre application se démarque de nos concurrents.”

le petits détails peut sembler insignifiant du point de vue du développement, mais du point de vue de l'expérience utilisateur, ils sont réellement Fais la différence entre une interface utilisateur OK et une interface utilisateur extraordinaire.

Les bonnes microinteractions rendent l'utilisateur se sentir récompensé pour prendre une action. Ces actions peuvent être répété et enraciné dans le comportement de l'utilisateur. Ils peuvent apprendre à utiliser une application basée sur ces microinteractions plus petites. Lorsque l'utilisateur exécute un comportement, ces petites interactions indiquent "oui, vous pouvez interagir avec moi!"

Jetez un coup d'œil aux exemples fournis dans les spécifications de conception de matériaux de Google. La documentation contient en fait une section entière consacrée au mouvement des matériaux.. Relations spatiales sont une grande partie de cette équation, mais le mouvement peut dicter plus que des relations spatiales.

Voici les utilisations les plus courantes d'animation et de mouvement dans le design UI / UX mobile:

• Guider les utilisateurs entre différentes pages
• Guider les utilisateurs à travers l'interface pour enseigner certains comportements
• Suggérer des actions / comportements pouvant être adoptés sur une page donnée

Les applications mobiles ont beaucoup moins d'espace à l'écran que les sites Web. Cela peut entraîner des difficultés pour apprendre aux utilisateurs comment utiliser une application. Mais cela peut être étonnamment simple si vous savez mettre en œuvre correctement les micro-interactions.

Comment fonctionnent les microinteractions

Une seule microinteraction se déclenche chaque fois que l'utilisateur s'engage avec une partie d'une interface. La plupart des microinteractions sont réponses animées au geste de l'utilisateur. Donc, un mouvement de balayage répondra différemment d'un tap ou d'un coup.

Blink UX a publié un excellent article sur les détails mineurs des microinteractions. Ces petites animations doivent suivre un processus prévisible que l'utilisateur peut apprendre pour chaque interaction dans l'application.

Les microinteractions guident les utilisateurs à travers une interface en offrant des réponses aux comportements. Une fois que l'utilisateur sait qu'un curseur d'activation / désactivation peut se déplacer, il sait qu'il est interactif. En fonction de la réponse, ils sauront également si un paramètre a été activé ou désactivé. Quand un bouton ressemble à celui-ci, il peut être cliqué sur l'utilisateur sait instinctivement ils peuvent interagir avec elle.

Selon UXPin, chaque microinteraction de base peut être décomposée en quatre étapes, mais j’ai résumé le processus en trois étapes.

1. action - la l'utilisateur fait quelque chose comme balayer, glisser, appuyer et maintenir, ou une autre interaction.
2. Réaction - la l'interface répond basé sur ce qui doit arriver. Glisser un écran peut revenir dans l’historique du navigateur ou taper sur un curseur ON / OFF peut désactiver un paramètre..
3. Retour d'information - c'est ce que le l'utilisateur voit réellement à la suite de l'interaction. Lorsque l'utilisateur fait de nouveau glisser votre doigt dans un navigateur mobile, il est possible que la page précédente apparaisse "en haut" de l'écran. Le curseur marche / arrêt peut glisser doucement ou s'agrandir lorsque la pression est exercée sur l'écran.

Ces très petites actions peuvent être accomplies sans animation, mais de grandes micro-interactions offrent une sentiment réaliste à l'interface numérique à plat, qui se présente principalement sous la forme de effets d'animation réalistes. Ceux-ci insufflent vie à l'interface et encouragent plus d'interaction de l'utilisateur.

Rechercher les détails

En regardant les plus petites pièces d'un dessin, vous comprendrez comment une application devrait réagir à un comportement particulier..

Tirer pour rafraîchir est un bon exemple d'une microinteraction désormais populaire. Lors de son lancement, iOS ne faisait pas partie intégrante d'iOS, mais de nombreuses applications ont repris cette idée et ont commencé à évoluer. Tirer pour actualiser est maintenant un comportement bien connu que la plupart des utilisateurs savent simplement utiliser lors de la navigation dans une interface utilisateur de flux. La même chose peut être dite à propos des menus de hamburger mobiles qui ont pris une popularité grandissante.

Faire chaque microinteraction réaliste et simple. Ne pas exagérer les animations, car ils peuvent devenir ennuyeux s'ils sont trop détaillés et s'habituent fréquemment. L'utilisateur ne veut pas que des étincelles apparaissent chaque fois qu'il appuie sur une icône de menu.. Trouver un équilibre avec une véritable valeur qui communique comment l'interface devrait fonctionner sans aller trop loin.

En regardant quelques exemples

Je pense que le meilleur moyen d'apprendre quelque chose est de le faire, et le deuxième meilleur moyen est d'étudier le travail des autres. J'ai rassemblé une petite poignée de Animations de microinteraction UI / UX des utilisateurs talentueux de Dribbble pour vous montrer à quoi ils ressemblent dans une vraie maquette.

Chaque application sera différente et aura des besoins différents en fonction de ses applications. En fin de compte, la plupart des utilisateurs veulent la même chose: une application qui intuitif et offre une expérience utilisateur de qualité avec microinteractions relatives aux comportements des utilisateurs.

1. Interface utilisateur événementielle animée

Le premier exemple est une fonctionnalité d'animation astucieuse créée par Ivan Martynenko. Vous remarquerez une poignée de microinteractions dans cette conception, notamment le glissement de cartes et le déplacement dans les détails.

Lorsque vous tapez sur la carte, sa taille augmente. Et lorsque vous appuyez sur le bouton S'abonner, la photo de profil de l'utilisateur se glisse dans la liste des abonnés. Tout semble très intuitif et assez naturel à l'interface.

2. Écran d'exercice interactif

Cette animation créative d'exercices mobiles provient du designer Vitaly Rubtsov. Il montre un utilisateur enregistrant son entraînement pour un ensemble de squats.

Notez que chaque animation a le même effet de rebond élastique quand les menus s'ouvrent et se referment. Ceci est également vrai lorsque l'activité est cochée "Terminé". Cohérence est la clé avec les microinteractions, car ils devraient tous se sentir connecté à la même interface.

3. Recherche dans les microinteractions

Court, doux et précis. Je pense que cela décrit le mieux ces micro-interactions d'applications de recherche conçues par Lukas Horak. Chaque animation est rapide mais toujours perceptible.

C’est ainsi que vous devriez concevoir des microinteractions pour éviter la complexité excessive. Si l'interface se charge plus rapidement sans l'animation, pourquoi ne pas l'ajouter?? Animations rapides permettre à l'utilisateur de se déplacer sans perdre l'expérience.

4. Microinteraction objectif de remise en forme

Je pense que Jakub Antalà ?? ?? Ã'Â-k a vraiment frappé celui-ci hors du parc avec son objectif de remise en forme, la microinteraction. Les écrans ont tous ce sentiment de jiggly jell-o parce que le les formes bougent si facilement.

Mais l'interface se sent aussi solide et utilisable. Cela prouve que les micro-interactions conçues dans un but précis peuvent toujours être amusantes et divertissantes, mais aussi fonctionnelles et pragmatiques..

5. Tirez pour actualiser l'animation

Voici l'une de mes animations préférées pour l'extraction de rafraîchissement créées par l'équipe de Ramotion. Ceci non seulement imite un fluide avec l'action pull, mais l'animation de réponse relie en douceur d'une éclaboussure de liquide dans un cercle de chargement.

Ce beaucoup d'attention aux détails est ce qui fait ressortir la vraie beauté des microinteractions d'applications mobiles.

6. Microinteraction à onglets

Widgets à onglets sont assez communs pour les applications mobiles en raison des écrans plus petits. J'aime beaucoup cette microinteraction créée par John Noussis, même si je pense qu'elle serait plus efficace à une vitesse supérieure, mais l'animation elle-même est glorieuse et bien pensée..

La flèche d'ancrage de l'onglet se déplace vers la droite, au moment même où le nouveau contenu s'affiche à partir de la droite. Ça donne l'illusion du écran entier en mouvement physiquement à droite. L'animation est exquise, mais vu sa lenteur, je pense que la plupart des utilisateurs s'énerveraient au bout de quelques jours..

7. Animation de préchargement

Je n'ai pas beaucoup parlé de barres de chargement dans ce post, mais ils sont tout aussi précieux pour l'expérience globale. La plupart des utilisateurs ne veulent pas attendre le chargement des données, mais ils ne veulent surtout pas regarder un écran vide pendant le chargement..

Bret Kurtz a réalisé cet incroyable écran de préchargement à la fois amusant et instructif. L'utilisateur peut réellement être diverti regarder cette petite animation se répète. Ils peuvent aussi être rassuré que l'application est toujours en train de charger leurs données et n'a pas planté.

Emballer

Tous ces exemples démontrent brillamment la valeur des microinteractions. Les applications mobiles tirent beaucoup plus de valeur des microinteractions car les utilisateurs toucher physiquement les écrans avec leurs doigts. Les utilisateurs n’exploitent ni l’écran de leur ordinateur de bureau ni celui de leur ordinateur portable, mais tout le monde appuie sur son smartphone, car c’est la état d'interactivité par défaut.

C'est un expérience beaucoup plus personnelle, c'est pourquoi la conception d'applications mobiles peut être un tel processus nuancé. Lorsque cela est fait correctement, l’ajout d’excellentes microinteractions mobiles peut créer une expérience utilisateur illusoire puissante à partir de rien mais des pixels et du mouvement.