What's the best option for an opacity slider on this color selection menu?

  • Four mobile screens showing a photo of a woman with some options to edit her makeup

    Hi! I am currently working on a new cosmetics app. As an example, in the Lipstick category, users would be able to change their lip color by choosing a different lipstick color.

    We created a small menu on the bottom of the screen with different lipstick color presets, opacity slider and category name. I still don’t know what is the best way to organize all of the elements inside the white menu.

    The attached picture contains 4 design options.

    It's important for me to keep all the elements inside the white menu and keep the menu as classic and clean as possible.

    Is using a circle shape for both for the opacity slider and lipstick color presets a good design choice? Or it would be more correct to choose a circle shape for the slider and rectangle shape for the lipstick color presets (Like Op. number 4)?

    I would appreciate your opinion and suggestions for improvement.

  • Update

    Now that I think about it for a second time, and after loading the screen on my phone, I change my recommendation to the following:

    enter image description here


    1. One the cardinal rules is assuming that people will lose sight of anything below their finger when they touch it, including the control being touched.
    2. Option 2 violates this. Opacity comes after selecting color but is below the finger. Confirmation comes after opacity but is below the finger.
    3. Flipping the order creates a nice upwards interaction direction (color > opacity > confirmation) where the next step is not covered by the finger.
    4. As for the statement regarding finger covering palette when selecting opacity, I think it’s a small compromise that can be solved by matching the slider color to that of the chosen palette (red slider for red color palette).
    5. Also solves the title placement issue.
    6. Also places the slider, which requires fine motor control, in the optimal thumb reachability area.

    Original answer:

    Option 3 has a minor advantage of more comfortable thumb swiping. Check thumb reachability diagrams for reference. However, the vertical slider offers the least room to slide and control opacity percentages. For example, the user needs very fine motor control to increase 2%.

    Option 1 and 4 control placement requires the user to go up and down. First, choose color, go up, choose opacity, then go all the way down to confirm changes. Ideally, we want this progression to be in one direction.

    Option 2 does not violate the above points. It offers finer opacity control and controls are engaged in one direction, from top to bottom.

    Option 2 has the added benefit of allowing the user to see the color they chose while they are changing the opacity. Option 1 and 4 have the slider above the palette, meaning that the thumb will be covering the palette when sliding the opacity. When you have similar colors, like tones of reds, the user might forget which tone they chose and have to release the thumb to check and remind themselves every time. Think about how a lower opacity red might be confused with a pink on white-washed lips.

    An additional point to consider is: Some areas like the lipstick, or eyes, are small in the face. Changes in color and opacity might not be readily noticeable when applying them. There might be a scenario where the user forgets what part of the face they are changing, or need to make sure they got the right part because they can’t notice the change in the photo. One logical way to confirm they have the right area is by reading the title of the controls “Lipstick”. On all options, the title will be covered by their thumb as they are interacting with the controls. They might look for the title but never find it and not realize it’s under their thumb. My suggestion is moving the title to the top of the controls.

    Lastly, all of these are educated guesses. You can test the prototype with some people and see how they react.

Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2