How can I reduce duplication of radio buttons?

Question

I've been asked to redesign a score calculator for a website. At the moment it looks like this:

I was wondering if there is a way to optimise the radio inputs, so that there isn't as much repetition?

I considered placing the labels (pass, merit, distinction) as column headings, but perhaps as users work down through the form they might forget what each input corresponds to?

update

For clarification, the scoring system is complex and not something I have control over. As pointed out by Andrew Martin in the comments below, it does appear that the Grade should derive from the score. Unfortunately it doesn't work that way, and I agree that it's not very intuitive.

Answer 1

Actually, there could be a way to make this a tad bit less heavy.

In your situation, you're repeating words which are not absolutely necessary. Try something like this in addition to adding more breathing space + visual design to make it easier on the eye. The problem with the wireframing tool, we aren't able to choose different colors to make options softer on the eyes:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Make sure the header is sticky to the top so that the labels are always visible.

Answer 2

The secret sauce of product design 🦄

You mentioned that the score and rank are determined independently. This sounds to me like a classic example of the feature no one asked for but everyone wanted.

The test designer must have a system in their mind for how score and rank relate — obtuse though it may seem. Dig deeper and see if there isn't a feature opportunity hidden in this problem somewhere.

If there's a score, there's a potential total. I can only assume the workflow:

1. Set up a "test" with data on the total for each "class"
2. Optionally customize the scale for pass / merit / distinction
3. Fills out a form for each evaluation against this known test

Let the system do the thinking 🤖

The system should be aware that score n equates rank x. Don't make the user do two things when they can just do one: Enter a simple number and voila — rank is calculated!

This also eliminates a potential point of human error.

A few notes about the example:

• Icons are friendly 🤗
• Good / Outstanding sounds more natural than Merit / Distinction
• You can reinforce the potential total or allow configuration inline

Worst case scenario

If the system is ignorant to all of that, just make the user's actions as obvious as possible. Then watch them in action and make sure that ignorance is justified.

Answer 3

Slight modification of DesignerAnalyst's solution:

• star ratings are commonly used and known
• allows no preselection
• in contrast to sliders there are exact three allowed states
• no header required, each label changes immediately conveying the meaning of the stars before it

Answer 4

A visual idea of what has been told until now:

^{download bmml source – Wireframes created with Balsamiq Mockups}

However using combo boxes requires (for some) two clicks opposed to one click for radio buttons. Should you prefer the latter, go for floating headers.

Answer 5

The problem I have with so many radio buttons is their low signal to noise ratio: the state is expressed by the presence or absence of little dot inside a tiny circle (next to some text). Having the text repeated on several rows only worsens the impression and can make one feel lost in an endless field.

Simply restyling the radio buttons, so that more pixels contribute to the visualization of their state can improve things.

My suggestion is to have the selected radio buttons show with different background.

Second line of defense that can reduce cluter is to make not selected buttons have either dimmed or invisible text on them:

• They could be dimmed on undecided rows or on the row under the mouse.
• Conversely they could be invisible on rows that are both decided and not under the mouse.

Removing some unnecessary vertical stems might also help.

Answer 6

Usually interfaces are overloaded with words, which makes interfaces more difficult and efforful for users. I recommend a wordless solution. you may try a three state slider or a custom three state graphic control :

EDIT:

The wordless solution by Majo0od (without the grid lines) is much better than the two recommendations above. I will keep them though just for discussion.

Answer 7

I think that the column header solution is the correct choice. But this produces a new problem, as you correctly stated: the user might forget those radio meaning.

Focusing only on this last problem, you could use a sticky header pattern. So, as you scroll your content, the whole row containing labels should stick to the top, while the rows should scroll beneath it.

I hope i explained myself.