Overall UI/Layout

[jonthegeek]

I'd like to update the overall (default) layout to fulfill a couple goals:

• Make drill-down feel natural.
• Avoid wasted space.

Below is a rough mockup of what I'm picturing. Note that everything will have margins in the real layout, so it won't look EXACTLY like this.

I don't have my heart set on this exact layout, so I welcome any ideas to make it more usable. We have nested tabs pretty much no matter what we do (since each tab can/often will have its own tabs), but I think changing direction can help.

Each tab would also get an update toward answering these questions:

• What summary information does a user want about this drill-down level?
• What will the user click to drill down?

So on the "Study Overview" tab, we'll have two summary/drill-down options:

• A sortable/filterable table, with columns for each Metric and rows for each Group (Site by default).
• Plots for all Metrics, to quickly see outliers.

Clicking in either of those should take the user to the most relevant tab (either Metric Details or Site Details, depending exactly what they clicked).

What does everyone think? Do you have suggestions for improvements? Are there requirements I haven't considered?

[jonthegeek]

Another alternative that's floating around in my head, that I want to log for us to think about: What if we eliminate the idea of tabs, and instead make it more of a continuous deep dive by what the user clicks?

I think I'd need to watch at least one person really using the app before I could fully work this out, but the idea arose from noting how things flow when selecting things in even the current version of the app. If that behavior is desirable, do we need tabs, per se?

Instead, perhaps we structure things more by "What you were looking at", "What that leads to", and "Where else you can go."

For example:

• We start with the Study Information and a Study Overview table (or possibly a collection of KRI scatter plots, if users prefer those as a quick view). In some way there's the ability to toggle between table and plots still.
• When the user clicks a site, we add a card to the right of what they were looking at, with information about that site (such as a version of the "Metric Summary" table that's currently participant-specific on the Participant Details tab, showing the list of deep-dive tables and the number of entries in each).
• When they click a particular table in the list, cards other than that site "Metric Summary" card are "turned off", and the "Domain Details" card for that site + table is turned on.

We'd probably still want to have all the inputs available (all with "All" options to turn off the specifics of what they're looking at), and we'd probably need a "close" option on the right-most card to basically reset things up a level.

Obviously this is still just a vague idea of the direction.

[jonthegeek]

I think tab-less is an interesting idea, but it would make extensions MUCH harder to reason about. So we'll keep having something at least tab-like that helps the user control what they're looking at. We'll also (try to) be smart about jumping to relevant tabs based on where users are and what they've selected, to somewhat get the best of both worlds.