6

I have the following problem:

On my website, there is a personal settings page, where the user is able to define health-levels for her specific body parts.

To mix it up a little, some body part's health-level can be defined from different aspects (eg. shoulder).

The health-levels have a 5-level scale, which you can see in the attached mockup's Concept2 part's legend.

I'm thinking about using sliders, because that's the best for setting these many settings.

I can't embed imaged into this post, but here are my concepts:

enter image description here

As you can see the vertical sliders next to each other do not even fit to the page, because we have 13 bodyparts, and with the #2 concept my problem is that it's too crowded, and hard to overview.

The max width of the available are is 650 or maximum 750px.

I want a nice clean approach for my users :/

0

4 Answers 4

4

I would use the second concept, but with a few significant changes.

  • First, this is not a slider, these are distinct choices; radio buttons would be the more appropriate Windows control for this selection. The most appropriate similar example is a survey where you rate your customer service.

  • Second, since it is a continuous scale from worst to best, I would alter your icons to be more continuous. They are currently very different from each other, and offer no visual indication that they are arranged in a ascending scale of joint health.

  • Third, I would put the joint labels on the left, move the range of icons to only the top (column headers) and put the selected icon to the right dynamically when a choice is made. This will condense the list for easier browsing, as well as making a list down the right that can show overall joint health at a glance. If you arrange the joints from top to bottom anatomically, you get even more value out of the arrangement.

Example:

enter image description here

2
  • Thx for the reply, I really like your proposal, and considering it :)
    – Csabi
    Mar 26, 2012 at 8:24
  • That's much easier to read
    – Ben Brocka
    Apr 3, 2012 at 21:52
2

I think Concept #2 is great. It's helpful to associate images to "How do you feel" type scales to make the actual values a little less clinical and a little more memorable. If you took out the images below every single slider and just had them at the top and bottom of the list (all in a row), then you can show that specific part's selected image value at the end of the slider.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2
  • I realized after I was done how similar my suggestion was to yours. I did not intentionally rip your idea off, as when I looked at it, I did not realize the icons down the right of your graphic were meant to indicate the choice selected. Mar 23, 2012 at 16:59
  • Thx for the reply, I really like your proposal, and considering it, however I'm not sure now whether I'll use sliders, because other repliers here pointed out that it may not be a good idea.
    – Csabi
    Mar 26, 2012 at 8:24
2

Based on everyone's proposal (for which I'm really grateful), I came up with the current concept #3, I'd be really glad if you'd comment it.

concept 2

The reasoning behind this concept:

Arrows work like a numeric up-down, but choosen level descriptions are shown.

Reasons for using this rather than a table with headings and radio buttons in cells or sliders spanning over the level columns:

  • Want to show choosen level description in every row, because there are many bodyparts, and if the user scrols down, he/she will not see the headings (I know some of you proposed heading below the table, but...).

  • Want to show choosen level description, not just icon, because it is impossible to tell the entire meaning in an icon. Plus, i don't want to try to educate users about the meanings of the icons.

  • There are 13 bodyparts, and 5 levels. This would mean 65 radio buttons. Probably it wouldn't look good, and easily overviewable. I know it's only one button-press to select the appropriate radio button, and in this concept it can be 4 button-presses to select the appropriate level description, but I expect most of the users to be close to 100% healthy for each bodypart, so only one or two bodyparts will need to be set to a lower health level.

  • Sliders would be O.K., but still, I want to show the description of the choosen level for every bodypart, and I'm not sure the description would fit in nicely into a 7th column. I'd rather use bigger fonts, and wider columns.

The background of the selected health-level would be colored and have a range from red to green.

Maybe using comboboxes/dropdowns instead of 'numericupdowns' is better? Then there is no coloring, but maybe more usable?

8
  • I am confused about the need to use sliders.Sliders are used when you have a large range of discrete values but here you have defined values which can easily be accommodated in a dropdown. Further more your slider icon looks nothing like a slider icon sorry
    – Mervin
    Mar 29, 2012 at 8:27
  • Dear MFrank, maybe I wrote something wrong in this #3 concept, but in this concept there are no sliders at all. You advise dropdowns instead of up-down buttons for each row?
    – Csabi
    Mar 29, 2012 at 8:46
  • well what are those icons at the side on the right?
    – Mervin
    Mar 29, 2012 at 8:54
  • And yes I would recommend dropdowns since you have distinct values,the up and down arrows are normally used when you are scrolling through a list of values but here your values are not relational to each other
    – Mervin
    Mar 29, 2012 at 9:00
  • Those are buttons, 2 for each row. One 'up' button, and one 'down' button. By default the relevant health level is "100% healthy", the 'up' button is disabled (not in the concept). if you click the 'down' button, the relevant row's health-level will be 'Can handle static movements with heavy weight blablabla...', if you click the 'down' button again, it will be 'can handle dynamic movements with light weights', so the 3rd option mentioned in the legend. If now you click 'up' twice, '100% healthy' will it be again. I hope it is more clear now.
    – Csabi
    Mar 29, 2012 at 9:02
1

You don't need sliders for this. You also don't want sliders, because they are misleading the user by implying that this is a continuous scale, rather than 5 distinct values.

What you have here is a table. You have a slight problem with the width because you have many parameters, but luckily you only have 5 possible values, so you can reverse the table.

You need to do something about those long column titles (rephrase or split into two rows), but otherwise that should take care of it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

6
  • Thx for the reply, I'm considering your proposal :)
    – Csabi
    Mar 23, 2012 at 14:43
  • +1 for suggesting a matrix instead of sliders. Better UX in my opinion. Much less "fiddly" for the user and far more accessible for disabled users (which has to make sense in this case with a health related web site) My only suggestion would be to use radio buttons instead of checkboxes so that it is clear that only one value can be selected for each row. Mar 23, 2012 at 15:02
  • You could also make the table headers vertical or slanted if you want to save space / make the columns the same width.
    – AnnanFay
    Mar 23, 2012 at 15:03
  • Henrik - of course it shouldn't be checkboxes, it's just the Balsamiq way of marking cells in a table :). Or maybe there's another way and I don't know it. Mar 23, 2012 at 15:04
  • I'm not sure I agree with this sentiment. I find the table format harder to parse, as there is much less association between the item ("shoulder") and the value (a check to the far right of it). The slider guides the eye over the option, and binds them together visually. In the table, the checks (or radio buttons) might as well be related vertically, which is not what you want to communicate. Groups of radio buttons need generous spacing around it, and your design does not provide that. I think the sliders look great; they just need indicators to make it clear that the values are discrete.
    – André
    Mar 23, 2012 at 16:05

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.