Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

enter image description here

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?

share|improve this question

3 Answers 3

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:

enter image description here

Facebook example

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.

share|improve this answer
    
Thanks for the post. This is really interesting. What caught my eye is the fact that in the two examples you have highlighted the clickable links to terms of service and home are not highlighted as links in any way and its only their positioning that gives them away. –  Drdavidpier Oct 29 '13 at 21:14

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

enter image description here

enter image description here

  • links inside text is in different color: enter image description here

And so on.

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

share|improve this answer
2  
Hover has lots of drawbacks. 1) you have to bring your cursor in the area before you are aware of a possible action at all, and 2) does not work on mobile. These are the two most prominent arguments why I wouldn't rely on hover alone. Note that the SE example you use has both an action word and a special stand-alone position which both make it look very action-like even without the need to hover over it. –  Rumi P. Oct 28 '13 at 11:43

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.
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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