7 règles simples pour créer des interactions d'interface utilisateur élégantes

Conception d'interaction d'interface utilisateur exquise: Gagnez avec l'élégance plutôt que de montrer

points clés

• L'élégance de la conception d'interaction d'interface utilisateur est d'assurer une transition fluide et conviviale pour prendre en charge les opérations utilisateur plutôt que des éléments de distraction sophistiqués.
• Les micro-interactions, telles que les menus déroulants ou l'affichage des détails du produit, doivent être soigneusement conçus pour améliorer la convivialité et déclencher des réponses émotionnelles positives des utilisateurs.
• Les règles clés pour la création d'interactions d'élégants intervalles d'interface utilisateur: éviter les sauts instantanés, mais en utilisant des transitions; opération dans une série d'opérations;
• Plus l'interaction UI est conforme aux lois physiques du monde réel, plus elle se sent naturelle et élégante. Il est crucial de tester et de modifier ces interactions pour s'assurer qu'ils sont intuitifs, cohérents, efficaces et fournissent des commentaires adéquats aux utilisateurs.

Le nouveau terme «conception interactive» a été étroitement lié au processus de conception UX. Après 2015, la commutation instantanée entre les éléments d'interface entre deux états statiques ne suffit plus. Aujourd'hui, des mots comme «Slide», «Bounce» et «Bounce Back» sont devenus partie de la discussion sur la façon dont les interfaces utilisateur fonctionnent.

Cependant, dans le domaine de l'interaction - comme des montres chères - «glamour» ne signifie pas nécessairement «l'élégance». Bien que nous puissions être curieux de la complexité de cette montre de fantaisie (photo) ci-dessous, je soupçonne que peu d'entre nous voudraient vraiment le porter. Dans notre conception d'interface, l'élégance naturelle l'emporte presque toujours sur la décoration.

Si vous êtes aussi créatif que moi, il est facile d'être attiré par la création d'interactions fantaisie juste pour rendre votre site Web plus moderne et engageant. Bien sûr, nous savons dans nos cœurs que cette approche peut être l'un des moyens les plus fiables de perturber toute l'expérience utilisateur.

Donc, j'ai trouvé très important de se concentrer sur ces animations lisses et agréables que nos utilisateurs les remarquent à peine. À ce moment-là, nos animations s'éloigneront des projecteurs et soutiendront ce que l'utilisateur essaie d'effectuer.

Pourquoi est-ce important?

Pourquoi Apple consacre-t-il autant de temps et d'argent à des emballages qui sont souvent jetés dans les bacs de recyclage très rapidement? Pourquoi les sociétés automobiles de luxe ajustent-elles le son des portes?

C'est parce que nous constatons que des détails subtils et apparemment sans importance peuvent avoir un impact disproportionné sur une bonne conception et élever l'UX de "bon" à "Excellent".

Enrichir votre site Web avec des "micro-interactions" magnifiquement conçues qui non seulement le facilitent l'utilisation, mais déclenche également des émotions positives parmi les utilisateurs (tout comme l'ouverture d'une boîte Apple). Découvrez cette émotion signifie consommer plus de dopamine, ce qui les aide en fait à devenir dépendants de votre site Web / application.

Alors, qu'est-ce que la "micro-interaction"?

Lorsque l'utilisateur entre (par exemple, cliquez, glisse, tapez le contenu), votre site Web réagit - c'est une interaction. C'est un moyen pour les utilisateurs de communiquer avec votre site Web, donc cela fait partie de la conversation. Lors de la conception du flux de comportement des utilisateurs sur votre site Web, vous pouvez toujours utiliser plusieurs types d'interactions différents:

1. Interaction de navigation: lorsque l'utilisateur entre enfin une toute nouvelle page / état.
2. Interaction modale: lorsque l'état actuel du site Web est gelé et qu'un état temporaire s'affiche par-dessus (par exemple, la galerie "Lightbox" ou la boîte de dialogue de confirmation).
3. Micro-interaction: lorsque vous ne souhaitez que des éléments individuels dans la page pour réagir à l'entrée de l'utilisateur - par exemple, affichez un menu déroulant ou affichez plus de détails sur le produit.

Comment rendre ces micro-interactions plus élégants?

Un site Web devrait ressembler à un concert d'éléments d'interface interactifs, travaillant ensemble pour vous impressionner. L'élégance est le critère clé pour faire cette impression. Bien qu'il soit difficile de définir l'élégance en termes purement techniques, nous pouvons utiliser des astuces logiques pour nous aider à créer des interactions élégantes. Règle de clé n ° 1 - pas de saut instantané

L'idée est simple - utilisez toujours des transitions lors du changement d'éléments sur une page. Cela signifie qu'il ne devrait pas y avoir de coupe rapide sur votre GUI. Chaque élément qui apparaît, disparaît ou se transforme doit être implémenté à l'aide de l'assouplissement ou / et des animations.

