How can I make these links more obvious to click on?

Question

I'm working on a website redesign for a dental laboratory.

While testing the home page with a user, they never clicked on the links in the subnavigation. They clicked on the larger buttons in the links to the main pages.

The assumption when I created the wireframe was that the user would click on the descriptive links based on what they needed to do. I thought it would be super convenient to have a list ready for them to just click on the action that they intended to do.

I will admit that the testing was likely horribly flawed because this site is aimed at dentists and dental assistants, but the people in the first test group were office workers. I tried to explain not to overthink it and just to accomplish certain tasks. But they kept giving aesthetic feedback, so I wasted time explaining that it is a prototype and I did not need their advice on graphics (in a polite way of course).

I also admit that this might not even be a big deal, they competed their assigned tasks super fast regardless.

EDIT: After some suggestions from other professionals here, I created another revision (not yet tested with users). And this shows more of the page for additional context.

Please keep in mind that I am not a visual designer, so forgive the "developer art." Taking a content first design approach. I just kind of threw it together to test the layouts.

Answer 1

I believe the users that didn't want to read much will find that the buttons are not obvious enough and the primary button stands out and it catches the attention.

I can suggest two options:

1. Create a subtle button for each link like the one shown in the image below
2. Use the same arrow as the other button and highlight it so the user can quickly identify that is a link - use language that they identify

The idea is to show the user what is clickable and what is not without having the user moving the mouse around and finding out.

Consistency is key. If you use arrows for buttons, make sure all the buttons have arrows. If first level buttons have a blue background, maybe second level buttons have a gray background. Whatever design you choose, always make sure it has some consistency across the site.

Answer 2

What probably happened is your test subjects scanned the page for a logical next step in navigating towards their goal. The buttons jump out at you and look like a logical step into the structure of the site. With such a clear action open for them, users will usually not spend much time figuring out what else to do on this page. If your test subjects were not engaged by the content, because they probably did not understand much of the jargon used in the other links, I don't think it's strange they did not try the other links. The links look fine: they're a different color than the non-clickable content and they're blue, clear enough indications that they can be clicked.

They look like quick links that will allow returning visitors to jump to a subsection. If that's what they're supposed to do, you'll need to do more sustained testing to see if they're working.

There are some things you could try to test for though:

• Did they understand it's possible to click these links
• Did they understand what clicking them would do
• Do the links make sense in relation to the content

Answer 3

I'm intimidated by the sentence "More options on Example page". I could make a mistake by clicking on one of the above links. I could arrive at a dead end. Then I'd have to go back. I would have lost time ... I would always choose the safe route through the overview page.

Secondly, I'm used to navigate from the general page to the more specific page. At the moment my options are presented the other way around, or not well enough explained respectivley.

One option could be:

Write one or two sentences below the Thumbnail (I'd expect content there), then write "More information on our Example page", then the button, then write something like "Or access popular pages directly", then the links.

Answer 4

Add a lot more vertical white space between the links. This subtle isolation from the rest of the page gives your link columns a unique visual hierarchy that is easily distinguishable. The white space will add more legibility and dominance to your links.

Answer 5

Testers naturally are not like the users you will receive on your website. Users visiting your website will be there to seek out information about a product or service whereas a tester is there to just test functionality and see how the website flows. The primary buttons catch the eye a lot more than the subnavigation and are the obvious next step in progressing through your website.

The links are obvious that they are clickable but the problem is they don't draw the user in enough. However before making too many changes to them I'd suggest to do more testing with other users first

Answer 6

I think the problem here is that the design doesn't follow the web navigation conventions.

It does not have the typical persistent navigation:

• first of all it makes me think a lot while it should be straightforward
• its location is not standard; I would expect it at the top or on the left but not in the middle of the Home page (if that is the Home page...); you can replicate (part) of the navigation on the Home page i.e. quick links but it shouldn't be the only mean of navigating the website
• the primary navigation items i.e. "Services" are below the secondary navigation items i.e. "BruxZir", "IPS e.max" while logically they should be above because it's a hierarchy. Sure, there is also the title in black but it doesn't seem clickable so it's not a navigation element but a mere description of the panel's content
• the primary navigation items are buttons while they should be links; we associate buttons with actions and links with locations, mixing them is confusing
• the secondary navigation items are not underlined so there's nothing telling me they're links until I hover them (poor discoverability)

Another person was recommending more text below the thumbnails. I give you the opposite advice, omit needless words. If the navigation isn't easy enough you won't make it any better with some happy talk.

And the instructions must die. The users won't read them anyhow but just scan quickly.

TL;DR: there would be nothing wrong if those links weren't the only way to navigate the content. It is confusing because it does not follow the conventions (usability sacrificed to design).