web-dev-qa-db-fra.com

Comment clarifier le message de cette image de héros?

Vous, comme beaucoup d'autres, pouvez avoir du mal à comprendre ce que signifie cette photo de héros:

Hero Image

Vous pouvez également consulter la page de destination réelle pour voir à quoi ressemble la même image sur un grand écran.

J'avais l'intention d'exprimer un utilisateur surpris par les résultats soudains de l'engagement élevé de son public.

  • Étant donné que l'entreprise pour laquelle je travaille se concentre sur le suivi et l'amélioration de l'engagement du public, l'intention était d'utiliser cette photo de héros pour communiquer un résultat merveilleusement positif de l'utilisation de notre produit.

Bien que beaucoup de gens ne comprennent pas le message, j'aime la photo prise par héros car elle attire une réponse émotionnelle intéressante.

Comment puis-je clarifier le message de cette photo?

1
analog-nico

Votre mise en page incite les utilisateurs à penser beaucoup

En surface, votre mise en page suit un classique Z-pattern pour l'œil:

enter image description here

Les motifs en Z sont couramment utilisés et peuvent être efficaces. Mais pour communiquer un seul message la mise en page doit suivre un récit .


Voici où ça commence à mal tourner ...

(Suivez les chiffres dans la capture d'écran ci-dessus)

  1. Le motif en Z commence par des mots qui sont à angle droit avec différentes polices. Ceci est inutilement compliqué à lire pour les utilisateurs.

    • En plus de cela, les mots sont cognitivement dissonants (morning et fame n'apparaissent généralement pas ensemble dans la même phrase et encore moins juxtaposés).
    • En plus de cela, la palette noir sur jaune à contraste élevé rend les mots encore plus déroutants.
    • De plus, le mot fame est divisé en fa.me ce qui ajoute encore plus de complexité cognitive.
    • Donc, juste au point d'entrée de la page entière, l'utilisateur peut déjà ne pas se sentir bien.
  2. Ensuite, l'œil pourrait se déplacer vers le visage. J'aime l'expression saisissante ... elle attire l'attention. Mais sans explication claire, l'expression faciale n'a aucun sens. Il est donc essentiel que la prochaine étape du chemin visuel explique le visage .

    • Notez que le placement du tableau d'engagement obstrue le téléphone portable et la tasse que l'utilisateur tient, ce qui détruit le récit de la photo. Les images de héros ne peuvent pas être occultées si elles font partie du récit! La mise en page doit inclure tous les éléments clés de l'image du héros : le visage, le téléphone portable et la tasse.
  3. L'utilisateur se déplace maintenant en bas à gauche. Le texte aligné à droite peut sembler une bonne idée de mise en page, mais il est difficile à lire: d'abord, il est en majuscule, et ensuite, il est aligné à droite, ce qui le rend différent de ce que les lecteurs anglais attendent généralement.

    • Plus important encore, cela n'explique pas l'expression du visage dans le plan du héros. L'utilisateur est donc toujours confus.
  4. Enfin, nous arrivons au graphique, qui a le seul mot ENGAGEMENT. Ce graphique est également difficile à comprendre car il ne raconte pas une histoire claire ... les barres ne montent pas directement au fil du temps, mais montent et descendent de manière confuse, suivies d'un pic à la fin. Mis à part la couleur jaune, rien ne montre ce que signifie réellement la pointe.


Une meilleure façon ...

Est d'utiliser le flux visuel pour raconter l'histoire. Cet exemple de mise en page utilise un flux visuel clair, une mise en page et un alignement plus cohérents et l'utilisation d'indices (ellipses, lignes de repère) et d'espacement pour raconter l'histoire plus clairement.

enter image description here

  • Le lecteur entre en haut à gauche
  • Elle lit le texte d'introduction avant de voir l'image, donc elle comprendra ce qu'est l'expression (surprise).
  • Elle se déplace sur l'image et apprécie l'expression drôle.
  • Elle se déplace ensuite vers le bas vers le téléphone ou directement vers les résultats ... dans les deux cas, la proposition de valeur est claire car la disposition triangulaire face-téléphone-graphique à barres renforce le message que l'utilisateur vient de lire.
7
tohster

Pour être honnête, l'émotion qui communique l'image, au moins pour moi , est celle d'une personne en colère scandaleusement choquée. C'est quelque chose dont j'ai discuté dans une autre question: si vous allez utiliser des émotions, assurez-vous qu'elles sont indubitablement compréhensibles.

Cela étant dit, l'œil va directement au visage en colère, et il n'y a aucune explication du tout pourquoi ce gars est si ennuyé. Votre texte en bas à gauche est absolument secondaire et hors du courant, la boîte avec les barres est à peu près un point d'interrogation, je ne sais pas pourquoi il est là et que représente-t-il dans le contexte.

Enfin, le nom de votre site. À moins que votre site ne soit fa.me (ce qui ne semble pas être le cas), je serais très prudent quant à l'utilisation de cet élément d'une manière et d'une position aussi exceptionnelles.

Maintenant, passons à votre question: si vous êtes prêt à utiliser cette image, supprimez la "boîte de fiançailles" et placez le slogan principal au-dessus de l'image afin qu'il y ait au moins une explication pour l'image. De cette façon, vous obtiendrez une émotion douteuse, qui est renforcée par le slogan. Les utilisateurs peuvent penser "j'aurais utilisé une autre image", mais au moins il y a moins de marge d'interprétation.

Et à part cela, votre page de destination n'a pas de CTA. en tant qu'utilisateur, que dois-je faire de votre page? Quelles sont tes intentions?

En bref: en toute honnêteté, je me débarrasserais de cette image immédiatement, me concentrerais sur la copie, le slogan, le contenu et les actions de l'utilisateur, puis renforcerais le message avec quelque chose de plus heureux, comme une belle fille tenant un téléphone avec un "oh oui!" expression (juste une idée, bien sûr).

Et désolé si je parais dur, ce n'est pas du tout mon intention, juste être franc sur votre site

EDIT: ce que je voulais dire pour l'expression est quelque chose comme enter image description here, seulement que moins "stock-y" et ennuyeux. N'oubliez pas de toujours raconter une histoire avec vos images, de les rendre personnelles, de connecter l'utilisateur au site et au service (les images boursières ont tendance à être horribles à réaliser cela car elles sont trop générales). Essayez également de fournir un contact visuel du modèle à l'utilisateur ou du modèle au slogan/CTA

2
Devin

J'avais l'intention d'exprimer un utilisateur qui est surpris par l'engagement soudain et élevé de son public.

L'image que vous utilisez représente-t-elle quelqu'un qui exprime cette émotion? Ne voulez-vous pas que cette personne en soit positivement heureuse?

Le langage et le style visuel renforcent-ils ce message? Devrait-il être sur le ton affirmatif avec des indices visuels plus audacieux (et/ou plus lumineux)

Vous avez une idée de comment rendre le message plus explicite?

Il existe de nombreuses stratégies, mais vous devez définir le public et vous assurer que vous pouvez tester pour voir si c'est exactement ainsi qu'il perçoit votre message.

La façon la plus courante de rendre le message plus explicite est de créer une phrase ou une déclaration visuelle accrocheuse et mémorable (ou les deux) et de mener à un appel à l'action clair et simple.

1
Michael Lai