Styling links in a web app

Question

I am building a web app that will have a large number of clickable elements. The problem is if I style this with web best practice i.e. different colour/underlined etc the app looks a mess due to the vast number of links. see image

If I dont style the links I may ruin the usability but if I make them obvious it could look hideous and distracting. Web apps like feedly are using links that are not immediately obvious unless you hover on them but their positioning is quite standard which helps.

Are hover states enough for users to discover links or is there another way to keep a clean style that does not ruin UX?

Answer 1

No, hover is not enough. Lack of mobile support aside, you turn your interface into minesweeper where users have to hunt and peck through the UI with their cursor to determine if something is static information or an element they can interact with. It increases cognitive load, slows task completion, and instills a sense of unease in the user.

One of the challenges "flat" designs create is how to give affordances to the user.

A List Apart has an interesting piece on this subject which is relevant here.

These are the 3 ways flat interfaces often struggle:

1. Lack of affordance (affordance is how much the design of an object—physical or digital—suggests use, like a chair inviting you to sit)
2. Insufficient distinction between form elements (e.g., fields versus labels versus instructions versus buttons)
3. Insufficient hierarchy within categories of form elements (e.g., primary versus secondary buttons)

I really recommend you read the entire article, but here is how they recommend giving afforance to field elements and buttons:

1. Make Fields look hollow: give fields a border or inset shadow, even if only 1px side; eliminate background color
2. Make buttons look raised: Include drop shadow, rounded corners, gradient, or border, however slight or subtle; Use a background color different from that used for both the page and form fields.

Here are two examples they provide to illustrate these concepts:

A combination of these approaches may allow for the flat aesthetic to be maintained while providing clues to your user that help them know what they can and cannot interact with.

Answer 2

A hover change is generally accepted as enough to indicate to the user that there is a possible action. The change can be done on the pointer (change from arrow to hand) or to the item itself (underline, font color, background color, tooltip).

Look at the various elements of UX.StackExchange, you find various different styles of items:

• obvious actions (share, edit, flag, add comment) are not underlined, but the background is changing on hover

• links inside text is in different color:

And so on.

Different hover states to use depend on the context, the type of action, etc.

Answer 3

This is the age old tradeoff. A "clean" aesthetic without underlines vs. the more usable underlined links.

I usually think the usability is more important than the aesthetics on this point but ultimately the decision is up to you. If you browse the web you'll see many, if not most, sites don't underline the links. Many of them suffer from usability (like this stackexchange!).

If you do go without underlines there are a few things you can do to mitigate the loss of underlines.

• Make sure there is good distinction between unvisited link, visited link and normal text colors. (I think visited link color of this site is too close to that of normal text. Don't do that.)
• You can make the links bold. This is somewhat nonstandard, and doing so means you can't use bold for other purposes. But it does make links more recognizable.
• You can put a border-bottom on links. At first this might seem just like an underline, but you can control the color of the border to make is more subdued. Also you can make it dotted or dashed.