How to indicate to a user that an image/emoji is clickable

Question

I'm building an app where a user goes by an emoji.. that is their "profile name" so to speak. The problem I'm having is that it's not very intuitive that you can tap on a users emoji to get their profile page.

Usually with a name or username it's normal to tap on their name to view more about them, but with an image/emoji, I don't think it is...

This is how my layout currently looks:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Is there a way to indicate to the user that they can in fact tap the icon/emoji to see more? Once someone knows they'll know forever, but I'm not sure it's intuitive in the beginning.. is it?

Answer 1

Interesting Question Jane, I read through some NielsenNorman Guidance at this link... https://www.nngroup.com/articles/clickable-elements/ ...and there was some good info there. That said, it sounds like you are wanting a little stronger hinting to your users that the emoji itself is clickable.

I'm not sure how grand a solution you desire. You could add a slight animation to the emoji, maybe a glow behavior, or slight movement. Nothing drastic. I'd also add a hover tooltip on the emoji, that informs the user to click to view a profile. Its important that this animation is very slight as to not become intrusive or irritating to the user.

A really nice feature would be to recognize that the user has hovered or clicked the emoji previously, and to not display the animation/hint anymore. This allows that assisted initial discovery, without future irritation.

Thanks!