Cela aide l'utilisateur à se concentrer sur le domaine sur lequel vous souhaitez qu'ils se concentrent. Bien sûr, cela crée également un sentiment de flux élégant et cohérent.

### Règle # 2: Le commutateur à bascule est meilleur que le bouton

À la maison, vous utilisez généralement le même interrupteur pour allumer et éteindre la lumière. Le même concept s'applique aux contrôles à bascule de votre site Web. Si un contrôle à bascule déclenche un nouvel état d'un élément donné, le contrôle avec le même

devrait faire reculer cet état.

De plus, selon la loi de Fitz, ces contrôles devraient nécessiter peu d'efforts pour basculer rapidement entre les états ON et OFF. ### Règle # 3: Les déclencheurs doivent être à proximité

La transition nécessite toujours une sorte de déclencheur. Lors de l'interaction, nos utilisateurs se concentrent généralement sur cet élément de déclenchement. Cela signifie que la transition doit commencer à

ou très proche du déclencheur

. Si vous commencez la transition trop loin de l'élément de déclenchement, il est facile pour les utilisateurs de le manquer et le processus sera interrompu.

De plus, la transition doit généralement se propager du déclencheur à l'endroit où vous souhaitez concentrer l'attention de votre utilisateur. L'astuce est simple - vous guidez les yeux de l'utilisateur du déclencheur à l'endroit où ils devraient passer à l'étape suivante. De cette façon, l'utilisateur ne perdra pas la concentration et arrivera directement à l'endroit où vous voulez qu'ils aillent.

### Règle n ° 4: Utilisez le temps de transition naturel

Le temps de transition définit la durée de l'animation à jouer. Le principal problème avec le temps est qu'il n'y a pas de baguette qui peut le faire. Si vous effectuez votre transition trop longtemps, cela crée un point de douleur pour les utilisateurs qui répétent la même interaction fréquemment ou rapidement.

En revanche, s'il est trop court, il se sentira contre nature - ou si l'utilisateur peut le manquer complètement. Malheureusement, tout ce que vous pouvez faire est d'utiliser vos yeux et votre intuition allumées pour évaluer la transition. Le meilleur conseil que j'ai trouvé est de ne pas laisser toutes les transitions passer le même temps. Essayez-le simplement avec désinvolture et trouvez le bon point d'équilibre. Notez également que même la différence de 0,05 seconde est importante.

### Règle n ° 5: Rollback de transition ne doit pas détruire le sens du contrôle de l'utilisateur

Parfois, les utilisateurs changent rapidement d'avis pendant le processus de transition. Dans ces cas, la réactivité transitionnelle est cruciale. Si l'utilisateur a annulé la dernière interaction (par exemple, deux clics sur le bouton de déclenchement), l'animation de transition doit être inversée immédiatement. Sinon, nos utilisateurs perdront immédiatement le contrôle. De plus, vous obtiendrez vos utilisateurs à penser qu'ils font quelque chose de mal.

### Règle # 6: Concentrez-vous toujours sur la prochaine opération d'une série d'opérations

Cette technique vise l'interaction des utilisateurs effectuant une série d'actions. Lorsque vous concevez de telles séquences, vous devez toujours éviter toute interaction inutile et mettre toujours l'accent sur le contrôle suivant dans la séquence. L'exemple le plus élémentaire de cette interaction est le bouton [modifier] , qui ouvre un formulaire et se concentre comme par magie sur le premier champ afin que l'utilisateur n'ait pas besoin de cliquer sur lui manuellement.

### Règle # 7: Dites toujours à l'utilisateur quand terminer

L'utilisateur doit toujours être en mesure de s'identifier lorsque l'interaction est terminée. Si votre interaction ne change pas de manière évidente lorsqu'elle est terminée, vous devez toujours envisager d'implémenter une sorte de rétroaction visuelle, en disant à l'utilisateur "Hé, vous avez terminé!" . Si vous sautez cela, les utilisateurs ont tendance à répéter la même action plusieurs fois, à faire des erreurs et éventuellement à détruire quelque chose de précieux.

Appliquer ces conseils

En bref, vous pouvez utiliser ces conseils comme feuilles de triche pour les micro-interactions sur votre site Web. Il devrait vous aider à concevoir les détails de l'interaction avant de mettre en œuvre la micro-interaction.

Cependant, il y a une forte probabilité que vous ne puissiez pas atteindre la perfection la première fois. Dans ce cas, vous devez vous adapter à votre propre situation - alors soyez prêt à lui donner un peu. et ... Enfin, il y a une autre suggestion pour vous. D'une manière générale, plus vos interactions obéissent aux lois de la physique du monde réel, plus elles sont naturelles et élégantes.

