I have two panels - one contains current information for a subject, the other contains historic trend information for the subject in a graph.

I can display them on the same page - one underneath the other. Or I can put them in separate tabs so that only one is displayed at a time.

What I'd like to know is - does putting both onscreen at the same time make it more difficult for the user to grok that in one area we are talking about latest info but in the other we are talking about historic info?

  • Hi David. What is the purpose of the interface? Is the user meant to be comparing current information with the historic trend? Does the historic trend provide essential information for understanding the current?
    – Matt Obee
    Oct 30, 2014 at 11:28
  • 1
    Hi Matt, thanks for asking. So the subject would be a group of football teams. To answer your questions in reverse order. Does the historic trend provide essential information for understanding the current? No. Is the user meant to be comparing current information with the historic trend? No. What is the purpose of the interface? The purpose of the interface is twofold 1) To show football teams in a league table as things stand right now (points) 2) To show how those teams did over time (graph of each team's points over time). Oct 30, 2014 at 17:13
  • Hi David. Does the data look similar in both current and historic? If so, then unless it is well displayed that they are different, it might be hard to differentiate. To completely eliminate this problem, separate the data using tabs. This, however, may not be the best solution. Proper labeling of the data, and making a clear distinction between the two can allow you to display both without having confusion.
    – Tory
    Nov 4, 2014 at 15:27

5 Answers 5


I don't know your usage, or the real value for your users, but for me this is very common in analytics. In Google Analytics for example you can compare date ranges:

Date ranges with a "Previous" prefix and different colors Date ranges with different colors

You can see they use different colors with a legend. And on the top image they also prefix the historical legend with "Previous" as it is the same metric.

One thing Google Analytics also does quite good is using the same colors through the whole application. (From what I know, current is blue and history is green; I don't know why the second image has orange :)) This helps users not to have to think about this anymore once they know it.

  • While I agree with you in that google analytics does a good job at displaying the numbers, I would also keep in mind the user persona in this case. Displaying a lot of information on screen can be a pushback to some users. Jan 9, 2015 at 11:56

Perhaps a tweak to your initial solution (displaying them on the same page - one underneath the other) could be to fix the current information at the top, and simply let the historical data scroll underneath the fixed area.

enter image description here

  • I think this is showing more information that OP wants. Rather than showing the rankings for all the previous weeks individually, the second panel shows the trend of their behavior in the past.
    – elemjay19
    Nov 4, 2014 at 22:21
  • 1
    Norabora, the content was placeholder info. I was simply attempting to give more weight to the current data vs the historical data, all while keeping everything on the same view (vs tabs). A combination of this layout, and color coding the teams like the Google analytics example Lode provide would be a good solution and would make it clear to the user.
    – kredon
    Nov 5, 2014 at 15:28
  • @kredon - what is this template you're using? Jan 4, 2015 at 9:51

Given your comment above that the current data is shown in a table and the historic data is shown in a graph, I believe showing them both on the same page is fine. The display is different enough that, if you label each section clearly, folks won't likely confuse the two.


The best suggested way of displaying the data would be to show both the instances at the same time one below the other, but visually differentiated well and have expand/collapse section to reveal the content. This way the users will get the context of the content they are reading through.

There is no standards in implementing interactions similar to this, just requires user testing on the application to conclude the based method since it also depends on the context.


Putting them both in the screen is more user friendly because it allows for comparisons. To mitigate any risk of confusion I think you should:

A- visually and clearly distinguish both panels so users become aware they have different purposes.

B- Put more visual emphasis on controls that allow users to sift through historical data. This will also strengthen point (A)

C- Use user-friendly labels in a away that clearly suggests "now" and "before".

This type of websites are mostly fan driven unlike other websites, the language employed, connotations and shared jargon within your target audience become a strength.. Use them wisely :)

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.