La meilleure façon d'indiquer qu'une légende de curseur et une zone d'appel à l'action sont attachées à une image?
Je mets un curseur sur le site d'un client et je veux une légende et un appel à l'action dans une boîte `` flottante '' sur le côté, comme ceci:
Ils craignaient de rencontrer des problèmes pour trouver des images appropriées avec ce format (que l'image nécessiterait une mise au point dans les 2/3 de gauche de l'image et que le rapport d'aspect pourrait être trop large). Nous ne voulons pas augmenter le rapport hauteur/largeur du curseur, nous allons donc probablement utiliser ce format:
Ils aiment le rapport d'aspect avec cette option, mais le problème est maintenant qu'il semble que la zone de légende ne soit pas du tout liée à l'image (en particulier avec d'autres contenus au-dessus et en dessous du curseur). Quelle est la meilleure façon d'indiquer qu'ils sont liés? J'ai envisagé un simple triangle/flèche, mais il doit y avoir une meilleure façon de procéder.
Vous voulez donc créer une sensation de communité entre les blocs. C'est une tâche de conception visuelle claire. Expérimentez avec certains principes de la Gestalt pour le résoudre. Certaines options sont:
Vous pouvez également combiner les options pour trouver la meilleure solution.
Je pense que l'une des meilleures façons dans ce contexte est d'utiliser les couleurs de votre schéma de couleurs global pour faire ressortir ce message, donc si la page est principalement bleutée avec un soupçon de jaune, rendez la zone de légende bleue avec une écriture jaune (peut-être pas tout).
De plus, s'assurer que l'image et le texte sont liés d'une manière semi-évidente aide toujours, bien qu'être complètement évident peut manquer de créativité et apparaître cliché.
Si vous pouvez modifier légèrement le design, vous pouvez faire en sorte que l'image occupe la majeure partie du conteneur, avec la zone de légende recouverte de transparence, ce qui donnerait une impression de la légende attachée à l'image avec l'arrière-plan légèrement visible.
Vous pouvez voir un exemple de travail en cours ici.
Je n'ai pas encore fait ressortir autant de messages de diapositives que je le souhaite, mais j'y travaille.
Un indicateur de flèche devrait faire l'affaire. Si vous ne voulez pas mettre la flèche à l'intérieur de la boîte, vous pouvez la fixer sur le bord de la boîte pour le même résultat.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
