User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
One page of my website has several different related tabs. One of those tabs, however, only will contain a single link to an external site, which makes the page seem very empty when that tab is active.
One suggestion was to have the tab be a "dummy tab" that instead of acting as a tab usually does (show new content), would actually be a link to that external site.
Which of those two options (mostly empty tab content, tab as a link) is better? Or are there any other ideas that would work better?
You could have tabs, and have the external link off to the side:
This way you can keep the name as the general content type (but not make them click a tab just for a link), and show them the URL (and the concept/functionality) they're going to get:
Put some explanation of what that url is on last tab . Put url at centre.
By 'dummy tab' you mean placing that link directly onto the surface, in lieu of a tab? Yes, that is preferable to my mind. It presents crisper, more direct navigation: Your link doesn't need to be discovered beneath a tab that presumably has to hint at the presence of a link, which is superfluous... unless your hyperlink is extremely long and for some reason (legal?) must be presented in full, rather than by shortcut label.
I assume your page has fixed tab count - users cannot add or subtract any tabs. Further, each tab is labelled. If label text length differs significantly, tab width either adapts to label length and is thus variable, or the width off all tabs is determined by the longest label and applied throughout, i.e. all tabs have uniform width. In neither case must the tab structure consume the full nominal width of your page, or require you to hide tabs behind a 'more...' hint.
Have you got responsiveness built into the tab UI? What happens when the browser is dragged to less than nominal page width? How does your page adapt to viewing on different devices?
This matters because by placing a link, or link button, at eye level with a tab structure we intentionally disrupt a pattern convention, and that disruption needs to look purposeful.
To achieve that I can only provide an opinion, so here's how I would do it:
Place your link button into the last, that is, rightmost in most alphabets, position of your lineup (not first or into the middle without compelling contextual reason). Align the button text vertically to the tab text labels and match them in terms of font, size, weight, and visual rhythm, so that the link button is part of the family and does not 'sing off-key'.
However make that link button identifiable as such. It's a question of giving it just the right amount of affordance in contrast to the tabs. In older textbooks you'll find more prescriptive rules such as 'it has to be blue and underlined which is no longer rigidly applicable as long as the link button communicates click me and I'll take you elsewhere. On that note: Map the command 'Open in a new (browser) tab' to that link button so that when inadvertently clicked your user isn't forcibly taken away from the original page.
To match the tab-vs-link affordance, give your tabs a more conventionally 'tabbish' look for sufficient functional differentiation. Contemporary tab UI leans toward reductionism by hiding tab outlines and showing floating text only, with the click target revealed by fill colour change or an underscore on hover (bonus: With 'loom shuttle' style motion). That trend is laudable. But in this instance too much of it may conflict with the objective of providing your users with enough cues that they can tell 'these are tabs' and 'that is a hyperlink'. Test this with users as a matter of course, and iterate to find that sweet spot.
With the above, you will...
Avoid presenting users with an awkwardly void page under a single-function tab that only contains a hyperlink (people expect more content under a tab structure);
Make it abundantly clear right at the surface level that there is a hyperlink to some external content without need of discovery;
Keep your content - from what I can tell - nice and compact.
