Animations et transitions

L’utilisation stratégique des animations et des transitions peut rendre votre programme plus facile à comprendre, se sentir plus lisse, plus naturel et de qualité supérieure, et être plus attrayant. Mais l’utilisation gratuite des animations et des transitions peut rendre votre programme distrait et même ennuyeux.

Les animations donnent l’apparence d’un mouvement ou d’un changement au fil du temps. Utilisez l’animation pour donner des commentaires, afficher un aperçu de l’effet d’une action, afficher la relation entre les objets, attirer l’attention sur la modification ou expliquer visuellement une tâche.

Microsoft Windows utilise une animation flash d’arrière-plan pour envoyer des commentaires sur l’objet.

Les transitions sont des animations utilisées pour garder les utilisateurs orientés pendant les modifications d’état de l’interface utilisateur (UI) et les manipulations d’objets, et faire en sorte que ces modifications se sentent lisses au lieu de jarring. De bonnes transitions se sentent naturelles, donnant souvent l’illusion que les utilisateurs interagissent avec des objets réels.

Les gadgets windows Desktop utilisent des transitions fluides entre leurs états concis et de détails.

En règle générale, les meilleures animations et transitions sont utilisées pour communiquer avec les utilisateurs de manière non verbale et pour apporter des modifications d’état plus naturelles et moins visibles. En revanche, le moins efficace est gratuit dans le fait qu’ils ne communiquent rien ni attirer l’attention inutile. Les animations sont mieux utilisées comme une forme secondaire de communication. Ils doivent communiquer des informations utiles, mais pas critiques et accessibles, les utilisateurs doivent pouvoir déterminer des informations équivalentes par d’autres moyens.

Remarque : Instructions relatives à de personnalisation logicielle, sonore et d’accessibilité sont présentées dans des articles distincts.

Est-ce l’interface utilisateur appropriée ?

Pour décider, tenez compte des questions suivantes.

Animations

Les conditions suivantes s’appliquent-elles ?

• L’animation communique visuellement quelque chose d’utile, comme l’envoi de commentaires, l’affichage des relations, des causes et des effets, ou attirer l’attention sur un changement important.
• La vision de l’animation n’est pas essentielle. Des informations équivalentes peuvent être obtenues d’une autre manière. Les utilisateurs peuvent ne pas bénéficier de l’animation si :
  • Ils ont désactivé les animations.
  • Leur attention est ailleurs.
  • Ils sont malvoyants.
  • L’animation est masquée par une autre fenêtre.
  • L’animation n’est pas jouée en raison de performances système insuffisantes.
• L’animation n’affecte pas la productivité de l’utilisateur. Ou:
  • Cela se produit rapidement (200 millisecondes ou moins).
  • Elle n’interfère pas avec l’interaction ou peut être interrompue.
  • L’utilisateur doit attendre de toute façon.
• L’animation n’affecte pas le flux de l’utilisateur.
  • Il est soit au centre de l’attention de l’utilisateur, soit il attire l’attention sur quelque chose en dehors du centre d’attention qui est important ou utile pour terminer une tâche.
  • Il est facilement ignorable, pas distrait ou ennuyeux.
  • Ça ne devient pas fastidieux. Les utilisateurs trouvent toujours approprié et agréable même après affichage répété.

Si c’est le cas, envisagez d’utiliser une animation.

Transitions

Un objet ou une scène change-t-il d’état et toutes les conditions ci-dessus pour l’utilisation d’animations et l’une des conditions suivantes s’appliquent-elles ?

• Le changement d’état est conceptuellement désorientant, déroutant ou difficile à comprendre.
• Le changement d’état est visuellement jarring, manque de continuité ou de douceur, ou clignote ; ou apparaît non naturel, non poli ou de mauvaise qualité, surtout s’il implique une grande surface d’écran.
• L’utilisation d’une transition rend la modification de l’état plus rapide.
• Le changement d’état est digne d’une attention particulière de l’utilisateur.

Si c’est le cas, envisagez d’utiliser une transition.

Concepts de conception

Les animations et les transitions constituent un moyen efficace de communiquer visuellement des informations qui nécessitent autrement du texte pour expliquer ou ne pas être expliqués par les utilisateurs.

Incorrect :

de message

correct :

L’utilisation d’une animation communique les mêmes informations, mais de manière naturelle et discrète. Qu’est-ce que tu préfères voir mille fois ?

Les animations et les transitions n’ont pas besoin d’attirer l’attention sur le succès. En fait, ils sont souvent utilisés pour éviter d’attirer l’attention sur les mécanismes de programme dont les utilisateurs n’ont pas besoin d’être conscients. De nombreuses animations réussies sont si naturelles que les utilisateurs ne sont même pas conscients d’eux ; plutôt que les utilisateurs ne remarqueraient leur absence que. La fréquence d’occurrence augmente le besoin de subtilité, donc économisez les effets qui demandent l’attention pour les événements peu fréquents qui méritent vraiment l’attention.

Transition du menu Démarrer qui évite d’attirer l’attention.

Au-delà de rendre votre programme plus facile à comprendre et à sentir plus lisse, animations et transitions bien conçues sont un excellent moyen d’ajouter la personnalité, le caractère et le style à votre programme. Ils peuvent rendre l’expérience utilisateur plus immersive et attrayante en lui donnant une sensation naturelle et réelle.

Windows 7 met en surbrillance les boutons de la barre des tâches en fonction de la position actuelle de la souris et de la couleur de l’icône de programme. Cette approche est visuellement attrayante, mais subtile, transmettant une personnalité humble.

Toutefois, les animations et les transitions sont les plus efficaces et les bienvenues lorsqu’elles servent un objectif clair. Ils doivent être utilisés pour améliorer la facilité d’utilisation, la douceur et le flux, et la perception de la qualité, sans nuire considérablement aux performances.

Bien que certains types d’animations soient utilisés pour attirer l’attention de l’utilisateur, assurez-vous que l’attention est bien méritée et digne d’interrompre le train de pensée de l’utilisateur. L’œil humain est sensible au mouvement, en particulier le mouvement périphérique. Il peut être difficile pour les utilisateurs de se concentrer lorsqu’il existe un bouton de barre des tâches clignotant ou une icône de zone de notification en rotation. Éviter d’utiliser des animations pour interrompre ou distraire les utilisateurs, ou attirer l’attention sur les éléments qui ne justifient pas l’attention de l’utilisateur.

Incorrect :

Les programmes ne doivent pas flasher leur bouton de barre des tâches, sauf si les utilisateurs doivent faire quelque chose d’important immédiatement. Dans ce cas, la seule chose que l’utilisateur doit faire est d’activer le programme.

Utilisez des animations et des transitions, car votre programme en a besoin, pas seulement parce que vous pouvez. Et pour l’accessibilité, n’utilisez pas l’animation comme seule façon de transmettre des informations essentielles. Assurez-vous que les utilisateurs peuvent obtenir des informations équivalentes de manière différente.

Attributs de bonnes animations et transitions

Les bonnes animations et les transitions permettent de trouver le bon équilibre entre ces attributs :

• Sont clairement objectifs. De bonnes animations sont là parce qu’elles doivent être, qu’il s’agisse de communiquer des informations, de rendre une interaction réelle ou d’attirer l’attention sur quelque chose de remarquable. Et les animations délibérées sont précises ; si une animation indique qu’une tâche est en cours d’exécution, c’est parce que la tâche est en cours d’exécution.

Incorrect :

Dans cet exemple, l’animation montre qu’une batterie entièrement chargée est chargée.

