1

You, like many others, may have some trouble understand what this hero shot means:

Hero Image

You can also check out the actual landing page to see how the same image looks on a big screen.

I intended to express a user who is surprised about the sudden high engagement results of his audience.

  • Since the company I work for is all about tracking and improving audience engagement, the intent was to use this hero shot to communicate a wonderfully positive result from using our product.

Although many people don't understand the message I like the hero shot photograph because it draws an interesting emotional response.

How can I make the message of this shot clearer?

  • 1
    Can you post an imgur.com link to the photo of the surprised guy? I'd like to post an answer with a mockup. – tohster Jun 17 '15 at 1:43
  • Awesome tohster, I look forward to it! You can take it from here: us.fotolia.com/Content/Comp/75619461 – analog-nico Jun 17 '15 at 2:36
  • 1
    I think he looks like someonr who id angered about the way it's currently working. I think your company wants to put a smiley on this mans face instesd of this. I'm sorry but he doesnt oook surprised – BlueWizard Jun 17 '15 at 9:55
7

Your layout is making users think WAY to much

On the surface your layout follows a classic Z-pattern for the eye:

enter image description here

Z-patterns are commonly used and can be effective. But to communicate a single message the layout has to follow a narrative.


Here's where it starts to go wrong...

(Follow along with the numbers in the screenshot above)

  1. The Z-pattern starts with words which are right angled with different fonts. This is unnecessarily complicated for users to read.

    • On top of that, the words are cognitively dissonant (morning and fame don't usually appear together in the same sentence let alone juxtaposed).
    • On top of that, the high contrast black-on-yellow palette makes the words feel even more alarmingly confusing.
    • On top of that, the word fame is broken up into fa.me which adds even more cognitive complexity.
    • So right at the entry point for the entire page, the user may already not be feeling great.
  2. Then the eye might move to the face. I like the arresting expression...it draws attention. But without a clear explanation, the facial expression is just meaningless. So it's critical that the next step of the visual path explains the face.

    • Note that the placement of the engagement chart occludes the cellphone and mug that the user is holding, which destroys the narrative of the photo. Hero images can't be occluded if they are part of the narrative! The layout needs to include all the key elements of the hero image: the face, cellphone, and cup.
  3. Now the user moves onto the bottom left. The right-aligned text may seem like a good layout idea, but it's hard to read: first, it's capitalized, and second, it's right aligned which makes it different from what English readers typically expect.

    • More importantly, it doesn't explain the facial expression in the hero shot. So the user is still confused.
  4. Finally, we get to the chart, which has the single word ENGAGEMENT. This chart is also difficult to understand because it doesn't tell a clear story...the bars don't go straight up over time but go up and down confusingly, followed by a spike at the end. Aside from the color yellow, there is nothing to show what the spike actually means.


A better way...

Is to use visual flow to tell the story. This example layout makes use of clear visual flow, more consistent layout and alignment, and the use of cues (ellipses, leader lines) and spacing to tell the story more clearly.

enter image description here

  • The reader enters from the top left
  • She reads the introductory text before seeing the image, so she will understand what the expression is (surprise).
  • She moves onto the image, and enjoys the funny expression.
  • She then moves either down to the phone or right to the results....in either case the value proposition is clear because the triangular face-phone-barchart layout reinforces the message that the user has just read.
  • 1
    You are my new hero tohster! Your deconstruction of the original image taught me a lot. And your mockup has a so much more precise message that it makes me speechless. What makes me think, though, is that Morningfame actually does not help the user to improve the engagement like e.g. a social media marketing tool. Instead it is a pure analytics tool. So maybe the intended message was not the best one to begin with. Anyways, your input upgraded my way of thinking so I am confident to come up with something spot on! – analog-nico Jun 17 '15 at 4:04
  • 1
    @analog-nico glad to help. yeah to be honest i intentionally misrepresented the business a bit because we try not to do site reviews here on UX StackExchange so I didn't want to do a redesign for your site specifically...so I intentionally changed the message to avoid the hazard of giving you free labor or free advertising =) – tohster Jun 17 '15 at 4:07
  • 1
    Oh, I see. I agree with this site rule. Luckily, this page contains many insights others can learn from as well. Thanks again for your feedback @tohster ! – analog-nico Jun 17 '15 at 4:29
  • 2
    Brilliant. I read (and thought so myself) that the image must change, but here you used it to convey the message. Kudos. – virtualnobi Jun 17 '15 at 6:37
2

To be honest, the emotion that communicates the picture, at least to me, is of an outrageously shocked angry person. This is something I discussed in another question: if you're going to use emotions, make sure they're unmistakably understandable.

With the above being said, the eye goes directly to the angry face, and there's no explanation at all at why is that guy so annoyed. Your text on bottom left is absolutely secondary and out of the flow, the box with the bars is pretty much a question mark, I have no idea why is it there and what does it represent in the context.

Finally, your site's name. Unless your site is fa.me (which doesn't seem to be the case), i'd be very cautious about using that element in such an outstanding way and position.

