38

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

enter image description here

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.

16
  • 4
    Why do you think repetition is a bad thing? Have you asked the users if they find the radio button repetition a bad thing?
    – SteveD
    Commented Apr 11, 2017 at 9:49
  • 50
    Wouldn't the level of pass (Pass, Merit, Distinction) be derived from the score? Surely that part could be automated? Commented Apr 11, 2017 at 9:59
  • 1
    @AndrewMartin Unfortunately not, the score refers to how the class is weighted (It's a complex system... ). While the level is the actual grade.
    – sol
    Commented Apr 11, 2017 at 10:09
  • 2
    @Majo0od I think this might be the best approach.
    – sol
    Commented Apr 11, 2017 at 13:06
  • 7
    Whatever design you come up with, make sure that you minimize the number of keystrokes required to enter the data. Also, make sure that the total number of keystrokes does not depend on the value that is entered. From my experience with very similar forms containing student data, being able to navigate forms by using combinations of <TAB> and <SPACE> without having to look at the screen is extremely important.
    – Schmuddi
    Commented Apr 11, 2017 at 15:52

7 Answers 7

86

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

15
  • 6
    I like this a lot. Some people have said that maybe the users will forget the column names as they go down the rows, I think this is wrong. There is a clear informational hierarchy, with the options being better as you go towards the right hand side, as well as the users being presumably already familiar with the grading system being used.
    – Rugnir
    Commented Apr 11, 2017 at 15:46
  • 10
    @Rugnir you could also make the header sticky (which is what I suggest)
    – UXerUIer
    Commented Apr 11, 2017 at 15:49
  • 1
    this solution actually takes into account the effort required to fill out the form, unlike a lot of the other answers. Also, this solution uses common patterns in ways that a lot of users will expect them to be used. Commented Apr 11, 2017 at 17:06
  • 5
    This design (like the original) assumes that one of pass, merit, or distinction must be awarded. What if somebody failed? Deselecting a mis-clicked radio button is… tricky (maybe why they're asking for the redesign in the first place?)
    – Dave
    Commented Apr 11, 2017 at 18:34
  • 2
    To be honest i personally would've preffered a triple-button-bar widget instead of radio buttons, especially without big text label they are a pain to click, unlike buttons.
    – Maurycy
    Commented Apr 11, 2017 at 22:15
44

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.

Examples of score input with system-generated classification

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.

Classification selector as text-based toggle

8
  • 2
    I believe toggle buttons are the best option. Made a sketch to check, but it doesn't solve the main concern about reducing the amount of elements (or text labels at least). But contrary to radio buttons I think it is more clear the button can be deselected (if this is necessary for the scenario).
    – Alvaro
    Commented Apr 11, 2017 at 20:34
  • 8
    @plainclothes Thanks for answer. Unfortunately, as mentioned in the question, the score and grade are not related as one would assume, therefore the grade can not be determined from the score.
    – sol
    Commented Apr 12, 2017 at 7:53
  • 1
    @plainclothes I think the last option is good, I'm not sure about placing the labels 'Class 1' above the box though. I find it slightly harder to scan, but that might just be me
    – sol
    Commented Apr 12, 2017 at 7:55
  • 1
    Since it should be working on mobile, I'm voting this. Though I don't like small arrows on number inputs.
    – Runnick
    Commented Apr 13, 2017 at 8:08
  • 2
    @oldmud0 it's all about the ✨ Commented Apr 17, 2017 at 1:38
33

Slight modification of DesignerAnalyst's solution:

Star rating

  • 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
7
  • 3
    You can certainly make a slider have 3 exact states. People do this all the time for surveys.
    – Seiyria
    Commented Apr 11, 2017 at 15:24
  • 2
    I like this solution over the sliders because it's clear that there are only 3 choices.
    – 17 of 26
    Commented Apr 11, 2017 at 15:29
  • 32
    How will a user know what the stars represent before clicking them?
    – sol
    Commented Apr 11, 2017 at 15:39
  • 2
    I would argue that stars are not as heavily used only because they've become so cumbersome to deal with. My BIGGEST problem with this is that you're equating the values of the star with the selection when in fact it might not be the case. Are you saying "Distinction" is FAR better than pass? That doesn't seem to be the case here...
    – UXerUIer
    Commented Apr 11, 2017 at 16:00
  • 4
    Problem with these sort of suggestions is that it seems like you're rating grades when you are not.
    – UXerUIer
    Commented Apr 11, 2017 at 16:01
12

A visual idea of what has been told until now:

mockup

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.

10
  • 29
    This might have solved the problem of making it "less heavy" but the user experience has been impacted greatly (now instead of clicking once per class to assigned a type value, you have to click 2 - 3 times to get to what was previously a click away).
    – UXerUIer
    Commented Apr 11, 2017 at 11:49
  • Thanks for answer. I agree that this looks neater, but as @Majo0od points out it might be slower for users, especially on mobile. It might be worth testing out though
    – sol
    Commented Apr 11, 2017 at 13:11
  • @Majo0od - agreed. Fortunately, there is a better answer already.
    – Mike
    Commented Apr 11, 2017 at 13:14
  • 5
    @Majo0od I somewhat disagree with a keyboard this becomes the fastest one, Combine with a power user using a keyboard it becomes 57 tab key P tab key..... 7 tab key M tab key ....etc. Definitely the fastest way compared to the others
    – Halfwarr
    Commented Apr 11, 2017 at 14:54
  • 1
    Had to join this site just to upvote this answer. I find drop down menus like this FAR easier to use, even on mobile, when done correctly. I don't have to move my mouse/finger as far to get to the options, and the extra screen real estate allows for large, easily clickable boxes instead of smaller radio buttons. I feel that the time saved by less hand movement and larger objects to click on makes up for the extra click. Commented Apr 11, 2017 at 17:15
12

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.

Background color specifies radio button's state

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.

1
  • 4
    I think this is actually heavier than the OP's design. Commented Apr 11, 2017 at 22:20
3

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 :

mockup

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.

7
  • 2
    +1 - if I was to improve my answer, I'd do it this way. One remark - I would put clear tick stops on the sliders.
    – Mike
    Commented Apr 11, 2017 at 12:24
  • 18
    I'm already shuddering at how awkward this would be to actually use. Sure, it looks much better, but dragging that slider is going to be painful, and even with checkmarks I suspect that clicking on the slider isn't going to be as precise or as discoverable as clicking radio buttons.
    – Muzer
    Commented Apr 11, 2017 at 14:44
  • 2
    I'm incredibly worried by the second option. Out of curiosity, is "pass" equal to 33% of the grade? Actually, in both options it actually appears that way.
    – UXerUIer
    Commented Apr 11, 2017 at 15:16
  • 5
    Sliders are not a good equivalent for something that is a set of distinct choices. It's not at all clear that the slider represents 3 choices rather than a sliding 0-100% scale.
    – 17 of 26
    Commented Apr 11, 2017 at 15:31
  • 4
    The other problem here is that the user may think the slider/progress control is a reflection of the value entered for Grade rather than a separate input altogether.
    – 17 of 26
    Commented Apr 11, 2017 at 15:34
2

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.

3
  • Thanks for answer. I'm not sure how beneficial making the header sticky would be as there are only 10 rows. Definitely a good idea if there were more rows though.
    – sol
    Commented Apr 11, 2017 at 13:10
  • If this is for web or desktop application, you could consider to make an hint appear when hovering over the radio button. The hint would show the radio label, making it obvious.
    – TheManuz
    Commented Apr 11, 2017 at 13:15
  • It's for a website, so an alternative to a hover effect will have to be considered for mobile users. Interesting idea, thanks
    – sol
    Commented Apr 11, 2017 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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