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.

enter image description here

  • 1
    I think it should NOT be user friendly. most of today's chart are not meant to be interactive. – Nicolas Dec 6 '16 at 11:26
  • @Nicolas What if the page containing the bar chart has instructions above it that say that each bar gives access to the corresponding list of employees? Of course, for accessibility reasons (especially for screen readers), each bar would need a unique label (e.g. "10 minutes", "11 minutes", etc. or whatever the numbers refer to). – Christophe Strobbe Dec 6 '16 at 11:36
  • @ChristopheStrobbe thanks for comment. but do you think user read that instructions? from design perspective i think it can clutter the chart too – Jivan Dec 6 '16 at 11:41
  • Is this going to be in HTML? If yes, I'll post an answer with suggestions for an accessible implementation. – Christophe Strobbe Dec 6 '16 at 11:45
  • 2
    Clickable charts are pretty common in dashboard-type products. I'm working on an app right now that has dozens of them. Unfortunately it's proprietary so I can't share any details, but it uses the open source Oracle JET toolkit, which supports such interactions in all its chart components (and has full accessibility support, too). – calum_b Dec 6 '16 at 14:13

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.

enter image description here 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 -

enter image description here

Although it might not be available on some devices, this functionality is very helpful and the ultimate feature in Drill-Down scenarios.

  • Oh i can see but what do you mean by devices, will it not work in mobile? – Jivan Dec 7 '16 at 5:03
  • It should work on mobile, but I am not sure how it will work on other special devices like Screen Readers and such. – Vladimir Georgiev Dec 7 '16 at 8:04

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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