• Regardez lisse et continu. De bonnes animations suppriment en douceur les coutures entre les changements d’état de scène ou d’élément en montrant les relations et en fournissant un sens du lieu et du contexte. La continuité aide les utilisateurs à comprendre comment ils sont là où ils sont, et comment revenir à l’endroit où ils sont venus.

La fenêtre de barre des tâches Windows 7 affiche un aperçu des morphes pour la continuité à mesure que l’utilisateur passe d’un programme à un autre.

• Sont réalistes. De bonnes animations simulent les propriétés physiques et le comportement réels d’un objet. Cela permet aux utilisateurs de prédire et de comprendre les résultats de leurs interactions. Vous n’avez pas à modéliser le monde réel exactement, mais si vous utilisez des animations réalistes, vous devez les garder cohérentes avec le monde réel. Les utilisateurs ne doivent jamais être surpris ou confondus par les résultats, en particulier avec les animations utilisées pour la manipulation directe.

Dans cet exemple, l’animation « sortir du chemin » utilisée par la barre des tâches Windows 7 est plus réaliste qu’un point d’insertion statique.

• Sont authentiques. Même les objets qui ne sont pas trouvés dans le monde réel peuvent apparaître naturels en étant basés sur le comportement réel d’un autre objet, mais connexe. Cette métaphore ne fonctionne que si la relation communique clairement l’objectif et le comportement prévus.

Dans cet exemple, l’animation « file d’attente » de la fenêtre utilisée par Windows 7 est authentique, car elle est cohérente avec la façon dont les fenêtres en verre peuvent se comporter dans le monde réel.

• Utilisez le mappage naturel. Les mappages naturels sont physiques ou culturels. Un mappage naturel basé sur la culture, par exemple, peut commencer par le fait que dans les cultures occidentales, les gens lisent de gauche à droite. Par conséquent, pour exprimer une séquence temporelle d’objets, l’objet intermédiaire est actif, les objets vers la gauche sont du passé et les objets vers la droite sont à l’avenir. À l’avenir, il est indiqué par le mouvement de gauche à droite.

Dans cet exemple, le contrôle Lecteur Windows Media a un mappage naturel, car la lecture déplace la position de gauche à droite.

• Avoir de la personnalité. Les animations bien choisies sont de bonnes façons d’ajouter de la personnalité, du caractère et du style à votre programme. Ils peuvent rendre l’expérience utilisateur plus immersive et attrayante. Bien que le type d’animation détermine ce qu’il communique, la manière spécifique dans laquelle l’animation est effectuée montre la personnalité du programme. De bonnes animations projetent la personnalité appropriée pour votre programme, qu’il s’agisse de sérieux ou de fantaisie, ou quelque part entre les deux.

Dans cet exemple, l’utilisation du texte animé et de la perspective dynamique de Zune aide à façonner sa personnalité.

• Regardez et sentez-vous réactif. Les bonnes animations n’endommagent pas la productivité de l’utilisateur en bloquant les utilisateurs d’autres interactions ou en forçant les utilisateurs à regarder. Quelle que soit la nature et l’engagement des animations de votre programme, personne ne veut les attendre exclusivement. De bonnes animations sont également réactives sans être en train d’avoir un démarrage rapide avec un atterrissage doux. Les animations réactives bénéficient également de la communication rapide de leur objectif. Les utilisateurs ne doivent pas avoir à regarder une animation pendant longtemps simplement pour déterminer ce qu’il fait ou quand il est fait. Pour la manipulation directe, les animations réactives sont essentielles pour maintenir une sensation directe et attrayante du monde réel. Pour vous sentir direct, les points de contact d’un objet doivent rester sous le pointeur en douceur tout au long de la manipulation. Tout décalage, réponse hachée ou perte de contact détruit la perception de la manipulation directe.

Dans cet exemple, la transition de mouvement panoramique tactile se sent réactive en gardant le point de contact sous le doigt de l’utilisateur tout au long de la manipulation.

• Attirez le bon niveau d’attention. Les bonnes animations sont généralement subtiles et attirent uniquement l’attention requise pour remplir leur objectif. Par conséquent, ils ne sont pas distraits, ennuyeux, trop complexes, trop longs ou répétitifs. Ils ne deviennent pas fastidieux après des consultations répétées.

Dans cet exemple, la recherche Windows attire temporairement l’attention sur la correspondance des mots de recherche, puis s’efface.

• Regardez spécial seulement si vraiment spécial. La fréquence augmente la nécessité de subtilité, de sorte que les interactions courantes nécessitent des animations simples qui communiquent une idée simple d’une manière simple. Réservez des animations spéciales et complexes pour des expériences particulières et peu fréquentes.

Dans cet exemple, Windows utilise une animation d’attention au démarrage pour rendre l’expérience spéciale, mais une telle animation serait inappropriée ailleurs.

Vous savez que vous avez atteint le bon équilibre lorsque l’expérience globale serait blessée si l’un de ces attributs a été supprimé.

Création d’un vocabulaire d’animation

De bonnes animations concernent une communication visuelle efficace et la cohérence est essentielle à leur efficacité. Si vous utilisez une transition spécifique, telle que l’envoi (push) d’une scène à partir du droit pour passer à la scène suivante, il doit s’agir de la seule transition utilisée à cet effet et que cette transition ne doit pas être utilisée à d’autres fins. L’affectation de significations différentes à la même animation nuit à sa capacité à communiquer. En affectant des animations et des transitions spécifiques à des significations spécifiques, vous créez un vocabulaire d’animation.

Ce problème s’applique aux animations et aux transitions qui ont un sens, et non aux génériques auxquels les utilisateurs ne sont pas susceptibles d’attribuer une signification ou celles dont l’objectif est d’être invisible. Par exemple, les animations telles que les fondus et les effets spéciaux comme les dissous n’ont aucune signification particulière, afin qu’elles puissent être utilisées librement.

Un bon vocabulaire attribue des animations qui modélisent le monde réel d’un objet, le comportement physique. Si vous devez affecter une animation à un objet ou une action qui n’a pas d’équivalent réel, choisissez une animation qui montre comment l’objet peut se comporter comme il était réel.

Même si le menu Démarrer n’est pas un objet réel, son effet de pointage s’allume comme un objet réel peut être activé.

Chaque animation dans un vocabulaire doit être clairement distincte. Les animations doivent avoir des comportements similaires uniquement si leurs actions associées sont liées de la même façon. Par exemple, les transitions de mouvement suggèrent la navigation. Vous pouvez donc utiliser des transitions de mouvement de différentes directions pour indiquer différents types de navigation.

Vous savez que vos animations et transitions ne communiquent pas correctement lorsque les utilisateurs trouvent les résultats déroutants, surprenants ou inattendus. En règle générale, il est préférable d’atteindre un seul objectif bien que plusieurs objectifs pas si bien.

Dans l’idéal, votre vocabulaire d’animation doit être complet dans tous les domaines de votre programme qui en ont besoin. Si seules quelques interactions ont des animations naturelles, cela attirera l’attention sur ceux qui ne le font pas.

Pour en savoir plus sur le vocabulaire d’animation Windows, consultez la section Modèles d’utilisation de cet article.

Conception de la personnalité appropriée

Bien que le type d’animation détermine ce qu’il communique, la façon spécifique dans laquelle l’animation est exécutée parle de la personnalité du programme et renforce sa marque.

La personnalité de votre programme doit refléter la nature de ses tâches et la personnalité de ses utilisateurs. Il ne s’agit donc pas d’un choix arbitraire. Plutôt, une personnalité bien conçue doit se sentir authentique ; n’essayez jamais de le forcer. La personnalité doit établir un lien émotionnel avec l’utilisateur. Certains facteurs à prendre en compte :

