I'm trying to determine how to represent the state of an action that navigates the user to another page.

Currently, the action is present by a hover event on the text field, which I find isn't too intuitive and the default behaviour.

Trying to determine how to better display this in an intuitive matter but with my current real-estate, I find there are not many ways to convey this.

Note: This is typically displayed in a table-like format with multiple rows and other actionable states on the cards. Having the ability to click the whole card does not work in the full context!

This is what I have for the display:

enter image description here

3 Answers 3


There's already more than one convention for that: when you hover over active text, it lights up. Click it and you go somewhere (or, more precisely, "somewhere" comes to you).

Generally, unless there's some real reason that a convention will not work in your situation, you should follow the convention. The basic principle is: eliminate surprises.


MMacD has already nailed it, i think, by suggesting you stick with conventions.

Because i cannot add a comment to his post, i'll simply add my additions as an answer: Assuming standard conventions work (hover-over links will change their color), you can emphasize interactivity with some other CSS tricks.

For example, instead of just including a static arrow icon -> you can instead transition it in, or make it bounce to the right side when someone hovers over the text. You can do the same with a PDF icon to help emphasize the file type it is: on hover-over, fade-in or add drop shadow to the icon.

If you dont think the hover-over text effects are effective enough, you can add additional effects for that interaction: add a drop shadow to link text, add an underline to text, make it fade/transition into another text color...

It seems to me the pickle you are in is not to find a new interactive convention, but simply polish a standard interaction scheme.


Simple icon as a hint

Use a persistently visible icon to indicate the expected action.

Design with right arrow next to title indicating link

I'm assuming that your users are fully aware that the object is a file and that files are the only type of object being linked to. If that is not the case, I would also provide some kind of icon or label indicating that it's a file or the type of file.

File link with file type icon

Update in response to the OP's comment ...

When in doubt, make it obvious

If you want to make the action as clear as possible, just spell it out and create the appearance of a button.

File link provided as a distinct button

Note that the button doesn't necessarily need to be the only target area. If the whole card is the target, make sure the button lights up in some way to indicate the function.

  • I've attempted to use an icon like that and didn't feel it worked in the context. And yes, this is a task that they will work against on a file they are directed to. ux.stackexchange.com/questions/98084/…
    Aug 17, 2016 at 17:45
  • ^ See my update for a more self-apparent solution. Aug 17, 2016 at 18:09
  • Sorry, file in this context is actually another web page specifically. They files are not actual "file context" more so something the system has documented/created. -- Edited to reflect this.
    Aug 17, 2016 at 18:21
  • How does that change anything (other than the file icon)? The user is still "opening" a record. Aug 17, 2016 at 18:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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