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:
- 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.
- Option 2 violates this. Opacity comes after selecting color but is below the finger. Confirmation comes after opacity but is below the finger.
- Flipping the order creates a nice upwards interaction direction (color > opacity > confirmation) where the next step is not covered by the finger.
- 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).
- Also solves the title placement issue.
- Also places the slider, which requires fine motor control, in the optimal thumb reachability area.
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.