• Tâches : sérieux ou amusant ; facultatif ou obligatoire.
• Conséquences : grave ou mineure.
• Coût : gratuit ou acheté ; si acheté, modérément prix ou cher.
• Focus utilisateur : groupe relativement étroit d’utilisateurs cibles, ou large, public général.
• environnement utilisateur : professionnel, occasionnel ou domestique.
• Âge de l’utilisateur : plus jeune ou plus âgé.
• fréquence d’utilisation : fréquent ou peu fréquent.

La combinaison de ces facteurs permet de déterminer une personnalité appropriée pour votre programme. Voici quelques combinaisons appropriées pour les types courants de programmes :

applications de productivité

Naturellement, les applications de productivité doivent se concentrer sur la productivité. Bien que quelques expériences spéciales puissent se démarquer, la plupart des autres animations doivent avoir ces caractéristiques :

• Petit
• Naturel, réaliste
• Subtil, sous-traité
• Rapide, efficace
• Détendu

utilitaires

Les utilitaires sont généralement utilisés brièvement, de sorte que leur utilisation de l’animation peut être plus agressive :

• Réaliste, illustratif, explicite
• Sûr
• Engageant

divertissement , jeux

Étant donné que l’objectif de ces programmes est d’engager et de ravir les utilisateurs, les animations et les transitions peuvent être beaucoup plus agressives en ayant ces caractéristiques :

• Grand (peut-être devenir une partie intégrante de l’expérience)
• Artificiel, surréaliste
• Impactful, vibrant
• Émotionnel, ludique, fantaisiste
• Énergique

Faire un lien émotionnel est si important pour les programmes de divertissement qu’il est acceptable de plier certaines règles si cela permet aux utilisateurs de tomber amoureux du programme. Par exemple, il est acceptable si une animation ou une transition devient fastidieuse après la centième fois si la plupart des utilisateurs sont peu susceptibles d’utiliser le programme qui souvent.

En règle générale, les animations et les transitions qui sont petites, naturelles, subduées, efficaces, mais détendues sont le pari le plus sûr. Les transitions avec ces caractéristiques prennent généralement le chemin le plus court du début à la fin, commencent rapidement, se terminent doucement et ne dépassent pas. En outre, les transitions bien conçues sont conçues pour fonctionner correctement sur toute la plage de distances dans laquelle elles seront utilisées.

Performances d’animation

Lors de la conception d’animations, assurez-vous qu’elles n’affectent pas la capacité des utilisateurs à utiliser efficacement votre programme. En règle générale, faites en sorte que vos animations soient suffisamment lentes pour remplir leur objectif, mais assez rapide qu’elles n’interfèrent pas avec la réactivité, demandent trop d’attention ou deviennent fastidieuses.

Incorrect :

Bien que cette animation de tournant de page ait une sensation attrayante et réelle, elle réduit la productivité des utilisateurs en prenant plus de temps pour tourner les pages.

Les brèves transitions (200 millisecondes ou moins) sont un cas particulier (en particulier lorsqu’ils travaillent souvent hors d’un délai), car les utilisateurs sont conscients qu’ils doivent attendre une seconde fractionnée pour eux. Les utilisateurs sont prêts à attendre ces animations si :

• L’attente perçue est extrêmement brève (200 millisecondes ou moins).
• La transition rend l’interaction plus fluide et naturelle.
• La transition rend l’interaction plus réactive.
• Tout délai permet à l’utilisateur de contrôler l’interaction.

Les utilisateurs acceptent un court délai pour le bouton barre des tâches réorganisant l’animation, car il est très bref et rend l’interaction plus naturelle.

Il existe trois façons dont les animations peuvent affecter les performances : la vitesse, la réactivité et la perception.

Pour accélérer, certaines animations sont des facettes visuelles sur les tâches nécessitant beaucoup d’UC. Par conséquent, la dernière chose que vous devez faire est de ralentir ces tâches avec des animations gourmandes en uc. Les animations les plus gourmandes en uc (« lourdes » animations) ont tendance à :

• Impliquez de nombreux éléments qui se déplacent indépendamment.
• Jouer pendant une longue durée ou une distance.
• Impliquez une grande quantité d’espace d’écran.
• Sont mathématiquement gourmands.

Animations avec moins d’impact sur les performances :

• Impliquez un seul objet.
• Jouer pendant une courte durée ou une distance.
• Impliquez une petite quantité d’espace d’écran.
• Ne sont pas mathématiquement gourmandes.

Pour garantir de bonnes performances, les animations lourdes doivent être utilisées uniquement pour les tâches qui ne sont pas gourmandes en uc, tandis que les animations légères peuvent être utilisées n’importe où.

Pour la réactivité, la plupart des animations et des transitions doivent être conçues pour permettre aux utilisateurs d’interagir pendant l’exécution de l’animation. Sauf si une animation fait partie d’un processus, faites-la indépendamment de l’interaction principale de l’utilisateur et autorisez les utilisateurs à l’interrompre.

Une animation peut ne pas affecter les performances d’une tâche en réalité, mais les utilisateurs peuvent avoir la perception qu’elle fait. Par exemple, n’utilisez pas d’animation qui semble lourde pour une tâche lente nécessitant beaucoup d’uc, même si elle ne nuit pas aux performances, car les utilisateurs peuvent conclure que l’animation est la raison pour laquelle la tâche est lente. Si quelque chose semble lent, il se sentira lent, donc il est préférable d’utiliser des animations qui se sentent simples, légères et rapides. L’utilisation d’animations avec des débuts snappy pour les tâches nécessitant beaucoup d’UC aide.

Risqué :

Bien que l’animation dans la boîte de dialogue copie de fichiers Windows ne endommage pas les performances de copie de fichiers, elle risque d’avoir des utilisateurs à penser qu’il le fait.

Également risqué :

Dans cet exemple, l’animation de progression de la recherche lente dans la barre d’adresses de l’Explorateur Windows rend certaines tâches douloureusement lentes.

Les animations et les transitions n’ont aucune valeur si leur qualité est si médiocre qu’elles rendent l’expérience moins lisse et moins attrayante. Pour maintenir leur qualité, les animations doivent être conçues pour dégrader correctement chaque fois que des ressources système suffisantes ne sont pas disponibles. Les animations peuvent se dégrader en ayant des variantes qui nécessitent moins de ressources (telles que des longueurs plus courtes ou des fréquences d’images inférieures), ou même ne s’exécutant pas du tout. Quelles que soient les ressources disponibles, assurez-vous que les animations ont une haute qualité et ressemblent à des animations plutôt qu’à des bogues logiciels.

Enfin, si les utilisateurs croient que les animations et les transitions de votre programme sont détractés de leur productivité, il est possible que certains utilisateurs souhaitent les désactiver. Pour prendre en charge cette capacité, respectez l’option permettant de désactiver toutes les animations inutiles trouvées dans le Centre d’authentification simple Windows.

Attirer le bon niveau d’attention

Bien que seuls certains types d’animations et de transitions soient spécifiquement conçus pour attirer l’attention de l’utilisateur, ils doivent être conçus pour attirer le bon niveau d’attention pour répondre bien à leur objectif. Quelles sont les différentes façons d’attirer l’attention et comment choisir celle qui convient ?

effets d’animation

Différents effets d’animation attirent différents niveaux d’attention. La liste suivante récapitule les méthodes les plus courantes, en commençant par l’obtention la plus d’attention :

