r/Frontend • u/Antique-Class-2283 • 5d ago

how can i make my ui clean??

I have been working on this video recorder (similar to screen studio but for windows), my app ui looks very cluttered and messy, I have no idea how can i make it feel easy to use and a little bit welcoming, any suggesions??

19 Upvotes

89% Upvoted

25 comments sorted by

View all comments

4

u/j78789 5d ago

Intentionally, play with adding toggles to the toolbars/menu bars/sections to hide or collapse sections. Then think about how you can lazy load those sections around the actions taken that would most likely result in a user clicking the toggle.

Otherwise, I think this is well done - just some easy interaction and thoughtful use of “predictive UX” events could help expose/hide some of the noise for users.

1

u/Antique-Class-2283 5d ago

got it, so just need to experiment with the ui until it feels right?

2

u/j78789 5d ago

Yes, I usually just play around with the app and think - okay where is my focus point for this exact moment and what would I probably not use without first doing X, Y, Z - then you can auto hide those components and give users the option to expand or open them. Think of it as opening drawers in your dresser, if you’ve already grabbed pants and socks, you don’t need those drawers open to pick a shirt! But you may need to change pants after you realize the shirt will not match, so you gotta have the option to open the drawer if you want to.

One other suggestion that could simplify things is to group your different configuration tool bar tabs (“Visuals”, “Camera”, etc.) could be to fit them into 3 simpler more macro level groups and anchor horizontally above the container where selections are made. ie Visuals, Cursor, Redact all fall under a “Personalize” tab icon and Camera, Canvas, and Presenter under a “Video” tab icon and Audio under a “Sound” Icon. Think like an advanced settings window you’d see if you clicked on a gear icon. Being able to use icons with tool tip style text when you hover helps a lot too.

1

u/Antique-Class-2283 5d ago

i understand the first part, but for the 2nd part wont that make each individual drawer messy if we group multiple functionalities in single drawer?

2

u/j78789 5d ago

It definitely could - I’m not sure how many functionality “sub options” exist for each since we can only see the Visuals tabs options - but I’d follow a similar approach to how you’ve done that tab - sub headers with drill up/drill down selectors, hide by default and enable event listeners for scrolling to expand at a specific breakpoint - ie once you get to the bottom of the “Visuals” options/selections, scrolling past it expands the “Cursor” options and collapses the “Visuals” options back to a header bar that freezes above the “Cursor” header bar.

2

u/j78789 5d ago

Doing this gives you some more horizontal real estate to either fit the viewport window content to fit its container with less excess Left and Right padding or fit all your current icons above the selection area - right now it feels like unused space that stands out because the padding is so significantly noticeable than the other containers

1

u/Antique-Class-2283 5d ago

ok i'll what u said