2 links to different paths within 1 image box

Question

Similar to say images on the CNN or USA today home page. I have a slider display of images that will look like a bunch of small snapshots of reports. The reports will have the report name underneath that acts like a standard link. Clicking on the link will open the report. My issue is we have 2 behaviors we want to trigger. One is opening the report, the other is opening a lightbox that contains the report details. I have an image to represent the opening of that secondary action. (translation issues prevent the use of text links)

While there is a hand indicator and tool tip on both paths (report name link, and open report details), visually it isn't prominent that there are 2 actions. The icon for the secondary path (open report details) visually over powers the desired primary action - to open the report. I need a way to visually show the user there are 2 different paths. I can't use dimming the image, and I can't use strong colors - I have to stay within the color guidelines of company. I can't use another icon since longer term we will have more icons. I have the secondary path (icon) in a faint color and at the bottom right of the whole container - out of the way from the image and report name. I have a container for both the image, the report name link and the icon that represents the report details popup. The container outlines in a different color when that report is selected.

After a few sample reviews, people are not clicking on the link or the image - they are assuming the little gray icon is the way to open the report. Thus my issue - the main desired path is not visually strong enough despite have the most real estate.

Any suggestion for making the primary action more prominent?

Answer 1

Placing the icon at the top right of the image might work. You need to disassociate the icon from the report name, and putting some distance between them is a good way. You can also put some kind of a visual separator between the two - maybe even something as simple as a | .

Answer 2

Would help a lot if you could provide a screenshot of the layout you're describing.

If it's possible, I would recommend putting an information icon ("i") in the top-left corner (top-right might feel like a close icon position). Similar to how CNN have placed the "play" icon to signify video content (see pic).

Also, what is the reason for having the secondary action (the report details overlay)? And what is this information that this provides to the user?

Cheers.

Answer 3

An example: the grid view Zappos lets you click to view the item on a new page, or click the "Quick View" button (that appears on hover) for a lightbox-style view.

You could also try teaching people what certain icons/buttons/links do with a Tipsy-style tooltip instead of browser-default tooltips that only appear after a delayed hover.

A screenshot or mockup of your application would definitely help.