• Flashage rapide. Exige une attention immédiate. Peut briser la concentration des utilisateurs, quel que soit l’endroit où le flashing se produit.
• Clignotement modéré. Identique, mais demande moins d’attention avec une fréquence plus faible.
• Rebondir. Visible dans la vision périphérique, et relativement exigeant dans la nature. Les utilisateurs sont susceptibles de remarquer, mais peuvent continuer à se concentrer ailleurs uniquement si la durée est courte.
• Mouvement. Visible dans la vision périphérique, mais pas exigeant. Toutefois, les mouvements complexes ou 3D attirent plus d’attention que les mouvements simples ou 2D. Les utilisateurs sont susceptibles de remarquer, mais peuvent continuer à se concentrer ailleurs.
• Pulsation modérée. Visible mais pas distrait dans la vision périphérique. Les utilisateurs peuvent continuer à se concentrer ailleurs. Peut impulsionner la luminosité, les couleurs et les tailles.
• Pulsations lentes/éclatantes. Notable mais subtil. Attire plus d’attention qu’un effet statique, mais les utilisateurs peuvent ne pas remarquer l’animation, sauf s’ils cherchent déjà.
• Se faner. Même moins visible. Attire plus d’attention qu’un effet statique, mais les utilisateurs peuvent ne pas remarquer l’animation, sauf s’ils cherchent déjà.
• Mise en surbrillance statique/gleam. Visible si les utilisateurs choisissent de regarder, mais ne demandent pas l’attention s’il est ailleurs.
• Ambiante/naturelle. Délibérément pas perceptible en ayant une apparence naturelle et réelle.

Pour déterminer la bonne approche de votre programme ou de votre fonctionnalité, tenez compte de la façon dont ces facteurs sont liés aux scénarios de votre fonctionnalité.

Par exemple, supposons que vous conceviez un programme de message instantané et qu’une personne vient d’envoyer un message à l’utilisateur. Ce scénario nécessite l’attention de l’utilisateur, il doit être visible n’importe où, et généralement l’utilisateur souhaite répondre rapidement. Ce scénario suggère qu’une animation flashing modérée serait un bon choix. En revanche, supposons que vous souhaitez informer les utilisateurs qu’une tâche d’impression est terminée. Les utilisateurs doivent pouvoir continuer à se concentrer et à travailler de manière productive ailleurs, et il est acceptable si les utilisateurs ne remarquent pas. Ce scénario suggère que les pulsations modérées à lentes ou éclatantes seraient un bon choix.

durée

La durée appropriée d’une animation d’obtention d’attention dépend du scénario et du type spécifique d’animation utilisé. Plus l’attention doit être portée sur un effet d’animation, plus la durée doit être courte. Bien que les effets très subtils qui demandent peu d’attention (comme la pulsation lente) peuvent être joués indéfiniment, les effets exigeants de l’attention ne doivent être joués qu’entre 1 et 3 secondes. Tout risque plus long rendant l’animation écrasante et ennuyeuse.

Dans Windows 7, la barre des tâches clignote pour une seconde seulement. Plus longtemps serait ennuyeux.

d’effet

Vous devez concevoir des animations d’attention basées sur l’hypothèse que si les utilisateurs ne répondent pas immédiatement, c’est parce qu’ils sont occupés à faire quelque chose d’autre et ne veulent pas être interrompus. Ainsi, votre objectif doit être d’attirer l’attention sans l’exiger.

Pour obtenir le bon équilibre entre attirer l’attention sans l’exiger, décomposez l’intensité d’un effet au fil du temps. Par exemple, pour attirer l’attention, vous pouvez faire de l’effet initialement fort, mais ensuite ralentir rapidement l’effet. Ainsi, la puissance attrayante est principalement déterminée par l’effet initial, mais l’impression globale de l’utilisateur est déterminée principalement par sa fin.

capture d’écran

Dans Windows 7, l’effet flash de la barre des tâches ralentit à la fin.

Qu’en est-il de PowerPoint ?

Les transitions Microsoft PowerPoint violent souvent délibérément ces instructions, car elles sont conçues pour attirer l’attention sur les transitions de diapositives et obliger les utilisateurs à attendre. En outre, ils n’ont aucune signification particulière afin qu’ils ne communiquent rien au-delà du fait qu’une diapositive change.

Les transitions de style PowerPoint, lorsqu’elles sont utilisées correctement, ont les objectifs suivants :

• Ils interrompent les présentations longues en blocs plus petits en forçant le présentateur à suspendre.
• Ils attirent l’attention du public sur les changements dans la présentation, aidant les gens à se recentrer si leurs esprits se sont demandés.
• Ils donnent à la présentation un rythme pour qu’il ne se sente pas monotone ou écrasant.
• Leur style reflète la personnalité du présentateur ou du matériel.

Bien qu’il s’agit d’objectifs importants pour une présentation, ces transitions attireraient l’attention inutile dans l’interface utilisateur de la plupart des types de programmes et deviennent rapidement fastidieuses.

ligne de fond : n’utilisez pas de transitions de style PowerPoint comme modèle pour votre programme.

Si vous ne faites que six choses...

1. Utilisez des animations et des transitions pour faciliter la compréhension de votre programme, et vous sentirez plus lisse et plus attrayant. Ils devraient avoir un objectif clair. N’utilisez pas d’animations simplement parce que vous pouvez, ou pour attirer l’attention inutile sur votre programme.
2. Définissez un vocabulaire d’animation et utilisez-le de manière cohérente tout au long de votre programme. Utilisez le vocabulaire d’animation Windows 7 le cas échéant.
3. Utilisez les caractéristiques de vos animations pour donner à votre programme une personnalité et renforcer sa marque.
4. Faites la plupart des animations simples, brèves et subtiles. N’oubliez pas que les animations n’ont pas besoin de demander de l’attention pour réussir. Si une animation est appropriée et naturelle, les utilisateurs ne remarqueront son absence que.
5. Rendez vos animations rapides et réactives, et donnez-leur une sensation légère. Peu importe la façon dont vos animations sont attrayantes, personne ne veut se sentir comme ils attendent pour eux. Concevoir des animations plus lourdes pour avoir une dégradation normale.
6. Conception pour la longue durée. Si une animation est ennuyeuse, distraite ou fastidieuse, remaniez-la ou supprimez-la.

Modèles d’utilisation

Les animations ont plusieurs modèles d’utilisation :

