Tabbed elements in mobile view: open or closed by default?

[DK-TBS]

Hi Lisa @neoinsight! Hi Thomas @thomasgohard! The ongoing thread about the details/summary widget brings to mind something else I’ve been meaning to talk to you two about.

The tabbed interface element works well, in general - everybody understands it. But I’m concerned about how it renders sometimes in mobile views, and I’m wondering what we might be able to do to fix it.

Two examples: if you go seeking travel information about a given country (in a narrow browser window or on mobile), you’ll find the content split up across several tabs (vertical accordion-style tabs), with the first tab (advisories) open by default. This works reasonably well, as the content of that tab isn’t all that long, so you’ll see the other tabs following immediately afterwards. But if you then visit our departments and agencies page you’ll see a more difficult situation, where the first tab (“institutions A-Z”) is open by default and the second tab (“by ministerial portfolio”) is nowhere in sight. Only when a user scrolls all the way down to the very bottom of the page might they have a slim chance of noticing the option of trying the second tab.

In cases like the departments and agencies page, should we consider loading up the page with both tabs closed by default? And, if so, is there a way to instruct the tabbed interface to start with all tabs closed in mobile/narrow screens? Interested to hear what you think.

[thomasgohard]

The departments and agencies page is showing the same list in two different sorting orders. I'm not sure that tabs are the right solution here as it forces duplicating the list in the content.

I'm also not sure that "By ministerial portfolio" will mean anything to most Canadians. That seems very organisation-centric. "By topic" (e.g., banking, business, transportation), or something like that, would seem to me more client-centric. And more useful than either A-Z or by portfolio.

[neoinsight]

@thomasgohard - that's a good point about tabs for Departments and Agencies. I hadn't realized it was the same stuff in a different order. Agree that is not a good use case for tabs. Sounds like a sortable wet table would be a better option.

But on to @DK-TBS question, this is a concern, I agree. We briefly discussed at CIAWG last week with @pcwsmith. We did see mobile participants use the Country travel info, but they used the top task - the first tab. So didn't test them finding the other tabs. And like you say, that's a fairly short tab.

Really though - all tabs should be short. Most tab problems i've seen are related to people getting way down on a tab and no longer seeing the rest of the tabs - wish they floated at the top sometimes on desktop view.

I think your idea of opening with them all closed on mobile is really interesting! People on mobile seem very ready and able to do another quick click if it's clearly following an information scent (and it's not identical to whatever they just clicked to get there). But the very clear part is hard to enforce. And well, if we were really going mobile first, it would say "the tab most likely to be used on mobile should be open by default, and should be SHORT."

[DK-TBS]

I agree, I’ve always hated the “by ministerial portfolio” label, it’s miserable. But I’m not sure I’m convinced that the two lists are truly just different sortings… the a-z is definitely a straight-up sorted list of all depts, but the other one is divided into groups, helping to make things more meaningful. The groups tell users, for example, that “Registry of the Specific Claims Tribunal of Canada” is affiliated with Aboriginal Affairs, which may help users find the obscure dept without necessarily having prior knowledge of it. The list sort of implies/teaches a bit about the structure of the whole thing, which is kind of nice.

That being said, I still don’t like it very much – and I do think it would be great if future versions of this page could be built up with a sortable WET table, with a keyword filter. Adding a “topic” column to the table would be fantastic, but it could be difficult to choose a topic for some of the broader departments like Service Canada. I’ll talk to the others and see what they think, the page could definitely use some more attention. Maybe instead of “topic”, the column could be “lead dept” or something...

All that aside though, we’re still going to have this open/closed mobile tabs problem on all pages that aren’t strict about limiting the amount of content inside. I’m guessing that the tabbed pattern is going to end up being widely used, it’s going to be popular. And if we instruct people to avoid putting larger amounts of content inside tabs, then we’re probably going to have to identify some other kind of pattern that they can use for pages like acts and regulations.

[neoinsight]

@DK-TBS I tried some alternative ideas, and now agree that the simplest solution is that tabs are all closed when they first appear on mobile. In the spirit of Agile, let's try that first. Very testable...

The alternative is that the LAST tab is open by default in mobile view - so they see all the other options first. In some cases (like Acts & Regs ironically), this is a very valid approach. So if we were to be fancy, the logic would be:

• Most of the time: by default, open with ALL tabs closed in Mobile
• Never: open with first tab open in Mobile (risks user bouncing off page because they don't see that there is other content on other tabs)
• Sometimes: open the last tab by default in mobile view if it is equally as frequently used as the first two tabs. Helps users understand tab model, saves a click for that case.

[neoinsight]

@DK-TBS We have testing coming up in a few weeks. Let's not drop this. I just heard about a prototype that had replaced the left menu with tabs (no, no, no) - so we need to establish how they work and the guidance for them.

If we were to test two different versions of the same stuff, but one with the tab open and one with them closed on mobile, Travel advisories would be a great way to do it. But wait...

Let's do a first test to establish whether or not the data supports acting on this. I can design some tasks around Travel and Ministerial Portfolios to test the hypothesis that mobile users won't find/use the tabs. So we ensure there really is a problem before we try to tackle it, and gather some data to give us ideas about how we should proceed. @pcwsmith - sound good?

[pcwsmith]

In recent usability testing by @neoinsight, one participant did fail to find the tabs below the first in mobile view. But not enough data yet to make any judgements. Will work with Lisa to test further in upcoming rounds.