0

I'm finally adding another page to a website I own, naturally this requires the ability to navigate to/from the two pages of the website.

I've completed a simple navigation bar that blends into the overall design of the website:

enter image description here

When hovered over the link has an underline:

enter image description here

The problem is that the navigation isn't obvious and so users may not be aware that they are actually links. I've considered adding an underline to indicate the current page (in fact, I probably should) but however I still feel that the links are not obvious.

What can I do to make the links/navigation obvious?

  • I like the permanent underline. One other option to consider is to make them blue. Needn't be the ugly default HTML a tag blue, but underlined blue text is a common indicator that something is a link. A little chain-link icon might help too. OTOH, those things could hardly be anything BUT links. You may be fine just as it is. – Ed Plunkett Jun 16 '16 at 17:14
3

simply style them as buttons, this way there won't be any doubt at all and you'll eliminate any friction on the perceived affordance of these elements. It's as simple as that.

Otherwise, underline them, just as you mention.

But more important: use one color for links and a different one for text. Your perception probably comes from the fact nothing (absolutely nothing) says those elements are links, so sticking to conventions will make wonders

3

I like the style you have going on. Try breaking up the two links into buttons like this?

enter image description here

You don't have to underline text in a button on hover. Underlining is meant more for in-text links. Perhaps add a subtle drop shadow on hover for each button.

  • These are LITERALLY text inputs. With a subtle shadow on default state (not hover), maybe it would have some resemblance to a button, but right now these are just text input elements, almost on its default state – Devin Jun 16 '16 at 22:09
-1

The most obvious way to make something look like a link is to underline it. So underline. I think, from your example, that these are clearly links. The position, the container, and the words themselves, even when the hover state is not activated, say 'link'. Why are you unsure about the obviousness of these links? How do you know? If you test with users (proper tests), I think you will find that nobody is having a problem identifying these for what they are. You can test even with a screengrab on a piece of page. Ask people to touch what they see as links (i.e. don't lead them by saying something like 'how would you get to the home page') and I believe you will see them put their finger right where you want them to. User testing can be that easy. Test this with eight people. That is enough.

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.