Guide d’interactivité mobile: conception d’interfaces utilisateur interactives

Les téléphones intelligents traitent les interactions différemment des ordinateurs de bureau. Les utilisateurs ont une relation beaucoup plus intime avec leurs téléphones et tablettes parce qu’ils travaillent uniquement sur le toucher, le glissement, le clic et les mouvements des doigts.

Les meilleures applications mobiles utilisent des interactions et des animations pour créer une expérience réelle. Cela peut sembler un sujet complexe, mais dans ce guide, regardez les détails des interactions mobiles en fonction de leur fonctionnement et de la façon dont vous pouvez créer des interfaces qui se sont simples et amusantes à utiliser.

Conception avec microinteractions

Même les plus petits détails peuvent avoir un impact important sur une interface. Les détails auxquels je fais référence sont communément appelés microinteractions, ou peu de réponses données par l’interface après qu’un utilisateur fait quelque chose.

L’objectif est d’imiter le fonctionnement du monde réel en créant des interfaces qui font de même. Quand quelqu’un appuie sur un bouton, il devrait se modifier. Lorsqu’un interrupteur marche / arrêt est basculé, il devrait y avoir une motion crédible comme un véritable commutateur.

Microinteractions toutes les applications

Alors que vous regardez les détails, cela peut ne pas sembler de gros changements. Mais considérez l’exemple ci-dessus d’une application de liste de tâches créée par Jakub Antalík. Il démontre quelques grandes microinteractions basées sur l’entrée de l’utilisateur:

  • Terminer une tâche
  • Suppression d’une tâche
  • Ajout d’une nouvelle tâche

Chaque mouvement est semblable parce que le contenu « traîne » avec le geste de l’utilisateur. Cela apporte une certaine cohérence dans la conception.

Mais les microinteractions devraient constituer la base du travail de conception interactif pour mobile. Considérez à quoi l’interface ressemble et son fonctionnement lorsque les utilisateurs font une action.

Liste de principe

Voici un autre excellent exemple d’une application de liste de tâches, celle créée par Anton Kosolapov. Les animations subtiles et les effets de page se produisent lorsque différentes actions sont faites sur l’interface.

Donc, quand quelqu’un clic et touche un élément à faire, il semblera se lever au-dessus des autres. Il est plus facile de faire glisser la page et de trouver un endroit pour le déposer.

Notez également qu’après l’avoir « laissé tomber » à sa place place, il y a un léger effet de « plopping » pour le ramener à la taille normale. Cet effet subtil est facile à manquer, mais c’est l’exemple parfait de la perception des microinteractions.

Les utilisateurs prennent souvent ces animations pour acquis parce qu’ils estiment qu’ils ne sont qu’une partie naturelle de l’interface.

La planification de grandes microinteractions découle de la compréhension des actions des utilisateurs. Faites une liste de toutes les actions qu’un utilisateur peut effectuer sur une page donnée, puis mappez ces actions avec les résultats finaux (c’est-à-dire ce qui se produit lorsque l’utilisateur touche un bouton).

Microanimation aime l'application

À partir de là, vous pouvez déterminer quelle sorte de microinteraction rendrait l’utilisateur bon à propos de la tâche accomplie. Votre objectif est de permettre à l’utilisateur de savoir que son action a réussi.

Qu’il s’agisse d’une photo, d’un utilisateur ou d’une suppression d’un élément à faire dans sa liste, il est toujours nécessaire de terminer cette tâche.

Si vous pouvez développer une attention particulière aux microinteractions, vous allez commencer à les voir partout. Et au fil du temps, vous vous rendrez compte de l’importance de la conception de l’interface utilisateur mobile.

Gardez les animations cohérentes

Les applications interactives devraient toujours l’être en premier lieu. Et un aspect de la convivialité moderne est la cohérence dans l’ensemble.

Les utilisateurs devraient savoir comment faire quelque chose sans avoir à être informé sur comment le faire. Cela semble du UX design 101 mais il se rapporte à chaque page, chaque animation et chaque application.

Lorsque vous entrez dans des microinteractions, vous devrez considérer comment les animations fonctionnent et ce qui les fait fonctionner. C’est là où les animations d’applications personnalisées, comme dans l’exemple de Charles Patterson, devraient se être cohérentes et fluides tout au long de l’interface utilisateur.

Application ios de l'espace d'invision

Notez comment chaque animation a le même effet d’assouplissement. Les éléments rebondissent légèrement et il y a un très léger retard au mouvement.

La subtilité est le nom du jeu et vous ne gagnerez pas le jeu sans cohérence.

Certes, cela ne signifie pas que chaque animation devrait se comporter de la même manière. Plutôt, vous devrez considérer comment l’app « donne le ton » et ce qui fait que chaque effet d’animation se fond si bien dans l’interface.

Je pense que cette interface utilisateur de santé est un exemple parfait d’animation. Je pense qu’il pousse le mouvement dans les limites, mais il fonctionne aussi bien et vous remarquerez la consistance avec chaque animation entre les pages.

Application de santé, animation

Si vous gardez votre attention sur cette ligne lumineuse bleue, vous remarquerez comment elle s’anime tout au long de chaque page. Elle se déplace dans une courbe naturelle où elle semble toujours trouver son chemin dans l’interface.

Cette technique d’animation fait très organique et c’est l’un des moyens les plus simples pour que les utilisateurs s’intéressent à votre application.

Passez du temps à planifier votre stratégie d’animation avant de plonger dans la phase finale de conception / codage. Si vous savez comment les animations devraient vous paraître, vous n’aurez aucun problème pour les maintenir en cohérence.

Expliquer les interfaces avec les visuels

