How to arrange Buttons and Tabs together?

Question

A web app has two parts - A header and A body. The header consists of a set of tabs. When hovered on, the body is loaded with appropriate content. One of the tabs, is also clickable (In the mock - Button). Hover fills the body, but click performs certail action. The three tabs are denoted using icons with similar dimensions - which leads to a confusing user experience

The issues being:

1. Its not clear that Button is clickable, whereas a hover is sufficient for the actions of the other tabs
2. Different semantics of icons arranged together might be difficult to understand

I thought of having two horizontal bars, one for the button and another for the tabs. But this makes the UI clumsy and complicated. The tab functionality (showing content appropriate for the tab) for Button can be dropped

How do I go about including buttons and tabs in the same horizontal bar, yet providing the user with an intuitive experience?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

Will this work?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Due to some limitations of the wireframe tool the text sizes are different; graphically it should be designed to be more consistent. The idea is that you convey the tabs using the tab design, but one of the tabs also includes chrome around the word that indicates clickability (a button). It's visually embedded in the tab and so choosing to press the button obviously highlights the tab as well. The others have no button chrome.

The second thing, and this I could not demonstrate well because I could not think of a use case, is the names of the buttons. The word in the first button should be active, a verb, indicating what will happen when pressed. The words in the two tabs should be nouns or adjectives, indicating what will be shown. This also will subtly reinforce the UI.

I would like to add a note: Icons Only is a bad idea unless you are doing mobile development. Some large online apps (notably: Gmail) have changed to icon-based actions, but this is to make their UI consistent between mobile and desktop versions. They are sacrificing desktop usability in order to unify their interface. If your space is not severely constrained you should use words, or words + icons, as labels for your actions.

^{download bmml source}

Also, the chrome you use to indicate the tabs is certainly not fixed; I believe that the chrome used here on UX is too understated to be completely usable, but there are other methods that do not include a large colored box around the tab label.

Answer 2

If I understand you correctly, then if you indicate that the body is related to one of the buttons by simply incorporating an arrow into the dividing border it will both be clear which button is currently selected for the body and that it is possible to select another button in order to change what is in the body.

Eg as in this slightly awkward looking mockup (I couldn't see a way to draw thinner lines!)

^{download bmml source – Wireframes created with Balsamiq Mockups}

Much the same idea as the border between buttons and pages on this very site: