14

I am creating a dialog box for a GIMP plugin that exports images in the WebP format. The dialog currently looks something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The "lossless" checkboxes each disable the quality slider and spinner box directly underneath them when checked. In the case of the color channels, this is because there is no slider value which represents "lossless" (even 100% isn't lossless).

However, when it comes to the alpha channel, a value of 100% is lossless (and also the default) and therefore I am wondering if the checkbox is redundant. There are two possible implementations I am considering:

  • Remove the checkbox: with this option, the checkbox is removed and the slider simply has a range of 0-100.
  • Set the range of the slider to 0-99: with this option, the checkbox remains and simply allows a value of 100 to be used since the slider only goes as far as 99.

I'm having a tough time deciding between the two options. A simple chart indicating the number of steps the user must take in each possible scenario favors the first option:

Checkbox and slider 0-99:                                                     Steps:
  - user wants lossless: checkbox is already checked and user does nothing      (0)
  - user wants lossy: unchecks checkbox and moves slider                        (2)

Slider 0-100
  - user wants lossless: slider already set to 100                              (0)
  - user wants lossy: moves slider to value                                     (1)

But I realize making this decision exclusively based on the number of steps required isn't a good idea. The interface needs to be intuitive.

2
  • Would it be reasonable to replace the checkbox with a label that said "Lossless" and appeared at slider value 100? In the case of Color channels, you could have "Lossless" be to the right of "100" if you really wanted to keep "100%, but lossy".
    – Brian
    Commented Aug 6, 2012 at 18:50
  • @Brian: I like the suggestion but have no idea how to implement it (I'm using GTK+ with straight C - not exactly the easiest GUI toolkit to work with). Commented Aug 6, 2012 at 19:04

5 Answers 5

16

mockup

download bmml source – Wireframes created with Balsamiq Mockups

How about this?

Just replace the checkboxes with radio buttons.

Color channel - selecting Lossless disables the slider, and selecting Lossy enables it.

Alpha channel - selecting Lossless sets the slider to 100% and selecting Lossy and setting it to 100% manually doesn't affect the radios.

4
  • Now that looks nice. +1 Commented Aug 6, 2012 at 21:36
  • 1
    I am accepting your answer... and here is a screenshot of what your idea looks like once implemented: i.sstatic.net/q4dRG.png Commented Aug 7, 2012 at 3:05
  • Happy to help :). (The orange part of the top slider doesn't look disabled, pretty confusing). Commented Aug 7, 2012 at 5:17
  • @VitalyMijiritsky a side note to your side note: the actual styling is probably from the OS-wide look and feel and as such couldn't (and shouldn't) be changed. The disabled slider does appear more flat, but, granted, the effect is rather subtle. Commented Aug 11, 2012 at 9:05
1

I think the question you need to ask yourself is would the users know if there is data loss in case of 100 % being set for the color channels.

If users dont really know that and the data loss or quality loss would be relatively negligible, I would recommend just going with the first option of removing the checkbox and providing them with the feature of scrolling from 0-100 since all you are doing is providing them with an impression that the highest possible quality is being created. You would certainly be right in case of the alpha channels as you did say they are lossless but unless users know about the loss in the color channels, you still provide them with an impression that the highest possible quality is done and since they would (generally) not know of any other way to retain color quality,you should be fine there.

Though the checkbox will make it a one stop option with two simple clicks, I am not a fan of it since it raises the question about what is the difference between 100 % quality and lossless and that might confuse some user

If you want it in terms of user experience,by allowing the user to slide from 0-100 using a slider, all you are doing is providing him with a metaphor with regards to quality despite that the fact that the most accurate information might be conveyed

How metaphors can improve your user experience

1
  • I think many, but not all (or even necessarily most), of the OP's target audience will know that there is a difference between 100% and lossless. Consider that the OP's user base is GIMP users who want a WebP plugin. There needs to be some indication to such users, "this is lossless, not merely '100%' quality." I recommend that such a hint not be hidden in the documentation.
    – Brian
    Commented Aug 6, 2012 at 20:24
1

A problem here could be your user may not intuit that "100%" is "lossless"; they may instead just know "I want lossless" and check the box anyway.

IMO what makes the most sense is to leave both check boxes which grey out the sliders for the sake of consistency. You can still allow input at 100% of Alpha Channel to be "lossless" via the slider, giving the user access to both possible ways to set a lossless video; redundancy isn't always bad.

In addition you could leave a grey check (or a dot or a square) in the lossless check box when the Alpha Channel setting is at 100% to cement the idea that 100% Alpha Channel == lossless. It's sort of an implied check; I've seen check boxes with a square in them to indicate a similar state on Windows, but I can't find any images to use as an example.

If functionally possible, you could try making it so checking the lossless box greys out the slider and renders it's input irrelevant, but still allows the user to move the slider. Attempting to move the slider would uncheck "lossless" immediately and switch to lossy mode & set values like normal. It might be a bit unexpected that you can move a disabled control, so you might want to test that, but it does get the best of both worlds in limiting # of steps for both inputs.

1
0

Do users really want to control the lossless property seperately for the color and alpha channels? I think I would opt for a solution where you have only one Lossless option, and you only allow changing both sliders if in Lossy mode. It would mean a loss of functionality, because you can no longer get lossless color channels with a lossy alhpa channel, but does that really matter? I think I'd even considder using the link that you often see between values in Gimp, to by default link the values of the two sliders together.

0

i'd go along with Ben Brooka suggestion with additional tweaks as follows. place both the lossless checkboxes above the respective spinner/value control, i.e. at the 100% mark of the slider. when you tick the color lossless box the slider goes to max and greys, the value becomes NA or Max and also greys. the second checkbox simply goes to 100% .

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.