Usage	Description
commentaires pointeur pour montrer où se trouve le point d’interaction.	Indique que le point d’interaction est actif. Le pointage peut également être affiché par le biais d’un effet statique. vocabulaire windows : afficher l’effet de pointage (rectangle englobant, surbrillance, élargissement) avec un effet fondu en fondu/fondu pour la douceur. Dans le lecteur multimédia numérique Zune, l’album couvre la mise en surbrillance et ajoute des contrôles de lecture au pointage.
Cliquez sur commentaires pour montrer qu’un objet cliquable est réactif et reçu un clic.	Indique qu’un objet a été cliqué. vocabulaire windows : arrière-plan de l’objet flash sur l’événement clic vers le bas. pour montrer le contact tactile, utiliser un effet d’onde. L’interaction tactile affiche une animation en ondes afin que l’utilisateur sache que l’interaction a été reconnue.
commentaires de sélection pour montrer qu’un objet est sélectionné.	Indique qu’un objet est sélectionné. la sélection peut également être affichée par le biais d’un effet statique. vocabulaire windows : dessinez un rectangle de sélection avec un effet fondu en/fondu pour la douceur. Dans Zune, l’album couvre le clignotement du clic, puis obtient un rectangle de sélection sur la sélection.
commentaires sur la progression pour montrer qu’une tâche est en cours d’exécution.	Les commentaires sur la progression indiquent qu’une tâche progresse, généralement avec des indicateurs d’activité, des barres de progression ou des animations qui illustrent la tâche. déterminer les commentaires sur les progrès indiquent approximativement la quantité de tâches effectuées et la quantité restante, tandis que la progression indéterminé indique uniquement que la tâche est en cours d’exécution. vocabulaire windows : épingler des indicateurs d’activité, des barres de progression, des arrière-plans de progression, des animations d’illustration. Dans cet exemple, Windows Live Messenger affiche des commentaires de progression indéterminés pendant la connexion.
attracteur pour montrer que quelque chose a besoin de l’attention de l’utilisateur.	Attirez le bon niveau d’attention lorsque des objets significatifs sont créés ou ont besoin d’attention (souvent en raison d’un changement), ou d’événements importants ou urgents se produisent. voir attirer le bon niveau d’attention pour les techniques de conception. vocabulaire windows : flashing, déplacement, pulsations, éclatant, éclatant, éclatant. capture d’écran La barre d’outils Windows Live s’anime sur la première apparence pour la rendre évidente là où elle est.
relation pour montrer la relation entre les objets ou la causalité dans les effets.	Affichez des relations, en particulier lorsque la relation peut ne pas être comprise ou attendue, d’une manière qui n’est pas distraite ou déroutante. vocabulaire windows : morphing, transport, changements physiques tels que le basculement, la croissance d’une source de point, la réduction vers une destination de point. Dans cet exemple, l’animation montre la relation entre le paramètre gamma et son impact sur l’affichage.
Illustration/Aperçu pour expliquer visuellement un concept, une tâche ou l’effet d’une commande.	Animation ou vidéo qui explique un concept ou comment quelque chose fonctionne visuellement, soit pour compléter ou remplacer une explication textuelle. cela permet aux utilisateurs d’effectuer des tâches ou de choisir des commandes efficacement et en toute confiance. Dans cet exemple, les commandes « show me » du panneau d’entrée tablet PC utilisent des illustrations pour montrer comment corriger, supprimer, fractionner et joindre.

Les transitions ont plusieurs modèles d’utilisation :

Usage	Description
'objet augmente/réduit/apparaît pour modifier la taille ou l’état d’un objet en douceur.	L’objet change entre les états, éventuellement lors du déplacement. la transition permet aux utilisateurs de se orienter pendant les modifications. vocabulaire windows : morphose, modifier la taille, diapositives d’objet ou sortantes. Dans cet exemple, le gadget météo se transforme à partir de son état concis pour afficher sa boîte de dialogue Options.
Contenu afficher/masquer/modifier pour afficher, masquer ou modifier le contenu en douceur, généralement pour la divulgation progressive.	L’intérieur de la fenêtre est remodelé pour afficher plus, moins ou un contenu différent. la transition permet aux utilisateurs de se orienter pendant les modifications. vocabulaire windows : diapositives de volet entrantes ou sortantes. Les fenêtres volantes s’évanouissent. différents contenus s’effacent ou se déploient. La calculatrice Windows offre une transition fluide entre les modes d’affichage.
Contrôle ou affordance show/hide pour afficher ou masquer en douceur les contrôles ou leurs affordances sur le pointage ou le déplacement de la souris afin de simplifier l’apparence visuelle normale.	Afficher les contrôles lorsque les utilisateurs pointent le pointeur sur une zone de commande ou affichent des affordances lorsque les utilisateurs pointent sur un contrôle. Le pointage sur ces zones indique que l’utilisateur a l’intention d’interagir. affordances peut masquer si le pointeur devient stationnaire. Dans cet exemple, les contrôles du lecteur Windows Media s’effacent en pointage quand ils sont en mode plein écran.
Scène passe pour faire une transition de scène fluide et transparente afin d’éviter l’attention.	Les changements brusques de scène peuvent être déboqués, en particulier pour les zones à grand écran, donc utiliser des transitions de scène pour créer une douceur et une continuité, et pour fournir un contexte. les transitions de scène sont conçues pour être naturelles et à faible clé, afin d’éviter d’attirer l’attention sur le processus de transition lui-même. vocabulaire windows : fondu en/sortie ; fondu croisé ; glisser vers le haut/ vers le bas, vers le haut, vers le bas ; pousse et couvre. Dans cet exemple, le papier peint du bureau Windows s’efface doucement entre les images pour que la transition se sente lisse et contrôlée.
transitions de scène spéciale pour attirer l’attention sur une modification de scène pour le rendre spécial ou recentrer l’attention de l’utilisateur.	Bien que la plupart des transitions de scène ne doivent pas attirer l’attention sur le processus de transition, certains sont conçus pour briser le flux et attirer l’attention afin de souligner que quelque chose de différent est sur le point de se produire. pour attirer l’attention, les transitions de scène spéciales sont conçues pour être non naturelles et ont un impact visuel élevé. Dans cet exemple, PowerPoint utilise des transitions d’attention pour attirer l’audience dans la modification.
manipulations directes pour afficher l’effet des manipulations directes (par exemple, déplacement, défilement/panoramique, rotation et zoom).	La transition montre l’effet de la manipulation en temps réel. l’effet doit se sentir lisse, continu et cohérent avec le monde réel. le déplacement et la rotation peuvent ne pas être continus à certains endroits pour indiquer des restrictions ou des choix préférés probables. le zoom rend le contenu plus grand ou plus petit, ce qui peut changer le niveau de détail en conséquence. Dans cet exemple, la loupe effectue un zoom fluide entre les niveaux.
manipulations directes incorrectes pour indiquer qu’une manipulation directe (par exemple, déplacement, défilement/panoramique) a été tentée, mais n’a pas pu être effectuée.	La transition montre la manipulation en cours de tentative, mais revient à l’état d’origine. souvent, l’effet ressemble à la manipulation ne peut pas être effectué en raison d’une restriction physique réelle. ces animations sont utilisées au lieu de messages d’erreur textuels, ce qui perturberait la sensation réelle de la manipulation. vocabulaire windows : rebond Dans cet exemple, le document rebondit pour montrer que l’utilisateur a atteint la fin.
Trier, filtrer, réorganiser les transitions pour indiquer que la présentation ou le contenu d’une collection d’éléments a changé.	La transition affiche (ou pour les modifications complexes, suggère) l’effet de la modification. supprimés dans cet exemple, la recherche visuelle Bing utilise une transition de filtre. Dans cet exemple, Windows Media Center utilise une transition de réorganisation en tant qu’expérience spéciale pendant la lecture d’une chanson.
transitions de performances pour que l’action apparaisse plus rapidement.	Bien que toute transition ait le potentiel de rendre une action plus rapide, l’objectif principal de ces transitions est d’améliorer la perception des performances et de la réactivité. une bonne technique consiste à montrer la tâche en cours d’exécution en étapes délibérées. en revanche, le retard de l’action, le rendu des résultats de manière aléatoire ou l’utilisation d’un indicateur d’activité se sentira lent. vocabulaire windows : effectuer une action en phases, avec des transitions lisses entre les phases. Dans cet exemple, une liste de raccourcis de barre des tâches affiche immédiatement les éléments standard, puis glisse pour afficher les destinations une fois la liste prête. Cela déguise le temps nécessaire pour générer la liste. En revanche, le retard de l’affichage initial ne répond pas et l’affichage d’une liste incomplète ou de commentaires sur la progression se sentirait beaucoup plus lent.
expériences spéciales pour impliquer et ravir les utilisateurs pendant peu de temps, expériences spéciales qui sont importantes pour votre programme et ont l’attention totale de l’utilisateur.	Bien que toute transition ait le potentiel d’être une expérience spéciale, ces transitions sont les meilleures réservées aux expériences peu fréquentes qui sont vraiment spéciales pour votre programme. les transitions personnalisées sont utilisées pour donner une sensation particulière. la personnalisation et la personnalité sont souvent des éléments de conception importants. contrairement à d’autres modèles, les expériences spéciales peuvent demander de l’attention, être lourdes et exiger des utilisateurs d’attendre un moment. par conséquent, ces transitions s’allongent rapidement si elles sont trop utilisées, car l’expérience n’est plus spéciale. Dans cet exemple, Windows Media Center affiche une animation lors du chargement pour impliquer immédiatement les utilisateurs.

