gui design – How to showcase additional menu level items within the current menu UI without breaking it

We have an app that lets users modify their face as they are taking selfies.

Under the Beauty option, users have the option to Smooth their skin, add Lipstick, edit Eyes, etc. The user can see in real time how these changes happen in their selfie.

Smoothing skin offers a simple slider to calibrate level of smoothness.
Lipstick, Blush and Tint allows users to choose a color and calibrate opacity.

However, eyes is more complex. In addition of choosing eye color and opacity, users can also choose to (1) Whiten or (2) add Details and adjust how much with the slider.

enter image description here

We want to reduce the introduction of new UI levels / components to keep the experience as simple and consistent as possible.

So far we have tried 2 approaches:

A. Show Whiten and Details within the color menu level. What the slider controls changes per user selection (whiten = adjust whiteness, detail = adjust level of detail, color = adjust opacity of color).

enter image description here

B. Introduce an accordion within the main menu which expands to show the second level of options. This solution seems more novel, however the transition of having something expand + color menu show up might be too busy for the user.

enter image description here

What are your opinions? Other pros and cons you can think of? What’s an alternative solution to consider?


Showcase Filter by AddonsLab | NulledTeam UnderGround

Add-On Overview

The add-on allows to filter and search showcase item based on Custom fields.

Showcase add-on is developed by XenAddons. You need a valid license for it to use Showcase Filter.

Here is the filter with AJAX reloading of the list in action:


The controls to filter the showcase items are…