2

It is known that in-page links can be confusing, but also are helpful to easily navigate through page content.

For tabs, there are some design guidelines too. A good article is this: "Tabs, Used Right" | Nielsen Norman Group.

It is not clear for me if is a bad practice, for example, a reference in the content of the first tab to the third tab.

Update: To make this more clear, let's take an example. We have 4 tabs with different sections of a store: movies | music | books | games. In the first tab, where I gave the newest movies, can I have a link to the third tab "related books"? I don't see the content from the two tabs simultaneously, but is ok to change the tabs in this way?

1

It will be OK as long as the user is aware of what will happen once the link is clicked. Add visual elements that inform the user that this link will navigate to another tab. Also, once the link is clicked give visual feedback intigating that the tab has changed from TAB A to TAB D.

Additionaly it will be very good if you provide them with a back button that will navigate the user exactly to the same position before the click.

EDIT (adding an example) : enter image description here

  • Thank you for your answer. Any chance to have an example or some references to sustain your opinion? – Madalina Taina Jul 6 '17 at 10:16
  • 1
    I do not have any reference for the specific suggestion I make, but It is based on the well accepted principles : "The system should always keep users informed about what is going on, through appropriate feedback within reasonable time." also "Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo." see this article – DesignerAnalyst Jul 6 '17 at 10:27
  • I agree with your arguments, it is just I'm not so sure about changing tabs in this way, clicking on a link in the content, this is my concern. – Madalina Taina Jul 6 '17 at 10:31
  • @MadalinaTaina I have added an example that might help. Also you can verify your decision with usability testing. – DesignerAnalyst Jul 7 '17 at 5:33
0

It depends on what your users need to view and/or see.

The article you reference hits on a key point on #3:

Use tabs only when users don't need to see content from multiple tabs simultaneously. If people do need to compare the info behind different tabs, then having to switch back and forth puts an added burden on their short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page.

If your users need to complete a process:

then moving between tabs can be difficult, because you're asking the user to memorize information which is now out of their sight. The way around this is to put completed information inside the tab bar. We see this with payment 'step throughs' on one page that act like an accordian (okay, not really tabs), where the status is put into the header (with icons like a checkmark to indicate complete).

If your users need to cross reference info for viewing only:

Tabs can work (but see quote above!). If there's a logical coherence between the material being referenced, you might just want to group the content together (but I don't know your use case).

Test with your users, and make sure that users don't suffer understanding by not seeing simultaneous content.

Information can be sequenced in time or adjacent in space: Sequenced in time tradeoffs mean more memorization (if the content needs to be compared and analyzed.).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Update: for eCommerce context as updated question.

You could use amazon's example (and countless other sites) where the product page has the 'related' options.

The content can display either:

  • what users bought with this
  • what users also searched for
  • what the business owners are promoting (do we want to sell more movies than books? what's our business goal?)

Amazon has a slider users can view horizontally. If you needed to, you could use some pills or tabs for filter by content type, or stack bands of content vertically (although that could get noisy!).

See this quick image:enter image description here

  • Thanks for your answer, @mike! Please see the update for my question. I'm not sure I made clear the first time what is my concern. – Madalina Taina Jul 5 '17 at 14:58
  • @MadalinaTaina I updated the bottom of the answer. Ideally you don't take me away from what I'm focusing on: the primary product page. Then you can separate the content types with some pills to allow me some serendipitous browsing. You could even have an 'Quick Add' to cart if hovering over one of the items, so I stay on the page. Test it, and see what happens. – Mike M Jul 5 '17 at 16:13
0

To me, it would be quite unexpected to click on "related books" link and remain on the "movies" tab while browsing books...

As long as the default browser back button works, and testing on real users will confirm the intuition, using links to different tabs should be OK in this particular context.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.