9

On this page, we'd like to let the user know that the big captions over the images can be clicked. (We don't have any links right now.) The pages that open will be on the same server, so the "External Link" icon from Fontawesome won't work. We'd like it to be unobtrusive yet easy to notice, if that were possible! Not all captions will be clickable; just some.

We thought about underlining the items, but that's too ugly in this case. What UX elements would make this obvious both for mobile and desktop users?

UPDATE: Here is the carousel on a mobile device:

enter image description here

And here it is on the desktop:

enter image description here

  • 3
    Also, since this is about UX, what exactly is the name of the site? mmjum? mimijurri? rrirrijurri? I get what you're trying to do, but you you can see how the logo can cause confusion. Especially when you're trying to build a brand. It also doesn't necessarily look like english, or convey the "Made In America" feel. – dberm22 Mar 26 '15 at 12:47
13

Consider using an arrow or caret to denote there's deeper content. It's a common enough icon that's used often at the end of a text blurb for Call To Action buttons. It's not ideal, but should translate okay on a carousel title.

e.g.

enter image description here

enter image description here

enter image description here

  • A follow-up slightly unrelated: How do you make it obvious in the carousel that there's content below the menu? The user would just need to scroll down. But we don't want to create the confusion that the carousel scrolls down. – Alex Mar 25 '15 at 20:24
  • @Alex What you have right now for mobile is not ideal. Just going from your screenshot, your page header with the logo looks like a footer. Does the carousel need to be so large & prominent on mobile? Carousels in general don't have a very good click through rate based on research. It may might way more sense to skip the carousel completely so a mobile user can quickly find what they're looking for. – nightning Mar 25 '15 at 20:45
9

Two approaches:

  1. Denote the caption better as an interactive element. See nightning's excellent answer on this.

  2. Make the entire image clickable (not just the caption). Clicking on the body of the image opens the link, and clicking near the arrows operates the carousel navigation.

    • As an aid to web users, you can play with different hover animations (image brightness etc) to provide additional interactability cues.
2

Also underline. An arrow is probably better in 88% of cases, but if adding an arrow seems to disagree with an UI then underlining is definitely the way to go. If you're going to introduce shopping, even more so.

I'm just say saying.

(tags don't include <u> ?)

  • 88% of the time? That's a pretty specific claim. Could you point to a source? – Mayo Apr 1 '15 at 1:23
  • @Mayo I meant 88.88888%. – Jedi Commymullah Apr 1 '15 at 1:54
1

I'd just like to provide a slight counterpoint - not quite answering your question (tohster and nightning have done that well), but answering a point behind your question:

Carousels are bad UX.

See http://shouldiuseacarousel.com/ . It makes the point succinctly and effectively. It references pages such as http://www.widerfunnel.com/conversion-rate-optimization/rotating-offers-the-scourge-of-home-page-design and http://www.creativebloq.com/accessibility-expert-warns-stop-using-carousels-7133778 .

On this site, all the top six or seven answers on Are carousels effective? answer in the negative, with quotes like:

  • Thanks, AlexC. What are some good alternatives to carousels? I think one reason they're used so heavily is because they display a lot of information in a small space, though not effectively as research has revealed. – Alex Apr 1 '15 at 1:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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