What techniques can be used to make promo boxes afford tapping?

Question

On a mobile website, without recourse to hover states. What design techniques can we use to make promo boxes afford tapping?

I'm running into UX trouble when doing the mobile translation for a desktop site with a very flat design aesthetic (no z-ordering, no image layering, no drop-shadows, flat buttons, etc).

The biggest problem I've run into is with the internal promotional boxes. On the desktop site, these are rectangular boxes with strong imagery and text that are part of the site navigation.

Because they're mostly images, and don't often have a strong CTA, on desktop they rely on the rollover mouse-pointer change to signal that they're a link.

On mobile however, I have to use the same image and text, but don't have the luxury of a rollover cursor change.

Is there anything I can do to signal that these are navigational elements, and not just pretty pictures on the page?

I've considered using the borders to make them look like buttons, but that clashes with the flat design of the rest of the page, and I've also considered adding the rollover "hand" icon as a greyed out image layered over the bottom right of the promo, but that's both non-standard on mobile, and might not be visible against some images.

Is there another solution to making this navigation discoverable that I've not considered?

Answer 1

Try using a stylized right-pointing triangle just before the text.

By "stylized", I mean in keeping with your site's colour scheme, and possibly with a little subtle 3D bevelling on it, depending on context. You can probably find a lot of examples of this kind of subtle link indication around the web; it's not that uncommonly used.