5

I'm working on a site where we display testimonials on the side of the page. We don't want these to be the main point of interest, so we dimmed the opacity, and on hover it goes to full opacity. We haven't run many people through the site yet, but when we were having people just checking for the content, they remarked that the testimonials were too difficult to read. So we obviously have to fix something.

How can I make it a little more obvious that hovering over the content will make it easier to read?

https://i.stack.imgur.com/VAho6.jpg

Improve this question
4
  • 4
    Welcome to the UX SE Timothy! Why do you want to de-emphasize the testimonials in the first place? They appear to be the most human element of the page, and could make your users' interactions with your site more conversational and more emotionally engaging. The initial testers' wishes to see the testimonial more clearly suggests that maybe it should just be easier to read in the first place instead of tweaking the opacity.
    – Graham Herrli
    Apr 23, 2013 at 3:58
  • Thanks 3nafish. Oddly enough that was my initial reasoning for adding the testimonials, and I can see how I have sort of undone that point by de-emphasizing. Whoops! That definitely makes sense.
    – TimothyBJacobs
    Apr 23, 2013 at 4:07
  • @TimothyBJacobs What happens on mobile devices?
    – Roger Attrill
    Apr 23, 2013 at 8:47
  • The columns become full-width with the testimonial on the bottom. The opacity is at 100% there.
    – TimothyBJacobs
    Apr 23, 2013 at 10:21

4 Answers 4

Reset to default
1

This may be a case of tailoring your content and page to show the correct visual hierarchy.

If having a testimonial isn’t the most important piece of content on the page and not what you want the user to focus on, you might consider moving it to the right column with the other content and putting it at the bottom.

You will also want to give it the least amount of visual weight so user’s eyes aren’t drawn towards it instead of the content you want them to see first.

You could achieve this by decreasing the font weight, picture size or border weight.

Visual Hierarchy

Objects with highest contrast to their surroundings are recognized first by the human mind.

When an element in a visual field disconnects from the ‘whole’ created by the brain’s perceptual organization, it “stands out” to the viewer. The shapes that disconnect most severely from their surroundings stand out the most.

Improve this answer
2
  • Yeah I see. It isn't necessarily the most important point, but I think it is something that I want the user to see first. Do you think that people will naturally transition to the next column? Or will that movement be somewhat clumsy and the user will get confused about what is next. On the other hand, if the navigation is on the right along with the main content, do you see people going straight from the nav to the content, thus ranking the testimonial lower on the hierarchal scale anyways?
    – TimothyBJacobs
    Apr 23, 2013 at 5:04
  • I think if the Navigation is positioned to the right side of the page, and the content is directly underneath, user’s eyes should flow directly vertical down the page. If the testimonial is something that you've identified to be fairly important and that should be immediately visible, you can attract more attention to it by either physically moving it up in the content hierarchy (on the right hand side) or by adding some visual weight to it.
    – OllieRoz
    Apr 23, 2013 at 6:41
1

Like 3nafish pointed out, the testimonial should be highlighted rather than de-emphasized.

But, if you are bound by someone/thing to keep it de-emphasized, you can use animation to suggest the user that the opacity of the testimonial changes. When the page loads, keep the testimonial highlighted for a couple seconds and then let it fade it, this should at least signal the user that the content can change. And when the bring their mouse over it to interact with it, the opacity will increase to make it legible.

Improve this answer
0

I think you are trying to make two different design strategy work together, and it might not give you the best user experience. If the intent is to not let testimonials obstruct the main content, then just have a link that you can click on and have the content pop up. Otherwise, make the testimonials clear but maybe use progressive disclosure to just show one or two lines from the testimonials and then have a "more..." link that brings up more content.

Improve this answer
0

Text opacity is a weird thing. We (UX and visual designers) love to do it because it reduces the "noise" on the page and lets us focus the user's attention on what we want. Thing is, it requires the user to physically move their mouse over the object they are interested in reading. This is true of blinds, rollovers, and any other type of reveal. You're putting onus on the user to take action simply to read something, which slows them down by impeding their view. Time after time in studies I have had users ask why something wasn't already open/visible to begin with.

For my money I would redesign the page so the testimonial can be read without any interaction required. Particularly since as your users are pointing out, it is difficult to know you should roll over the box.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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