Article original : The Principles of UX Choreography
Par Rebecca Ussai Henderson
L'intersection de Disney et de l'UX et pourquoi apprendre à dessiner Mickey Mouse changera votre approche du design
Récemment, j'ai collaboré avec Glen Keane, animateur et légende de Disney, pour une conférence à SXSW. Cet article est un résumé de ce que nous avons partagé lors du panel.
Avant de devenir designer UX, je pensais vouloir être designer de séquences titres. J'ai suivi un cours à Carnegie Mellon enseigné par Dan Boyarski intitulé Time, Motion, and Communication. Il traitait de la typographie cinétique, du rythme, de la couleur et du mouvement. Dan décrivait chaque élément à l'écran comme s'il s'agissait d'un acteur sur une scène un personnage que nous dirigions, en lui donnant un comportement et une personnalité.
Vous êtes responsable de la direction de l'entrée, de la performance et de la sortie de chaque élément.
Nous revenions constamment sur cette séquence, en donnant une raison à la présence d'un personnage et à son rôle. Introduire le temps et le mouvement a tout changé pour moi, car j'ai réalisé que cela vous donne un contrôle précis sur l'émotion que vous essayez de transmettre et la manière dont un public interprétera votre message. Je m'inspirais souvent des séquences titres car j'étais fascinée par la manière dont une séquence de 30 secondes ou de 3 minutes pouvait établir le ton d'un film entier et présager ce qui allait se passer. Lorsque la recherche d'emploi a commencé, c'était un heureux hasard qui m'a menée à devenir designer UX chez R/GA. Je savais que R/GA avait un passé dans le design de séquences titres je ne savais pas s'ils le faisaient encore mais je savais que c'était un endroit où je voulais travailler. J'avais l'intention de postuler pour un poste de design visuel mais j'ai été orientée vers l'UX, donc j'ai commencé le premier jour en me demandant, qu'est-ce que sont les wireframes ?!
Fast forward à quelques années plus tard : j'ai créé des centaines de wireframes et des milliers d'annotations qui décrivent comment les choses fonctionnent et s'assemblent. Des choses comme : Lorsque l'utilisateur tape sur l'icône du menu, le panneau glissera vers le bas depuis le haut de la page. Lorsque l'utilisateur clique sur la vignette, la vidéo s'agrandira en plein écran. Et puis ça m'a frappé. Nous étions bloqués en concevant ces états extrêmes et une grande partie manquait dans notre travail. Lorsque nos livrables consistent à concevoir ces maquettes statiques comme une page d'accueil ou une page de produit ou une page d'article et que nous n'annotons que la manière dont les choses s'enchaînent, nous échouions complètement à montrer ce qui se passe entre les deux. Les annotations ne fournissent pas assez de contexte : nous devions commencer à le montrer.
Plus je faisais de wireframes, plus je commençais à réaliser que tout ce que j'avais appris sur le design du mouvement était complètement pertinent pour nos rôles de designers UX et visuels. En prêtant plus attention à tout ce avec quoi j'interagissais au quotidien, j'ai réalisé que les expériences les plus fluides, agréables et intuitives étaient toujours celles qui mettaient l'accent sur le design du mouvement.
Disney & UX
Si nous allons parler de mouvement et commencer quelque part, c'est avec Disney. Disney a développé les 12 Principes de l'Animation que je trouve très importants car ils montrent comment représenter le mouvement réaliste et l'engagement émotionnel. Disney avait une compréhension profonde de la manière dont les choses se déplacent et se comportent dans la vie réelle. Ils savaient que lorsqu'un public regarderait quelque chose à l'écran, ils s'attendaient à ce que les choses se déplacent de manière naturelle. Disney savait également que s'ils voulaient captiver leur public, ils avaient besoin d'une couche d'engagement émotionnel. C'est ainsi qu'ils sont devenus certains des premiers animateurs à créer des longs métrages qui captivaient le cœur d'un public et rendaient les personnages crédibles et attachants. Mouvement réaliste, engagement émotionnel, résolution des états extrêmes c'est ainsi que tout commence à s'assembler.
La chorégraphie UX est une combinaison du comment avec le quand et pourquoi les techniques appropriées pour appliquer le mouvement et captiver un public combinées avec les moments les plus importants de l'expérience utilisateur où vous pouvez commencer à engager votre utilisateur dans un dialogue à deux voies.
Les 5 principes de la chorégraphie UX
La chose la plus importante à retenir ici est que notre travail en tant que designers UX et visuels ne consiste pas seulement à rendre les choses fonctionnelles et à suivre les meilleures pratiques. Nous essayons également de rendre ces expériences agréables et, avant tout, de raconter une histoire à travers des séquences d'expérience. Plus j'ai prêté attention à la manière dont le mouvement était appliqué dans le numérique et aux techniques utilisées, plus j'ai commencé à voir un schéma. J'ai abouti à ces 5 principes, qui, selon moi, abordent les points de communication les plus importants en UX, comblent les lacunes entre les états extrêmes et créent globalement une expérience plus aboutie. Obtenir ces détails justes est important car cela influence la perception des gens et la confiance en votre produit, ce qui crée globalement une expérience plus positive et agréable.
Feedback
Le feedback aide à démontrer le résultat de l'interaction d'un utilisateur, qu'elle ait été réussie ou non, et pourquoi. Il est souvent utilisé pour montrer si quelque chose est correct ou incorrect, si quelque chose est en cours de chargement, si vous faites des progrès, ou simplement lorsque vous faites des sélections. Le feedback est important car il construit la confiance avec vos utilisateurs et il est vraiment satisfaisant et agréable pour les utilisateurs de le voir ! Il aide à ajouter un élément tactile aux interactions car il vous fait oublier que vous ne faites peut-être que tapoter sur une pièce de verre et vous donne plutôt l'impression d'interagir avec des éléments réels à l'écran. C'est agréable de sentir que les choses réagissent à ce que vous faites. Lorsque vous pensez à concevoir pour le feedback, il est important de travailler à le rendre évident pour les utilisateurs. Le feedback est plus efficace lorsque plusieurs couches d'éléments travaillent ensemble pour réagir à ce que font les utilisateurs.
Alors, que peut nous apprendre Disney ici ? L'exagération. Glen décrit l'exagération comme quelque chose qui est ressenti, pas seulement vu. Souvent, vous verrez des personnages réagir de manière grande et indéniable.
La Bête devient frustrée et surprise
Il a illustré un exemple de la Bête se frustrant avec Belle lorsqu'elle a dit qu'elle n'irait pas dîner. Le visage de la Bête s'est étiré vers le haut et ses yeux se sont écarquillés, lui donnant un air surpris. Ensuite, son visage s'est écrasé et ses sourcils ont pris un air en colère. Un public ne remarque même pas les subtilités de ce qui se passe car cela arrive si vite, mais cela donne au résultat final une sensation de choc et le rend complètement évident.
Exemples de feedback. Secousse du mot de passe iOS : mouvement simple de la tête, directement lié à la manière dont nous donnons des feedbacks les uns aux autres. Points : simple et agréable, plusieurs couches différentes travaillant ensemble. Yahoo News : chaque cercle se remplit un par un, le compteur se met à jour, votre progression est complète et vous êtes récompensé par un fait en plein écran. Beats : les genres réagissent lorsque vous tapez, la progression de la file d'attente pour l'utilisateur. (PS consultez capptivate.co pour de grands exemples).
Feedforward
Feedforward : il s'agit d'une forme d'indication. Il s'agit d'une affordance visuelle. Il aide à transmettre aux utilisateurs les interactions possibles et ce à quoi s'attendre afin qu'ils comprennent mieux comment les choses fonctionnent et s'assemblent. Le feedforward guide les utilisateurs à travers la séquence correcte d'actions afin qu'ils puissent éviter la confusion et mieux atteindre vos objectifs. Il aide vraiment à préparer les gens à ce qui va se passer et à ce qu'ils doivent faire, en indiquant des choses comme, prêtez attention, regardez ici ! ou vous pouvez déposer cela ici ou tirez un peu plus. Souvent, ce sont des détails très subtils les gens peuvent ne même pas remarquer qu'ils se produisent et se souvenir des petites indications qui les ont aidés. Subtil, mais puissant ! La récompense peut être énorme lorsque le feedforward est exécuté efficacement.
Le principe de Anticipation de Disney a un objectif très similaire : préparer un public à ce qui va se passer.
La main ouverte de Mickey devient un symbole pour l'action de tendre la main et attraper une balle
Pour transmettre ce principe, Glen a d'abord illustré une séquence très simple de Mickey tendant la main à travers une table pour attraper une balle. Dans le premier dessin, sa main était près de lui et Mickey regardait la balle à travers la table. Dans le dessin suivant, la main de Mickey était déjà sur la balle. C'est un geste si simple, que c'est tout ce que vous penseriez avoir besoin d'illustrer, n'est-ce pas ? Le problème ici est qu'il n'y a aucun plaisir pour le public ; avant qu'ils ne s'en rendent compte, une action est terminée. Ils n'étaient peut-être pas prêts pour ce que vous alliez faire, même si cela semblait si évident lorsque vous l'illustriez. Prendre le temps de construire l'anticipation en ajoutant une image supplémentaire avec la main de Mickey grande ouverte, s'étendant à travers la table devient un symbole pour le public où ils réalisent qu'il va se passer quelque chose.
Vous ne pouvez pas vous impatienter avec le public, ils répondent simplement.
Un autre exemple d'Anticipation que Glen a partagé était une scène dans Duet où Tosh descendait de l'arbre. Initialement, Glen avait simplement fait sauter Tosh. Il a rapidement réalisé, cependant, que tout le monde l'avait manqué car cela s'était produit trop rapidement. Vous ne voulez jamais que votre public soit derrière vous, a décrit Glen. Il a redessiné cette scène et a fait d'abord regarder Tosh Mia, puis tourner son torse vers l'avant pour descendre de l'arbre. Ce subtil indice a fait toute la différence dans le monde et a aidé le public à suivre naturellement où Tosh allait ensuite.
Exemples de feedforward. Clear : une indication subtile d'un nouvel élément de liste dès que vous tirez. Moldiv : un léger aperçu des contrôles derrière l'écran d'accueil donne un indice aux utilisateurs. Yummly : ce qui était auparavant simplement un arrière-plan blanc devient maintenant un champ de saisie. Snapchat : tirez pour rafraîchir, l'indication d'une couleur ou d'un spinner est un indice que quelque chose va se produire.
Prise de conscience spatiale
La prise de conscience spatiale aide à orienter les utilisateurs dans leur environnement et à clarifier les relations entre chaque élément. Si vous y pensez, il y a essentiellement des possibilités illimitées pour les environnements numériques fictifs que vous créez. Chaque expérience que vous créez a une disposition unique du terrain les éléments peuvent vivre derrière l'écran, à gauche ou à droite, pincés entre, dans un tiroir n'importe quoi que votre petit cœur de designer désire. Cependant, vous devez vous assurer de donner une logique à votre environnement. Il est particulièrement important d'y réfléchir sur les petits écrans où vous êtes contraint de penser à la manière d'utiliser correctement le peu d'espace d'écran dont vous disposez et à la manière de réduire la complexité. Avoir cette toile ouverte lors de la conception d'un environnement est génial pour vous en tant que designer, mais cela signifie que les utilisateurs doivent apprendre et comprendre ce que vous avez fait. Ils doivent apprendre chaque environnement avec lequel ils interagissent. Il y a toujours une période d'intégration et d'orientation. Les utilisateurs doivent comprendre d'où viennent les choses, où elles vont ensuite et où ils peuvent les retrouver. Vous devez vraiment guider les gens à travers ces transitions afin qu'ils comprennent comment ils sont passés du point A au point B afin que cela ne donne pas l'impression d'un changement brutal et soudain. Un changement soudain n'existe pas dans le monde réel ! Les objectifs principaux de la prise de conscience spatiale sont d'orienter vos utilisateurs et de donner une logique aux environnements. Le principe de Mise en scène de Disney nous enseigne beaucoup de choses à ce sujet.
Glen parlait souvent de la manière dont le placement d'un personnage dans une scène peut créer une attente. Par exemple, si un personnage est loin à gauche, l'espace ouvert à droite crée un désir, et quand vous avez un désir, vous avez quelque chose avec quoi travailler. Cela crée une intensité, comme si quelque chose allait cliquer avec le public.
séquence de Mia dans Duet
Il y a une belle séquence dans Duet où Mia saute dans un étang, nage et fait une vrille, puis sort de l'eau et fait une roulade. Glen a décrit la scène comme ayant un pouvoir magnétique qui répondait à ce que faisait Mia et la poussait vers l'avant. Par exemple, lorsqu'elle touche l'eau pour la première fois, il y a un changement majeur les bulles sont comme une explosion autour d'elle. Il a dit, Vous ne pouvez pas changer les environnements totaux sans un certain impact. Ces bulles aident à vous indiquer où elle a été, et les poissons qui l'entourent ensuite indiquent au public où elle va ensuite. C'est comme s'ils la serraient vers la prochaine image. Ce que j'aime dans cette séquence, c'est que la logique de l'environnement lui donne une sensation de fil conducteur d'image en image, ce qui guide l'attention du public.
Exemples de prise de conscience spatiale. Calendrier : les jours de la semaine reposent côte à côte, facilitent le passage de l'utilisateur entre chacun d'eux. Stellar : une application de storytelling pousse le thème plus loin dans son UI avec l'utilisation de pages. VSCO : des plateaux de contrôles agissent comme un kit d'outils que vous pouvez sortir par le bas. Nike Making : les catégories zooment en plein écran, poussent vers le haut, puis les couches de sous-catégories descendent et flottent en place.
Focus utilisateur
Le focus utilisateur guide l'attention de votre utilisateur et clarifie les états de changement. Il s'agit de contrôler les transitions de hiérarchie à chaque instant. Il met l'accent sur les bons éléments en fonction de l'objectif. Il peut y avoir plusieurs couches d'éléments travaillant ensemble pour soutenir cette action. Ce n'est pas toujours aussi simple que de mettre un élément au premier plan lorsqu'il est nécessaire peut-être que l'arrière-plan réagit aussi. Il peut s'estomper un peu ou s'assombrir afin de donner plus de prominence au focus. Vous verrez souvent une technique comme l'utilisation de contrôles contextuels ces petites actions importantes que vous voulez toujours avoir sous la main et vous savez qu'elles sont là mais vous n'avez pas nécessairement besoin de les voir tout le temps. Elles ne se mettent en focus que lorsque vous les appelez.
Le focus utilisateur aide à apporter de la clarté à chaque objectif de votre expérience. Clarté : admettons-le, ce n'est pas un principe officiel de Disney ! Appelons cela un 13e principe honorifique. Mais Glen me disait que c'est l'une des techniques les plus importantes qu'il a apprises chez Disney. Eric Larson insistait toujours pour qu'ils ne laissent jamais leur public derrière eux.
Une scène de Little Whirlwind, animée par Freddie Moore.
Chez Disney, j'entendais toujours parler de l'impossible plausible, disait Glen. Il y avait des moments où vous pouviez faire croire à quelqu'un quelque chose qui pourrait sembler ridiculement fou et ils ne le remettaient pas en question. Par exemple, dans Little Whirlwind (1941), il y avait une scène où Freddie Moore animait Mickey essayant de maintenir un panier de feuilles que le tourbillon continuait à emporter. Tout à coup, Mickey atteint le centre de lui-même et sort un énorme marteau. Il était si grand parce que c'était la seule fois qu'un public le verrait et c'était la chose la plus importante dans la scène à ce moment-là. Le public ne se demande pas pourquoi le marteau est là ou d'où il vient parce que c'est ce dont on a le plus besoin à ce moment-là. L'impossible plausible vous donne l'impression de pouvoir un peu briser les règles.
Si le public est avec vous, ils sont heureux. Si vous les perdez, personne n'est heureux.
Exemples de focus utilisateur. Pinterest : les contrôles contextuels apparaissent au moment où ils sont nécessaires. Notifications Paper : les couches d'animation guident l'attention le globe rebondit, le plateau glisse et il y a une légère lueur dans le titre. Peek : les sélections prennent tout l'écran, deviennent très lumineuses tandis que les autres s'estompent, les sélections flottent à nouveau en place lorsqu'elles sont terminées. Yahoo Weather : le mouvement est la première chose qui attire votre attention en bas ; communique la vitesse du vent.
Ton de la marque
Je dis souvent aux gens de penser à cela de la même manière que nous traitons les directives de copie. Chaque projet où nous réfléchissons, Si une marque devait nous parler, que dirait-elle ? nous devons également commencer à réfléchir, Si une marque devait bouger, à quoi cela ressemblerait ? Est-ce fantaisiste ? Est-ce rapide et puissant ? Est-ce un détail ajouté subtil qui aide les utilisateurs à reconnaître qui vous êtes exactement ? Montrer votre ton de voix laisse vos utilisateurs avec ces petits moments où ils ont envie de dire, Je pourrais totally voir cette marque faire ça parce que cela semblait si juste et approprié.
Pensez à toutes les applications, sites et expériences que vous utilisez au quotidien et pourquoi vous continuez à les utiliser. Souvent, il y a des dizaines d'autres applications là-bas qui peuvent faire la même chose et accomplir les mêmes tâches. Elles peuvent toutes avoir une bonne expérience utilisateur, mais celles vers lesquelles les gens se tournent ont quelque chose de plus. Vous avez l'impression qu'elles vous enchantent, ou qu'elles vous permettent, ou que vous en tirez quelque chose. Elles ont plus qu'une bonne expérience utilisateur. Elles ont un appel émotionnel. Appel est le dernier principe de Disney auquel nous ferons référence. C'est l'un des plus magiques, mais admettons-le, il peut être difficile de concevoir pour.
L'appel est une chose mystérieuse car vous savez quand vous l'avez et vous savez quand vous ne l'avez pas, mais vous n'avez aucune idée de comment l'obtenir.
Freddie Moore était un animateur chez Disney qui était vraiment responsable de la création du look and feel de Disney, a décrit Glen. Avant qu'il n'arrive, Mickey n'était qu'un cercle. Ce n'était pas le Mickey que nous connaissons aujourd'hui. Freddie a commencé à créer une relation entre chaque élément de ses personnages. Frank Thomas et Ollie Johnston disaient souvent aux animateurs, Chaque ligne se rapporte à une autre ligne. En dessinant Mickey, tout suivait un thème. Vous commençiez par le cercle de la tête de Mickey, puis vous dessiniez son nez pour qu'il pointe vers le haut et suive la courbe de sa tête. Ses yeux se rapprochaient du nez et se rapportaient à lui, suivis par ses sourcils et sa bouche qui montaient et poussaient contre sa joue. Soudain, il y avait quelque chose chez Mickey qui vous attirait. Mickey avait le pouvoir d'attirer un public parce qu'il avait de l'appel. Glen a cette croyance que chaque personnage existe déjà avant que vous ne les dessiniez. Lorsque vous faites cela correctement, vous les reconnaissez et vous êtes celui qui amène le personnage dans le monde. Lorsque vous avez de l'appel, vous trouvez ces moments et c'est une belle chose lorsque tout se met en place.
C'est la clé de l'appel. C'est comme l'harmonie des éléments un accord qui est parfait. Vous l'entendez et vous dites, voilà.
Exemples de ton de la marque. Snapchat : fantaisiste les fantômes sont devenus si iconiques, les gens ont hâte de voir ce qu'ils vont faire ensuite. Flickr : subtil et malin lorsque vous actualisez le profil de quelqu'un, les points roses et bleus iconiques tournent autour. Nike+ : toute l'application suit le thème de la course, avec des badges audacieux et puissants qui glissent en place sur la piste. Zappos : les gens aiment trouver des œufs de Pâquessurtout s'il s'agit d'un chat portant une cape.
Ces 5 principes sont ceux qui captivent votre public et la manière dont ils interagissent avec votre histoire. C'est votre responsabilité de créer une séquence d'expérience qui soit réaliste et émotionnelle, en reliant tous les points clés de votre travail. C'est là que nous commençons à résoudre les pièces manquantes et à définir les personnages de notre travail. Mais les personnages pour lesquels nous concevons ne sont pas seulement ceux à l'écran nous concevons également pour l'élément humain notre personnage principal est notre utilisateur.
Que ce soit des films, des applications, des sites ou des livres peu importe le contexte, le support, l'environnement, nos objectifs sont tous les mêmes. Nous interagissons tous avec notre personnage dans un récit, et c'est votre responsabilité de diriger l'entrée, la performance et la sortie de chaque personnage. L'interface que vous concevez est simplement une fenêtre sur une histoire plus large.
Concevoir pour le mouvement peut être quelque chose de nouveau et d'inconnu, mais nous avons tous vécu ces moments où vous vous retrouvez dans un nouveau problème et êtes à court de solutions. Glen a même partagé comment concevoir pour Duet était une tâche intimidante au début il était habitué à dessiner sur une feuille de papier où si un personnage sort de la feuille, il est parti. Mais dans cette expérience interactive où le public pouvait suivre les personnages dans toutes les directions, c'était comme s'il devait résoudre un canevas infini. C'est pourquoi avoir ces principes dans votre poche est une bonne chose ils serviront de fondation pour tout problème qui pourrait se présenter.
Je fais toujours ce que je ne sais pas faire afin d'apprendre à le faire. Picasso
FIN
BONUS : La création de la chorégraphie UX et comment j'ai eu la chance de travailler avec une légende de Disney
L'année dernière, j'avais un objectif simple : donner une conférence de design sur un sujet qui m'intéressait. C'était aussi simple que cela. Le design du mouvement est un sujet qui m'a toujours intéressée et que je trouve de plus en plus pertinent pour ce que nous faisons aujourd'hui en tant que designers UX et visuels, donc j'ai préparé une conférence lors d'un événement AIGA Mentor l'été dernier chez R/GA (et j'étais assez heureux d'avoir simplement accompli cela). Je l'ai soumis à SXSW sans penser qu'autre chose en résulterait, mais après une suggestion de trouver un animateur de Disney pour collaborer (où allais-je en trouver un ?!), quelques tentatives de contact, un coup de chance, une introduction aléatoire et les étoiles qui s'alignent j'ai été présenté à Glen Keane, légende de Disney. Glen a travaillé chez Disney pendant 38 ans et était l'animateur derrière les personnages de certains de nos films les plus aimés de tous les temps, comme La Petite Sirène, La Belle et la Bête, et Aladdin. Il a quitté Disney il y a 2 ans pour voir ce qu'il y avait d'autre et comment il pouvait appliquer son arrière-plan en animation à autre chose et continuer à se pousser (consultez son travail pour les Histoires Spotlight de Google, qui inclut son dernier court métrage animé, Duet). Lorsque je lui ai parlé de la chorégraphie UX, il était immédiatement intéressé (!). Vous voyez, lorsqu'il a rejoint Disney, les 9 vieux hommes devaient transmettre leurs connaissances des principes d'animation de Disney. Un jour, vous ferez des choses plus grandes que nous, a dit Ollie Johnston à Glen. Glen avait l'impression qu'ils lui avaient passé le relais . Il n'imaginait pas que ces principes de Disney seraient traduits en quelque chose comme l'UX, donc il voyait cela comme une opportunité de passer le relais à moi. Alors, il était une fois, nous avons collaboré sur une présentation absolument merveilleuse à SXSW. Je pourrais littéralement parler pendant des heures des histoires que Glen a partagées et de ce que j'ai appris, mais nous devrons garder cela pour une autre fois !
_Vous êtes arrivé jusqu'ici, alors merci d'avoir lu ! Si vous voulez plus de ressources pour commencer, en voici quelques-unes, ou tweetez-moi @beccau
Trouvez de l'inspiration
Beaucoup des exemples de cet article ont été sélectionnés par Alli Dryer, consultez son site pour voir des dizaines de grands exemples de mouvement en pratique.
autres favoris :
https://instagram.com/userinterfacesio
Autres lectures géniales :
https://medium.com/@pasql/transitional-interfaces-926eb80d64e3
http://www.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/
Apprenez les principes de Disney, puis commencez à créer des choses
http://the12principles.tumblr.com/
http://digg.com/2015/12-principles-animation-ollie-johnston-frank-thomas-alan-becker