Catégories
Astuces et Design

La règle du prototype papier | Astuces CSS

J’ai eu la chance de travailler avec certains des meilleurs designers de l’industrie, notamment Zhenya Rynzhuk, Louis Paquet, Maria de la Paz Vargas et, bien sûr, des dizaines d’incroyables designers de MediaMonks. De nombreux projets sur lesquels nous avons travaillé nécessitent une animation personnalisée et des consignes permettant aux développeurs d'être pleinement créatifs et de repousser les limites de ce que nous pensons possible avec CSS et JavaScript.

Ensuite, il y a d'autres projets qui manquent de ressources. Ce sont ceux qui finissent par devenir une opportunité pour nous en tant que développeurs pour prendre les devants sur la façon dont certains éléments de l'interface utilisateur s'animent et si les directives que nous créons contribuent à une excellente expérience utilisateur. Ce sont généralement des projets dans lesquels une simple astuce peut nous aider à déterminer si nous sommes sur la bonne voie.

Il se trouve que j'ai une astuce simple qui m'a aidé à tester rapidement si mes animations atteignent la cible. J'aimerais le partager avec vous maintenant. je l'appelle La règle du prototype papier.

L'état d'esprit d'impression

La conception Web (peut-être inconsciemment) hérite de beaucoup de choses de la conception d'impression. Si vous y réfléchissez bien, certains des modèles Web interactifs les plus élémentaires, tels que les accordéons ou les onglets, ne sont qu'une représentation numérique de la façon dont nous avons physiquement stocké des informations dans le passé.

Je soupçonne que les plus jeunes développeurs de mon équipe n'ont jamais eu à faire face à un classeur papier de leur vie.

Même si l'industrie a adopté une mentalité plus axée sur le numérique et a dépassé le paradigme de l'impression au cours de la dernière décennie, nous avons souvent du mal à sortir de cette mentalité d'impression. En tant que développeurs, il peut sembler que nous ayons été câblés pour animer des éléments d'interface utilisateur dans un ennuyeuse manière standard qui ne va pas au-delà de la référence des morceaux de papier en mouvement.

La règle du prototype papier

J'ai recueilli quelques conseils et bonnes pratiques au cours de mes années de travail avec d'autres personnes et les ai développées en quelques règles simples pour travailler avec l'animation. Bien que je considère les règles plus comme des directives ou une référence personnelle, j'ai récemment débloqué plus de valeur en commençant à les transmettre à mon équipe.

Et c'est grâce à La règle du prototype papier quels États:

Si vous pouvez utiliser un prototype en papier pour recréer l'animation, vous devrez probablement y consacrer plus de temps.

L'intention n'est pas de trop compliquer les animations, mais de profiter des avantages de la création d'un numérique expérience qui est diplômée des concepts d'impression. Et le principe est assez simple. L'animation peut-elle être prototypée avec du papier? Si oui, nous pouvons faire mieux. Si non, alors nous sommes sur quelque chose.

La règle du prototype papier en pratique

Ne vous méprenez pas, le prototypage papier s’est avéré être un excellent outil de test utilisateur. Mais nous pouvons utiliser la simplicité de sa nature pour déterminer quand nos interactions sont trop simples.

Essayons un exemple.

Presque tous les sites Web standard ont une sorte de navigation. Supposons donc que nous héritons d'une maquette de conception qui fournit une direction pour les états de navigation actifs et inactifs. Bien sûr, nous pouvons le faire. Ce n'est pas si dur.

Pouvons-nous reproduire cette expérience avec l'impression? Bien sûr. Tout ce qu'il faut, c'est empiler un morceau de papier sur l'autre. On peut faire mieux.

En supposant que les compositions que nous avons reçues manquent de direction pour la transition entre les états de menu ouvert et fermé, nous pouvons améliorer l'animation avec la propriété transform. Cela seul améliore considérablement l'expérience:

Le simple fait de faire glisser l’état actif du menu de gauche à droite aide l’utilisateur à comprendre la transition et fournit un contexte pour savoir où il se trouve. Il ne fait aucun doute que le menu est une superposition qui couvre le contenu de la page. Cela n’était pas évident avant l’ajout de la transformation. Nous pourrions dire qu'avec une simple ligne de CSS, nous faisons maintenant le travail.

Alors posons-nous la question: pourrait cette l'interaction être représentée dans un prototype papier? Ma réponse immédiate est: Oui. Cela signifie qu'il y a encore beaucoup à faire.

Nous pouvons utiliser notre état d'esprit numérique pour créer quelque chose qui ne fait pas que faire le travail, mais améliore l'expérience. Nous pouvons jouer avec des techniques telles que la décoloration, le masquage, la parallaxe, l'échelonnement ou simplement la division du menu en différentes parties qui s'animent indépendamment. C'est l'occasion de faire preuve de créativité et utilisez nos côtelettes frontales pour créer un numérique expérience.

Afin de garder les choses simples, voyons à quoi cela ressemblerait après avoir appliqué certaines techniques de base:

On y va! Maintenant, nous commençons à nous éloigner de la mentalité du papier. Le papier peut-il glisser de gauche à droite? Oui. Mais peut-il faire fondre le contenu avec une animation décalée? Pas que j’ai vu!

Et, comme je l’ai déjà dit, nous pouvons faire beaucoup plus ici. Mais je pense que vous avez compris. Vous pourriez passer plus de temps à jouer avec les animations pour trouver l'interaction «parfaite», mais cela dépendra en grande partie du projet. Le but de cette règle est de nous éloigner de la mentalité de conception d'impression et d'embrasser les possibilités que nous avons pour créer des expériences numériques uniques.


Une fois que vous aurez commencé à mettre en pratique la règle du prototype papier dans le cadre de votre processus de développement, vous vous retrouverez probablement à essayer de trouver les outils pour continuer à améliorer votre métier. Je recommande toujours de lire les principes de base de l'animation et d'être toujours à la recherche d'une nouvelle inspiration provenant d'autres sites Web.

Ainsi, la prochaine fois que vous travaillerez sur un carrousel, un modal ou tout autre composant interactif, prenez un moment pour vérifier votre approche d'animation. Passe-t-il le test de prototype papier?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *