Advertisement
  1. Web Design
  2. UX/UI
  3. Prototyping

3 Objectifs signifiants de motion design (avec exemples)

Scroll to top
Read Time: 2 min

() translation by (you can also view the original English article)

Apparier mouvement avec objectifs clés de l’utilisateur peut garantir que vos créations sont signifiantes et ne rajoutent pas de charge cognitive pour vos utilisateurs.

Voici quelques buts, avec des exemples, que peuvent soutenir votre motion design.

1. Attirer l’attention

Le mouvement peut donner du focus à une zone de la page qui est pertinente pour l’utilisateur.

Avez-vous besoin qu’un utilisateur soit au courant d’une erreur ou d'une étape importante, qu'il a ratée sur un formulaire web ? Ajouter du mouvement peut attirer l’attention de l’utilisateur à une partie de la page rapidement afin qu’il puisse agir.

Ce pen par Alex Mourer utilise le mouvement pour fournir une rétroaction continue :

2. Ajouter de l’engagement

Même un mouvement subtil peut fournir la confirmation d’une action de l’utilisateur sur un élément de la page. Cela permet à vos utilisateurs de se rendre compte que leur rétroaction a été traitée ou saisie dans le système. Il peut aussi détourner l’attention du processus d’arrière-plan comme un temps de chargement pour une transition de page.

Une animation de chargement de page amusante ou ludique est l’occasion pour vous d’exposer votre personnalité de marque à vos utilisateurs, comme dans cet exemple hypnotique de Rachel Smith :

3. Expliquer les relations spatiales

Le mouvement peut fournir une transition fluide entre les différents composants de page. Par exemple, sur mobile, le mouvement est souvent utilisé pour les interactions détaillées entre les transitions de page. Les éléments se redimensionnent et montrent une relation dimensionnelle (apparaissant devant ou derrière d’autres composants), qui donne à l’utilisateur des indices visuels quant à ce qui va se passer.

Cet exemple de Koen Vendrik illustre parfaitement les relations :

Conclusion

Le motion design est un outil puissant et engageant dans la boîte à outils du designer. S’il peut être tentant d’ajouter plus de détails de mouvement, examinez quels sont les objectifs utilisateur que le motion design peut prendre en charge, de sorte que vos créations soient construites sur des décisions importantes qui n'entravent pas vos utilisateurs ou perdent leur temps.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.