Animation automatique de l’interface utilisateur du diaporama<\/h3>\n
Vous savez, lorsque vous t\u00e9l\u00e9chargez une application mobile et qu’avant d’acc\u00e9der aux produits, vous passez par une exp\u00e9rience d’accueil ou un cheminement ?<\/p>\n
![\"exemple](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-ui-animation-ux-design-slider-slideshow-animation-ui-pattern.gif\")
<\/p>\n
Un walkthrough vous donne des informations sur l’application, les principales fonctionnalit\u00e9s ou m\u00eame des conseils et des astuces. Savoir pr\u00e9parer un walkthrough est une comp\u00e9tence pratique \u00e0 avoir dans votre arsenal de design UX et est vital \u00e0 mesure que les applications mobiles deviennent plus complexes en termes de design et d’architecture. John Gruber<\/a> a \u00e9crit qu’un utilisateur devrait pouvoir comprendre comment utiliser une application \u00ab\u00a0juste en la regardant\u00a0\u00bb, mais il y a de bonnes raisons d’utiliser un walkthrough. Il se peut qu’une application soit intuitive pour un utilisateur, mais complexe pour un autre. Dans ce cas, les explications aident \u00e0 trouver un \u00e9quilibre. <\/p>\n T\u00e9l\u00e9charger gratuitement<\/a><\/p>\n Informer vos utilisateurs et leur donner un sentiment de contr\u00f4le peut contribuer \u00e0 une meilleure exp\u00e9rience utilisateur. Les heuristiques<\/a> de Jakob Nielsen d\u00e9finissent quelques lignes directrices qui aident \u00e0 am\u00e9liorer le design de l’interface utilisateur et l’une d’entre elles est la visibilit\u00e9 de l’\u00e9tat du syst\u00e8me – un excellent moyen de rendre l’\u00e9tat du syst\u00e8me visible est d’utiliser des animations de chargement. Dans Justinmind, vous pouvez ajouter des animations de chargement<\/a> en utilisant des panneaux dynamiques et en cr\u00e9ant des variables pour permettre des boucles. Imaginez que vous soumettiez un formulaire – vous vous attendez \u00e0 voir une animation de chargement, ou une sorte de signal indiquant que quelque chose<\/em> est en train de se passer. Personne ne veut \u00eatre laiss\u00e9 dans l’ignorance de l’exp\u00e9rience utilisateur et c’est pourquoi le fait de donner un retour d’information \u00e0 vos utilisateurs peut apaiser leur anxi\u00e9t\u00e9. Vous pouvez utiliser des animations de chargement lorsque les utilisateurs ouvrent une application pour la premi\u00e8re fois, afin de leur signaler que l’application est en train de charger leurs informations. <\/p>\n Si vous souhaitez cr\u00e9er une exp\u00e9rience mobile qui n’oblige pas l’utilisateur \u00e0 faire d\u00e9filer l’\u00e9cran, optez pour une animation UI de validation du flux d’\u00e9cran. Lorsque l’utilisateur saisit quelque chose, l’\u00e9cran suivant s’affiche, ce qui \u00e9vite \u00e0 l’utilisateur de faire d\u00e9filer la page. Avec quelques effets de transition<\/a> et des gestes mobiles, vous pouvez recr\u00e9er un formulaire de validation d’\u00e9cran<\/a> en quelques \u00e9tapes simples avec Justinmind. La validation par flux d’\u00e9cran tire parti de l’animation mobile en passant \u00e0 l’\u00e9cran suivant lorsque l’utilisateur a saisi les informations demand\u00e9es. Vous pouvez voir des validations de flux d’\u00e9cran sur un formulaire d’inscription lorsque vous t\u00e9l\u00e9chargez et ouvrez une application pour la premi\u00e8re fois ou dans les services bancaires mobiles. <\/p>\n T\u00e9l\u00e9charger gratuitement<\/a><\/p>\n Une liste de contacts est une autre occasion d’utiliser une interaction mobile. Les listes de contacts ne sont pas traditionnellement la partie la plus int\u00e9ressante du design UX, cependant, dans Justinmind, vous pouvez ajouter une touche d’interactivit\u00e9 pour rendre la liste de contacts plus dynamique en ajoutant quelques options suppl\u00e9mentaires dans la liste. Dans Justinmind, vous pouvez apprendre \u00e0 cr\u00e9er une liste de contacts interactive<\/a> \u00e0 l’aide de panneaux dynamiques et de widgets de tableau. L’interactivit\u00e9 se manifeste lorsque vous ajoutez des \u00e9v\u00e9nements, comme l’\u00e9v\u00e9nement \u00ab\u00a0On Slide Left\u00a0\u00bb, qui permet aux utilisateurs de faire glisser le contact dans la liste de contacts pour faire appara\u00eetre des options telles que partager ou pr\u00e9f\u00e9rer. <\/p>\n T\u00e9l\u00e9charger gratuitement<\/a><\/p>\n Lorsqu’il s’agit de divulgation progressive, l’accord\u00e9on est votre meilleur ami. Les accord\u00e9ons sont un petit mod\u00e8le de design polyvalent qui peut r\u00e9duire la charge de travail et minimiser la surcharge cognitive. Si vous concevez une application mobile et que vous avez trop d’informations – comme beaucoup de contenu, alors placer ces informations dans un accord\u00e9on pour que les utilisateurs puissent cliquer est un moyen utile d’afficher plus d’informations sans utiliser un espace immobilier pr\u00e9cieux. Le design d’un accord\u00e9on<\/a> dans Justinmind n’a rien de sorcier non plus. Avec quelques \u00e9tapes simples, quelques panneaux dynamiques<\/a> et quelques \u00e9v\u00e9nements, votre accord\u00e9on sera op\u00e9rationnel en un rien de temps. <\/p>\n Les transitions anim\u00e9es signalent un changement d’\u00e9tat \u00e0 l’utilisateur. Cela peut signifier signaler un mouvement dans le flux de navigation, l’ach\u00e8vement d’une t\u00e2che, l’introduction ou la soustraction d’\u00e9l\u00e9ments UI \u00e0 l’\u00e9cran, et le changement de position dans la hi\u00e9rarchie de l’interface. Avec toute la complexit\u00e9 des diff\u00e9rents \u00e9crans et \u00e9l\u00e9ments UI que pr\u00e9sentent les applications mobiles, les changements brusques peuvent laisser vos utilisateurs se sentir perdus et confus. C’est l\u00e0 que les transitions anim\u00e9es s’av\u00e8rent utiles. <\/p>\n Nick Babich, d\u00e9veloppeur de logiciels et influenceur UX, d\u00e9finit succinctement ce qui s\u00e9pare une bonne transition anim\u00e9e d’une mauvaise dans son billet Animation in Mobile UX Design<\/a>: Transitions anim\u00e9es efficaces : <\/p>\n En revanche, les transitions anim\u00e9es sont mal con\u00e7ues :<\/p>\n Les transitions anim\u00e9es peuvent rendre les UI mobiles plus dynamiques, plus engageantes et plus conviviales. Mais si vous ne les utilisez pas correctement, elles auront un impact n\u00e9gatif sur l’exp\u00e9rience utilisateur et les conversions. C’est pourquoi il est important d’inclure ces animations dans votre prototype haute fid\u00e9lit\u00e9<\/a> afin de pouvoir les tester et les valider. <\/p>\n La cr\u00e9ation d’un effet d’animation m\u00e9diocre peut \u00eatre un coup dur. Consultez cette liste d’applications d’animation<\/a> g\u00e9niales pour obtenir des animations professionnelles dans vos prototypes. <\/p>\n<\/div>\n Chez Justinmind, nous avons tendance \u00e0 penser que la meilleure fa\u00e7on d’illustrer un article comme celui-ci est de pr\u00e9senter des exemples qui vous montrent exactement ce dont nous parlons. Voici donc 5 exemples d’animations d’UI que nous aimons vraiment. <\/p>\n Le syst\u00e8me d’animation Lottie d’Airbnb<\/a> vise \u00e0 apporter des animations d’UI natives \u00e0 ses applications iOS, Android et web. L’objectif est que les d\u00e9veloppeurs puissent int\u00e9grer des animations aussi simplement qu’ils le feraient avec des \u00e9l\u00e9ments statiques. Le r\u00e9sultat est un ensemble d’animations UI agr\u00e9ables et joyeuses qui ajoutent \u00e0 l’exp\u00e9rience utilisateur sans jamais la prendre compl\u00e8tement en charge. Dans le premier exemple, le r\u00e9veil s’efface avec un effet de rotation qui attire le regard sans perturber l’exp\u00e9rience de l’utilisateur. Dans les deuxi\u00e8me et troisi\u00e8me exemples, les animations servent \u00e0 montrer \u00e0 l’utilisateur ce qui est n\u00e9cessaire et \u00e0 l’orienter dans la direction souhait\u00e9e par l’\u00e9quipe UX. Elles sont aussi subtiles qu’elles doivent l’\u00eatre et aussi claires qu’elles doivent l’\u00eatre. <\/p>\n <\/p>\n Cette application conceptuelle d’exploration spatiale<\/a> pr\u00e9sente une UI anim\u00e9e, utilisant des transitions douces comme du beurre pour donner une r\u00e9elle impression de mouvement et de voyage. Opter pour un design d’UI enti\u00e8rement personnalis\u00e9 comme celui-ci peut \u00eatre risqu\u00e9, mais nous pensons que le designer Anton Skvortsov a bien fait ici. L’interface est intuitive et d\u00e9taill\u00e9e, tout en restant simple et facile \u00e0 utiliser. Nos deux d\u00e9tails pr\u00e9f\u00e9r\u00e9s : regardez comment les petites ic\u00f4nes des plan\u00e8tes incluent leurs lunes. Oh, et cette Tesla qui flotte pr\u00e8s de la plan\u00e8te Terre. <\/p>\n Dans de nombreux cas, les animations UI n’ont pas besoin d’ajouter des paillettes et du glamour \u00e0 votre application. Un petit mouvement apr\u00e8s une interaction avec l’utilisateur peut souvent suffire \u00e0 ajouter un sentiment agr\u00e9able de r\u00e9ussite \u00e0 l’exp\u00e9rience de l’utilisateur. L’\u00e9cran des ingr\u00e9dients de l’application de cuisine de<\/a> Vlad Fedoseyev en est un bon exemple. En tapant sur l’\u00e9cran pour ajouter un ingr\u00e9dient, vous d\u00e9clenchez une animation agr\u00e9able et l’ingr\u00e9dient s’agrandit jusqu’\u00e0 la zone s\u00e9lectionn\u00e9e. L’ajout d’autres ingr\u00e9dients fait appara\u00eetre un nouveau bouton indiquant le nombre d’ingr\u00e9dients d\u00e9j\u00e0 ajout\u00e9s – et le bouton clignote chaque fois qu’un ingr\u00e9dient est ajout\u00e9 \u00e0 la pile. Pendant ce temps, la liste des ingr\u00e9dients disponibles est redessin\u00e9e lorsque vous appuyez sur le bouton des recettes. Le tout avec un minimum de distraction et un maximum de clart\u00e9. Un excellent travail de design. <\/p>\n Les transitions sont vraiment les animations les plus importantes de l’UI – si vous les r\u00e9ussissez, vous \u00eates \u00e0 mi-chemin. Si elles sont mal faites – trop rapides, trop lentes, trop saccad\u00e9es – vous risquez d’avoir une exp\u00e9rience utilisateur d\u00e9sagr\u00e9able et d\u00e9rangeante. Le concept de Tubik pour une application de commerce \u00e9lectronique de vinyle<\/a> est un excellent exemple d’une animation d’interface utilisateur de transition bien faite. Elle est agr\u00e9able et fluide, avec des \u00e9l\u00e9ments qui apparaissent et disparaissent sans aucun sentiment de d\u00e9connexion ou de \u00ab\u00a0o\u00f9 est-ce que c’est pass\u00e9 ? Notre moment pr\u00e9f\u00e9r\u00e9 est celui o\u00f9 le disque sort de sa pochette – le fait qu’il s’agisse de l’un de nos disques pr\u00e9f\u00e9r\u00e9s n’en est que meilleur. <\/p>\n
\nT\u00e9l\u00e9chargez maintenant l’exemple gratuit de diaporama automatique<\/span><\/h2>\n
\n<\/div>\nChargement de l’animation de l’UI<\/h3>\n
![\"animation](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-animation-ui-pattern-ux-design-ui-animation.gif\")
<\/p>\nValidation du flux d’\u00e9cran Animation de l’UI<\/h3>\n
\nT\u00e9l\u00e9chargez l’exemple gratuit de validation du flux d’\u00e9cran ici<\/span><\/h2>\n
\n<\/div>\n![\"exemple](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-animation-ui-pattern-ux-design-animation-ui-animation.gif\")
<\/p>\nAnimation de l’interface utilisateur de la liste de contacts interactive<\/h3>\n
\nT\u00e9l\u00e9chargez ici l’exemple gratuit de liste de contacts interactive<\/span><\/h2>\n
\n<\/div>\n![\"animation](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-ui-animation-accordion-animations-ux-design.png\")
<\/p>\nAnimation de l’UI en accord\u00e9on<\/h3>\n
\u00c0 quoi servent les animations de l’UI mobile ?<\/h3>\n
Qu’est-ce qui fait une bonne animation d’UI mobile ?<\/h3>\n
\n
\n
5 animations UI que nous adorons<\/h2>\n
Airbnb – Syst\u00e8me d’animation Lottie<\/h3>\n
![\"airbnb](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/airbnb-mobile-ui-animations-justinmind.gif\")
<\/p>\nAnimation de l’interface utilisateur de l’application Syst\u00e8me solaire<\/h3>\n
![\"Syst\u00e8me](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/xore-solar-system-app-UI-animations-justinmind.gif\")
<\/p>\nAnimation de l’interface utilisateur pour la s\u00e9lection des ingr\u00e9dients dans une application de cuisine<\/h3>\n
![\"Cuisine](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/ingredients-app-UI-animations-justinmind.gif\")
<\/p>\nAnimation de l’UI de l’application e-commerce Vinyls<\/h3>\n
![\"Vinyl](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/vinyl-shop-app-UI-animations-justinmind.gif\")
<\/p>\nAnimation de l’interface utilisateur d’une application de r\u00e9seau social<\/h3>\n
![\"Animation](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/social-app-UI-animations-justinmind.gif\")
<\/p>\n
![\"T\u00e9l\u00e9charger](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"