Best way to indicate that a slider caption & call-to-action box is attached to an image?

Question

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:

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:

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.

Answer 1

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:

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

Answer 2

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.

Answer 3

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}