I have a website typingspellingmath.tk and usually when I show someone the webpage they will not recognize the text on the top is links. What can I do to make users recognize the links such as color changes or putting a box around the links

  • thankyou everyone for your suggestions I have implemented two of them on my website – Aiden Grossman Jun 2 '15 at 13:35

Admittedly when I first opened your link, I couldn't see tabs anywhere until I moved my mouse over them.

I feel the first step to making these more tab-like is to make them less sentence-like. The spacing, font, and consistency with the following text misleads the user.

A more tab-like feel could be achieved in a number of ways, to name a few:

  • Change the font to a Sans-Serif font. Arguably Serif fonts work best for bodies of text because they make it easier to follow a string of characters. A Sans-Serif font would typically appear just as readable but lends itself better to breaking the 'follow on' effect. Maybe use narrower character spacing or small caps to amplify this.

  • Make the labels appear as blocks. This doesn't need to be literal, but hardening the division between words will help break the sentence structure. This could be done by using a background colour in a block behind the text, underlining it, or using different colours (careful with this one) to differentiate the tab labels.

  • Be consistent with other experiences. These tabs don't look at all like tabs, so the user has no idea what behaviour to expect. By making these tabs present as tabs (think Bootstrap) the user would more quickly interpret your design.

  • Show selection. Show that the users navigation is currently on a particular tab by making it 'active'. This could be a highlight, change of colour or style, or a simple underline.

  • 2
    Just to illustrate Gui's suggestions, I simply added like 5-ish CSS properties on web page: Image (imgur.com) – refreshfr May 31 '15 at 2:12

Looking at you site you can hardly recognize those are tabs

  • initially we are on the home tab, but we cannot see it is selected
  • therefore we cannot see which of the tabs are hidden

To change both of those points we would most likely highlight the current tab and kind of combine it with the underlying context. I would choose one of the following:

1.) only underline currently selected tab or underline all tabs and highlight the currently selected tab

enter image description here

2.) use a border for all of your tabs and the currently selected one is connected to the content - therefore has no border-bottom

enter image description here

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.