10

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: Page layout

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: Variant A

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

Any other/better ideas?

3
  • This might be a bit tricky to answer without being able to see some screenshot or mockup of what you are describing.
    – Michael Lai
    May 24, 2020 at 2:13
  • Can you create a rough wireframe or record screen explaining the flow of this case. I read it twice, and it is difficult to visual. May 24, 2020 at 7:56
  • 1
    @MichaelLai I added some wireframes. Hope it's clearer now.
    – Matthias
    May 24, 2020 at 13:07

3 Answers 3

5

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.

enter image description here

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

Perhaps this could be a more succinct alternative.

enter image description here

4
  • Thanks for your response. Would you prefer that to solution A? Is there something like a standard, a rule to follow, when to do what?
    – Matthias
    May 24, 2020 at 16:35
  • My thinking is that you don't want users to lose trust in the interface. Removing the tab may cause someone to wonder if there's a bug, or loading problem. You can be more succinct than my example, but the thinking is that you want to offer an explanation as to why something is unavailable.
    – Mike M
    May 24, 2020 at 17:50
  • @Matthias I've updated my answer. The main thing is to keep confidence in the application, while not having the user invest the time in clicking to an empty view, nor wondering why a tab disappeared (if you remove the whole tab)
    – Mike M
    May 24, 2020 at 18:15
  • That absolutely makes sense to prevent an active click to enter an empty page. What I'm worried about is the jumping out of a page that becomes empty after the selected Item (A,B,C above) is changed. But I guess I could mix solution 1 and your proposal. Display 1 if the unavailale page is the currently active one, and inactivate the tab as per your proposal as soon as the page is left..thank you
    – Matthias
    May 24, 2020 at 18:45
4

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.

enter image description here

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:

enter image description here

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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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