5

I am currently working on a UI design to show charts. I have multiple charts throughout the application. Each charts should further drill down to show details.

Currently I have two approaches.

Approach 1: Showing multiple charts in a single screen.

Advantages:

  • Can see data for multiple entities.
  • See charts side-by-side giving an idea about each other, if compared.

Disadvantages:

  • If each chart uses one round trip to the server to fetch data, there would be multiple requests hitting the server for loading one page.
  • The design would be a bit clumsy and re-sizing it would be an issue. If the resolution decreases, it would be hard to show data for the charts.
  • A lot of information will be thrown in a single view.

Showing multiple charts in the same page

Approach 2: Showing them in group with one chart and a details section in one group. Each menu item will represent one group.

enter image description here

Advantages:

  • The user will see what the user wants when the user wants.
  • Details be shown with the charts allowing the user to see both together.
  • In terms of writing HTML code, the main HTML can act as a frame and the charts will be loaded in that.

Disadvantages:

  • Increases the navigation.
  • All charts might not fit in that aspect.
  • User will see only one chart at a time.
  • Horizontal navigation can become a problem.

I am a bit confused about which approach to follow or should I be looking for a completely new design. Any help would be great!!

Improve this question
6
  • 1
    It really depends, if all charts need to be seen at once (for instance a managers dashboard) you have to use your initial design. If there are filters and drilling deep into charts and things you need to do on the screen to refresh the chart you have to select design #2. There is no official answer to this..it all depends on what you want to show at once.
    – JonH
    Commented Dec 15, 2015 at 20:06
  • I do have cases where I need to show some filters and drill deep.. Then I came up with design #2. But another concern is the usability.. Is there a way filters and all can be shown in design #1 ? Or #2 is suitable for it?
    – Nikhil Varma
    Commented Dec 15, 2015 at 20:19
  • Maybe what you can do is initially show them using design 1. When you click the actual chart it opens up using design 2?
    – JonH
    Commented Dec 15, 2015 at 20:20
  • Yes, I did think of that but then, the navigation would become a bit confusing. Initially all then grouped.. That is a bit inconsistent don't you think?
    – Nikhil Varma
    Commented Dec 15, 2015 at 20:24
  • 4
    I don't think its bad I think its rather natural..think of a managers dashboard..you show 4 graphs of summarized data. If someone wants to drill down they click on one of the graphs taking them to a graphdetails page. This page has some links at the top to return back to the allgraphs page but this graphdetails page has the filters and actions that allow a user to drill or filter. I don't know to me that's pretty standard...
    – JonH
    Commented Dec 15, 2015 at 20:29

1 Answer 1

Reset to default
11

A business intel tool at it's best will allow views into an organization that fit multiple personas, roles, and modes of analysis. The specific views are almost infinitely variable, but they often follow the same basic pattern.

The three circles of business intel

1. Dashboards

This is a high-level view that summarizes trends and KPIs for a given scope. The CEO will want to cast a wider net than the marketing director, but the basic premise is the same.

It's important that this view focus on aggregates and pattern identification. You're looking for indicators of changes in the business that may require further investigation in order to take action.

2. Middle layer reports

From the Dashboard, each module is based on multiple dimensions. Any one of those dimensions may (should?) have drill down reports behind it. Those reports should be accessible via interaction with the Dashboard module.

With large data sets, it's often beneficial to have a layer between bird's eye level Dashboards and the boots-on-the-ground hard data tables. The middle layer is composed of some lower level aggregation and hard data tables supporting that when necessary.

3. Deep dive reports

This is for the real data nerds: pure, unadulterated reporting. This is the reams of data that underlies anything above. It can be accessible from any point in the system as a drill down when a user wants to get past the patterns and evaluate the specifics.

Here's a quick notecard sketch of how I structure these types of applications.

Mini-wireframe flowchart for a three tier business intel app

Infinite variation

As I hinted at above, this kind of tool is inherently personal. Every C--, VP, GM, Director, Analyst and their dog will have their own preferences for divining changes in the weather.

A proper product will not only allow them to decide where they start in the app, but also create custom dashboards and reports that they can live by. When you provide that level of customization and back it with deep, quality data, your product will be like a drug!

Improve this answer
0

Your Answer

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

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