How to declutter a mobile app home screen with a floating “Create Video” component?

Question

I am developing a mobile app focused on encouraging users to create videos. To keep the “create video” option always visible, I have implemented a floating “Create Video” component above the home screen. While this keeps the feature easily accessible, it has led to a cluttered interface, especially at the bottom where the floating component includes several options.

Here is a visual representation of the current layout:

Details of the Bottom Floating Component:

1. Options included: “random,” “video aspect ratio,” “add photo,” “create” button.
2. States for enabling/disabling certain features.
3. The “Write Prompt” input field and related buttons occupy significant space.

The main issues are:

1. The bottom floating component feels cluttered and overwhelming.
2. It takes up significant space and overlaps with other UI elements.
3. Users might find it hard to scan and navigate the options quickly.

My goals are:

1. To clean up the bottom floating component and make it more visually appealing.
2. To ensure the “create video” option remains prominent without causing clutter.
3. To enhance the overall user experience by making the interface more polished and scannable.

Questions:

1. What are some best practices or design principles to declutter the bottom floating component while maintaining the prominence of the “create video” feature?
2. Are there any effective design patterns or UI elements that can help organize these options better (e.g., collapsible menus, icon-based buttons)?
3. Would it be beneficial to separate some of these options into different screens or modals to reduce clutter?

Any suggestions or examples from similar applications that have effectively managed a similar UI challenge would be greatly appreciated.

Answer 1

Do you need to keep watching the example videos while you generate a new video?

To me that is unnecessary noise that interferes with the creation process.

My logic is:

1. Separate the process into two actions: CREATE VIDEO and GENERATE VIDEO
2. The main screen shows the example video previews and the CREATE VIDEO button that opens the "creation modal" when clicked
3. The "Creation Modal Window" shows the working area: Prompt Area, Tools Panel and the GENERATE VIDEO button

This way you leave the creation area free of noise and occupying the largest possible percentage of the screen.

Answer 2

Try using the component FAB : Floating Action button.

Fundamental understanding of using such a component are

1. When you want to emphasize a primary action.
2. In mobile applications where screen space is limited.
3. When the action is contextual and consistently relevant across screens.

And you can easily incorporate the following advantages:

Visibility: It’s prominently placed and easily accessible, ensuring the primary action is always within reach.

Focus on Primary Action: Encourages the most important user action, like adding or creating content.

Space Efficiency: Floats above content without taking up screen space, keeping the interface uncluttered.

May be something like this

https://dribbble.com/shots/2061245-Material-Message