Lignes directrices

Communication efficace

• Définir et utiliser un vocabulaire d’animation pour vous assurer que vos animations et transitions ont une signification cohérente et l’utiliser de manière cohérente dans votre programme. La plupart des vocabulaires doivent inclure des entrées pour l’apparence de scène et l’apparence de l’objet et la disparition, la navigation, l’interaction de base (pointage, sélection, clic), manipulation d’objet et interaction (déplacement, suppression, redimensionnement, défilement, panoramique, zoom, rotation, filtrage) et attirer l’attention. La signification cohérente est cruciale pour une communication efficace.

• Chaque fois que cela est pratique, utilisez le vocabulaire d’animation Windows. Même si votre programme peut avoir un public différent et des besoins différents, souvent les avantages de la cohérence et de la familiarité l’emportent sur les avantages d’être différents. Si le vocabulaire de votre programme doit être différent, utilisez les mêmes types d’animations de base que Windows, mais donnez-leur la personnalité appropriée pour votre programme.

• N’affectez pas de significations spécifiques aux animations génériques et aux transitions dans un vocabulaire d’animation. Les transitions génériques telles que les fondus et les effets spéciaux comme les dissolutions n’ont aucune signification particulière (au-delà de l’apparition ou de la disparition), afin qu’elles puissent être utilisées librement.

  Incorrect :

  

  Dans cet exemple, un fondu croisé est utilisé de manière incorrecte pour accéder à l’élément suivant. Étant donné que les fondus croisés n’ont aucune signification particulière, cette transition ne fournit pas de contexte.

• Distinguez clairement les entrées de vocabulaire. Les actions associées peuvent avoir des effets similaires (par exemple, le zoom avant et le zoom arrière doivent avoir des transitions inverses), mais les actions non liées doivent avoir des effets clairement distincts (par exemple, le zoom ne doit jamais être confondu avec la rotation).

• Gardez les effets réels réalistes et cohérents. Si vous utilisez des animations et des transitions réalistes, gardez l’expérience cohérente avec le monde réel. Les utilisateurs ne doivent jamais être surpris, confus ou trompés par les résultats. Et pour la cohérence, ne mélangez pas les métaphores.

• Donnez des animations inverses aux actions inverses. Cela répond aux attentes des utilisateurs et simplifie le vocabulaire. Par exemple, si un volet apparaît en glissant, supprimez-le en le faisant glisser sans aucun autre effet.

• Rendre les animations compréhensibles. Les utilisateurs doivent être en mesure de comprendre rapidement l’objectif d’une animation. Il est possible de rendre une animation trop petite, trop brève (moins de 50 millisecondes), ou si subtile que les utilisateurs ne peuvent pas comprendre leur objectif. Dans de tels cas, soit reconcevoir pour rendre la signification claire, soit supprimer.

  Incorrect :

  

  Dans cet exemple, l’effet est si petit et subtil que peu d’utilisateurs peuvent comprendre son objectif. Mieux vaut reconcevoir ou supprimer.

Modèles

commentaires pointeur

• Pour apparaître réactif, essayez de lire l’animation dans les 50 millisecondes suivant l’entrée ou laissant l’état du pointage.
• Pour apparaître rapidement, faites en sorte que la durée des animations de pointage soit inférieure à 50 millisecondes.
• Utilisez un fondu en/fondu hors de l’effet de pointage. Cela rend les effets de pointage clairement distincts des commentaires de clic et de sélection.

Cliquez sur commentaires

• Pour apparaître réactif, essayez de lire l’animation dans les 50 millisecondes de l’événement de clic. Cliquez sur les événements qui n’ont pas besoin de commentaires.
• Pour apparaître rapidement, faites en sorte que la durée des animations de clic soit inférieure à 50 millisecondes.
• Utilisez un effet flash ou clignotement d’arrière-plan. Cela rend les effets de clic clairement distincts des commentaires de pointage et de sélection. Étant donné que le clic nécessite un pointage, effectuez un clic sur un ajout fluide pour pointer les commentaires.

commentaires de sélection

• Pour apparaître réactif, essayez de lire l’animation dans les 50 millisecondes de sélection ou de désélection.
• Pour apparaître rapidement, faites en sorte que la durée des animations de sélection soit inférieure à 50 millisecondes.
• Utilisez un effet de rectangle de sélection fondu en fondu/fondu. Cela rend la sélection clairement distincte du pointage et cliquez sur commentaires.

commentaires sur la progression

• Utilisez un indicateur d’activité quand une action ne peut pas être effectuée au cours d’une seconde. Cela indique que la commande a été reçue.
• Utilisez une barre de progression quand une tâche prendra plus de cinq secondes. Pour plus d’instructions, consultez barres de progression.
• Utilisez des animations de commentaires de progression qui aident les utilisateurs à visualiser l’effet des tâches de longue durée. Évitez les animations de commentaires de progression inutiles si une animation ne communique rien d’utile, utilisez plutôt une barre de progression.
• Avoir des états d’achèvement et d’échec clairement identifiables. Les utilisateurs doivent être en mesure de déterminer rapidement ces états finaux.
• Arrêtez d’afficher la progression lorsque la tâche sous-jacente n’est pas en cours. Les utilisateurs doivent être en mesure de déterminer si la progression n’est pas en cours et réagir en conséquence.

attracteurs

• Utilisez des attracteurs avec retenue. Sauf si les informations sont urgentes, critiques ou susceptibles d’affecter le comportement immédiat de l’utilisateur, il est généralement préférable de modifier l’état de manière discrète et de permettre aux utilisateurs de découvrir eux-mêmes la modification. Résoudre les distractions, pas la détectabilité.

  

  Dans cet exemple, l’icône de zone de notification réseau sans fil utilise une animation pour les problèmes critiques, mais permet aux utilisateurs de découvrir eux-mêmes des signaux faibles.

• Choisissez une animation qui attire le bon niveau d’attention. Les animations d’attraction doivent attirer l’attention juste assez sur eux-mêmes pour remplir leur objectif, mais pas plus. Si l’utilisateur doit agir immédiatement, choisissez un effet qui demande de l’attention quel que soit l’endroit où l’utilisateur recherche. Pour d’autres situations, reportez-vous à la Attirer le bon niveau d’attention section pour obtenir la bonne combinaison d’attention, de visibilité et d’urgence.

  Incorrect :

  assistant bureau à papier

  Les Assistants Microsoft Office ont attiré l’attention inutile sur eux-mêmes.

• Si l’utilisateur ne répond pas, ne répétez pas l’animation ou utilisez des animations continues. Au lieu de cela, supposons que l’utilisateur a choisi de ne pas agir maintenant, mais peut agir ultérieurement. Les animations continues rendent difficile pour les utilisateurs de se concentrer sur n’importe quoi d’autre.

animations de relation

• Utiliser des animations de relation pour montrer où proviennent les objets ou où ils sont allés.
• Les animations de relation doivent commencer ou se terminer par l’objet sélectionné. N’affichez pas les relations entre les objets avec lesquels l’utilisateur n’interagit actuellement pas. Si les utilisateurs remarquent du tout, ce qu’ils remarquent est la distraction.

