39

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.

  • 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 Apr 11 '17 at 9:49
  • 50
    Wouldn't the level of pass (Pass, Merit, Distinction) be derived from the score? Surely that part could be automated? – Andrew Martin Apr 11 '17 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 Apr 11 '17 at 10:09
  • 2
    @Majo0od I think this might be the best approach. – sol Apr 11 '17 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 Apr 11 '17 at 15:52
87

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.

  • 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 Apr 11 '17 at 15:46
  • 10
    @Rugnir you could also make the header sticky (which is what I suggest) – Majo0od Apr 11 '17 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. – forgivenson Apr 11 '17 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 Apr 11 '17 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 Apr 11 '17 at 22:15
45

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

  • 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 Apr 11 '17 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 Apr 12 '17 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 Apr 12 '17 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 Apr 13 '17 at 8:08
  • 2
    @oldmud0 it's all about the ✨ – plainclothes Apr 17 '17 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
  • 3
    You can certainly make a slider have 3 exact states. People do this all the time for surveys. – Seiyria Apr 11 '17 at 15:24
  • 2
    I like this solution over the sliders because it's clear that there are only 3 choices. – 17 of 26 Apr 11 '17 at 15:29
  • 32
    How will a user know what the stars represent before clicking them? – sol Apr 11 '17 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... – Majo0od Apr 11 '17 at 16:00
  • 4
    Problem with these sort of suggestions is that it seems like you're rating grades when you are not. – Majo0od Apr 11 '17 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.

  • 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). – Majo0od Apr 11 '17 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 Apr 11 '17 at 13:11
  • @Majo0od - agreed. Fortunately, there is a better answer already. – Mike Apr 11 '17 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 Apr 11 '17 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. – Brevan Ellefsen Apr 11 '17 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.

  • 4
    I think this is actually heavier than the OP's design. – S. Tarık Çetin Apr 11 '17 at 22:20
4

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.

  • 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 Apr 11 '17 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 Apr 11 '17 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. – Majo0od Apr 11 '17 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 Apr 11 '17 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 Apr 11 '17 at 15:34
3

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.

  • 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 Apr 11 '17 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 Apr 11 '17 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 Apr 11 '17 at 13:19

Your Answer

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

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