4

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.

2
  • How accurate are these choices? With the slider I would expect there to be 0% to 100% opacity. Is that true for any color, or especially all? What granularity is required? If I am trying to choose 80% how hard would it be to pick on a small screen 80% when I accidently select 78%? Nov 5 '20 at 15:26
  • @AustinFrench from knowing the project, the slider is not "super sensitive". Giving a real scenario from the app: Let's assume the user pick a "reddish" color for his lipstick, the slider will help the user "match" the lipstick color to their skin tone. In this example, opacity is indeed from 0% to 100%. For "light" touch (for example, trying to pick 78% over 80%, we thought about adding "tap" functionality, where tap or each side of the slider increases/decreases it by 1% (like Instagram does). But we are not sure about what is the best visual option to go within tears user cognitive scan.
    – Roi Mulia
    Nov 5 '20 at 16:20
4

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

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.

2
  • Thank you very much for the response! What would you do with the category title In all options the title located on the bottom of the menu if we raise the title up we will have to increase the menu but we want to avoid increasing the menu so it won't cover more from the camera era Nov 8 '20 at 11:59
  • 1
    Hi Topaz, updated my answer. Nov 8 '20 at 13:27
3

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.)

2
  • 1
    Thank you for the response! What would you do with the category title? In all options the title located on the bottom of the menu. If we raise the title up we will have to increase the menu but we want to avoid increasing the menu so it won't cover more from the camera era Nov 8 '20 at 11:26
  • I would keep it there for now but ideally you should run a usability test and one of the tasks should be: "Please navigate to category A and then category B". If the user struggles with figuring out how to change categories then you have to change the design. If the users find the current design easy to use with where the title is at the moment, then move forward with that. Nov 8 '20 at 15:59
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

1
  • Hi! Thank you for your response! I agree with your opinion about the color families. The purpose of the app is to give the user option to change the lip color, we don't sell the lipstick, so that’s the reason we put the opacity slider. We think its easier for users instead of choosing one color that they cannot manipulate Do you still think it's unnecessary? Nov 9 '20 at 7:38
3

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:

enter image description here


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.

1
  • Thank you for the response! What would you do with the category title? In all options the title located on the bottom of the menu. If we raise the title up we will have to increase the menu but we want to avoid increasing the menu so it won't cover more from the camera era. Regarding the confirm button, don’t you think that higher contrast will cause too much colours inside the menu Nov 8 '20 at 11:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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