Illustrations/aperçus

• Utilisez des aperçus pour afficher l’effet d’une commande sans que les utilisateurs n’ont à l’exécuter en premier. En utilisant des préversions utiles, vous pouvez améliorer l’efficacité et la facilité d’apprentissage de votre programme, et réduire le besoin d’essai et d’erreur.
• Utilisez des illustrations et des aperçus qui ont une interprétation claire. Ils ont peu de valeur si confus.
• Lire une seule illustration à la fois pour éviter d’accablant les utilisateurs. Si plusieurs illustrations simultanées sont possibles, utilisez le pointage de la souris ou un bouton de lecture pour permettre aux utilisateurs d’indiquer leur intérêt.
• Lire automatiquement une illustration s’il s’agit de l’objectif principal de la fenêtre ou de la page. Sinon, s’il est facultatif, laissez les utilisateurs le lire quand ils sont prêts.
• lire les animations à la vitesse optimale: pas si rapide qu’elles sont difficiles à comprendre, mais pas si lentes qu’elles sont fastidieuses à regarder.

' d’expansion/réduction de l’objet

• Ne pas découper le contenu pendant un redimensionnement. Développez des conteneurs avant d’ajouter du contenu. Supprimez le contenu avant de réduire les conteneurs.

  Incorrect :

  de calculatrice tronquée

  Dans cet exemple, le contenu est clippé pendant un redimensionnement.

Contenu afficher/masquer/modifier

• Affichez des informations importantes de manière statique. Les utilisateurs ne doivent pas avoir à accéder à des informations importantes par le biais d’une divulgation progressive.

Contrôle ou affordance show/hide

• Affichez des contrôles importants lorsque l’utilisateur positionne le pointeur n’importe où dans la fenêtre ou le volet, ou, si l’écran plein, se déplace à la souris. Les utilisateurs ne doivent pas avoir à rechercher ces contrôles, de sorte que leur découverte soit certaine.

  

  Dans cet exemple, Windows Media Center affiche ses contrôles chaque fois que le pointeur se trouve sur la fenêtre.

• Affichez les contrôles secondaires ou les affordances de contrôle lorsque l’utilisateur positionne le pointeur sur ou près des commandes. Pour faciliter la découverte, rendez l’emplacement évident et la cible grande.

  

  Dans cet exemple, Windows Live Messenger affiche une commande secondaire lorsque le pointeur se trouve dans le coin supérieur droit.

Scène passe

• Rendre les transitions de scène physiques cohérentes avec le mappage naturel. Les personnes lisent de gauche à droite dans les cultures occidentales et les diagrammes hiérarchiques s’écoulent de haut en bas. Par conséquent, dans le temps, il est indiqué par le mouvement de gauche à droite. Les transitions de scène physique suivantes ont un mappage naturel :

  Transition	Signification
  De gauche	Revenir en arrière dans le flux de tâches
  De droite	Avancer dans le flux de tâches
  En haut	Monter la hiérarchie des tâches
  En bas	Descendre dans la hiérarchie des tâches

• Si votre programme lit le son, concevez des transitions de scène et des transitions audio ensemble. Par exemple, si une scène s’est fondue progressivement, tout son doit également disparaître progressivement. Ne ruinez pas les transitions visuelles transparentes en ayant des transitions sonores abruptes. Pour plus d’instructions sonores, consultez sound.

manipulations directes

• Lorsque vous utilisez des mouvements physiques dans l’interaction (comme le tossing), concevez l’animation pour qu’elle ressemble à une réponse naturelle au mouvement. Lier la cause d’interaction avec l’effet de transition. Donnez à l’animation des caractéristiques physiques réelles telles que l’accélération, la décélération, l’élan, la résistance, le poids, le rebond et la rotation.
• Pour maintenir une sensation directe, gardez les points de contact d’un objet sous le pointeur en douceur tout au long de l’interaction. Tout décalage, réponse hachée ou perte de contact détruit la perception de la manipulation directe. Les objets ne doivent jamais disparaître en étant manipulés.

Trier, filtrer ou réorganiser les transitions

• Pour les modifications simples, affichez l’intégralité de la transition. Les utilisateurs pourront suivre facilement toute la transition. Les modifications simples impliquent quatre éléments ou moins.
• Pour les changements complexes, mettez l’accent sur la fin du mouvement, car il ralentit et laissez l’œil remplir le reste. Cela rend le mouvement beaucoup plus réactif et ordonné.

transitions de performances

• Envisagez d’effectuer des transitions lentes en deux ou trois étapes pour les rendre plus rapides et immédiatement interactives. Utilisez l’ordre de composition suivant si nécessaire :
  • Frame externe
  • Arrière-plan
  • Contenu initial (utilisation d’une représentation temporaire si nécessaire)
  • Contrôles principaux (afin que les utilisateurs puissent interagir immédiatement)
  • Contrôles secondaires et éléments d’interface utilisateur restants
  • Contenu final (si une représentation temporaire a été utilisée) Utilisez des transitions telles que des fondus et des diapositives pour rendre la composition fluide, ordonnée et affinée.

Lors du défilement en mode « Œil d’oiseau », Bing mappe un arrière-plan de grille temporaire. Cela permet aux utilisateurs de continuer à faire défiler immédiatement, bien avant le rendu du contenu final.

animations d’expérience spéciale

• Reconsidérer les écrans de démarrage animés (ainsi que les écrans de démarrage statiques). Souvent, les écrans de démarrage attirent simplement l’attention sur la durée de chargement d’un programme, et ils portent rapidement leur accueil. Bien que les écrans de démarrage soient acceptables s’ils sont affichés uniquement lorsque l’interaction utilisateur n’est pas possible, chaque fois qu’il est pratique, une meilleure alternative consiste à concevoir votre programme afin que les utilisateurs puissent interagir immédiatement, même s’il est toujours en cours de chargement.
• Fournissez une commande Skip Introduction si un écran de démarrage animé prend plus de trois secondes. Cliquer n’importe où sur l’écran de démarrage doit également l’ignorer. Vous pouvez également utiliser une courte version de l’animation après une période initiale.

Performance

• Ne faites pas attendre les animations et les transitions de votre programme. Utilisez de brèves animations et transitions (moins de 200 millisecondes) chaque fois que cela est pratique. Utilisez des animations plus rapides (100 millisecondes) pour des opérations plus fréquentes. Concevez des animations plus longues (plus d’une seconde généralement les commentaires de progression, l’illustration et les modèles d’expérience spéciale) afin que les utilisateurs puissent continuer à travailler pendant leur exécution.

• Concevez des animations longues pour indiquer clairement aux utilisateurs qu’ils peuvent interagir pendant l’exécution de l’animation. Les utilisateurs n’essaieront pas de continuer à fonctionner si les indices visuels suggèrent qu’ils ne peuvent pas.

  

  Dans cet exemple de Windows Internet Explorer, la barre de progression basse clé dans la barre d’état suggère que les utilisateurs n’ont pas besoin d’attendre la fin avant qu’ils puissent interagir.

• Utilisez des animations légères pour les tâches nécessitant beaucoup d’UC. Cela donne une puissance de traitement complète à la tâche. En outre, les utilisateurs ne perçoivent pas que l’animation légère est la raison pour laquelle la tâche est gourmande en uc.

• N’affichez pas d’indicateur d’activité pendant une animation ou une transition. Cela détruit l’effet. Concevez des animations et des transitions afin qu’elles puissent commencer immédiatement.

