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:
- Its not clear that Button is clickable, whereas a hover is sufficient for the actions of the other tabs
- 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