Interaction de carte extensible
J'essaie de créer une carte avec du texte/des images à l'intérieur, qui peut se développer et exposer plus de contenu si un utilisateur clique sur le bouton de développement (une énorme flèche vers le bas).
La façon naturelle de le faire serait évidemment d'ajouter le contenu supplémentaire à la partie du canevas qui se dilate.
Cependant, dans mon cas, tout le contenu de la carte sera réorganisé. Cela signifie que le contenu de la zone de carte plus petite d'origine, une fois contracté, changera une fois développé.
Quelle est la meilleure façon d'y parvenir? La carte se trouve dans une page Web.
Je pense à le faire comme ça:
- La carte se dilate.
- L'ancien contenu disparaît progressivement et le nouveau contenu apparaît progressivement.
Est-ce que ça sonne bien? Ou existe-t-il de meilleures façons de procéder?
Vous avez une bonne intuition pour envisager d'autres options. La décoloration totale du contenu entrera en conflit visuel avec l'animation en expansion; ce sera gênant.
Au lieu de cela, je concevoirais les versions compactes et étendues de la carte de telle sorte qu'une partie du contenu soit toujours visible. Une photo, un nom ou un titre, peut-être un en-tête de section, reste visible tandis que l'autre contenu est effacé lors d'un clic de souris. À la fin de l'animation d'extension de carte, déplacez les en-têtes de manière synchrone vers leurs nouvelles positions, puis fondez rapidement le contenu ou ne conservez que le contenu persistant qui peut rester statique et ajouter plus de contenu.
Le but est de changer le contenu de l'élément de page, sans dissocier l'élément de son contexte. Jouez avec l'animation pour qu'elle semble "naturelle", si je peux utiliser ce mot sans soulever le sujet du skeuomorphisme.
Si la disposition de la carte change, il vaut peut-être mieux utiliser une autre métaphore pour la carte développée. Par exemple, vous pouvez afficher les données personnelles de quelqu'un en tant que vue Carte de visite ou Vue passeport. Dans ce cas, votre variante 2 avec décoloration fonctionne bien.
Une meilleure façon consiste à effectuer une transition en douceur des éléments vers leurs nouvelles tailles/formes et emplacements, en maintenant la continuité afin que cela soit moins déroutant. Les faire disparaître et les fondre dans une nouvelle forme/un nouvel emplacement perdrait leur continuité et serait légèrement déroutant ("est-ce le même élément, ou est-ce un nouveau?"). Les éléments nouvellement révélés peuvent apparaître en fondu et les éléments peuvent être masqués car il n'y a pas de continuité à préserver dans ces cas.
Des compétences de mise en œuvre quelque peu avancées sont nécessaires, mais elles seraient à la fois utilisables et "intéressantes". Soyez sûr et gardez la durée de transition courte, comme 1/2 seconde ou moins.
Vous pouvez probablement mettre une ligne épaisse en bas, afin que l'utilisateur puisse comprendre qu'il peut cliquer dessus.
Et après avoir cliqué sur un linecard peut être développé avec une animation dépliée, montrant de nouvelles informations sur les endroits qui étaient auparavant cachés.