Les appareils mobiles sont livrés avec des écrans plus petits et il n’y a pas autant de place pour les boutons, les fonctionnalités et la copie. C’est là que « show not tell » vaut la peine d’être mis en pratique.

Chaque partie de votre interface devrait encourager un certain type d’interaction utilisateur. Que peut faire un utilisateur lors de la première ouverture de votre application? Comment feraient-ils cela ? Et plus important encore, pourquoi le feraient-ils ? Quel est le résultat final?

Ces questions ne peuvent pas toujours être répondues directement afin qu’elles soient impliquées dans une bonne conception. Les principes du design changent rarement, donc c’est une bonne idée d’étudier la forme, la couleur, le type, la taille et les graphiques comme l’iconographie.

Apprenez à dire aux utilisateurs ce qui se passe sans leur dire expressément. Cela peut sembler confus, mais une fois que vous commencez à créer des applications (et à les étudier), vous verrez comment cela fonctionne dans une situation réelle.

Application de scanner de localisation ui

L’interface ci-dessus conçue par Minh Pham montre une application de scanner de localisation . Il effectue une recherche pour les restaurants à proximité, les salles de cinéma et d’autres entreprises.

Chaque statut de l’application vous indique ce qui se passe. L’animation du chargeur initial implique que quelque chose se passe sur le backend. Le texte ci-dessous indique « numériser votre emplacement … » qui indique à l’utilisateur ce qui se passe.

Une fois que tout charge, il affiche un total de 26 lieux trouvés dans la zone proche. L’utilisateur peut ensuite glisser vers le haut pour naviguer dans la liste et trier par catégories.

Tous ces éléments s’attendent à un certain comportement, mais ils ne racontent pas à l’utilisateur ce qu’il faut faire. Les interfaces interactives doivent guider l’utilisateur dans le processus d’action, plutôt que de dire à l’utilisateur exactement ce qu’il faut faire.

Une autre animation solide d’application est cette échelle d’étude conçue par Budi Tanrim. Il montre comment des visuels clairs ont un impact sur l’interface et orientent naturellement les interactions.

Application shipp survey ui

Oui, cela a des animations agréables et pourtant c’est assez détaillé. Mais chaque écran a un objectif assez clair avec de nombreux éléments interactifs évidents (le CTA, les points rectangulaires, la barre coulissante).

Lorsque vous vous concentrez sur la façon dont les interfaces fonctionnent, vous aurez un temps plus facile pour planifier les éléments qui encouragent les comportements.

Et si vous n’êtes jamais sûr de quelque chose, vous pouvez exécuter des tests d’utilisabilité pour évaluer les opinions de l’ auditoire .

Conception d’expériences réalistes

Les applications mobiles ont une certaine attente en fonction de leur apparence.

Les utilisateurs s’attendent à ce que certaines choses se produisent lorsqu’elles tapent, glissent, défilent ou font quelque chose de similaire sur un appareil mobile. La réponse de l’application devrait imiter ces interactions à donner un sentiment réaliste à la conception.

Application mobile craigslist ui

Ce design est l’un de mes exemples préférés créé par la designer canadienne Aurélien Salomon. C’est une interface utilisateur de l’application mobile Craigslist avec une interface animée complète.

Lorsque vous parcourez la page, vous trouverez un effet d’animation très subtil. Ceci cache automatiquement la barre de navigation et crée une expérience qui met l’accent sur l’interface. Ces animations font réalistes et elles guident l’utilisateur à travers certains comportements comme les listes de navigation ou l’application de filtres de recherche.

Chaque interaction est une tentative d’un but. Les utilisateurs ne font que feuilleter la page sans raison. Ils essaient de faire quelque chose ou d’aller quelque part dans la demande.

Votre travail en tant que concepteur est de créer une interface réaliste qui répond aux attentes assumées par vos utilisateurs. Si l’utilisateur voit une icône de recherche dans le coin, ils vont cliquer pour rechercher et viser à filtrer les résultats.

Tshirt search filter application ui

Cet exemple du designer ukrainien Anatoliy Nesterov est peut-être la solution la plus claire pour la recherche filtrée.

Tous les filtres sont déroulés en haut et peuvent être utilisés pour se développer. L’utilisateur sait de manière intuituve où toucher chaque élément car il ressemble à une liste de navigation. Et lorsque l’élément se développe ,l’utilisateur comprend comment modifier les champs de formulaire sans explication.

Je déteste utiliser le mot «normal», mais cela devrait, en quelque sorte, être votre objectif. Créez une application qui fait « normale » et qui se fond dans l’écosystème de l’application.

La conception d’interactions ne devrait pas être un processus minutieux. En fait, c’est essentiellement le seul processus !

Chaque fois que vous devez utiliser une application mobile sur votre téléphone ou votre tablette, regardez vos comportements et notez chaque écran. Notez lorsque vous vous sentez confiant pour faire un tap / swipe et vous demander pourquoi vous l’avez fait.

Finalement, les modèles apparaissent et vous développerez un sens beaucoup plus large de ce que ressemble une application réaliste.

Avancer

Les applications mobiles interactives constituent la grande majorité de toutes les applications mobiles. L’interactivité réelle va au-delà de la simple frappe de quelques boutons ou de la saisie d’un texte dans un champ de message.

Au lieu de cela, cela se résume à une expérience réelle où l’utilisateur doit accomplir quelque chose et l’exécuter. C’est pourquoi les interactions mobiles sont si précieuses.

Au fil du temps, votre processus de conception deviendra beaucoup plus clair en mettant l’accent sur les interactions de l’utilisateur plutôt que uniquement sur la conception.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s