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

Question

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.

Answer 1

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:

Reasons:

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.

Answer 2

I would go with option two.

Always filter your design choices through conversational UI.

If your UI was a person, would it say: What color do you want? And how transparent should it be? or How transparent should it be? (how transparent should what be?) and what color?

Obviously, you would first choose a color, then transparency.

A round slider toggle is modern and standard in both Android and iOS guidelines. The rectangular slider toggle is more common in audio editing based software (such mixing, levels etc.)

Answer 3

if the purpose of the app selling the lipstick i won't use transparency,

i will prefer for example to select red, then all red family will show up i will slide until i found the right with

Theory 1 : i will prefer this solution based on snapchat and instagram filter experience people used to swipe filter more than adjust transparency

Theory 2 : transparency selection will kill the Suspense & fun, people prefer to swipe and be surprised how colors will look on their lips not adjusting it

soufiane el

Answer 4

As anwesha said, the best option seems to be 2.

The reason is simply that it is the most logical flow. First I select the color then I tinker with how visible I want it to be. And then I confirm the selection.

You can also see this in design tools like Figma, the color comes before the opacity:

---

Additionally, the horizontal layout is better, as a slider like that needs to have space for finer controls and option 3 completely minimizes it. Aside from that vertical sliders for opacity are not learned at all, so it would just be confusing.

I do feel like the confirm button gets a bit lost in contrast to the other elements, though. Only a feeling, it might be fine as it is.