6

We were conducting user tests, in which we gave the user some tasks to perform, on a set of interactive wireframes we had created. All links on the page were blue (shown below).

Because the links were the only text on the page that weren't black, and there is no imagery, the users were instantly attracted to the blue links. Because of this, the person running the user tests made the decision to make the links black.

Having the links blue made the user ignore everything else on the page, which is unrealistic, whilst making them black again makes it hard to tell what text is a link and what isn't, which is also unrealistic as links will always have a color.

What is the best way to display links?

enter image description here

|improve this question
  • 5
    Did you try to keep them black, but underline them? – André Mar 13 '13 at 10:05
  • Blue and underlined - that's not unrealistic. Did they really ignore everything else on the page? – Roger Attrill Mar 13 '13 at 10:13
  • 1
    I guess Richard meant that it is unrealistic, not because using blue for links is unrealistic, but because links being the only object on the page with color and thus standing out like they do in the mockup is unrealistic. – André Mar 13 '13 at 10:23
6

How about making all hyperlinks grey & underlined? That way they appear softer against the black content text. The underline will help with definition. The screenshot is a very lo-fi prototype, so I guess it also depends on what you're testing for - ease of navigation, content & information placement, access to important information, etc. Prototypes like this have to be conducted with some degree of flexibility in interpretation, as the user will change their behaviour depending on what is visually available.

|improve this answer
2

If you perform tests on wireframe, then you need to keep the the experience as close to the real website experience as possible (considering low fidelity of the wireframe, of course - so I don't mean using graphics).

In the final website the links, tabs and buttons will be exposed (by proper styling including onmouseon styles). If you don't provide these, the experience will be abused, and the test results will be inadequate.

So, my advice is:

  • do not hide links, but keep them exposed by proper styling
  • do the same for the other clickable elements.

This way you will keep testers focused on the links, buttons and tabs (same as real users will be in the final product).

|improve this answer
0

  1. The links being more obvious is not necessarily a bad thing -- links should be visually distinguished and obvious. I've done numerous usability tests using black and white wireframes with colored links, and it has never been an issue. The blue may be slightly more obvious, but if you are testing a low-fidelity wireframe, you are not testing visual design anyway. I would assume you're looking at navigational paths, content organization, etc. -- that feedback is unlikely to be affected just because links happen to be blue.

  2. Another option if you really, really are anti-blue, is to make all the non-link text on the site gray (such as hex color #666) and make the links black. You need some visual differentiation. This I think is more unrealistic than using blue, but if you are still facing resistance to the blue, at least this leaves everything in grayscale.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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