Why you shouldn’t use tab style for navigation links

I am working on a service that allows users to hire a tutor.

In the screenshot below, you can see the initial design of the navigation bar. The items are links, but they are styled like tabs.

However, this design is potentially problematic. Below I will explain why and how we solved this problem.

Issue with tabbed links

Styling links like tabs is confusing to the user. After all, when you click on the link, the content is displayed only after the page is refreshed and the focus moves back to the top of the viewport.

But tabs work differently: when you click on a tab, the content is displayed instantly, without refreshing the page and keeping the focus on the tab.

Users using the keyboard to navigate can use the left and right arrow keys to switch tabs. However, they will not work with a list of links.

And users who use screen readers might expect certain features, such as using a label to move focus to the appropriate tab bar or announcing which tab is selected.

UI elements should look like tabs only if they behave like tabs, otherwise it can be disorienting and confusing for users.

How we solved this problem

Because our navigation bar does not work like tabs, and because we want to reduce the risk of confusion, we have moved away from the style of making links visually similar to tabs.

“But they still look a little like tabs.”

Admittedly, the new design still makes links look a bit like tabs.

I think the reason is that many sites use a less traditional style for tabs.

But we can t do anything about it.

Our service, like many others, consists of navigation bars and tabs that behave differently.

Using different styles for navigation and tabs will allow users to use them effectively and efficiently.

Conclusion

Making links look like tabs makes them harder to use.

This is not surprising, given that one of the basic tenets of good design is that elements should have a traditional look.

Fortunately, this problem is fairly easy to avoid, giving users a better chance of managing tabs and links in an optimal way.

This means we can spend time learning more important and risky assumptions.