14 tips to make tabs on the site more convenient

Original author: Justin Mifsud
image

Tabs have long been used to give the user a kind of informational alternative at the same level of program structure. These are “modular tabs” that can still be found on various sites. So, for example, on the portals of Ryanair, EasyJet, AirMalta airlines, modular tabs are used to switch between booking flights and hotels, as well as car rental.

As the number of sites grew, tabs began to be used for navigation. This approach was first used by Amazon in 1998. Although he eventually abandoned tabbed navigation in 2007, there are still great, original examples of how to use them for modular switches and navigation. In this article I ( author of the article- approx. translator) I’ll give a list of 14 tips that you can use as a list of necessary conditions so that the tabs are the most convenient for users.

What's good about tabs?


When they are used correctly and tastefully, tabs become that important element of the user interface, thanks to which the site will be convenient to use. And all because:

  • They are great metaphors. In the terminology of user interfaces, a metaphor is an idea or object designed to bring together the user and the program. That is why the use of tabs becomes a great metaphor, because they look almost like real tabs in a folder from a file cabinet. Thus, the user intuitively understands that the tabs divide the contents into parts, and, like in real life, by selecting the desired folder in the card file, which on the site corresponds to clicking on the tab, he receives the corresponding part of the data;

    image
    Tabs on sites resemble real ones in a file cabinet

  • They improve data organization. Tabs divide content into meaningful sections that take up less space on the screen than when they were located on the same page together at the same time. At the same time, access to data is simple and understandable;

    image
    On the AirMalta website, tabs effectively share reservation related data

  • They are pleasing to the eye. Properly implemented, tabs can improve the appearance of the site, because thanks to their form and functionality, they become an interesting interface object that is difficult not to notice, but easy to use.


Key recommendations



I compiled the following list by combining data from various sources with my personal experience. Of course, there may be other tips and tricks, but still this list can be considered the most effective if you want to make sure that your tabs are really good.

1. Tabs should look and behave like tabs. Users have some knowledge and experience about how tabs should look and how to deal with them. They expect behavior similar to what they are used to in reality. Deviation from the norm can be confusing.

2. Place the navigation tabs at the top of the page.If they are used for navigation, it is best to place them on top, since it is there that visitors to the site will look for them. The location of the tabs below, on the side, or, what’s good, outside the visible part of the screen increases the likelihood that they simply will not be noticed. Always remember that users begin to explore the site before it is fully loaded. They immediately focus on the upper left of the screen and expect to find at least primary navigation there.

3. Arrange them in a row. Stacking tabs on top of each other worsens the interface and complicates navigation. This tip applies to tabs at the same level. Tabbed navigation can be used and is good for representing hierarchies.

image
The 2000 amazon.com view shows why tabs in multiple rows are bad

4. Always pre-select one of the tabs. This makes the vital tab more meaningful, especially during the first few seconds.

5. Clearly identify the currently active tab. This can be achieved by changing the color, increasing the size compared to inactive neighbors, scaling the text of the caption, or by moving the tab to the foreground. Also make sure the label is easy to see and readable.

6. Clearly select inactive tabs.Make sure that the inactive tabs really look like that, at the same time they should be visible, and the labels should be easy to read so that the tab can be selected if necessary.

image
A great example of highlighting active and inactive tabs

7. The active tab should be associated with the data area. To strengthen the connection with real life, you must make the tab appear attached to the corresponding data area. This is what users expect.

image
The Delibar application site shows an interesting approach in attaching tabs to content

8. Arrange the tabs in the correct order.You must determine if there is an order in which the placement of tabs will simplify the use of your site. It is important to put yourself in the place of the user and be guided by his logic, and not his own.

9. Tabs must be signed in plain language. This will facilitate their understanding and use. It will also be easier to predict the type of related content.

10. The inscription should consist of one or two words. Labels should clearly define the purpose of the tab in a maximum of two words. This will increase the likelihood that the user will not make a mistake with the choice. Limiting yourself to two words, you will also choose the best options for the inscriptions.

11. Use the case correctly.Only the first character of each word of the inscription must be written in capital letters. Just like the entire text on the site, it is not recommended to write the whole caption in capital letters, because it will be more difficult to read (although, thanks to the previous paragraph, the negative effect will be minimal).

image
The inscriptions on the tabs are long and fully uppercase (example from onebigfield.co.uk)

12. Ensure fast switching. Users expect content to appear faster if they click on a tab rather than a link. This can be achieved, for example, by preloading in the background. You can use any technique for the effect of quick switching, the main thing is that the user feels a physical connection between clicking on a tab and downloading data.

thirteen.Provide a “grouping” of related tabs. If you have several tabs, then, quite possibly, you will want to group similar ones in meaning. In this case, an additional connection, such as color, may be useful. However, do not rely on color alone, because one part of users may suffer from color blindness, while the other simply will not understand what you used it for.

image
Using color to group tabs on inkd.com

14. Do not use tabs instead of secondary navigation. Although they can be used to explain where you are in the structure of the site and where you can get, tabs should never be used instead of the so-called “breadcrumbs” (English breadcrumbs) "Breadcrumbs" show the hierarchy of the site "in depth" and not "in breadth", unlike tabs. Users are familiar with both elements of the interface and know what to expect from them. Replacing one with another can adversely affect the usability of your site.

image
The PSDtoDNN website effectively combines tabs with breadcrumbs

. translator - I think the article is still relevant, and the advice contained in it can be effectively applied to improve your sites.

Also popular now: