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