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 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."
<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>
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?.
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.
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.