Je vous souhaite une bonne production d'animation!

Les questions fréquemment posées sur la création d'interactions d'interface utilisateur élégantes

Quels principes clés doivent être pris en compte lors de la conception des interactions d'interface utilisateur?

Lors de la conception des interactions d'interface utilisateur, assurez-vous de garder l'utilisateur à l'esprit. L'interaction doit être intuitive et facile à comprendre. La cohérence est également essentielle - les utilisateurs ne devraient pas deviner comment interagir avec votre interface. L'interaction doit également fournir des commentaires à l'utilisateur, en lui faisant savoir que leurs opérations ont été identifiées et sont traitées. Enfin, l'interaction devrait être efficace, minimisant les étapes que les utilisateurs doivent prendre pour atteindre leurs objectifs.

Comment rendre mon interaction UI plus attrayante?

Pour rendre votre interaction UI plus attrayante, pensez à ajouter des animations. L'animation peut rendre l'interaction plus énergique et peut également fournir des commentaires précieux à l'utilisateur. Cependant, assurez-vous d'utiliser des animations avec prudence et de ne pas les laisser distraire de la tâche principale. De plus, il peut être envisagé d'utiliser une rétroaction sonore ou haptique pour améliorer l'interaction.

Quelles erreurs courantes doivent être évitées lors de la conception des interactions d'interface utilisateur?

Certaines erreurs courantes qui devraient être évitées lors de la conception des interactions d'interface utilisateur comprennent la création de l'interaction trop complexe, ne fournissant pas suffisamment de commentaires à l'utilisateur et l'incohérence. Les interactions trop compliquées peuvent confondre les utilisateurs et rendre votre interface difficile à utiliser. Le manque de commentaires peut faire en sorte que les utilisateurs ne sachent pas si leurs actions ont été identifiées. L'incohérence peut rendre votre interface imprévisible et frustrante.

Comment tester l'efficacité de mon interaction d'interface utilisateur?

Vous pouvez tester l'efficacité de l'interaction d'interface utilisateur grâce aux tests des utilisateurs. Cela comprend l'observation de l'interaction de l'utilisateur avec l'interface et la collecte de commentaires. Vous pouvez également utiliser des outils d'analyse pour suivre la façon dont les utilisateurs interagissent avec l'interface et identifier toutes les zones difficiles ou confuses.

Comment améliorer l'accessibilité de l'interaction d'interface utilisateur?

Pour améliorer l'accessibilité des interactions d'interface utilisateur, considérez comment les utilisateurs ayant différentes capacités interagiront avec votre interface. Par exemple, assurez-vous que vos interactions peuvent utiliser le clavier afin que les utilisateurs qui ne peuvent pas utiliser la souris puissent également l'utiliser. Assurez-vous également que vos interactions sont compatibles avec les lecteurs d'écran et autres technologies d'assistance.

Comment intégrer la narration dans mon interaction UI?

Le raconter des histoires peut être incorporé dans votre interaction d'interface utilisateur en créant des récits autour des voyages des utilisateurs. Cela peut être réalisé en utilisant des animations, des sons et des indices visuels pour guider l'utilisateur à travers des interactions.

Quelles sont les ressources pour en savoir plus sur l'interaction de l'interface utilisateur?

Il existe de nombreuses ressources disponibles pour en savoir plus sur l'interaction d'interface utilisateur. Certaines ressources populaires comprennent des cours en ligne, des blogs et des livres sur le sujet. Vous pouvez également apprendre beaucoup en étudiant les interactions d'interface utilisateur des applications populaires et des sites Web.

Quelle est l'importance de la vitesse dans l'interaction UI?

La vitesse est très importante dans l'interaction UI. Les utilisateurs s'attendent à ce que les interactions soient réactives et rapides. Tout délai peut entraîner une frustration et peut amener l'utilisateur à abandonner la tâche.

Comment utiliser les couleurs pour améliorer mon interaction d'interface utilisateur?

Les couleurs

peuvent être utilisées pour améliorer l'interaction de l'interface utilisateur en attirant l'attention sur des éléments importants, en indiquant l'état et en fournissant des commentaires. Cependant, il est important d'utiliser soigneusement et de manière cohérente des couleurs et de considérer la cécité couleur dans votre conception.

Comment suivre la tendance de l'interaction UI?

Pour suivre la tendance de l'interaction sur l'interface utilisateur, il est préférable de suivre les blogs de l'industrie, d'assister aux réunions de conception et de rejoindre la communauté en ligne des concepteurs d'interface utilisateur. Vous pouvez également apprendre beaucoup en étudiant les interactions d'interface utilisateur entre les applications et les sites Web nouvelles et populaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!