User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am putting a slider on a client's site, and want a caption and call-to-action in a 'floating' box to the side, like this:

enter image description here

They were concerned that they will have issues finding proper images with this format (that the image will require a focus in the left 2/3 of the image, and that the aspect ratio might be too wide). We don't want to make the aspect ratio of the slider bigger, so we will likely go with this format:

enter image description here

They like the aspect ratio with this option, but the problem now is that it looks like the caption area is not related to the image at all (especially with other content above and below the slider). What is the best way to indicate that they're related? I've considered a simple triangle/arrow, but there must be a better way of going about it.

share|improve this question
up vote 1 down vote accepted

So you want to create feel of commonality between blocks. It is clear visual design task. Experiment with some Gestalt principles to solve it. Some options are:
gestalt principles

You also could combine the options to find the best solution.

share|improve this answer
Thank you for the Gestalt link and for making the diagrams! :) – Nathron Jun 22 '13 at 23:33

I think one of the best ways in this context is to use colours from your overall colour scheme to make this message stand out, so if the page is mostly blues with a hint of yellow, make the caption area blue with some yellow writing (maybe not all).

Additionally, making sure the image and text are linked in some semi-obvious way always helps, although being completely obvious can lack creativity and appear cliche.

If you can alter the design slightly, you can have the image take up most of the container, with the caption box overlaid with transparency, that would give a feeling of the caption being attached to the image with the background showing through slightly.

You can see a work-in-progress example of this here.

I haven't gotten the individual slide messages to stand out quite as much as I want yet, but I'm working on it.

share|improve this answer

An arrow indicator should do the trick. If you do not want to put the arrow inside the box, you can have it attached on the edge of the box for the same result.


download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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