Tappable bar in a histogram


Suppose I have a bar graph on a mobile device. Something like this:

Now, if I want my bars to be “tappable”, what could I do to make them visually look tappable to the user?

For example, if clicking on the pink bar in the above image takes me to the detailed info on firefox usage, how can I visually design the bars so that the user knows they are tappable/clickable?

Any suggestions please?

That’s actually a terrific question. I guess one solution (probably not the best but it could work) is to add a “+” symbol (maybe inside a circle) somewhere in the bar (or above). I guess an arrow pointing up could do the trick too.

To make it easy to understand, maybe a brief text under the graph title that reads " click the + symbol to view more info"

1 Like

hmm, What if you made the bars look even more ‘buttony’, by adding a slight shadow (to make the bars look raised) and even more of a highlight than you already have.

THEN, also implement that same ‘button’ convention consistently to other areas of your site; On items which are obviously clickable. That way, you’re sort of teaching your users ‘Anything that looks like this, you can click on’.

1 Like