1

I am designing a data web page (where most people viewing that page is looking up the data) for a game fansite and one part of it looks like this

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The table show stats for a character at different levels. The max and min level rows are always shown. The level for 2nd and 4th rows can be selected by the two-handle slider on the left or directly typing into the textbox.

I am wondering if the UI can be improved, mostly regarding the slider. Due to space restrictions, most sliders would have a 2-pixel sensitivity: sliding 2 pixels in/decrease the level by 1.

For users look for data for a specific level (e.g. the level they are on), the slider is almost useless. For users who is comparing between levels or looking for the minimum level needed for a stat to be greater than some value, the slider saves them from entering values repeatedly. However, its usefulness is slightly hindered by its high sensitivity.

This part of the UI just begun internal testing and I will be getting feedback from testers, but I want to ask if there are other solutions to this.

3
  • 1
    Can you please explain what are the roles of the sliders? How the filters work?
    – A.L
    Feb 24, 2014 at 15:07
  • It sounds like the slider sets values in multiple rows. If that's so, how do you specify where its values go? Feb 24, 2014 at 15:42
  • Indeed, please include more detail on how the UI reacts to the values being changed and what exactly we are looking at when read the table. There is not enough information here to give a solid idea of what the data is and, most importantly, how that data is used! Mar 26, 2014 at 21:19

1 Answer 1

2

The issue with using sliders is that it is slower than simply inputting the level number in a text field. With a slider, user need to fine tune the slider to match the desired level. This could be tricky and is it unnecessary in my opinion.

I would remove the slider and simply ask the user the level or range of level they wish to see using a text input field on top of the table.

So you would display the default max and min level plus the range (or just one level) stipulated by the user.

To make it clear to the user how to find a level. Add a short description under the input field.

I would also change the order you display the levels to Min. to Max.


enter image description here

Your Answer

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

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