Reducing unsatisfactory navigation states without losing consistency

Question

I'm working on a fairly large analytics dashboard. One challenge that is occurring repeatedly is how to always display relevant information without losing consistency.

We have a set of items that can be analyzed. Selecting and changing those is always possible. It's the top-most navigational element (think: drop-down in the top navigation bar). We also have a set of analytics, grouped into pages.

Here's a simplified mock:

The problem is the following. While many of those analytic pages (X,Y,Z) are shared between different items (A,B,C), some are not.

Say we have two analyzable items A and B. For A we provide analytics X and Y. For B we provide analytics X, Y and Z.

What happens, when a user currently is on page Z for layer B and changes the selected layer to A. We came up with three options:

1. We stay on page Z and say "No analytics Z for layer A". The navigation stays consistent throughout the dashboard. But there a some "invalid" states and may annoy the user (Norman calls this a "Gulf of Execution").

2. We jump to another analytic page that's available for A (but which one?). Inconsistent navigation, with unexpected jumps, but all states are always valid.

3. We stay on page Z, say "No analytics Z for layer A", allow to switch pages, but as soon as the user left page Z we disable/hide it. Navigation stays somewhat consistent, no jumps, no invalid state. But feels strange that user cannot go back to where he/she came from.

This is what solution A would look like:

Here's B (notice that link to Z is removed, and page has been changed to Y, without the user doing so):

Any other/better ideas?

Answer 1

You can try a combo of both approaches: remove the content for unavailable data analysis, but place a notification next to where the (disabled) tab is, describing what's possible.

You can use tooltips with this lozenge / banner, that can provide a description of why, and if need be, have a link to further documentation explaining the constraints.

It's possible to try a strikethrough, along with hovertip if needed for more explanation:

Perhaps this could be a more succinct alternative.

Answer 2

welcome to UX StackExchange!

One of my favorite "decision helpers" in design is the Principle of Least Surprise: try to avoid system behavior that your users don't expect. (Yes, sometimes this is pretty straight-forward, and at other times it'll take lots of usability testing to find out what, exactly, users expect. ;) )

You already noted that options 2 and 3 violate that principle.

In contrast, option 1 is very common pattern that can be generalized like so: allow users to navigate to an empty container (a folder, a page, a tab view, etc.), but clearly indicate that it is empty.

To help them decide whether a container is worth opening, you can display the number of contained items in the context of the navigation control that takes users to that container.

Here's a simple example from Apple Mail: The selected Inbox folder is empty, and the main content area displays an explicit notice. Other folders display the number of unread messages they contain.

Applied to your design problem, you could implement option 1 and add the number of available analytics graphs to the sub-navigation tab labels. Something like this:

Mike M's approach is another good option, but I just find it that little bit more restrictive.

Answer 3

It depends greatly on how users are going to use this.

A. Compare AnalyticsZ for Item A, B and C:

If a user is in Item A on AnalyticsZ and want to switch other items to see AnalyticsZ, maybe for comparisson, your suggestion to always show AnalyticsZ with the "not available" message in Item B, is the best option. This way a user is able to directly move on from Item B to Item C and see AnalyticsZ there.

B. Quickly see available analytics for each item:

If it is all about viewing the available analytics for each item, it is best to switch to the first available. It would be confusing to show unavailable tabs in this case, so don't show AnalyticsZ for Item B. Also when switching items that both have AnalyticsZ, switching to the first available tab keeps it consistent and predictable.

Choose option B only if it is all about navigating between AnalyticsX, Y and Z and less about navigating between Item A, B and C. Otherwise choose A.