I am working on an app screen that has some text content on the left and two buttons on the right but adding everything in a row seems to make the text area shrink and the UI a bit cluttered.

Current implementation

I was thinking, it there a better way to do it?

  • Welcome to the site! While I understand you need to put multiple buttons after every row of text, you haven't mentioned what those buttons are for. If you do that, someone can perhaps suggest better alternatives for them or help you customize them better to look better in the given UI. Also, I see that there is a parent-child relationship going on in the screenshot, try to distinguish children from parent - perhaps by giving them a smaller font size or thinner progress bars etc.
    – Mohit
    Commented Jun 13 at 10:55

1 Answer 1


Welcome to the site!

The tags suggest to me that this is the whole screen - there's nothing more around it -?

I'm also wondering whether the indentation is there to suggest hierarchy, and what the hierarchy means (progress on higher level calculated from lower level?) and whether it needs to be expandable by the user.

Regarding making this less crowded:

  • Get rid of the percentage digits (nobody wants progress of 5 thousand-th to be reported)
  • Can you reduce the text length (by ellipsis, for example) to make it always occupy a single row)? Part of the unordered feeling arises because everything has a different height.
  • Can you replace the progress bar by a simpler and smaller indicator only showing "open", "in progress", "complete" states?
  • Can you remove buttons which do not apply to the states (i.e., remove the play button in state "complete")?

Without more information about what this design should actually achieve for which people, it's hard to come up with more detailed ideas.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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