I'm working on a project where I need to show a Big Risk number on the main page of my website. What is the best approach according to the user perspective to show the number ? I have 2 options in mind , i.e. showing the number in a div and make the text color red/yellow/green (based on the high/medium/low risk) or I can place a d3 half donut chart (just like speedometer) having colors from red-->yellow-->green with a pointer indicating the corresponding color value based on low/medium/high risk. The Risk number will be shown under the chart. Which option will fit best for user (should be attractive as well as simple) from ux perspective. Also let me know if you think there would be any better option than these two. Any help/suggesstions will be highly appreciated.
4 Answers
There is a commonly held belief that static speedometer-style gauges are bad for getting a concept across easily or efficiently on a screen based business dashboard. This seems to have to do with the data to ink ratio and the ease with which people compare angles vs length of parallel lines. e.g. refs: Not Gauges Again! and If gauge charts are bad, why do cars have gauges?
While space might not be an issue, the ease of determining state 'at a glance' may mean you want to consider the simpler approach or alternatives to the gauge. At least make the 'ink' do more useful work.
A progress bar kind of risk estimation can be used in this case so that the user can be provided with the percentage of risk in a visual form. More details can be provided to the user once they click the percentage displayed above the progress bar.
Besides being visually pleasing and interesting, the speedometer-style graphic also adds a third dimension (space, i.e. the length of the arc), in which the information is encoded. (The first two dimensions being: the numeric digit(s), and the color.)
-
I'm not worried about the space , as on the whole page I need to show the 2-3 speedometers and atmost 2 bar charts which can be managed easily within a single page. Jul 8, 2015 at 10:39
-
My remark about "space" was related only to the addition of a third dimension of displaying the information: 1) numeric, 2) color and 3) space. It had no relationship with how much screen "real-estate" would be occupied.– DavidJul 8, 2015 at 10:50
I can agree with all the information that is given on not using the gauges. But there's one user related question: Does the user know what the minimum and maximum risk number is? Is it a percentage and does everyone know if 50% is acceptable? If they don't know, the colours and even the gauge might be a good addition to make sure everyone knows what the numbers mean.
And another question: must the visual aid be very precize? If not, you might want to consider an indicator like these:
But ofcourse not with stars or hearts in front of the image. You could use 5 dots/circles instead of 7. Don't do more then 7 though, it makes the image visually complex for your users.
