I'm designing a bar-chart where each bar has more content to be explored. After the click in the red bar, I'm thinking to show list of all employees (90, 55, 33, ....) who became late in the respective days.
My question is "Is it user friendly?
I've not seen anywhere like this.
Since this is about a bar chart in HTML, I'm going to suggest an implementation that should be accessible to screen reader users.
The bar chart itself is a single image, embedded by means of a normal img element:
<img src="chart.png" alt="distribution of employees who came late to work, by minutes of delay" id="chart" />
(This can optionally be wrapped in a figure element with caption.)
Above the image, you put an instruction such as, "Click on the individual bars in the chart to see the corresponding list of employees."
Then you add an image map with an "area" for each bar in the chart, and connect it to the bar chart (using the attribute usemap on the img element):
<p>Click on the individual bars in the chart to see the corresponding list of employees.</p>
<img src="chart.png"
alt="distribution of employees who came late to work, by minutes of delay"
id="chart" usemap="barchartmap" />
<map name="barchartmap">
<area alt="10 minutes late" shape="rect" coords="[fill in coordinates here]"
href="10minuteslate.html" />
<area alt="11 minutes late" shape="rect" coords="[fill in coordinates here]"
href="11minuteslate.html" />
<!--areas for other bars to be added here -->
</map>
The alt attributes on the area elements tell screen reader users which bar they are at, and they can then decide whether to follow the link or not. This is essentially an example of the WCAG 2.0 technique Providing text alternatives for the area elements of image maps.
A somewhat related question on UX SE is Chart drill-down affordance?.
People have been looking for JavaScript libraries for interactive charts for quite a while, and several options are available: Javascript library for clickable bar chart?. However, the above technique does not require JavaScript.
The Wall Street Journal has a clickable bar chart representing what Greece owes when; the individual bars don't take you to a different page but (strictly speaking) a different graph (though technically it swaps charts in place). After clicking on a bar in the chart, the instruction "Show all years" appears above the chart.
I would actually create a custom tooltip showing a list of all the employees that were late on hover. I would also show how many minutes and allow searching.
I would also probably change the color of all the other progress bars that aren't hovered.
This is not the actual design I am suggesting, this image is just to show my idea. You will have to design it according to your needs and taste
Some more ideas:
Also, upon clicking on one of the names in the list I would open another page with all the employees late that day and show things like:
Employee name, department, how many minutes has he/she been late, how many times he/she has been late this week/month + the sum of minutes he/she has been late in that period of time.
If you endorse being late only a sum 50 minute per week before they get sanctioned or have to work overtime, I would also create flags for those going over that limit or getting near that limit.
I think you have 2 separate challenges here -
1. How to make bars intuitive enough to look clickable/hoverable? 2. How to show information once hovered/clicked?
For #1, you can try to add some visual/verbal affordance (make it look like a button or a verbal signifier "Know More". Alternatively, you can try some animation. When a user lands on the page, animate one of the bars to educate users that it can be hovered/clicked over to get more information.
For #2, I am not sure what is below the bars, assuming you have some real estate there, show data in the table just below the bar. Try to connect the bar and data table with colour. Something of this sort -
Although it might not be available on some devices, this functionality is very helpful and the ultimate feature in Drill-Down scenarios.
No, it's not user friendly. How do the interactive bars differ from the bars inside a static image? magic word: affordance. You have to give the user clues so they know they can click the bars
In my opinion, it is ok to add info in tooltips but to be more user-friendly, you should make them appears on hover, not on click. On mobile the user may not click, so don’t depend on these elements.
Think of tooltips as providing expanded information, so a tooltip shouldn’t be the only way a user can see the info.