• Concevoir des animations pour dégrader correctement chaque fois qu’il y a des ressources système insuffisantes. Les animations peuvent se dégrader en ayant des variantes qui nécessitent moins de ressources (telles que des longueurs plus courtes ou des fréquences d’images inférieures), ou même ne s’exécutant pas du tout. Quelles que soient les ressources disponibles, assurez-vous que les animations ont une haute qualité et ressemblent à des animations plutôt qu’à des bogues logiciels.

  Incorrect :

  de bureau

  Dans cet exemple, la transition de restauration de fenêtre est utilisée même s’il n’y a pas suffisamment de ressources système pour le lire correctement. Par conséquent, le cadre figé semble être un bogue. Si les ressources ne sont pas disponibles, il est préférable d’afficher simplement la fenêtre sans transition.

Caractéristiques d’animation

Les animations et les transitions bien conçues ont généralement ces caractéristiques :

• Courte durée. La plupart des animations doivent être comprises entre 100 et 300 millisecondes, de préférence 1/6 seconde (167 millisecondes) ou 1/4 seconde (250 millisecondes). (Les expériences spéciales et les commentaires sur la progression peuvent être plus longs.) Utilisez des temps d’animation plus rapides pour des opérations plus fréquentes. En règle générale, les animations plus longues prennent plus de temps, prennent plus de temps pour comprendre et se sentir lentes.

• Réactivité. Les animations doivent démarrer dans les 50 millisecondes de l’événement de lancement ou de l’action utilisateur. Les heures de début plus longues ne répondent pas.

• Accélération/décélération. Pour regarder naturel, la plupart des effets d’animation doivent accélérer lors du démarrage et de la décélération lors de l’arrêt. Pour être réactive, les animations de conception doivent avoir des démarrages rapides. Pour apparaître contrôlé, les animations de conception doivent avoir des atterrissages souples à la fin. Bien que cela s’applique aux effets de mouvement, il s’applique également à tout effet qui suggère le mouvement, comme les zooms et même les fondus.

  

  La plupart des animations doivent avoir des démarrages rapides et des fins douces pour avoir une sensation réactive, mais contrôlée.

• Mouvement. Les animations illustrant le mouvement en particulier doivent accélérer et décélérer, donc n’utilisez pas de mouvement linéaire, sauf si la durée de l’animation est très courte. Les mouvements devraient prendre le chemin court du début à la fin, sans dépassement. Le chemin de mouvement complet n’est pas toujours obligatoire. Si nécessaire, mettez l’accent sur la fin du mouvement lorsqu’il ralentit, et laissez l’œil se remplir dans le reste. Cela rend le mouvement beaucoup plus réactif et ordonné. Lors de l’animation du mouvement de plusieurs objets simultanément, donnez-leur des chemins légèrement différents avec des minutages légèrement différents pour se sentir plus naturel.

• Fréquence d’images. La plupart des animations doivent utiliser une fréquence d’images de 20 images par seconde. Si l’animation est destinée à une expérience spéciale ou est liée à l’objectif principal du programme, envisagez d’utiliser un taux plus élevé de 24 30 images par seconde pour améliorer la douceur et le réalisme.

• Écaille. Concevoir des animations pour fonctionner correctement dans toute leur gamme d’utilisations prévues. Par exemple, les transitions de page doivent être conçues pour fonctionner pour toutes les tailles de page.

• Personnalité. Concevez des animations pour sentir naturel, subduqué et efficace plutôt que artificielle, fantaisiste ou lente.

Texte animé

• Même si vous pouvez afficher du texte à l’aide d’une transition, n’animent pas en permanence le texte. texte animé est souvent distrait et plus difficile à lire que du texte statique. exceptions :
  • Vous pouvez animer du texte dans des situations où il est traditionnellement animé, et vous fournissez une alternative accessible.
  • Vous pouvez animer du texte si l’objectif du texte est principalement décoratif.

Dans cet exemple, Zune anime du texte, mais son but est principalement décoratif. Il n’y a pas de problème si les utilisateurs ne lisent pas attentivement le texte.

Réduction de la consommation d’énergie

• Concevez vos animations pour réduire la consommation d’énergie. Lorsqu’elles sont conçues correctement, les animations ne doivent pas augmenter considérablement la consommation d’énergie. Pour réduire la consommation d’énergie :
  • Arrêtez l’animation lorsque l’affichage est désactivé. L’affichage peut être désactivé dans le but d’économiser de l’énergie.
  • N’utilisez pas d’animations longues qui ne sont pas lancées par l’utilisateur. Les animations qui utilisent des minuteurs périodiques haute résolution réduisent l’efficacité de la gestion de l’alimentation du processeur. Veillez également à désactiver les minuteurs périodiques haute résolution lorsque les animations sont terminées.
  • Suspendez toutes les animations lorsque le système devient inactif. La période d’inactivité de l’utilisateur à devenir inactive est déterminée par les options d’alimentation dans le Panneau de configuration.

Accessibilité

• N’utilisez pas l’animation comme seule façon de transmettre des informations essentielles. Les animations doivent communiquer des informations utiles, mais pas critiques, car elles ne sont pas accessibles aux utilisateurs présentant des déficiences visuelles.

• assurez-vous que les informations équivalentes sont disponibles par d’autres moyens, telles que :

  • Par inspection. Les utilisateurs peuvent déterminer des informations équivalentes en examinant l’écran ou les objets impliqués dans l’animation.
  • Par interaction simple. Les utilisateurs peuvent déterminer des informations équivalentes en pointant, en cliquant ou en double-cliquant.

  

  La page d’accueil Bing a une animation initiale qui révèle plusieurs points chauds. Les utilisateurs peuvent également afficher les points chauds en déplaçant le curseur près d’eux.

  Notez que les « informations équivalentes » ne signifient pas des informations identiques. Les informations peuvent être dans un autre format ou nécessiter une déduction simple.

• Le cas échéant, définissez le focus d’entrée sur l’objet modifié pendant une transition. Cela permet aux technologies d’assistance de détecter l’endroit où la modification s’est produite. Mais ne modifiez pas le focus d’entrée lorsque l’utilisateur utilise le clavier.

• N’utilisez pas d’animations ou de transitions qui flashent ou redimensionnent rapidement des objets. Le flashing et les changements rapides d’écran peuvent provoquer des problèmes pour les personnes atteintes de troubles de crise et d’autres troubles neurologiques.

• Autoriser les utilisateurs à désactiver les animations et les transitions de votre programme. Pour prendre en charge cette capacité, respectez l’option Désactiver toutes les animations inutiles dans le Centre d’authentification facile d’accès dans Windows.

  Développeurs : Vous pouvez déterminer si les animations sont activées à l’aide de l’API SystemParametersInfo.

• Concevoir des tâches en supposant que les utilisateurs désactivent les animations de votre programme. Assurez-vous que cela n’interrompt pas considérablement le flux de tâches.

Pour plus d’instructions sur l’accessibilité, consultez d’accessibilité.

Documentation

• Évitez de faire référence aux animations dans la mesure du possible. Au lieu de cela, reportez-vous à l’objet animé et, si nécessaire, au type d’animation.
• Ne faites pas référence à des transitions, sauf dans la documentation technique. Au lieu de cela, reportez-vous à l’objet dans son état final ou initial.
• Si l’utilisateur lance explicitement une animation, utilisez le jeu de verbes ; sinon, utilisez le verbe utilisé pour la documentation technique.

Exemples:

• Vous savez qu’un élément a besoin de votre attention lorsque son icône commence à se bouncer.
• Tout d’abord, sélectionnez les photos que vous souhaitez imprimer (notez que les photos sont agrandies lors de la sélection).
• Utilisez une transition en fondu croisé pour modifier l’état d’un objet en toute transparence.