Now, on to your question: if you're dead set on using that image, remove the "engagement box" and place the main slogan on top of the image so at least there's an explanation for the image. This way, you'll get a dubious emotion, which is reinforced by the slogan. Users may think "i'd have used another image", but at least there's less margin for interpretation.

And other than that, your landing page doesn't have a CTA. as an user, what am I supposed to do with your page? What are your intentions?

In short: in all honesty, I'd get rid of that image immediately, concentrate on copy, slogan, content and user actions and then reinforce the message with something happier, like a beautiful girl holding a phone with an "oh yes!" expression (just an idea, of course).

And sorry if I sound harsh, is not my intention at all, just being upfront about your site

EDIT: what I meant for expression is something like enter image description here, only that less "stock-y" and boring. Remember to always tell a story with your images, make them personal, connect the user with the site and the service (stock images tends to be horrible at achieving that because they're too general). Also, try to provide eye contact from the model to the user, or from the model to the slogan/CTA

  • Thank you very much Devin! Indeed, your feedback is hard to digest ;)) but it is honest! If you talk to people in person you just don't get that. Thanks about the suggestion about repositioning the elements. BTW, this layout is already in place if you use a small screen (smartphone, tablet) in portrait mode. However, I think I should at least rethink the whole design from the ground up. Thanks again! – analog-nico Jun 16 '15 at 22:43
  • 1
    yes, I know sometimes I may sound harsh, hence why I have to explain it's not my intention. I was checking your site on an iPad at first since I was out of my office. Got back to my huge monitor and the image loses quality, so be careful with that as well. – Devin Jun 16 '15 at 22:50
1

I intended to express a user who is surprised about the sudden high engagement of his audience.

Does the image that you use portray someone who is expressing this emotion? Don't you want that person to be positively happy about it?

Does the language and visual styling reinforce that message? Should it be in the affirmative tone with bolder (and/or brighter) visual cues

Do you have an idea how to make the message more explicit?

There are many strategies but you need to define the audience and make sure that you can test to see if that's exactly how they perceive your message as well.

The most common way to make the message more explicit is to create a catchy and memorable phrase or visual statement (or both) and lead onto a clear and simple call-to-action.

  • Good point Michael, the text and the image tell different stories! And of course I start to get convinced to find a better picture depicting the intended emotion. The target audience are mostly semi-professional or professional individuals who already use analytics. Would it make sense to you to maybe move the text (or parts of) that is currently next to the iPhone animation to the top? – analog-nico Jun 16 '15 at 22:54
  • 1
    My take on the position of the image and text is based around whether you want to make a direct link between the two, or whether you intend to draw attention to people who are either drawn to visual or textual stimuli. Also, because people tend to read from top to bottom and left to right, it also determines what people will see first. – Michael Lai Jun 16 '15 at 23:02
  • Thanks a lot for your input, Michael! This will help me to formulate good questions the next time I interview potential users so I can find a message that resonates well with them. – analog-nico Jun 16 '15 at 23:08
  • 1
    Just one extra thing, I don't know what the branding of the product/service is, but generally it is considered standard/best practice to incorporate it in the design so that it sticks in the mind of the audiences. – Michael Lai Jun 16 '15 at 23:10
  • 2
    In that case, you might not want to use so much of the yellow because it might also be the case that people get too overwhelmed by the amount of yellow (e.g. its usage across the entire left hand side) rather than using it to just catch their attention (e.g. the colour of the last bar in the graph). – Michael Lai Jun 16 '15 at 23:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.