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.

This question may be a little vague, but thought I would ask anyways.

I'm working on application that has alot links and actions visible in my interface.

Most of my actions are accompanied by some sort of icon and had a yellow color applied.

My links just have a yellow color applied.

My issue is that on some screen, there are alot of links and actions available is actually making it hard to find. So I decided to change my actions to blue, to help them stand out more.

Would you suggest having seperate colors for links and actions? Or do you think that would make things worse. screenshot

share|improve this question
    
Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions. –  Code Maverick Mar 13 at 18:03
1  
@CodeMaverick I would disagree,this is not a site review question but feedback on best practices for links and call to actions –  Mervin Johnsingh Mar 13 at 18:11
    
@MervinJohnsingh Not as stated. It would need to be reworded. –  Code Maverick Mar 13 at 18:16
add comment

2 Answers 2

up vote 4 down vote accepted

I ran your image through this color blind checker Coblis — Color Blindness Simulator and this is what is your site or app is going to look like to a person who suffers from monochromacy

enter image description here

Now taking this as an example,you have a number of problems here

  • Your links have no visual affordance that they are links and they just seem like text without color. Links are expected to have a visual affordance such as an underline which informs users that it differs from the content on the site. As per MSDN's link design pattern guideline

The fundamental guideline is users must be able to recognize links by visual inspection alone—they shouldn't have to hover over an object or click it to determine if it is a link.

Even if you dont consider users with colorblindness (which would be a mistake) expecting your users to determine a link is a specific color would confuse them (another confusing thing is your link is an yellow color which is not the normal color you associate with links)

  • You are using blue links with a blue icon to as call to actions. While they still stand out a bit more due to the button background they still suffer from low contrast. The lack of consistency in call to action designs is also confusing as your "Add a member" CTA is a button while "Print view" and "Export view" are just icons and text and the lack of an affordance on them can confuse users further

Here is an article I recommend you read about the importance for visual affordance for links

The importance of visual affordance in hyperlink design

There are plenty of excellent article on how to design call to actions and a quick google search will give you the answers you need on how to design effective call to actions. Here are a few for your reference :

Call to Action Buttons: Examples and Best Practices

Everything Marketers Should Know About Secondary CTAs

share|improve this answer
    
Thank's for the feedback Mervin. You confirmed what I was thinking, that the actions did not stand out enough. Not overly worried about the color blind issue, this app is going to be re-themed when complete, going to go for a light theme, this is just to dark. –  Mark Mar 13 at 18:29
add comment

I would like to add that based on your screenshot, it looks like part of what's clickable is not actually links but column headings of a table.

This falls under column headings best practices for displaying data in a table. Not only should it be obvious that it's clickable, but it should be obvious that it's a row of table headers that will make the data sortable as well.

Here is an example:

example

share|improve this answer
add comment

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.