Design Inconsistency in Tabs

Hi, nice redesign — I appreciate the conciseness and the attention to streamlining end-user goals. But as a designer, an inconsistent design cue jumps out at me immediately. Within the tables, you use the tab style for the table headers.

While this might not seem important to you, popular design language suggests that rounded top style borders are tabs that are clickable. However within the tables, these rounded tops are not clickable. In fact they are actually table headers that use the .nblu class to quickly grab the blue background.

What this does is muddy the look of the page from obvious row of tabs to implicit tabs everywhere. Sure, devs will learn or know to filter this inconsistency, but it will add a second or two of confusion to any reasonable person. and IMO, when taking an end-user-centric approach to design, we have to eliminate any source of confusion even if this confusion is only temporary. Why? Confusion adds stress, decreases efficiency, and decreases enjoyment of a product — be it a web site or program or physical product. Overall this impacts negatively of the perceived professionalism, enjoyment and reputation of the site.

Fixing this can take a lot or very little time. I give you 3 options to fix it, in order of what would take the most time to the least time. Another opinion of mine is time will be spent on one end or the other. So, the less time taken in producing something means the extra time end users have to use to adjust to a product which only increases with more users. So, either you “pay” for it in the front end or the back end. User Centric Design is about eliminating as much time taken by each and every user within reason. So, if it takes you 5 years to design something that decreases user time by 1 second, then it will take over 31 million uses to recoup that time. However, if it takes you 8 hours to make something that saves 5 minutes per use, it will take only 96 uses to get a return on everyone’s time. Some people might not care, but hey, I always try to think of the greater good.

Looking at it, there are 3 ways to fix this.
Now either you could rewrite the layout to use divs and write CSS to treat certain child divs of a revamped "tab-content" as table rows and cells. This could take a few days or weeks depending on your site’s complexity.
or
You could change the "tr" to the approriate Table Header ,and remove the border radii from the ".nblu" class (and move it to another class for true tabs).
This might take a few hours to tab through a find-replace-skip-cycle for the entire site
or
the fastest/cheapest solution would be to add
border-radius: 0 !important;
to
.tab-content
(on line 563 of style.css)
which took me about 10 seconds to type.

Any of these would fix at least this one problem. Doing the first might make the site display differently in different browses.
I would probably use option 2.5: define
td.bluhead {background-color: #338CC5; color:#FFFFFF;} with the background and do a global find-replace of “class="nblu tabcontent"” to “class="bluhead"” for now.

Thanks.
M

I agree that tabs will be more intuitive if they appear clickable to the users.

This update did not change the tab styles. Those came from the design contest that happened in 2010.

There were a few new button like styles added this time. So the clickable tabs may look somehow like that.

It seems the necessary changes are minimal, so I will add that to my to do list. There is a list pending minor things to do. Those things were postponed to after the launch because it was planned to happen now that it is the 15th birthday.

Thanks for the suggestions. Just let me know if you figure any other inconsistencies. That is helpful feedback.

I have just improved the styles of the clickable tabs.

I understand you were talking about the other tabs that were not meant to be clickable. I may change those tab styles to something else to make them not be confused with the selected tab styles. I am just not sure what should I make them look like yet.

Anyway, now the clickable tabs will change the background color and and the text becomes underlined when you hover them. Hopefully this will help the user realize that the other tabs are not clickable because they look the same when you hover them.

Just let me know if you have other suggestions.