I'm writing a personality test app and am thinking of a way to implement the UI for recording answers. The test requires the user to answer how accurately terms like "kind" or "cold" describe their personality, using the following scale:

  • 1 - Extremely Inaccurate
  • 2 - Very Inaccurate
  • 3 - Moderately Inaccurate
  • 4 - Slightly inaccurate
  • 5 - Neither accurate nor inaccurate
  • 6 - Slightly accurate
  • 7 - Moderately accurate
  • 8 - Very accurate
  • 9 - Extremely accurate

I want to simplify the process of recording answers using a gauge, but there's not enough space to provide description of all answers. So I'm thinking of using a color-coded gauge with 2 poles - not accurate and accurate.

How can I use color gradation to indicate that one side of the gauge is accurate while the other is extremely inaccurate?

Is there a better way to condense the above 9 point answer scale into a color coded gauge?

enter image description here

  • The issue is that we are used to having positive on the right and negative on the left, just like in math with the axis. May i ask, why does it have to be the other way around with the Woman? – UX Labs Nov 24 '16 at 8:52
  • Setting aside the fact that you should never use colour alone as your main indicator for anything (here's a useful resource for that: blog.usabilla.com/how-to-design-for-color-blindness). Do you actually need to show the user each of those graduations? Could you just offer a slider with marked end and centre values and let the user deal with the rest? I suspect user testing will reveal that the nuances of your 9-point scale will be left unused in favour of more polarised 'yes', 'no', 'maybe' type answers. – Andrew Martin Nov 24 '16 at 11:58
  • @UXLabs Yeah, this would make sense. This is a pre-built gauge that only goes clockwise. There's some pretty sophisticated calculations that I need to inverse to make it go counter clockwise. – Alex Stone Nov 24 '16 at 13:41
  • @AlexStone You shouldn't need 'sophisticated calculations' to reverse the gauge (assuming that you already have some math to make the pointer go where you want it) - Relabel the markings in reverse then you only need the following math: (top-of-range - value) + bottom-of-range = reversed-value. In your case (9 - V) + 1 = rV. For example to show 9: (9-9)+1=1 - pointer appears in the current 1 position (relabelled as "9"). To show 5: (9-5)+1=5 - pointer appears in the current 5 position. And to show 1: (9-1)+1=9 - pointer appears in the 9 position (relabelled as "1") – Andrew Martin Nov 24 '16 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.