Comparison website: simplest way to compare players through years

Question

On a website of our local sports competition I am planning to have a section, where you can compare the players scores. (Everyone attended the same 10 disciplines.)

The interface should be really simple: There will be a row with players photos, and you can just grab someone and drag him to the comparison area, and than drag second one (and another one you care about .. ) and they will be compared - which means the site will display theirs scores in a simple table and will highlight the best score for every discipline.

The problem is, that I would like to add functionality for comparison from various years of competition. For example if I wanted to compare my score from this year and my friends score from year 2012.

What are several ways to accomplish that?

I don't want more rows of photos, like one row for one year. I would like to keep the drag and drop system but I can't think out how to integrate the various years comparison in so when the user enters this section he would just get what to do and won't miss any feature.

Answer 1

When you show the two larger circles with the players being compared, you could simply have some sort of selector below each one with the year. That way you're only bothering with the year for the selected players and it doesn't complicate your interface too much.

There are many options for the year / season selectors:

• dropdowns
• a simple list of numbers with the active one highlighted
• sliders

Which one you choose depends on many factors, and is really outside the scope of the question.

Answer 2

Once you drop a photo into the comparison area, a vertical scroll bar appears to its right, with the control all the way at the top, and the control labeled with the most recent year. The comparison, correspondingly, defaults to using the current years' stats from that player for comparison. As the user drags the control down, the label and the stats for comparison change to reflect previous years.

I think this would be pretty intuitive, since a scroll bar with the control at the top is asking to be dragged down, the label makes it pretty clear what will happen when you drag it down, and the instant change in the label and the stats confirms that assumption immediately.

In addition, if you make this work like a Windows scrollbar, such that the size of the slider is inversely proportional to the number of years' data available for that player, then it provides an intuitive clue about how many other years there are to choose from.

Answer 3

Modifying @JohnGB's answer I added the year selection on top the comparison.

Added value, depending on that drag'n'dropping removes the player from the roster, is that users could compare the same player from different years.

Selection from the same year:

Selection from different years. Select one player from one year and another player from other:

User could have chosen Nathan from both 2011 and 2014 to compare how he would have evolved between the years.

And as with @JohnGB's answer, the way the year is selected should be decided separately. Selection with buttons could get crowded if there is a lot of years to choose from.

Answer 4

I think the answer provided by @JohnGB is the easiest and simplest approach for date selection, however when you are attempting to compare two player you need to show some level of details first; In your case stats such as goals scored, games played etc. this provides users with a reference point and could influence their comparison decision. showing these details could be hidden at first and shown only when the users wants to view them . Here is a quick mockup (individual player stats available via sliding panel):

This also offers an advantage as users will be able appreciate the type of stats you have before viewing the comparison.

last point and ( I might be mistaken) circular shapes are great but could be problematic when you want to include more details next to them or when you want to scale things up for example adding badges or status updates.

Hope this helps.

Answer 5

The scrollbar is a UX inconsistency: a user expects the contents to move (scroll) within the area, rather than the data to change, and would not normally think to drag a scrollbar to change year.

A dropdown or spinbox is more consistent with normal UIs, but less tactile and easy to use.

My preference would be a variation on a fisheye (or "OSC-Dock-style") zoom-on-focus menu. This is where you have a bar of values, and the one you currently have is magnified. Sliding in either direction scrolls the available list, as well as changing the selection, such that the magnified item is always centred. This is often used for selecting between multiple images, and the basics are decently easy:

li:hover { transform: scale(1.2); }

However, getting the menu to also slide with mousewheel would be a little fiddlier.

Given you are (from your mockup) using circular images, then a rotary zoom-selector around the player portrait, with the currently displayed year in the middle at the bottom, would seem ideal, and reminiscent of a radio tuning knob or volume knob: tactile and familiar. Unfortunately, making such a thing work cross-platform purely using CSS would be nightmarish at best: you'd need something like JS http://tympanus.net/Development/Arctext/ or SVG http://jsfiddle.net/dbushell/32mAb/2/ - and gracefully degrading such a design for older browsers would be hard.